/* ============================================================================
   order-pp-restyle.css  —  Clean flat mobile checkout restyle layer for /order (Remy colors)
   Loaded LAST on /order (after order-express.min.css + responsive-fixes.css), so
   these rules win by source order without touching the 100KB base stylesheet.
   Scope: cart/checkout visual layer only. No behavior, no JS hooks, no copy facts.
   Palette: dark #080808 / panels #0e0e0e, accent pink #db266c, green #00e676.
   Verified 2026-06-02. ============================================================ */

:root{
  --pp-accent:#db266c;
  --pp-accent-hover:#c01f5c;
  --pp-accent-bright:#ff5a9e;
  --pp-radius:12px;            /* fields · tiles · buttons */
  --pp-r-mini:8px;            /* inner controls */
  --pp-line:rgba(255,255,255,.10);
  --pp-line-soft:rgba(255,255,255,.07);
  --pp-field-bg:rgba(255,255,255,.055);   /* was .04 — too faint */
  --pp-field-line:rgba(255,255,255,.17);  /* visible input/tile edge (was .10) */
}

/* ── Section flow: clean single-scroll, no step eyebrows ─────────────────── */
.express-form .panel-step{display:none;}
.express-form [data-step-panel]+[data-step-panel]{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--pp-line-soft);
}
.express-form .panel-head{margin-bottom:18px;}
.express-form .panel-head h1{font-size:26px;line-height:1.12;letter-spacing:-.01em;}
.express-form .panel-head h2{font-size:21px;line-height:1.15;letter-spacing:-.01em;}
.express-form .panel-head p{font-size:13.5px;}
@media (max-width:640px){
  .express-form .panel-head h1{font-size:23px;}
  .express-form .panel-head h2{font-size:19px;}
}

/* ── Form fields: rounded-lg + translucent fill + 16px (no iOS zoom) + pink
   focus. Matches the existing /order dark layer's specificity
   (body.checkout-light-exception, 0,2,x) so these win by source order. Native
   <select> arrow is preserved (no appearance:none). Fill + edge raised for a
   clear, tappable boundary (the .04/.10 pair read as empty space). Labels are
   now CALM muted (not loud pink) — see the POLISH PASS block below. ─────────── */
body.checkout-light-exception .field input,
body.checkout-light-exception .field select,
body.checkout-light-exception .field textarea,
body.checkout-light-exception .promo-row--express input,
body.checkout-light-exception #promo-input,
body.checkout-light-exception #location-search{
  border-radius:var(--pp-radius)!important;
  background:var(--pp-field-bg)!important;
  border:1px solid var(--pp-field-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  font-size:16px!important;
}
body.checkout-light-exception .field input:focus,
body.checkout-light-exception .field select:focus,
body.checkout-light-exception .field textarea:focus,
body.checkout-light-exception .promo-row--express input:focus,
body.checkout-light-exception #promo-input:focus,
body.checkout-light-exception #location-search:focus{
  border-color:var(--pp-accent)!important;
  box-shadow:0 0 0 3px rgba(219,38,108,.22),inset 0 1px 0 rgba(255,255,255,.05)!important;
  background:rgba(255,255,255,.075)!important;
}
.field-grid{gap:18px;}

/* ── Order Summary items: brand eyebrow, dark stepper, trash icon ───────── */
.order-item__brand{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 3px;
}
.order-item__name{font-size:17px!important;line-height:1.2!important;}
@media (max-width:640px){.order-item__name{font-size:16px!important;}}
/* qty stepper → dark rounded-lg group (replaces the white pill) */
.order-item__qty{
  background:rgba(255,255,255,.02)!important;
  border:1px solid var(--pp-field-line)!important;
  border-radius:var(--pp-radius)!important;
  padding:0!important;
}
.order-item__qty button{border-radius:0!important;color:#fff!important;}
.order-item__qty-value{color:#fff!important;}
/* remove → trash icon button */
.order-item__remove{
  padding:6px!important;color:rgba(255,255,255,.4)!important;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  min-width:44px;min-height:44px;border-radius:8px;
}
.order-item__remove svg{display:block;width:16px;height:16px;}
.order-item__remove:hover{color:var(--pp-accent)!important;background:transparent!important;}
.order-item:hover{background:rgba(255,255,255,.02);}

/* ── Payment cards: rounded-lg, pink selected ───────────────────────────── */
.payment-option,
.payment-option--square{border-radius:var(--pp-radius)!important;background:rgba(255,255,255,.03)!important;border:1px solid var(--pp-field-line)!important;}
.payment-option.is-selected{
  border-color:var(--pp-accent)!important;
  background:rgba(219,38,108,.12)!important;
  box-shadow:0 0 0 1px rgba(219,38,108,.35)!important;
}
.payment-option:hover,.payment-option:focus-visible{border-color:rgba(219,38,108,.4)!important;background:rgba(255,255,255,.05)!important;}

/* ── Promo: pink Apply, rounded input row ───────────────────────────────── */
.promo-apply{
  background:var(--pp-accent)!important;color:#fff!important;border:none!important;
  border-radius:var(--pp-radius)!important;font-weight:700!important;
}
.promo-apply:hover{background:var(--pp-accent-hover)!important;}

/* ── Geolocation: dashed "use my current location" button (PP) ──────────── */
.location-pin__btn{
  border:1px dashed rgba(219,38,108,.5)!important;
  background:rgba(219,38,108,.06)!important;
  color:#ff5a9e!important;border-radius:var(--pp-radius)!important;
}
.location-pin__btn:hover{background:rgba(219,38,108,.12)!important;border-color:rgba(219,38,108,.7)!important;}

/* ── Submit: full-width solid pink rounded-lg (PP "Confirm Order") ───────── */
.panel-actions--submit{display:block;}
.btn--submit{
  width:100%!important;flex:none!important;
  padding:16px 22px!important;border-radius:var(--pp-radius)!important;
  background:var(--pp-accent)!important;background-image:none!important;
  color:#fff!important;border:none!important;
  font-family:var(--sans)!important;font-size:16px!important;font-weight:700!important;letter-spacing:0!important;
  box-shadow:0 8px 22px rgba(219,38,108,.3)!important;
}
.btn--submit:not(:disabled):hover{background:var(--pp-accent-hover)!important;box-shadow:0 10px 26px rgba(219,38,108,.4)!important;}
.btn--submit:disabled,.btn--submit[disabled]{background:#3a3438!important;color:rgba(255,255,255,.6)!important;box-shadow:none!important;cursor:not-allowed;}

/* ── Mobile running total → clean card above the submit button ───────────── */
.mobile-total-bar{
  border:1px solid var(--pp-line-soft);border-radius:12px;
  background:rgba(255,255,255,.02);padding:14px 16px;margin-top:6px;
}
.mobile-total-bar__row--total .mobile-total-bar__value--total{color:#fff;font-size:19px;}

/* ── Summary WhatsApp CTA: match the homepage hero WhatsApp button ──────── */
body.checkout-light-exception .summary-wa,
body.checkout-light-exception .summary-wa:link,
body.checkout-light-exception .summary-wa:visited{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  min-height:50px;padding:0 24px!important;border-radius:999px!important;
  border:1px solid rgba(37,211,102,.44)!important;
  background:linear-gradient(135deg,rgba(45,226,120,.96),rgba(16,127,56,.98) 58%,rgba(7,91,38,.98))!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-family:var(--mono,"DM Mono",monospace)!important;font-size:12px!important;font-weight:700!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;text-decoration:none!important;
  box-shadow:0 14px 42px rgba(37,211,102,.18),inset 0 1px 0 rgba(255,255,255,.26)!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
body.checkout-light-exception .summary-wa::before{
  content:"";position:absolute;inset:-1px auto -1px -36%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:transform .55s ease;pointer-events:none;
}
body.checkout-light-exception .summary-wa:hover,
body.checkout-light-exception .summary-wa:focus-visible{
  background:linear-gradient(135deg,rgba(52,235,127,1),rgba(19,153,63,1) 58%,rgba(7,104,42,1))!important;
  transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,211,102,.3),inset 0 1px 0 rgba(255,255,255,.3)!important;
}
body.checkout-light-exception .summary-wa:hover::before,
body.checkout-light-exception .summary-wa:focus-visible::before{transform:translateX(420%) skewX(-18deg);}
body.checkout-light-exception .summary-wa svg{position:relative;z-index:1;width:16px!important;height:16px!important;flex-shrink:0;fill:currentColor!important;}

/* ── Consent / Turnstile spacing polish ─────────────────────────────────── */
.consent-card{border-radius:12px;}

/* ════════════════════════════════════════════════════════════════════════
   POLISH PASS — 2026-06-02  (approved mockup: /_mockups/order-polish.html →
   "Proposed + calm labels"). Contrast, pill shapes, and brand-consistent
   controls. CSS-only here; payment-tile markup swapped to line icons in
   order.html. No CSP rehash (no inline-script edits).
═══════════════════════════════════════════════════════════════════════════ */

/* Calm labels — keep the established mono/uppercase treatment but drop the loud
   #ff5a9e to a muted tone. This REVERSES the prior "pink labels intentional"
   convention per Suhail 2026-06-02. Same specificity as the base pink rule
   (body.checkout-light-exception .field label) → wins by source order. */
body.checkout-light-exception .field label{color:rgba(248,248,248,.72)!important;}
body.checkout-light-exception .field-optional{color:rgba(255,255,255,.5)!important;}

/* Emirate quick-pills — stronger resting edge + 44px target + pink-tint hover.
   The solid-pink selected state (.is-active / [aria-pressed=true]) is the base,
   left intact. */
body.checkout-light-exception .emirate-quick button{
  border-color:var(--pp-field-line)!important;min-height:44px!important;
}
body.checkout-light-exception .emirate-quick button:hover,
body.checkout-light-exception .emirate-quick button:focus-visible{
  border-color:rgba(219,38,108,.55)!important;
  background:rgba(219,38,108,.12)!important;
  color:var(--pp-accent-bright)!important;
}

/* Consent — custom brand checkbox (was a 13px native control). */
body.checkout-light-exception .consent-check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:1px 0 0!important;flex:0 0 auto;position:relative;
  border-radius:6px;border:1.5px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.04);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
body.checkout-light-exception .consent-check input[type="checkbox"]:checked{
  background:var(--pp-accent);border-color:var(--pp-accent);
}
body.checkout-light-exception .consent-check input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
body.checkout-light-exception .consent-check input[type="checkbox"]:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(219,38,108,.32);
}

/* Payment tiles — unified line icons (markup swapped in order.html). Resting
   icon muted; selected tile turns icon + label pink. */
.payment-option .payment-option__glyph{display:inline-flex;color:rgba(248,248,248,.72);}
.payment-option .payment-option__glyph svg{
  width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.payment-option.is-selected .payment-option__glyph{color:var(--pp-accent-bright);}
body.checkout-light-exception .payment-option.is-selected strong{color:var(--pp-accent-bright)!important;}

/* Payment detail heading — compact mono helper, not a 28–32px serif display. */
body.checkout-light-exception .payment-detail h3{
  font-family:var(--mono)!important;font-size:12.5px!important;font-weight:700!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;line-height:1.2!important;
  margin-bottom:6px!important;
}

/* Desktop — centre the single column (≤1080px) so it isn't left-pinned with a
   void on the right. The ≥1101px 2-col + sticky summary rail is untouched. */
.checkout-layout{margin-inline:auto;}

/* ── Cold-chain acknowledgement (non-Dubai delivery) ──────────────────────
   order-express.js reveals #non-dubai-ack-panel only when a non-Dubai emirate
   is selected; the checkbox then gates submission. Neutral elevated card with
   a brand-pink accent edge; the checkbox keeps the .consent-check pink tick.
   On submit-without-ticking, setFieldState adds .is-invalid to the panel
   (its .consent-card class is the field container) → red caution state. */
body.checkout-light-exception .delivery-ack{
  margin-top:16px;padding:16px 18px;
  border:1px solid var(--pp-line);
  border-left:3px solid var(--pp-accent);
  border-radius:var(--pp-radius);
  background:rgba(255,255,255,.035);
}
body.checkout-light-exception .delivery-ack__title{
  margin:0 0 8px;
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2;
  color:var(--pp-accent-bright);
}
body.checkout-light-exception .delivery-ack__copy{
  margin:0 0 10px;
  font-family:var(--sans);font-size:14.5px;line-height:1.65;
  color:rgba(248,248,248,.78);
}
body.checkout-light-exception .delivery-ack__copy:last-of-type{margin-bottom:0;}
body.checkout-light-exception .delivery-ack__check{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--pp-line);
}
body.checkout-light-exception .delivery-ack.is-invalid{
  border-color:rgba(255,99,99,.5);border-left-color:#ff6363;
  background:rgba(255,99,99,.06);
}
body.checkout-light-exception .delivery-ack .field-error{
  margin-top:8px;font-family:var(--sans);font-size:13px;color:#ff8a8a;
}
@media (max-width:640px){
  body.checkout-light-exception .delivery-ack{padding:14px;}
  body.checkout-light-exception .delivery-ack__copy{font-size:14px;}
  body.checkout-light-exception .delivery-ack__check{gap:14px;}
}