/* =========================================================
   Checkout — single-page collapsible flow
   Scoped to .checkout-page; intentionally avoids touching
   site-wide style.blue.css.
   ========================================================= */

.checkout-page {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-soft: #f6f7f9;
  --c-surface-sunk: #eef0f4;
  --c-border: #e3e6eb;
  --c-border-strong: #cfd3da;
  --c-text: #1a1a1a;
  --c-text-muted: #6b7180;
  --c-primary: #1a1a1a;
  --c-primary-contrast: #ffffff;
  --c-accent: #16a34a;
  --c-accent-soft: #ecfdf5;
  --c-warn-bg: #fff7ed;
  --c-warn-text: #9a3412;
  --c-error: #dc2626;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  --t-fast: 0.18s ease;

  color: var(--c-text);
  padding-top: var(--s-3);
  padding-bottom: var(--s-6);
}

/* ---------- Layout shell ---------- */
.checkout-shell {
  max-width: 760px;
  margin: 0 auto;
}

.checkout-messages {
  margin-bottom: var(--s-3);
}

.checkout-messages__item {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: 0.9rem;
  margin-bottom: var(--s-2);
}

.checkout-step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 600px) {
  .checkout-step { padding: var(--s-5); }
}

.checkout-step__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.checkout-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.checkout-step__count {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.checkout-step__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.checkout-step__actions--single { justify-content: flex-end; }

/* ---------- Reward / milestone bar ----------
   Sits inline with the top Continue button — no pill background, just
   the sentence + progress track. */
.reward-bar {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.reward-bar--unlocked {
  color: #047857;
  font-weight: 600;
}

.reward-bar__label {
  font-size: 1rem;
  margin-bottom: var(--s-2);
}

@media (max-width: 599px) {
  .reward-bar { font-size: 0.85rem; }
  .reward-bar__label { font-size: 0.85rem; margin-bottom: var(--s-1); }
}

/* Top row — reward bar + Continue button share the same row */
.cart-top-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.cart-top-row__cta {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .cart-top-row { gap: var(--s-2); }
}

.reward-bar__track {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.reward-bar__fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ---------- Cart row ---------- */
.cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cart-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "thumb meta remove"
    "thumb qty   total";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--c-surface-soft);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}

@media (min-width: 600px) {
  .cart-row {
    grid-template-columns: 56px minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto;
    grid-template-areas: "thumb meta qty total remove";
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
}

.cart-row__thumb {
  grid-area: thumb;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface);
}

.cart-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-row__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cart-row__name {
  color: var(--c-text);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-row__name:hover { color: var(--c-text); text-decoration: underline; }

.cart-row__badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  align-self: flex-start;
}

.cart-row__price {
  font-size: 0.78rem;
  color: var(--c-text-muted);
}

.cart-row__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  overflow: hidden;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--t-fast);
}

.qty-btn:hover { background: var(--c-surface-sunk); }
.qty-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

.qty-input {
  width: 36px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

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

.cart-row__total {
  grid-area: total;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cart-row__remove {
  grid-area: remove;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast);
}

.cart-row__remove:hover { background: rgba(220, 38, 38, 0.08); color: var(--c-error); }
.cart-row__remove:focus-visible { outline: 2px solid var(--c-error); outline-offset: 1px; }

/* ---------- Cart totals (inside section A) ---------- */
.cart-totals {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: 0.9rem;
}

.cart-totals__row {
  display: flex;
  justify-content: space-between;
  padding: var(--s-1) 0;
  font-variant-numeric: tabular-nums;
}

.cart-totals__row--discount { color: var(--c-accent); }
.cart-totals__row--total {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--c-border);
  font-weight: 700;
  font-size: 1rem;
}

.cart-totals__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
}

.cart-totals__hint {
  font-size: 0.78rem;
  color: var(--c-text-muted);
}

/* ---------- Min-qty warning ---------- */
.min-qty-warning {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  margin-top: var(--s-3);
}

/* ---------- Sticky summary bar (collapsed cart) ----------
   --sticky-top is set at runtime to the rendered navbar height (see
   syncStickyTop() in checkout.html); fallback covers initial paint. */
.cart-summary-bar {
  position: sticky;
  top: var(--sticky-top, 70px);
  z-index: 50;
  margin: 0 0 var(--s-4);
}

.cart-summary-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-text);
  transition: border-color var(--t-fast);
}

.cart-summary-bar__inner:hover { border-color: var(--c-border-strong); }
.cart-summary-bar__inner:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.cart-summary-bar__count { color: var(--c-text-muted); font-weight: 500; }
.cart-summary-bar__total { font-variant-numeric: tabular-nums; }

.cart-summary-bar__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.82rem;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Form ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

@media (min-width: 600px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-1);
}

.form-field__hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text-muted);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  font-size: 0.95rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  scroll-margin-top: 100px;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* Select2 cosmetic alignment with native inputs (kept until area/district
   pickers are migrated to native <select>) */
.form-field .select2-container--default .select2-selection--single {
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
}

.form-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding: 0;
  color: var(--c-text);
}

.form-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  right: 6px;
}

.form-field .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* ---------- Payment block ---------- */
.payment-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.payment-fieldset legend {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2);
}

/* Side-by-side row of method tiles. eSewa naturally widens when the
   prepay badge is present; COD stays at min-width and is NOT
   stretched to match — that's the intent. */
.payment-options {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.payment-option {
  display: flex;
  cursor: pointer;
  margin: 0;
  flex: 0 1 auto;
}

.payment-option input { position: absolute; opacity: 0; pointer-events: none; }

.payment-option__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-width: 140px;
  min-height: 64px;
  width: 100%;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}

@media (min-width: 600px) {
  .payment-option__inner { min-width: 200px; }
}

.payment-option input:checked + .payment-option__inner {
  border-color: var(--c-primary);
  background: var(--c-surface-soft);
}

/* Both logos share the same visible height so the two tiles read as
   one row of equal-weight buttons. */
.payment-option__logo {
  height: 40px;
  max-height: 100%;
  width: auto;
}

/* COD: trim the inner padding to a minuscule gap so the 40px logo
   sits close to the border without being flush against it. */
#payment1-wrapper .payment-option__inner { padding: 4px; }

.payment-option__badge {
  background: var(--c-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

.payment-alt-trigger {
  display: block;
  margin-top: var(--s-2);
}

.payment-alt {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--c-surface-soft);
}

.payment-alt__close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  color: var(--c-text-muted);
  cursor: pointer;
  line-height: 1;
}

.payment-alt h4 { font-size: 0.95rem; margin: 0 0 var(--s-1); }
.payment-alt p { font-size: 0.85rem; color: var(--c-text-muted); margin: 0 0 var(--s-2); }

.payment-alt__account {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.payment-alt__logos { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.payment-alt__logos img { height: 22px; width: auto; }
.payment-alt__name { font-size: 0.9rem; line-height: 1.4; }
.copy-number { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Coupon ---------- */
.coupon-section { padding-top: var(--s-2); }

.coupon-input-row {
  display: flex;
  gap: var(--s-2);
}

.coupon-input {
  flex: 1;
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
}

.coupon-input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  background: var(--c-accent-soft);
  color: #047857;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: 0.88rem;
}

.coupon-error { display: block; color: var(--c-error); font-size: 0.8rem; margin-top: var(--s-1); }
.coupon-success { display: block; color: var(--c-accent); font-size: 0.8rem; margin-top: var(--s-1); }

/* ---------- Final summary ---------- */
.final-summary {
  background: var(--c-surface-soft);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: 0.92rem;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-secondary,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  border: 1px solid var(--c-primary);
  padding: 12px var(--s-4);
  font-size: 0.95rem;
}

.btn-primary:hover { background: #000; color: var(--c-primary-contrast); }
.btn-primary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn-primary--lg { padding: 14px var(--s-5); font-size: 1rem; }
.btn-primary--sm { padding: 8px var(--s-3); font-size: 0.85rem; }
.btn-primary--armed { background: var(--c-accent); border-color: var(--c-accent); }

/* Scale every primary button down on phones — the desktop sizes feel
   oversized in a 360-400px viewport. Two breakpoints, simple step. */
@media (max-width: 599px) {
  .btn-primary { padding: 9px 14px; font-size: 0.9rem; }
  .btn-primary--lg { padding: 11px 16px; font-size: 0.95rem; }
}

@media (max-width: 399px) {
  .btn-primary { padding: 7px 12px; font-size: 0.82rem; }
  .btn-primary--lg { padding: 9px 14px; font-size: 0.88rem; }
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  padding: 11px var(--s-4);
  font-size: 0.92rem;
}

.btn-secondary:hover { background: var(--c-surface-soft); }

.btn-link {
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  padding: 6px 0;
  font-size: 0.88rem;
}

.btn-link:hover { color: var(--c-text); }
.btn-link--sm { font-size: 0.78rem; }

/* ---------- Empty cart ---------- */
.empty-cart {
  text-align: center;
  padding: 18vh var(--s-3) 22vh;
}

.empty-cart h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-4);
}

/* ---------- Order placed / failed modals ---------- */
.order-placed-card {
  padding: var(--s-5);
  text-align: left;
}

.order-placed-card__check {
  display: inline-block;
  font-size: 1.05rem;
  margin-bottom: var(--s-3);
}

.order-placed-card__summary {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin: var(--s-3) 0;
  font-size: 0.92rem;
}

.order-placed-card__summary small {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.order-failed-card {
  padding: var(--s-6) var(--s-4);
  text-align: center;
}

.order-failed-card h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-4);
}

/* ---------- Mobile spacing tweaks ---------- */
@media (max-width: 599px) {
  .checkout-step { border-radius: var(--r-md); }
  .cart-row { padding: var(--s-2); }
  .cart-row__total { font-size: 0.88rem; }
  .qty-btn { width: 36px; height: 36px; }
  .qty-input { width: 32px; }
  .empty-cart { padding-top: 12vh; padding-top: 12dvh; }
}