/* ==========================================================================
   Rambler Disc Golf — the cart
   The header's cart link (every page, once checkout is on), the cart page
   with its pickup and payment choices, the thank-you page and the account
   page. Tokens from style.css only; nothing new.
   ========================================================================== */

/* 1 ── Header cart link --------------------------------------------------
   The header carries the link twice, and style.css shows one: beside the
   menu button while the menu is folded away (up to 1100px), after the menu
   when it's shown in full. Either way it comes in the page where it's drawn,
   so the keyboard meets it where the eye does. */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  transition: border-color .16s ease;
}
.cart-link:hover { border-color: var(--paper); }
.cart-link svg { flex: none; }
.cart-count {
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--mint);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100.98px) {
  /* Up to 1100px the header folds the menu into the menu button and holds
     the logo, the cart and that button, so the cart becomes an icon with
     the count as a badge — at the same width as the header's own switch. */
  .header-inner { gap: 0.6rem; }
  .cart-link {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: 0;
  }
  .cart-count {
    position: absolute;
    top: 3px;
    right: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    padding-inline: 0.25rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 400px) {
  .header-inner .brand-name { font-size: 1rem; }
}

/* 2 ── Disc page: add to cart --------------------------------------------- */
.add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.add-to-cart label {
  font-size: var(--step--1);
  color: var(--muted);
}
.cart-added {
  margin-top: 0.85rem;
  color: var(--paper);
}
.cart-added:focus { outline: none; }

/* 3 ── Cart page ---------------------------------------------------------- */
.cart-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

.cart-notice {
  margin-bottom: var(--sp-3);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--paper);
  font-size: 0.95rem;
}
.cart-notice-error {
  border-color: color-mix(in srgb, var(--rose) 60%, transparent);
  background: color-mix(in srgb, var(--rose) 14%, transparent);
}
.cart-notice-test {
  border-color: color-mix(in srgb, var(--butter) 55%, transparent);
  background: color-mix(in srgb, var(--butter) 12%, transparent);
}

.cart-loading { color: var(--muted); }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas:
    "lines summary"
    "steps summary";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.cart-lines {
  grid-area: lines;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Under the discs: where to pick up, how to pay, and a note. */
.cart-steps {
  grid-area: steps;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem 1.1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.cart-line-static { grid-template-columns: minmax(0, 1fr) auto auto; }

.cart-line-photo,
.cart-line-nophoto {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.cart-line-photo img { width: 100%; height: 100%; object-fit: contain; }
.cart-line-nophoto {
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--accent) 7%, transparent) 9px 10px),
    var(--surface-2);
}

.cart-line-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
}
.cart-line-name a { color: var(--paper); text-decoration: none; }
.cart-line-name a:hover { color: var(--accent); }
.cart-line-meta,
.cart-line-each { font-size: var(--step--1); color: var(--muted); }

.cart-line-qty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cart-remove {
  background: none;
  border: 0;
  padding: 0.3rem 0.1rem;
  color: var(--muted);
  font-size: var(--step--1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-remove:hover { color: var(--paper); }

.cart-line-total {
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-summary {
  grid-area: summary;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cart-sums { display: grid; gap: 0.5rem; }
.cart-sums > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cart-sums dd { margin: 0; color: var(--paper); }
.cart-sum-total {
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
}
.cart-sum-total dt { color: var(--paper); }
.cart-sum-total:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.cart-note textarea { min-height: 84px; }
.cart-delivery { font-size: 0.95rem; color: var(--muted); }
.cart-pay { width: 100%; }
.cart-pay[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.cart-secure,
.cart-wait { font-size: var(--step--1); color: var(--muted); text-align: center; }
.cart-wait[hidden] { display: none; }

/* What part of the total is tax, under it. */
.cart-includes {
  margin-top: -0.35rem;
  font-size: var(--step--1);
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cart-line-low {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--peach);
}

/* Choices: the pickup spot, then the way to pay. */
.cart-choice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}
.cart-choice legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--paper);
}
.cart-choice-hint { font-size: var(--step--1); color: var(--muted); margin-top: -0.2rem; }
.cart-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.6rem;
}
.cart-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.65rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  transition: border-color .16s ease, background-color .16s ease;
}
.cart-option:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.cart-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--ink-900));
}
.cart-option input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.cart-option input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cart-option label { display: grid; gap: 0.2rem; cursor: pointer; min-width: 0; }
.cart-option-title { color: var(--paper); line-height: 1.35; }
.cart-option-name { font-family: var(--font-display); font-weight: 700; }
.cart-option-when { font-variant-numeric: tabular-nums; }
.cart-option-detail { font-size: var(--step--1); color: var(--muted); overflow-wrap: anywhere; }
.cart-option-map {
  grid-column: 2;
  justify-self: start;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Cash at pickup: who's collecting. */
.cart-buyer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.85rem 1rem;
}
.cart-buyer[hidden] { display: none; }
.cart-buyer .field input { padding: 0.7rem 0.85rem; }
.cart-notice-action { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cart-notice p { margin: 0; }
.cart-notice p + p { margin-top: 0.6rem; }
.cart-option.is-disabled { opacity: 0.6; }
.cart-option.is-disabled label { cursor: not-allowed; }

/* "Test mode" for an administrator seeing PayPal's sandbox: on every page. */
.cart-test-banner {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 60;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--butter);
  color: var(--on-accent);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--shadow);
}
.cart-test-banner strong { font-family: var(--font-display); margin-right: 0.3rem; }

.cart-empty {
  padding: clamp(2rem, 6vw, 3.5rem) var(--sp-3);
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  color: var(--muted);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}

/* Thank-you page */
.cart-receipt { max-width: 640px; }
.cart-confirming { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0.75rem 0 0; color: var(--muted); }
.cart-receipt .cart-sums { margin-top: var(--sp-3); }
.cart-receipt .cart-includes { margin-top: 0.4rem; }

/* The pickup, on the thank-you and order pages. */
.cart-pickup-info {
  margin-bottom: var(--sp-3);
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  display: grid;
  gap: 0.2rem;
}
.cart-pickup-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.cart-pickup-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--paper);
}
.cart-pickup-when { color: var(--paper); font-variant-numeric: tabular-nums; }
.cart-pickup-address,
.cart-pickup-note { font-size: 0.95rem; color: var(--muted); }
.cart-receipt .cart-delivery {
  margin-top: var(--sp-3);
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--paper);
}

/* 4 ── Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lines" "steps" "summary";
    grid-template-rows: auto;
  }
  .cart-summary { position: static; margin-top: var(--sp-4); }
}

@media (max-width: 560px) {
  .cart-line {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "photo main total"
      "photo qty  qty";
  }
  .cart-line-photo, .cart-line-nophoto { grid-area: photo; width: 56px; height: 56px; align-self: start; }
  .cart-line-main { grid-area: main; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; min-width: 0; align-self: start; }
  .cart-line-static { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: none; }
  .cart-line-static .cart-line-main,
  .cart-line-static .cart-line-qty,
  .cart-line-static .cart-line-total { grid-area: auto; }
}

/* 5 ── Account page ------------------------------------------------------- */
.nav-account { white-space: nowrap; }

.cart-account-hint {
  margin-bottom: var(--sp-3);
  font-size: 0.95rem;
  color: var(--muted);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
.account-card h2 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.account-small { margin-top: 0.85rem; font-size: var(--step--1); color: var(--muted); }

/* WordPress's own login form (wp_login_form), dressed like the site's fields. */
#rdg-login p { margin: 0 0 1rem; }
#rdg-login label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--paper);
}
#rdg-login input[type="text"],
#rdg-login input[type="password"] {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--ink-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--paper);
}
#rdg-login input[type="text"]:focus,
#rdg-login input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
#rdg-login .login-remember label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}
#rdg-login .button {
  display: inline-flex;
  padding: 0.85rem 1.5rem;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
}
#rdg-login .button:hover { filter: brightness(1.07); }
/* WordPress 6.6+ adds a show-password toggle; keep it out of the way. */
#rdg-login .wp-pwd { position: relative; }

.account-subhead { font-size: var(--step-3); margin-bottom: var(--sp-3); }

.account-orders {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.account-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.4rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.account-order-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
}
.account-order-number a { color: var(--paper); text-decoration: none; }
.account-order-number a:hover { color: var(--accent); }
.account-order-items,
.account-order-date { font-size: var(--step--1); color: var(--muted); }
.account-order-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}
.account-order-total {
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.account-order-due {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--muted);
}
.account-order-pickup { font-size: var(--step--1); color: var(--paper); margin-top: 0.15rem; }
.account-footnote { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--muted); }

@media (max-width: 980px) {
  .account-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 560px) {
  .account-order { grid-template-columns: minmax(0, 1fr) auto; }
  .account-order-date { grid-column: 1; }
  .account-order-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .account-order-total { grid-column: 2; }
}

/* Membership (inc/store/membership.php): the cart's savings line, the same
   line on a receipt, the account page's membership box and the page that
   starts a membership. Plain on purpose; the site styles may dress them. */
.cart-savings {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cart-savings p { margin: 0; }
.cart-savings-text { font-weight: 600; }
.cart-savings-action { margin-top: 0.6rem !important; }
.cart-receipt .cart-savings { margin-top: var(--sp-3); }

.account-membership {
  margin-bottom: var(--sp-5);
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.account-membership h2 { margin-top: 0; }
.account-membership p { margin: 0 0 0.6rem; }
.account-membership form { margin-top: var(--sp-3); }
.account-membership-payments { margin: 0.6rem 0 0; padding-left: 1.2rem; }

.membership-start .membership-form { margin-top: var(--sp-4); }
.membership-start .membership-points { margin: var(--sp-3) 0; padding-left: 1.2rem; }