/* FMS product site: ordering. "Buy now" and "Request a free trial"
   (product/order_form.php), the confirmation with its proforma invoice
   (order_done.php, _proforma.php), paying online or by bank/UPI
   (_pay_online.php, _pay_offline.php, order_payment.php) and order status
   (order_status.php). Loaded by layouts/product.php after product.css and
   pricing.css; every rule is scoped to .order-section so the rest of the
   website is untouched. Tokens from tokens.css. Brief §4, §5.2. */

.order-section {
  padding-top: var(--s-9);
  padding-bottom: var(--s-11);
  background:
    radial-gradient(circle at 1px 1px, rgba(11, 107, 93, .09) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--brand-50) 0, var(--surface-alt) 420px);
}

/* ---------------------------------------------------------------------
   Cards: the form, the result card, the aside
   --------------------------------------------------------------------- */
.order-section .form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-8);
  padding: var(--s-8);
}
.order-section .form-card > .kicker,
.order-section .result-card > .kicker {
  display: inline-block;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-600);
}
.order-section .form-card h1 {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.order-section .order-intro, .order-section .lead { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; max-width: 60ch; }

/* Numbered form sections */
.order-form .form-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-4);
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.order-step-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.order-section .form-card .form-section + .form-section { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.order-section .form-section.order-coupon, .order-section .form-section.order-terms { padding-top: var(--s-5); margin-top: var(--s-5); }

/* Fields, in the token anatomy: 48px controls, 1px input border, brand focus */
.order-section .field label, .order-section .field .label, .order-section fieldset.field legend {
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.order-section .field input[type="text"], .order-section .field input[type="email"], .order-section .field input[type="tel"],
.order-section .field input[type="number"], .order-section .field select, .order-section .field textarea {
  min-height: 48px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.order-section .field textarea { min-height: 96px; }
.order-section .field input:focus, .order-section .field select:focus, .order-section .field textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2);
}
.order-section .field .is-invalid, .order-section .address-input.is-invalid { border-color: var(--danger); }
.order-section .hint, .order-section .fineprint { color: var(--ink-2); font-size: var(--fs-sm); }
.order-section .error-text { color: var(--danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.order-section .optional { color: var(--ink-2); font-weight: var(--fw-regular); }

.order-section .address-input {
  border: 1px solid var(--line-input);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.order-section .address-input:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); }
.order-section .address-input input { min-height: 46px; border: 0 !important; box-shadow: none !important; }
.order-section .address-suffix { background: var(--surface-alt); color: var(--ink-2); font-family: var(--font-mono); font-size: .875rem; border-left: 1px solid var(--line); }
.order-section .address-preview {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--brand-800);
  font-family: var(--font-mono);
  font-size: .875rem;
  overflow-wrap: anywhere;
}

/* Plan picker */
.order-section .pick-grid { gap: 12px; }
.order-section .pick-body {
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.order-section .pick:hover .pick-body { border-color: var(--brand-600); box-shadow: var(--sh-4); }
.order-section .pick input:checked + .pick-body {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: 0 0 0 2px var(--brand-600);
}
.order-section .pick input:focus-visible + .pick-body { outline: 2px solid var(--focus); outline-offset: 3px; }
.order-section .pick-name { font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--ink); }
.order-section .pick-badge {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--gold-50);
  color: var(--gold-700);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.order-section .pick-team { color: var(--ink-2); font-size: var(--fs-sm); }
.order-section .pick-price { margin-top: 8px; font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.order-section .pick-price span { color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; }

.order-section .choice {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.order-section .choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-600); }
.order-section .choice input { accent-color: var(--brand-600); }
.order-section .choice-note { background: var(--ok-bg); color: var(--ok); font-weight: var(--fw-semibold); }
.order-section .check input { accent-color: var(--brand-600); }

/* The primary action */
.order-section .form-actions { margin-top: var(--s-6); }
.order-section .btn-primary {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.order-section .btn-primary:hover, .order-section .btn-primary:focus-visible { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.order-section .btn-primary:active { background: var(--brand-800); border-color: var(--brand-800); }
.order-section .btn-lg { min-height: 52px; font-size: 1.0625rem; border-radius: var(--r-md); }
.order-section .btn svg { flex: none; width: 18px; height: 18px; }
.order-section .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Aside: the summary card follows the plan chosen */
.order-section .order-aside { top: calc(var(--header-h) + var(--s-5)); gap: var(--s-4); }
.order-section .order-aside .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: var(--s-6);
}
.order-section .order-aside .card h3 { margin: 0 0 var(--s-3); font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--ink); }
.order-section .order-summary { border-top: 4px solid var(--brand-600); box-shadow: var(--sh-8); }
.order-section .order-summary h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-600);
}
.order-section .order-summary-plan { font-size: 1.375rem; color: var(--ink); }
.order-section .order-summary-team { color: var(--ink-2); }
.order-section .order-summary-price { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.order-section .order-summary-price s { color: var(--ink-2); }
.order-section .order-summary-amount { font-size: 2rem; font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -0.02em; }
.order-section .order-summary-free { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -0.015em; }

/* The 6–24 hour promise: one look wherever it appears */
.order-section .order-summary-promise, .order-section .order-promise {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: var(--s-4) 0 0;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.5;
}
.order-section .order-summary-promise svg, .order-section .order-promise svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--brand-600); }
.order-section .order-promise strong, .order-section .order-summary-promise strong { color: var(--brand-800); }

.order-section .order-steps { color: var(--ink-2); font-size: .9375rem; }
.order-section .order-steps strong { color: var(--ink); }
.order-section .order-aside-note { color: var(--ink-2); }

/* Numbered steps with circles on the confirmation */
.order-section .order-steps-big { list-style: none; counter-reset: ostep; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.order-section .order-steps-big li { counter-increment: ostep; position: relative; padding-left: 44px; margin: 0; line-height: 1.55; }
.order-section .order-steps-big li + li { margin-top: 0; }
.order-section .order-steps-big li::before {
  content: counter(ostep);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: .875rem;
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------------
   The confirmation and status cards
   --------------------------------------------------------------------- */
.order-section .order-done { max-width: 860px; gap: var(--s-7); }
.order-section .result-card { padding: var(--s-8); }
.order-section .status-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--s-4);
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
}
.order-section .status-icon.wait { background: var(--warn-bg); color: var(--warn); }
.order-section .status-icon svg { width: 28px; height: 28px; }
.order-section .order-number-label { margin: var(--s-5) 0 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.order-section .order-number {
  display: inline-block;
  padding: 10px 18px;
  border: 1px dashed var(--brand-300);
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-900);
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  user-select: all;
}
.order-section .next-heading {
  margin: var(--s-7) 0 var(--s-4);
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.order-section .order-actions { gap: var(--s-2); margin-top: var(--s-6); }
.order-section .big-address { font-family: var(--font-mono); color: var(--brand-700); overflow-wrap: anywhere; }

/* Pay online: the primary way to pay */
.pay-online {
  margin: var(--s-5) 0 0;
  padding: var(--s-5);
  border: 1px solid var(--brand-300);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface) 0, var(--brand-50) 100%);
}
.pay-online .pay-online-btn { width: 100%; min-height: 56px; font-size: 1.125rem; box-shadow: var(--sh-4); }
.pay-online .pay-online-btn svg { width: 20px; height: 20px; }
.pay-online-note { margin: 10px 0 0; color: var(--ink-2); font-size: var(--fs-sm); text-align: center; }

/* Pay by bank transfer or UPI: second */
.pay-offline-lead { margin: 0 0 var(--s-3); color: var(--ink-2); }
.pay-offline-lead strong { color: var(--ink); }
.order-section .pay-offline-bank, .order-section .proforma-bank {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 20px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.order-section .proforma-bank dt { color: var(--ink-2); font-weight: var(--fw-regular); }
.order-section .proforma-bank dd { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Status */
.order-section .order-status-now { margin: 6px 0 var(--s-5); }
.order-section .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 12px;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  background: var(--surface-alt);
  color: var(--ink-2);
}
.order-section .status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.order-section .status-ready { background: var(--ok-bg); color: var(--ok); }
.order-section .status-paid, .order-section .status-approved, .order-section .status-setting_up { background: var(--brand-50); color: var(--brand-700); }
.order-section .status-awaiting_payment, .order-section .status-under_review { background: var(--warn-bg); color: var(--warn); }
.order-section .status-cancelled, .order-section .status-declined { background: var(--danger-bg); color: var(--danger); }
.order-section .status-steps { gap: 8px; margin: 0 0 var(--s-5); }
.order-section .status-steps li { padding-top: 12px; border-top: 4px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); }
.order-section .status-steps li.is-done { border-top-color: var(--brand-600); color: var(--ink-2); }
.order-section .status-steps li.is-now { border-top-color: var(--gold-400); color: var(--ink); font-weight: var(--fw-bold); }

.order-section .notice { border-radius: var(--r-lg); }

/* ---------------------------------------------------------------------
   The proforma: a sheet of paper, like the tax invoice it precedes
   --------------------------------------------------------------------- */
.order-section .proforma {
  max-width: 860px;
  padding: var(--s-9) var(--s-9) var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-16);
  color: var(--ink);
  font-size: .9375rem;
}
.order-section .proforma-logo { display: block; height: 32px; width: auto; margin: 0 0 12px; }
.order-section .proforma-head { border-bottom: 2px solid var(--brand-900); color: var(--ink-2); }
.order-section .proforma-seller { font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--ink); }
.order-section .proforma-title h2 { font-size: 1.625rem; font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--brand-900); }
.order-section .proforma .proforma-tag { background: var(--warn-bg); color: var(--warn); font-weight: var(--fw-semibold); font-size: .8125rem; }
.order-section .proforma .proforma-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-2);
}
.order-section .proforma-parties { color: var(--ink-2); }
.order-section .proforma-dates { padding: 12px 16px; background: var(--surface-alt); border-radius: var(--r-md); }
.order-section .proforma-dates dt { color: var(--ink-2); }
.order-section .proforma .table-wrap { overflow-x: auto; border: 0; background: transparent; }
.order-section .proforma-lines th {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-strong);
}
.order-section .proforma-lines td { border-bottom-color: var(--line); }
.order-section .proforma-sub { color: var(--ink-2); }
.order-section .proforma-discount td { color: var(--ok); }
.order-section .proforma-totals { font-variant-numeric: tabular-nums; }
.order-section .proforma-totals dt { color: var(--ink-2); }
.order-section .proforma-totals .proforma-total { border-top: 2px solid var(--brand-900); font-size: 1.25rem; font-weight: var(--fw-bold); }
.order-section .proforma .proforma-words { color: var(--ink-2); font-weight: var(--fw-medium); }
.order-section .proforma-pay {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}
.order-section .proforma-pay h3 { margin: 0 0 var(--s-3); font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--ink); }
.order-section .proforma-pay .pay-online { margin: 0 0 var(--s-5); }
.order-section .proforma-foot { color: var(--ink-2); }

@media (max-width: 859.98px) {
  .order-section { padding-top: var(--s-6); }
  .order-section .form-card, .order-section .result-card { padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); }
  .order-section .order-aside .card { padding: var(--s-5); }
  .order-section .proforma { padding: var(--s-6) var(--s-4); border-radius: var(--r-lg); box-shadow: var(--sh-4); }
}

@media (max-width: 539.98px) {
  .order-section .order-number { font-size: 1.125rem; padding: 8px 12px; }
  .order-section .order-actions .btn { flex: 1 1 100%; }
  .pay-online { padding: var(--s-4); }
  .pay-online .pay-online-btn { font-size: 1rem; }
}

@media print {
  .order-section { background: #fff; padding: 0; }
  .order-section .proforma { box-shadow: none; border: 0; padding: 0; max-width: none; color: #000; }
  .order-section .proforma-dates, .order-section .proforma-pay { background: none; }
  .pay-online { display: none !important; }
}

.order-section .result-card .status-icon { display: grid; }
.order-section .proforma-totals { column-gap: 0; }
.order-section .proforma-totals dd { padding-left: 24px; }