/* ===== AEVO — Order, quote and payment pages =====
   Shared by order.html, order-single.html, order-confirmed.html, quote.html
   and paid.html. Mobile-first: the base rules are the phone layout, and the
   two breakpoints below widen it. Everything inherits the warm editorial
   palette from styles.css. */

.checkout-page {
  background: var(--cream);
  padding: 108px 0 80px;
  min-height: 100vh;
}

.checkout-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

.checkout-narrow { max-width: 720px; }

/* --- Page head --- */
.checkout-head { text-align: center; margin-bottom: 28px; }

.checkout-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.checkout-head h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.12;
  margin: 10px 0 12px;
}

.checkout-head p {
  font-size: 14px;
  color: #55504a;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Cards --- */
.oc-card {
  background: var(--white);
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  padding: 20px 18px;
  margin-bottom: 16px;
}

.oc-card > h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 21px;
  margin-bottom: 4px;
}

.oc-card > h2 .oc-step {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.oc-hint {
  font-size: 12.5px;
  color: #6d675f;
  margin-bottom: 16px;
  line-height: 1.55;
}

/* --- Fields --- */
.oc-field { margin-bottom: 14px; }

.oc-field label,
.oc-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #45403a;
  margin-bottom: 6px;
}

.oc-field input,
.oc-field select,
.oc-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--sand);
  border-radius: 3px;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 15px; /* 16px-ish: stops iOS zooming on focus */
  color: var(--dark);
  transition: border-color 0.2s;
}

.oc-field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

.oc-field input:focus,
.oc-field select:focus,
.oc-field textarea:focus {
  outline: none;
  border-color: var(--dark);
}

.oc-field small { display: block; font-size: 11.5px; color: #837c73; margin-top: 5px; }

.oc-row { display: grid; gap: 14px; }

/* --- Segmented toggle (Individual / Organisation) --- */
.oc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.oc-toggle button {
  padding: 13px 10px;
  border: 1px solid var(--sand);
  background: var(--white);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #55504a;
  cursor: pointer;
  transition: var(--transition);
}

.oc-toggle button[aria-pressed="true"] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

/* --- Product picker --- */
.oc-cats {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.oc-cats::-webkit-scrollbar { display: none; }

.oc-cats button {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid var(--sand);
  background: transparent;
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #55504a;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.oc-cats button[aria-pressed="true"] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.oc-products { display: grid; gap: 10px; }

.oc-product {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  background: var(--cream-light);
  transition: var(--transition);
}

.oc-product.is-picked { border-color: var(--dark); background: var(--white); }

.oc-product-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.oc-product-blurb { font-size: 12px; color: #6d675f; margin-top: 3px; line-height: 1.45; }

.oc-price { font-size: 14px; font-weight: 600; margin-top: 6px; }
.oc-price s { color: #9b948b; font-weight: 400; margin-right: 7px; }
.oc-price .oc-save {
  font-size: 10px;
  letter-spacing: 1px;
  background: var(--dark);
  color: var(--white);
  padding: 2px 7px;
  border-radius: var(--radius);
  margin-left: 7px;
  vertical-align: 2px;
}

/* --- Quantity stepper --- */
.oc-qty { display: flex; align-items: center; gap: 0; }

.oc-qty button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--sand);
  background: var(--white);
  font-size: 17px;
  line-height: 1;
  color: var(--dark);
  cursor: pointer;
  transition: var(--transition);
}

.oc-qty button:first-child { border-radius: 3px 0 0 3px; }
.oc-qty button:last-child { border-radius: 0 3px 3px 0; }
.oc-qty button:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

.oc-qty input {
  width: 52px;
  height: 38px;
  border: 1px solid var(--sand);
  border-left: 0;
  border-right: 0;
  text-align: center;
  min-height: var(--tap);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  background: var(--white);
  -moz-appearance: textfield;
}

.oc-qty input::-webkit-outer-spin-button,
.oc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Roster table --- */
.oc-roster { display: grid; gap: 8px; }

.oc-roster-row {
  display: grid;
  grid-template-columns: 1fr 68px 84px var(--tap);
  gap: 7px;
  align-items: center;
}

.oc-roster-row input,
.oc-roster-row select {
  padding: 10px;
  font-size: 14px;
  border: 1px solid var(--sand);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  background: var(--white);
  min-width: 0;
}

.oc-roster-head {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.oc-remove {
  width: 38px;
  height: 38px;
  border: 1px solid var(--sand);
  background: var(--white);
  border-radius: 3px;
  color: #8a8279;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.oc-remove:hover { border-color: #b4453c; color: #b4453c; }

/* --- Upload zone --- */
.oc-drop {
  border: 1.5px dashed var(--sand);
  border-radius: 4px;
  padding: 28px 18px;
  text-align: center;
  background: var(--cream-light);
  cursor: pointer;
  transition: var(--transition);
}

.oc-drop.is-over { border-color: var(--dark); background: var(--white); }
.oc-drop strong { display: block; font-size: 14px; margin-bottom: 5px; }
.oc-drop span { font-size: 12px; color: #6d675f; }

/* Camera row — sits under the drop zone, above the file list. */
.oc-capture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 10px;
}

.oc-capture .oc-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; }
.oc-capture .oc-btn svg { width: 17px; height: 17px; flex: none; }
.oc-capture span { font-size: 12px; color: #6d675f; flex: 1 1 200px; line-height: 1.5; }

.oc-files { list-style: none; margin-top: 12px; display: grid; gap: 6px; }

.oc-files li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cream-light);
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  font-size: 12.5px;
}

.oc-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-files li em { color: #837c73; font-style: normal; font-size: 11px; flex: 0 0 auto; }

/* --- Summary --- */
.oc-summary {
  background: var(--dark);
  color: var(--white);
  border-radius: 4px;
  padding: 22px 18px;
}

.oc-summary h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--white);
}

.oc-lines { display: grid; gap: 9px; margin-bottom: 14px; }

.oc-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: #d7d2ca;
}

.oc-line strong { color: var(--white); font-weight: 600; }

.oc-rule { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 12px 0; }

/* "You save" sits under the total and is the loudest line in the block on
   purpose — it is the one figure a coach reads out to a committee. */
.oc-saved {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #9fd8a8;
}
.oc-saved b { font-size: 17px; font-weight: 700; }

.oc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--white);
  font-weight: 600;
}

.oc-total b { font-size: 26px; font-family: 'Playfair Display', serif; font-weight: 400; }

.oc-note {
  font-size: 11.5px;
  color: #a9a29a;
  line-height: 1.55;
  margin-top: 10px;
}

.oc-summary .oc-field label { color: #b8b2aa; }

.oc-summary .oc-field input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

/* --- Buttons --- */
.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 22px;
  background: var(--dark);
  color: var(--white);
  border: 1px solid var(--dark);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.oc-btn:hover { background: #000; transform: translateY(-1px); }
.oc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.oc-btn-light { background: var(--white); color: var(--dark); border-color: var(--white); }
.oc-btn-light:hover { background: var(--cream-light); }

.oc-btn-ghost { background: transparent; color: var(--dark); border-color: var(--sand); }
.oc-btn-ghost:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

.oc-btn-sm { width: auto; padding: 11px 18px; font-size: 11px; }

/* --- Organisation panel ---
   Height-transitioned by setCustomerType() in order.js; the inline height is
   set and then released, so this rule only has to describe the motion. */
#org-fields {
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  #org-fields { transition: none; }
}

/* --- Product search --- */
.oc-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  background: var(--white);
  padding: 0 12px;
  margin-bottom: 14px;
  transition: var(--transition);
}

.oc-search:focus-within { border-color: var(--dark); }
.oc-search svg { width: 16px; height: 16px; color: #837c73; flex: 0 0 auto; }

.oc-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 13px 0;
  font-family: inherit;
  font-size: 15px; /* under 16px iOS zooms the whole page on focus */
  color: var(--dark);
}

.oc-search input:focus { outline: none; }
.oc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.oc-search button {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: #837c73;
  padding: 4px 2px;
}

.oc-search button:hover { color: var(--dark); }

/* Category tabs are a filter within a search, so they gray out during one. */
.oc-cats.is-searching { opacity: 0.4; pointer-events: none; }

/* --- Character counter --- */
.oc-counter { text-align: right; font-variant-numeric: tabular-nums; }
.oc-counter.is-close { color: #8a6d3b; }
.oc-counter.is-full { color: #b4453c; font-weight: 600; }

/* --- The promise, above the send button --- */
.oc-promise {
  border-left: 3px solid var(--accent);
  background: var(--cream-light);
  border-radius: 3px;
  padding: 15px 17px;
  margin-bottom: 18px;
}

.oc-promise p { font-size: 13px; line-height: 1.65; color: #4a453f; }
.oc-promise p + p { margin-top: 10px; }

/* --- Sample kit --- */
.oc-sample { border-color: var(--accent); }

/* --- Consent --- */
.oc-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.6;
  color: #55504a;
}

/* 20px is the smallest tick box that is still comfortable to hit on a phone. */
.oc-consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--dark);
}

.oc-consent a { color: var(--dark); text-decoration: underline; }

/* --- Draft banner --- */
.oc-draft-actions { display: inline-flex; gap: 14px; margin-left: 4px; }

.oc-draft-actions button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.oc-draft-actions button:hover { color: var(--dark); }

/* --- Messages --- */
.oc-alert {
  padding: 13px 15px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
  border-left: 3px solid;
}

.oc-alert-error { background: #fbf0ef; border-color: #b4453c; color: #7d2e28; }
.oc-alert-info { background: var(--cream-light); border-color: var(--accent); color: #4a453f; }
.oc-alert-good { background: #eef4ef; border-color: #4b7d5a; color: #2f5439; }

/* --- Sale ribbon --- */
.oc-ribbon {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  /* The ribbon only ever appears on a reduced item, which is exactly what
     --sale is for. */
  background: var(--sale);
  color: var(--white);
  padding: 5px 13px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

/* --- Status / stage rail --- */
.oc-stages {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.oc-stage {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  background: var(--white);
  opacity: 0.55;
}

.oc-stage.is-done,
.oc-stage.is-now { opacity: 1; }
.oc-stage.is-now { border-color: var(--dark); }

.oc-stage-dot {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--sand);
  margin-top: 2px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--white);
}

.oc-stage.is-done .oc-stage-dot { background: var(--dark); border-color: var(--dark); }
.oc-stage.is-now .oc-stage-dot { border-color: var(--dark); border-width: 5px; }
.oc-stage h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.oc-stage p { font-size: 12px; color: #6d675f; line-height: 1.5; }

/* --- Documents list (receipts) --- */
.oc-docs { display: grid; gap: 9px; }

.oc-doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--warm-gray);
  border-radius: 3px;
  background: var(--white);
  text-decoration: none;
  color: var(--dark);
  transition: var(--transition);
}

.oc-doc:hover { border-color: var(--dark); }
.oc-doc-name { font-size: 13.5px; font-weight: 600; }
.oc-doc-meta { font-size: 11.5px; color: #837c73; margin-top: 2px; }

.oc-doc-get {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  flex: 0 0 auto;
}

/* --- Payment method strip --- */
.oc-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.oc-methods img { height: 22px; width: auto; opacity: 0.9; }

/* --- Confirmation tick --- */
.oc-tick {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1.5px solid var(--dark);
  display: grid;
  place-items: center;
  animation: ocPop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.oc-tick svg { width: 34px; height: 34px; }

.oc-tick svg path {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: ocDraw 0.5s 0.35s ease forwards;
}

@keyframes ocPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ocDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .oc-tick, .oc-tick svg path { animation: none; stroke-dashoffset: 0; }
}

/* --- Reference chip --- */
.oc-ref {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 auto 22px;
}

.oc-ref b {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
}

.oc-ref button {
  border: 1px solid var(--sand);
  background: transparent;
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  color: #55504a;
}

.oc-ref button:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* --- FAQ --- */
.oc-faq details {
  border-bottom: 1px solid var(--warm-gray);
  padding: 15px 0;
}

.oc-faq summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.oc-faq summary::-webkit-details-marker { display: none; }
.oc-faq summary::after { content: '+'; font-size: 18px; color: var(--accent); line-height: 1; }
.oc-faq details[open] summary::after { content: '\2013'; }
.oc-faq p { font-size: 13px; color: #55504a; margin-top: 10px; line-height: 1.65; }

/* --- Sticky mobile total bar --- */
.oc-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--dark);
  color: var(--white);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.oc-sticky.is-up { transform: translateY(0); }
.oc-sticky-total { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #a9a29a; }
.oc-sticky-total b { display: block; font-size: 19px; letter-spacing: 0; color: var(--white); font-weight: 600; }

.oc-sticky .oc-btn { width: auto; padding: 13px 20px; }

/* --- Spinner --- */
.oc-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: ocSpin 0.7s linear infinite;
}

@keyframes ocSpin { to { transform: rotate(360deg); } }

.oc-quiet { font-size: 12px; color: #837c73; text-align: center; line-height: 1.6; }

/* --- Roster on a phone ---
   Four controls side by side collapses to unusable widths under ~400px, which
   is exactly the screen this form gets filled in on. Name takes the full first
   row; number, size and remove share the second. */
@media (max-width: 768px) {
  .oc-roster-head { display: none; }

  .oc-roster-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      'name name name'
      'number size remove';
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--warm-gray);
    border-radius: 3px;
    background: var(--white);
  }

  .oc-roster-row [data-roster='name'] { grid-area: name; }
  .oc-roster-row [data-roster='number'] { grid-area: number; width: 82px; }
  .oc-roster-row [data-roster='size'] { grid-area: size; }
  .oc-roster-row .oc-remove { grid-area: remove; justify-self: end; }
}

/* ===== Tablet and up — 769px ===== */
@media (min-width: 769px) {
  .checkout-page { padding: 130px 0 96px; }
  .checkout-wrap { padding: 0 32px; }
  .oc-card { padding: 30px 28px; margin-bottom: 20px; }
  .oc-summary { padding: 30px 28px; }
  .oc-row-2 { grid-template-columns: 1fr 1fr; }
  .oc-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .oc-products { grid-template-columns: 1fr 1fr; }
  .oc-toggle { max-width: 420px; }
  .oc-sticky { display: none; }
}

/* ===== Desktop — 1025px and up ===== */
@media (min-width: 1025px) {
  /* Above the touch floor the stepper buttons go back to 38px, so the input
     between them has to as well or the row looks broken. */
  .oc-qty input { min-height: 0; }

  .oc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: 28px;
    align-items: start;
  }

  .oc-aside { position: sticky; top: 118px; }
  .oc-products { grid-template-columns: 1fr 1fr; }
}