/* ═══════════════════════════════════════════════════════════════
   GIẶT ƠI! — Quick-order modal styles
   Full-screen overlay containing the 4-step form. Used on index.html
   and lien-he.html via the `Đặt Hàng Ngay` CTA.
   ═══════════════════════════════════════════════════════════════ */

/* Local tokens — map dat-hang's old private tokens onto the website's
   shared.css palette. Keeps the rest of this file untouched when the
   site's brand variables evolve. */
:root {
  --brand-cream: #faf5e8;
  --ink-1: #1a1a1a;
  --ink-2: #4d4d4d;
  --ink-3: #808080;
}

/* Ensure CTA buttons (converted from <a>) look identical as <button>. */
button.nav-cta,
button.hero-cta,
button.calc-cta {
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
button.calc-cta { width: 100%; }

/* ─── Overlay + modal shell ─────────────────────────────────────── */
.order-overlay[hidden] { display: none !important; }
.order-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  animation: orderOverlayIn .25s ease-out;
}
@keyframes orderOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.order-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0;
  background: var(--brand-cream);
  padding: 0;
  animation: orderModalIn .35s cubic-bezier(.2, .9, .2, 1.05);
  /* Flex column: head (fixed) + form (scrolls) + price-bar (pinned).
     `100dvh` accounts for iOS Safari's collapsible toolbar so the pinned
     price bar isn't hidden under the browser chrome. Fall back to 100vh
     on browsers that don't support dvh. */
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}
@keyframes orderModalIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (min-width: 720px) {
  .order-overlay { padding: 24px; align-items: flex-start; }
  .order-modal {
    margin: 0 auto;
    border-radius: 24px;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  }
}
.order-modal-head { flex: 0 0 auto; }
.order-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Breathing room so the last step isn't hugging the pinned price-bar */
  padding-bottom: 24px;
}

.order-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-red);
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform .15s ease, background .15s ease;
}
.order-modal-close:hover {
  background: var(--brand-red);
  color: #fff;
  transform: scale(1.06);
}

/* Compact head — previous padding ate 120px+ on mobile. Keeps title
   + close button visible but drops to ~64px total so the form gets
   the screen it deserves. The eyebrow + long subheader are hidden on
   mobile (the form itself is self-explanatory); kept on desktop
   where we have the real estate. */
.order-modal-head {
  padding: 14px 20px 10px;
  text-align: center;
  background: linear-gradient(to bottom, #fff, var(--brand-cream));
  flex-shrink: 0;
}
.order-eyebrow {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 4px;
}
.order-hero-title {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: clamp(22px, 4.5vw, 36px);
  color: var(--brand-red);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
}
.order-hero-sub {
  max-width: 480px;
  margin: 6px auto 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  /* On mobile the whole page IS the order form — no need to explain
     what it is with a three-line subheader. Form fields speak for
     themselves. Keeps ~80px of vertical space for actual form. */
  .order-eyebrow { display: none; }
  .order-hero-sub { display: none; }
  .order-modal-head { padding: 16px 20px 8px; }
}

/* ─── Form layout ───────────────────────────────────────────────── */
.order-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 12px;
}

.order-step {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #eee8dc;
}

.order-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.order-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--brand-red);
  display: grid;
  place-items: center;
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1;
}

.order-step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.2;
}

.order-step-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ─── Step 1: KG slider ─── */
.kg-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.kg-big-input {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 80px;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.02em;
  background: transparent;
  border: none;
  border-bottom: 2px dashed transparent;
  /* Grow with the typed value (1-3 digits) but never collapse to 0.
     min-width is the WIDTH OF ONE DIGIT in Bahianita (~0.55em) so a single
     "5" stays compact and "kg" sits right next to it; "100"/"500" expand
     naturally via field-sizing. */
  width: auto;
  min-width: 0.6em;
  field-sizing: content;
  text-align: center;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kg-big-input:focus {
  outline: none;
  border-bottom-color: var(--brand-red);
  background: #fff5f5;
}
.kg-big-input::-webkit-outer-spin-button,
.kg-big-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kg-unit {
  font-size: 22px;
  color: var(--ink-2);
  font-weight: 600;
}

.kg-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--brand-red) 0%, var(--brand-yellow) 100%);
  border-radius: 999px;
  outline: none;
  margin-bottom: 8px;
}
.kg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 4px solid var(--brand-red);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.kg-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: #fff;
  border: 4px solid var(--brand-red);
  border-radius: 50%;
  cursor: pointer;
}
.kg-ticks {
  position: relative;
  height: 16px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 16px;
  /* Must match .kg-slider::-webkit-slider-thumb width below — the thumb's
     CENTER at value=min sits at thumbW/2, and at value=max at width-thumbW/2.
     So the visible motion range is (100% - thumbW). */
  --thumb-w: 26px;
}
.kg-ticks span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* Position = thumbW/2 + (value-5)/45 * (100% - thumbW).
   Same formula browsers use for the thumb itself — labels track the thumb
   exactly at any viewport width. */
.kg-ticks span:nth-child(1) { left: calc(var(--thumb-w) / 2); }                                                       /* 5  */
.kg-ticks span:nth-child(2) { left: calc(var(--thumb-w) / 2 + (100% - var(--thumb-w)) * 0.1111); }                    /* 10 */
.kg-ticks span:nth-child(3) { left: calc(var(--thumb-w) / 2 + (100% - var(--thumb-w)) * 0.2222); }                    /* 15 */
.kg-ticks span:nth-child(4) { left: calc(var(--thumb-w) / 2 + (100% - var(--thumb-w)) * 0.3333); }                    /* 20 */
.kg-ticks span:nth-child(5) { left: calc(var(--thumb-w) / 2 + (100% - var(--thumb-w)) * 0.5556); }                    /* 30 */
.kg-ticks span:nth-child(6) { left: calc(100% - var(--thumb-w) / 2); }                                                /* 50+ */

/* On narrow phones the 5/10/15/20 labels sit close together — shrink the
   font so they fit without overlapping, but keep every label visible so
   the thumb always has a label directly underneath it. */
@media (max-width: 480px) {
  .kg-ticks { font-size: 10px; }
}

.kg-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
@media (max-width: 480px) {
  .kg-presets { grid-template-columns: repeat(3, 1fr); }
}
.preset {
  background: #fff;
  border: 2px solid #e6e6e6;
  color: var(--ink-2);
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset:hover { border-color: var(--brand-red); color: var(--brand-red); }
.preset.active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* ─── Step 2: Service cards ─── */
.service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .service-cards { grid-template-columns: 1fr; }
}

.service-card {
  display: block;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.service-card input { position: absolute; opacity: 0; pointer-events: none; }
.service-card:hover { border-color: var(--brand-red); }
.service-card.selected {
  border-color: var(--brand-red);
  background: #fff5f5;
  box-shadow: 0 0 0 4px rgba(224, 3, 3, 0.08);
}

.service-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.service-name {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 22px;
  color: var(--brand-red);
  line-height: 1;
}
.service-turn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #e4dfd6;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 999px;
}
.service-turn-fast {
  background: var(--brand-yellow);
  color: var(--brand-red);
}
.service-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.service-price-hint {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.service-desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

.option-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff5f5;
  border: 2px solid #fbe1e1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.option-row:has(input:checked) {
  background: #fff;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(224, 3, 3, 0.08);
}
.option-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-red);
  margin-top: 2px;
  flex-shrink: 0;
}
.option-row-body { display: flex; flex-direction: column; gap: 2px; }
.option-row-label { font-weight: 700; color: var(--ink-1); font-size: 15px; }
.option-row-desc { font-size: 13px; color: var(--ink-3); }

/* ─── Address autocomplete dropdown ─── */
.address-autocomplete {
  position: relative;
}
.address-suggest[hidden] { display: none !important; }
.address-suggest {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  margin-top: -6px;
}
.address-suggest-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f5f0e4;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-1);
  transition: background 0.1s ease;
}
.address-suggest-item:last-child { border-bottom: none; }
.address-suggest-item:hover,
.address-suggest-item.active {
  background: #fff5f5;
  color: var(--brand-red);
}
.address-suggest-empty {
  padding: 14px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* ─── Inputs ─── */
.order-input {
  width: 100%;
  background: #fff;
  border: 2px solid #e6e6e6;
  color: var(--ink-1);
  padding: 13px 14px;
  /* iOS Safari auto-zooms into any input < 16px on focus, which jank-broke
     the sticky price bar at the bottom when the viewport zoomed back out.
     Must stay ≥ 16px here. */
  font-size: 16px;
  font-family: inherit;
  border-radius: 12px;
  transition: border-color 0.15s ease;
  margin-bottom: 10px;
}
.order-input:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 4px rgba(224, 3, 3, 0.1);
}
.order-input-secondary {
  background: transparent;
  margin-bottom: 0;
  margin-top: 6px;
  /* Keep at 16px to match .order-input — prevents iOS zoom-on-focus. */
  font-size: 16px;
}
.order-input-invalid {
  border-color: var(--brand-red);
  background: #fff5f5;
}

select.order-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='%23999' d='M4 6l4 4 4-4H4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

textarea.order-input-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  font-family: inherit;
  margin-top: 6px;
}

/* ─── Pickup/delivery date rail + HH:MM picker ───────────────── */
.date-block { margin: 0 0 12px; }
.date-block-spaced { margin-top: 22px; }
.date-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.date-block-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
}
.date-block-month {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

/* The rail is inside a wrapper so we can overlay a right-edge fade
   that signals "there are more tiles — swipe right". Without this cue,
   users treat the visible 5 tiles as the whole calendar. */
.date-rail-wrap {
  position: relative;
  margin: 0 -4px;
}
.date-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: -4px; bottom: 6px;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 85%);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.date-rail-wrap.at-end::after { opacity: 0; }

.date-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 6px;
}
/* Hide scrollbar — visual feels cleaner, scroll still works via touch/wheel */
.date-rail { scrollbar-width: none; }
.date-rail::-webkit-scrollbar { display: none; }

.date-tile {
  flex: 0 0 auto;
  min-width: 54px;
  scroll-snap-align: start;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  position: relative;
}
.date-tile:hover:not(:disabled):not(.active) {
  border-color: var(--brand-red);
}
.date-tile.active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.date-tile:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.date-tile-dow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.date-tile.active .date-tile-dow { color: rgba(255, 255, 255, 0.85); }
.date-tile-day {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1;
}
.date-tile.active .date-tile-day { color: #fff; }
.date-tile-today-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dd36f;
}
.date-tile.active .date-tile-today-dot { background: var(--brand-yellow); }

.time-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #eee8dc;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.time-pick-icon { font-size: 16px; flex-shrink: 0; }
.time-pick-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.time-pick-input {
  display: inline-flex;
  align-items: center;
  background: #f5f1e8;
  border-radius: 10px;
  padding: 6px 12px;
  gap: 4px;
}
.time-pick-hh,
.time-pick-mm {
  background: transparent;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
  padding: 0 14px 0 4px;
  /* Strip native chrome on the <select> so it blends with the pill */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}
.time-pick-hh:focus,
.time-pick-mm:focus {
  outline: none;
  color: var(--brand-red);
}
.time-pick-sep {
  color: var(--ink-3);
  font-weight: 700;
  font-size: 16px;
}

.option-row-delivery { margin-top: 20px; }

.delivery-address-fields {
  margin-top: 12px;
  padding: 14px;
  background: #fafafa;
  border: 1px dashed #e6e6e6;
  border-radius: 12px;
}
.delivery-address-fields .order-input { margin-bottom: 10px; }
.delivery-address-fields .order-input:last-child { margin-bottom: 0; }

/* ─── Price bar (pinned to bottom of modal via flex, always visible) ─── */
.price-bar {
  flex: 0 0 auto;
  position: relative;
  background: var(--brand-red);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.price-bar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.price-bar-left { color: #fff; flex: 1; min-width: 0; line-height: 1.25; }
.price-bar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.price-bar-total {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  margin: 4px 0 3px;
}
.price-bar-breakdown {
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.2;
}
/* Chosen package(s) under the Tạm Tính total — updates live when the
   delivery-gap reclassification flips the wash speed. */
.price-bar-pkg {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-yellow);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-bar-btn {
  background: var(--brand-yellow);
  color: var(--brand-red);
  border: none;
  /* Readable body font (was the decorative Bahianita display face, which is
     hard to read at button size). Matches the rest of the UI. */
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}
.price-bar-btn:hover { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.14); }
.price-bar-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }
.price-bar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.price-bar-btn-arrow { font-size: 16px; }

@media (max-width: 480px) {
  .price-bar-inner { padding: 7px 12px; gap: 10px; }
  .price-bar-total { font-size: 20px; }
  .price-bar-btn { font-size: 15px; padding: 9px 16px; }
}

/* ─── Checkout overlay: payment method selection ─────────────── */
.checkout-overlay[hidden] { display: none !important; }
.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(26, 26, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  animation: orderOverlayIn .22s ease-out;
}
.checkout-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--brand-cream);
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
  animation: orderModalIn .32s cubic-bezier(.2, .9, .2, 1.05);
}
/* Topbar with the explicit "← Chỉnh sửa đơn" back button.
   Preferred over a lone close-X so users know the route: go back to
   the form, edit, and the same idempotency key reconciles on resubmit. */
.checkout-topbar {
  display: flex;
  align-items: center;
  margin: -8px -8px 10px;
}
.checkout-back-btn {
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.checkout-back-btn:hover { background: #f3efe6; color: var(--brand-red); }
.checkout-back-btn span:first-child { font-size: 16px; }

.checkout-head { text-align: center; margin-bottom: 14px; }
.checkout-title {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: clamp(24px, 5vw, 30px);
  color: var(--brand-red);
  line-height: 1;
  margin: 4px 0 0;
}
.checkout-summary {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid #eee8dc;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.checkout-summary .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.checkout-summary .row + .row { margin-top: 4px; }
.checkout-summary .row dt {
  color: var(--ink-3);
  font-weight: 500;
  min-width: 0;
}
.checkout-summary .row dd {
  color: var(--ink-1);
  font-weight: 600;
  margin: 0;
  text-align: right;
}
.checkout-summary .row-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e6e0cf;
}
.checkout-summary .row-total dt { color: var(--ink-1); font-weight: 700; }
.checkout-summary .row-total dd { color: var(--brand-red); font-weight: 800; font-size: 17px; }
.checkout-summary .row-discount dt { color: #1ea352; font-weight: 600; }
.checkout-summary .row-discount dd { color: #1ea352; font-weight: 700; }

/* Coupon input block — used both in main form (always visible) and
 * in the checkout overlay (last-chance entry before submit). */
.coupon-block-form { margin: 0; }
.coupon-block {
  margin-bottom: 18px;
  padding: 14px;
  background: #fffbea;
  border: 1px dashed #f5c343;
  border-radius: 12px;
}
.coupon-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.coupon-row { display: flex; gap: 8px; }
.coupon-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid #e6e6e6;
  border-radius: 10px;
  font-size: 15px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff;
}
.coupon-row input:focus { border-color: var(--brand-red); outline: none; }
.btn-coupon-apply {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 2px solid var(--brand-red);
  border-radius: 10px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-coupon-apply:hover { background: #a90202; border-color: #a90202; }
.btn-coupon-apply:disabled { opacity: 0.6; cursor: not-allowed; }
.coupon-feedback {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}
.coupon-feedback.ok { color: #1ea352; }
.coupon-feedback.err { color: var(--brand-red); }

.pay-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.pay-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.pay-card input { position: absolute; opacity: 0; pointer-events: none; }
.pay-card:hover { border-color: var(--brand-red); }
.pay-card.selected {
  border-color: var(--brand-red);
  background: #fff5f5;
  box-shadow: 0 0 0 4px rgba(224, 3, 3, 0.08);
}
.pay-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.pay-card-icon svg { width: 22px; height: 22px; }
.pay-card-icon-cash { background: linear-gradient(135deg, #2dd36f, #1ea352); }
.pay-card-icon-bank { background: linear-gradient(135deg, var(--brand-red), #8a0202); }
.pay-card-body { flex: 1; min-width: 0; }
.pay-card-title { font-weight: 700; color: var(--ink-1); font-size: 15px; }
.pay-card-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.pay-card-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pay-card.selected .pay-card-check { opacity: 1; }

.checkout-submit-btn {
  width: 100%;
  background: var(--brand-red);
  color: var(--brand-yellow);
  border: none;
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 22px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}
.checkout-submit-btn:hover { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18); }
.checkout-submit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.checkout-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.checkout-arrow { font-size: 20px; }
.checkout-fine-print {
  text-align: center;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.4;
  margin: 10px 0 0;
}

/* ─── VietQR block inside success overlay ─────────────────────── */
.vietqr-block[hidden] { display: none !important; }
.vietqr-block {
  background: #fff;
  border: 2px solid var(--brand-red);
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 14px;
  text-align: center;
}
.vietqr-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-red);
  margin-bottom: 10px;
}
.vietqr-head-icon { font-size: 16px; }
.vietqr-image {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  background: #fff;
  border-radius: 8px;
}
.vietqr-info {
  text-align: left;
  background: #faf7ed;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
}
.vietqr-info div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.vietqr-info dt { color: var(--ink-3); }
.vietqr-info dd { color: var(--ink-1); font-weight: 700; margin: 0; }
.vietqr-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin: 0;
  text-align: center;
}
.vietqr-hint strong { color: var(--brand-red); font-weight: 700; }

/* ─── Success overlay (full-screen, on top of modal) ─── */
.success-overlay[hidden] { display: none !important; }
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 400;
  padding: 20px;
  overflow-y: auto;
}
.success-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px 28px 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: successPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.success-check {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--brand-red);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.success-check svg { width: 48px; height: 48px; }

.success-title {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 40px;
  color: var(--brand-red);
  margin: 6px 0 14px;
  line-height: 1;
}
.success-code {
  display: inline-block;
  background: var(--brand-yellow);
  color: var(--brand-red);
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 22px;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.success-msg {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 20px;
}
.success-summary {
  background: #faf7ed;
  border: 1px solid #f0e7c8;
  border-radius: 12px;
  padding: 14px 18px;
  text-align: left;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
}
.success-summary dt { font-weight: 700; color: var(--ink-1); display: inline; }
.success-summary dd { display: inline; margin: 0 0 0 4px; }
.success-summary div + div { border-top: 1px solid #f0e7c8; margin-top: 6px; padding-top: 6px; }

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Zalo opt-in card on success overlay ─────────────────────── */
.zalo-optin {
  background: linear-gradient(135deg, #fff8dc 0%, #fff 100%);
  border: 2px solid var(--brand-yellow);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin: 0 0 14px;
  text-align: left;
}
.zalo-optin-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-red);
  margin-bottom: 8px;
}
.zalo-optin-icon { font-size: 18px; }
.zalo-optin-sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0 0 12px;
}
.zalo-optin-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.zalo-optin-benefits li {
  position: relative;
  padding-left: 20px;
  line-height: 1.3;
}
.zalo-optin-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-red);
  font-weight: 700;
}
.zalo-optin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--brand-yellow);
  color: var(--brand-red);
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 22px;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.zalo-optin-btn:hover { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14); }
.zalo-optin-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }
.zalo-optin-arrow { font-size: 18px; }
.zalo-optin-helper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 12px;
  line-height: 1.3;
}
.zalo-optin-helper code {
  background: #fff;
  border: 1px solid #eee;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-1);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.zalo-copy-btn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-family: inherit;
  transition: all 0.15s ease;
}
.zalo-copy-btn:hover { border-color: var(--brand-red); background: #fff5f5; color: var(--brand-red); }
.zalo-copy-btn.copied { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

.success-close-ghost { width: 100%; margin-top: 0; }

/* Track-your-order CTA on the success screen — lives between the Zalo
   opt-in card and the action buttons. Styled as a prominent link-card
   because this is the key artifact the customer bookmarks after placing. */
.success-track-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3c4 100%);
  border: 1.5px solid rgba(224, 3, 3, 0.15);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 14px 0 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s;
}
.success-track-cta:hover {
  transform: translateY(-1px);
  border-color: var(--brand-red);
  box-shadow: 0 6px 16px rgba(224, 3, 3, 0.12);
}
.success-track-cta:active { transform: translateY(0); }
.success-track-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.success-track-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.success-track-text strong {
  font-size: 14px;
  color: var(--brand-red);
  line-height: 1.2;
  margin-bottom: 2px;
}
.success-track-text span {
  font-size: 12px;
  color: #666;
  line-height: 1.35;
}
.success-track-arrow {
  color: var(--brand-red);
  font-size: 20px;
  flex-shrink: 0;
}

/* Two-button row on the success screen:
   "Đặt đơn mới" (ghost, secondary) · "Đóng" (primary, commits the exit).
   Side-by-side on any reasonable phone width — stacked only on very narrow. */
.success-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.success-action-btn {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 16px;
}
@media (max-width: 360px) {
  .success-actions-row { flex-direction: column; }
}
.order-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 2px solid transparent;
  text-align: center;
  cursor: pointer;
}
.order-btn-primary {
  background: var(--brand-red);
  color: #fff;
}
.order-btn-primary:hover { background: #b00303; }
.order-btn-ghost {
  background: transparent;
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.order-btn-ghost:hover { background: var(--brand-red); color: #fff; }

/* ─── Toast ─── */
.order-toast[hidden] { display: none !important; }
.order-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  z-index: 500;
  max-width: 90%;
  text-align: center;
  animation: toastIn 0.3s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.order-toast.toast-error {
  background: var(--brand-red);
}

/* ─── Body scroll lock when any overlay is open ─── */
body.order-modal-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT MODAL (nav "Liên hệ" CTA)
   Simple centered card with social/contact links.
   ═══════════════════════════════════════════════════════════════ */

.contact-overlay[hidden] { display: none !important; }
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: orderOverlayIn .2s ease-out;
}
.contact-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 24px;
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  animation: orderModalIn .3s cubic-bezier(.2, .9, .2, 1.05);
}
.contact-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 26px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.contact-close:hover { background: #f3efe6; color: var(--brand-red); }
.contact-eyebrow {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 6px;
}
.contact-title {
  font-family: 'Bahianita', 'Roboto', sans-serif;
  font-size: 34px;
  color: var(--brand-red);
  line-height: 1;
  margin: 0 0 6px;
}
.contact-sub {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 14px;
  color: var(--ink-1);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all .15s ease;
  text-align: left;
}
.contact-link:hover {
  border-color: var(--brand-red);
  background: #fff5f5;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(224, 3, 3, 0.12);
}
.contact-link-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.contact-link-icon svg { width: 22px; height: 22px; }
.contact-link-icon.ico-zalo { background: linear-gradient(135deg, #0068ff, #0a3cff); }
.contact-link-icon.ico-facebook { background: linear-gradient(135deg, #1877f2, #0a4ec9); }
.contact-link-icon.ico-instagram { background: linear-gradient(135deg, #fd5949, #d6249f, #285aeb); }
.contact-link-icon.ico-phone { background: linear-gradient(135deg, #25d366, #128c7e); }
.contact-link-icon.ico-email { background: linear-gradient(135deg, var(--brand-red), #8a0202); }
.contact-link-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-link-label {
  font-weight: 700;
  color: var(--ink-1);
  font-size: 14px;
}
.contact-link-value {
  font-size: 13px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-link-arrow {
  margin-left: auto;
  color: var(--brand-red);
  font-size: 20px;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.contact-link:hover .contact-link-arrow { transform: translateX(3px); }

/* USD equivalents on EN order page */
.usd-equiv { font-size: .82em; opacity: .75; font-weight: 400; margin-left: .2em; }

/* ═══════════════════════════════════════════════════════════════
   2026-06-04 — v2 multi-service line items (revised UX)
   Three top-level pills (Siêu Tốc / Hoả Tốc / Giặt Khô) on one row,
   visual identity matches the old radio cards (Bahianita name in
   brand red + yellow turn pill + plain price). Multi-select via
   hidden checkbox. Sub-items render below the row in #svcItemsArea
   — each line item is shown only when its parent card is enabled.
   ═══════════════════════════════════════════════════════════════ */
.svc-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
/* Giặt Siêu Tốc (the flagship service) sits in a full-width box on top,
   spanning the left edge of Hoả Tốc to the right edge of Khô below it.
   It's laid out as a single horizontal bar (name left · badge + price
   right) with tighter padding so the box is ~half the height of the
   stacked Hoả Tốc / Khô cards below it. */
.svc-card-pill[data-card="sieu_toc"] {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
}
.svc-card-pill[data-card="sieu_toc"] .svc-card-pill-head {
  flex: 1;
  margin-bottom: 0;
  align-items: center;
}
@media (max-width: 540px) {
  /* Mobile: clean, uniform 2×2 grid — Siêu Tốc | Hoả Tốc on top,
     Ưu Tiên | Khô below. All four cards are EQUAL height (grid-auto-rows:1fr
     + stretch) and the price is pinned to the bottom of each card, so every
     price lines up on the same row regardless of how the names wrap. Siêu Tốc
     drops its desktop hero bar here. CSS `order` sets the pairing + moves the
     Ưu Tiên district note up under its subtitle, all without touching the DOM
     (desktop hero layout stays intact). */
  .svc-card-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    grid-auto-rows: 1fr;
  }
  /* High-specificity (.svc-card-row prefix) so these beat BOTH the base
     `.svc-card-pill{display:block}` (which appears later in the file) AND the
     desktop Siêu Tốc flex-row hero rule. Every card becomes a flex column. */
  .svc-card-row .svc-card-pill,
  .svc-card-row .svc-card-pill[data-card="sieu_toc"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    grid-column: auto;
  }
  /* Inside every card: name/badge on top, note (if any) under it, price last
     and pushed to the bottom (margin-top:auto) so all prices align on one row. */
  .svc-card-row .svc-card-pill-head  { order: 1; margin-bottom: 8px; align-items: flex-start; }
  /* The desktop Siêu Tốc hero rule sets align-items:center on its head with
     higher specificity, which leaked into mobile and pushed the "Standard"
     name down ~15px vs "Express". Re-assert flex-start with > specificity. */
  .svc-card-row .svc-card-pill[data-card="sieu_toc"] .svc-card-pill-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .svc-card-row .svc-card-pill-note  { order: 2; margin-top: 4px; }
  .svc-card-row .svc-card-pill-price { order: 3; margin-top: auto; padding-top: 8px; }
  /* Card pairing order (grid items) */
  .svc-card-row .svc-card-pill[data-card="sieu_toc"] { order: 1; }
  .svc-card-row .svc-card-pill[data-card="hoa_toc"]  { order: 2; }
  .svc-card-row .svc-card-pill[data-card="uu_tien"]  { order: 3; }
  .svc-card-row .svc-card-pill[data-card="giat_kho"] { order: 4; }
}

.svc-card-pill {
  display: block;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.svc-card-pill:hover { border-color: var(--brand-red); }
/* Ưu Tiên greyed out when the chosen district can't take it (Quận 1/3/5). */
.svc-card-pill.svc-card-disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* Small constraint note under the price (e.g. "Chỉ Quận 1, 3, 5"). */
.svc-card-pill-note {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-red);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.svc-card-pill:has(.svc-card-toggle:checked),
.svc-card-pill.selected {
  border-color: var(--brand-red);
  background: #fff5f5;
  box-shadow: 0 0 0 4px rgba(224, 3, 3, 0.08);
}
/* Hidden checkbox — the entire pill is the click target via <label>. */
.svc-card-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.svc-card-pill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
/* Container for the bilingual service name (VI primary + EN subtitle).
   Lives next to the turn pill (24 GIỜ / 4 GIỜ). */
.svc-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Override the legacy .service-name (which uses Bahianita at 22px and
   reads badly at small sizes) only INSIDE the new pills. Homepage
   pricing-table cards still get the display font. */
.svc-card-pill .service-name {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.svc-card-pill .service-name-en {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* ─── 2026-06-04 — bilingual subtitles for inline form labels ───
   Pattern: VI primary, EN whisper underneath. Inline spans keep
   layout unchanged on locales that omit them (only VI dat-hang
   currently renders them). */
.svc-item-name-en,
.option-row-label-en,
.option-row-desc-en,
.date-block-label-en,
.time-pick-label-en,
.price-bar-label-en,
.price-bar-btn-en {
  display: block;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 1px;
  letter-spacing: 0;
}
.svc-item-name-en { font-size: 11px; }
.option-row-label-en { font-size: 11px; }
.option-row-desc-en { font-size: 11px; font-style: italic; opacity: 0.85; margin-top: 2px; }
.date-block-label-en { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.time-pick-label-en { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.price-bar-label-en {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.price-bar-btn-en {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
  margin-top: 1px;
  color: inherit;
}

/* ─── EN/VI language switcher (top-right of order modal) ─── */
.order-lang-switch {
  position: absolute;
  top: 12px;
  right: 64px;            /* leave room for the close button */
  z-index: 3;
  background: var(--brand-yellow);
  color: var(--brand-red);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.order-lang-switch:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.order-lang-switch:active { transform: scale(0.98); }
@media (max-width: 480px) {
  .order-lang-switch { font-size: 12px; padding: 6px 11px; right: 56px; }
}

/* ─── Dev-preview banner. Hidden by default; order.js reveals it
   when location.hostname matches *.giatoi*.pages.dev so real
   customers on giatoi.vn never see it. ─── */
.order-test-banner {
  flex: 0 0 auto;
  background: linear-gradient(to right, #fff5d6, #fff1c2);
  border-top: 1px solid #f0d97a;
  border-bottom: 1px solid #f0d97a;
  color: #6b4f00;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 16px;
  text-align: center;
}
.order-test-banner[hidden] { display: none; }
.order-test-banner strong { color: var(--brand-red); font-weight: 700; }
.order-test-banner code {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
}
.order-test-banner em { color: #6b6b6b; font-style: italic; }
@media (max-width: 480px) {
  .order-test-banner { font-size: 11px; padding: 7px 14px; }
}

.svc-card-pill-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-1);
}

/* Sub-items panel — only visible when at least one parent card is on.
   Each .svc-item inside is independently hidden if its parent card
   isn't selected (JS toggles `hidden` per row). */
.svc-items-area {
  background: #fff;
  border: 1px solid #eee8dc;
  border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 14px;
}
.svc-items-area[hidden] { display: none; }

.svc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f6f0e8;
}
.svc-item[hidden] { display: none; }
.svc-item:last-child { border-bottom: none; }

.svc-item-label { flex: 1; min-width: 0; }
.svc-item-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-1);
  line-height: 1.3;
}
.svc-item-rate {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.3;
}
.svc-item-note {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  padding: 10px 0 4px;
  line-height: 1.4;
}

/* Mobile double-tap-to-zoom makes every stepper tap wait ~300ms (the
   browser disambiguates single vs double tap) and zooms the page on fast
   repeated +/- taps. `manipulation` keeps panning + pinch-zoom but drops
   double-tap zoom, so taps fire instantly. Effective touch-action is the
   intersection with ancestors, so the overlay roots cover every control
   inside (steppers, cards, date tiles, buttons). */
#orderOverlay,
#checkoutOverlay,
#successOverlay,
#calcOverlay {
  touch-action: manipulation;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #e6e6e6;
  background: #fff;
  color: var(--ink-1);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  padding: 0;
}
.qty-btn:hover:not(:disabled) {
  border-color: var(--brand-red);
  color: var(--brand-red);
}
.qty-btn:active:not(:disabled) {
  background: #fff5f5;
}
.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.qty-input {
  width: 52px;
  height: 32px;
  border: 1.5px solid #e6e6e6;
  border-radius: 8px;
  text-align: center;
  /* iOS Safari auto-zooms into any focused input < 16px — same rule as
     .order-input above. Was 14px, which zoomed the page when customers
     tapped the kg box. */
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-1);
  font-family: inherit;
  padding: 0;
}
.qty-input:focus {
  outline: none;
  border-color: var(--brand-red);
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-unit {
  font-size: 12px;
  color: var(--ink-3);
  /* Fixed width wide enough for the widest unit ("items") so the +/- steppers
     line up across every row regardless of unit text (kg / món / items / 件…). */
  min-width: 42px;
  text-align: left;
  font-weight: 600;
}

/* Empty-state hint shown when no card is checked yet. */
.svc-empty-hint {
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  padding: 16px 12px;
  border: 1.5px dashed #ddd;
  border-radius: 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.svc-empty-hint[hidden] { display: none; }

@media (max-width: 380px) {
  .svc-card-pill { padding: 12px; }
  .svc-card-pill-price { font-size: 15px; }
  .qty-stepper { gap: 4px; }
  .qty-btn { width: 30px; height: 30px; }
  .qty-input { width: 44px; height: 30px; }
}