/***************************************************
  RWCS Modern Theme Override

  This stylesheet layers on top of simple.css and
  sophisto.css to modernize the look without changing
  the underlying layout structure.

  To disable: remove the stylesheet_link_tag line
  from app/views/layouts/shop.rhtml
***************************************************/

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* ── Color Variables ── */
:root {
  --rwcs-teal: #2d4a4e;
  --rwcs-teal-light: #3a5f64;
  --rwcs-coral: #c0392b;
  --rwcs-coral-hover: #a93226;
  --rwcs-green: #27ae60;
  --rwcs-green-dark: #1e8449;
  --rwcs-text: #333;
  --rwcs-text-light: #666;
  --rwcs-bg: #f8f9fa;
  --rwcs-white: #fff;
  --rwcs-border: #dee2e6;
  --rwcs-border-light: #e9ecef;
}

/* ── Base ── */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--rwcs-bg);
  color: var(--rwcs-text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Links ── */
a { color: #1a6b7a; text-decoration: underline; }
a:link { color: #1a6b7a; }
a:visited { color: #14555f; }
a:hover { color: var(--rwcs-coral); background-color: transparent; }

/* ── Header / Nav Bar ── */
.site-header {
  background: var(--rwcs-teal) !important;
  border-bottom: 3px solid var(--rwcs-coral) !important;
  padding: 8px 0;
  margin: 0;
}

a.mainnav, a.mainnav:link, a.mainnav:visited {
  color: var(--rwcs-white) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 3px;
  transition: background-color 0.2s;
}
a.mainnav:hover {
  color: var(--rwcs-white) !important;
  background-color: var(--rwcs-teal-light) !important;
  text-decoration: none;
}

a.mainnavOn, a.mainnavOn:link, a.mainnavOn:visited {
  color: var(--rwcs-coral) !important;
  font-weight: 700;
}

.Nav { padding: 4px 0; }

#Logo {
  height: auto;
  width: auto;
  padding-top: 0;
}

/* ── Main Container ── */
#Framewide {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  padding: 20px;
  background: var(--rwcs-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-radius: 0 0 4px 4px;
  min-height: 80vh;
}

/* ── Headings ── */
h1 {
  color: var(--rwcs-teal);
  font-weight: 700;
  font-size: 22px;
  margin: 20px 0 10px;
  padding: 0;
}

h2 {
  color: var(--rwcs-teal);
  font-weight: 700;
  font-size: 18px;
}

h3 {
  color: var(--rwcs-text);
  font-weight: 600;
  font-size: 14px;
}

/* ── Fieldsets ── */
fieldset {
  border: 1px solid var(--rwcs-border);
  border-top: 3px solid var(--rwcs-teal);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--rwcs-white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

fieldset.final {
  border: 2px solid var(--rwcs-green);
  border-top: 3px solid var(--rwcs-green);
  background-color: #f0faf4;
}

fieldset legend {
  color: var(--rwcs-teal);
  font-size: 14px;
  font-weight: 700;
  padding: 0 8px;
}

fieldset p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rwcs-text);
}

/* ── Form Inputs ── */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--rwcs-border);
  border-radius: 4px;
  background: var(--rwcs-white);
  color: var(--rwcs-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--rwcs-teal);
  box-shadow: 0 0 0 3px rgba(45,74,78,0.1);
}

/* ── The Stripe card field ── */
/*
   The number, expiry and CVV are typed into an iframe served by Stripe, so not
   one of the rules above can reach them. input[type="text"] does not cross a
   document boundary, which is why the card field arrived looking like bare text
   on the page while every other input had a box around it.

   Matching the rest of the form therefore takes two halves that have to be kept
   in agreement by hand:

     - the box is drawn here, on the mount point, which is an ordinary div in
       this document;
     - the text inside the box is styled by the `style` option passed to
       elements.create in stripe_checkout.js, which is the only styling Stripe
       will accept for the iframe's contents.

   Change one and you must change the other. The values below are copied from
   the input rule directly above rather than invented, so the two drift only if
   somebody edits that rule without reading this comment.

   Stripe maintains .StripeElement on the mount and adds --focus and --invalid
   as the field's state changes. That is the only way to give a field this
   document cannot see into the same focus ring as its neighbours.
*/
#stripe_card_element {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  border: 1px solid var(--rwcs-border);
  border-radius: 4px;
  background: var(--rwcs-white);
  color: var(--rwcs-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  /* Wider than a text input because it holds three fields rather than one.
     max-width keeps it inside the cell on a narrow screen. */
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;

  /* 36px is what the input rule above computes to - 13px text on a normal line
     height, plus 8px of padding and a 1px border top and bottom. It is stated
     here rather than reproduced as padding because the box's contents are an
     iframe whose height Stripe sets, not text this document can lay out: at
     `padding: 8px 10px` the field came out 33.6px and sat visibly short beside
     the Zip Code input directly above it.

     Centring the iframe instead of padding around it means the field stays 36px
     if Stripe ever changes the line height inside the frame, which is the sort
     of thing that changes without an announcement. Only the horizontal padding
     is still stated, because that one is ours. */
  height: 36px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#stripe_card_element.StripeElement--focus {
  border-color: var(--rwcs-teal);
  box-shadow: 0 0 0 3px rgba(45,74,78,0.1);
}

/* Only fires once Stripe is sure - a half-typed number is --empty, not
   --invalid - so this does not scold somebody who is still typing. */
#stripe_card_element.StripeElement--invalid {
  border-color: #a00;
}

#stripe_card_errors {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 5px;
  max-width: 320px;
}

/* ── Buttons ── */
input[type="submit"],
input[type="button"],
button {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  background: var(--rwcs-coral);
  color: var(--rwcs-white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  text-transform: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: var(--rwcs-coral-hover);
}

input[type="submit"]:active,
button:active {
  transform: translateY(1px);
}

/* ── Tables ── */
table {
  border-collapse: collapse;
}

fieldset table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--rwcs-text);
  padding: 6px 10px 6px 0;
  white-space: nowrap;
}

fieldset table td {
  font-size: 13px;
  padding: 6px 10px 6px 0;
}

/* Report/data tables */
table[border="0"] tr:hover td {
  background-color: var(--rwcs-border-light);
}

/* ── Intro Box ── */
#IntroBox {
  border: 1px solid var(--rwcs-border);
  border-radius: 4px;
  margin: 20px 0;
  background: var(--rwcs-white);
}

#IntroSidebar {
  border-left: 1px solid var(--rwcs-border);
  font-size: 12px;
}

/* ── Two Column Layout ── */
.TwoColBox {
  border: none;
  border-radius: 4px;
  margin: 15px 0;
}

.TwoColSidebar {
  border-left: 1px solid var(--rwcs-border);
}

.TwoColSidebar h3 {
  color: var(--rwcs-teal);
  font-size: 13px;
  margin-bottom: 4px;
}

.TwoColSidebar p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--rwcs-text-light);
}

/* ── Error Box ── */
#ErrorExplanation, #errorExplanation {
  border: 1px solid var(--rwcs-coral);
  border-radius: 4px;
  background: #fdf2f2;
  padding: 0;
  overflow: hidden;
  /* overrides the fixed width from sophisto.css */
  width: auto;
}

#ErrorExplanation h2, #errorExplanation h2 {
  background: var(--rwcs-coral);
  color: var(--rwcs-white);
  font-size: 13px;
  padding: 10px 15px;
  margin: 0;
}

#ErrorExplanation ul, #errorExplanation ul {
  padding: 10px 15px 10px 35px;
  margin: 0;
}

/* ── Flash Messages ── */
div[style*="background: #fff3cd"] {
  border-radius: 4px !important;
  font-size: 13px;
}

div[style*="background: #f8d7da"] {
  border-radius: 4px !important;
  font-size: 13px;
}

/* ── Footer ── */
#Copyright {
  color: var(--rwcs-text-light);
  font-size: 11px;
  padding: 15px 0;
  margin-top: 30px;
  border-top: 1px solid var(--rwcs-border);
}

#Copyright a { color: var(--rwcs-text-light); }
#Copyright a:hover { color: var(--rwcs-coral); }

/* ── Loading Spinner Modernization ── */
#loading-overlay {
  background: rgba(248,249,250,0.85) !important;
}

#spinner {
  border-color: var(--rwcs-border) !important;
  border-top-color: var(--rwcs-teal) !important;
}

/* ── Pagination ── */
.pagination {
  margin: 15px 0;
  font-size: 13px;
}

.pagination a, .pagination span {
  padding: 4px 10px;
  margin: 0 2px;
  border: 1px solid var(--rwcs-border);
  border-radius: 3px;
  text-decoration: none;
}

.pagination span.current {
  background: var(--rwcs-teal);
  color: var(--rwcs-white);
  border-color: var(--rwcs-teal);
}

.pagination a:hover {
  background: var(--rwcs-border-light);
  text-decoration: none;
}

/* ── Misc Overrides ── */
font[size="1"] { font-size: 13px !important; }

.training {
  border-radius: 4px;
  font-size: 18px !important;
}

/* Soften the old green accents to teal */
h4, h4.below8 { color: var(--rwcs-teal); }
fieldset legend { color: var(--rwcs-teal); }
fieldset { border-top-color: var(--rwcs-teal); }
#Listform li { color: var(--rwcs-teal); }

/* -- Password Strength -- */
.pw-strength {
  max-width: 320px;
  margin: 6px 0 4px;
  font-size: 12px;
  font-family: sans-serif;
}

.pw-bar {
  height: 6px;
  width: 100%;
  border-radius: 3px;
  background: var(--rwcs-border-light);
  overflow: hidden;
}

.pw-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: transparent;
  transition: width 0.2s ease, background 0.2s ease;
}

.pw-bar-fill.pw-weak {
  background: var(--rwcs-coral);
}

.pw-bar-fill.pw-fair {
  background: #e67e22;
}

.pw-bar-fill.pw-good {
  background: #f1c40f;
}

.pw-bar-fill.pw-strong {
  background: var(--rwcs-green);
}

.pw-label {
  margin-top: 3px;
  font-size: 11px;
  font-weight: bold;
  color: var(--rwcs-text-light);
  min-height: 14px;
}

.pw-rules {
  list-style: none;
  padding: 0;
  margin: 5px 0 0;
  line-height: 1.6;
}

.pw-rules li {
  font-size: 11px;
  color: var(--rwcs-text-light);
}

.pw-rules li.pw-ok {
  color: var(--rwcs-green);
}

.pw-rules li.pw-bad {
  color: var(--rwcs-text-light);
}

.pw-mark {
  display: inline-block;
  width: 14px;
  font-weight: bold;
}

li.pw-ok .pw-mark {
  color: var(--rwcs-green);
}

li.pw-bad .pw-mark {
  color: var(--rwcs-coral);
}