/* ============================================================
   Gunjan Beauty World — Book Appointment (multi-step wizard)
   Same design tokens as style.css / services.css. Everything below
   is fluid (%, rem, clamp(), minmax()) — no hardcoded Figma pixels —
   so the wizard adapts from phone to desktop.

   RESPONSIVE BREAKPOINT MAP (as requested):
     1200px  → large desktop / laptop
     1000px  → small laptop / tablet landscape
     900px   → tablet portrait
     680px   → large phones / small tablets
     480px   → phones
     380px   → small phones & foldables
   All breakpoints below are max-width and cascade top-down, so a
   smaller screen inherits every rule from the breakpoints above it
   unless explicitly overridden.
   ============================================================ */

:root {
  --ivory: #F4EEE7;
  --paper: #F8F7F5;
  --gold: #CFA57A;
  --gold2: #D5AD84;
  --ink: #111111;
  --muted: rgba(102, 102, 102, .8);
  --espresso: #2A2019;
  --panel: rgba(207, 165, 122, .20);
  --panel-line: rgba(207, 165, 122, .20);
  --green: #16A34A;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-display: "Urbanist", sans-serif;
  --font-body: '"outfit", sans-serif;
}

* {
  box-sizing: border-box
}

body {
  background: var(--paper)
}

.booking-page {
  padding: clamp(100px, 14vw, 150px) 0 clamp(60px, 8vw, 100px);
  overflow-x: hidden
}

.booking-shell {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto
}

/* ---- Popup overlay (the wizard now opens as a popup everywhere, not
   a full page — see includes/booking-modal.php + assets/js/booking.js) ---- */
.gbw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  padding: clamp(16px, 4vw, 40px) 16px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.gbw-modal-overlay.is-open {
  display: block
}

.gbw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: gbwFadeIn .25s var(--ease);
}

.gbw-modal-dialog {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
  animation: gbwPopIn .3s var(--ease);
}

.gbw-modal-dialog .booking-card {
  box-shadow: 0 30px 80px rgba(20, 14, 8, .35)
}

body.gbw-modal-open {
  overflow: hidden
}

@keyframes gbwFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes gbwPopIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.98)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.booking-card {
  background: var(--ivory);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(24px, 4vw, 50px);
  position: relative;
}

/* ---- Header row ---- */
.booking-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px
}

.booking-title {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--ink);
  text-transform: none
}

.booking-close {
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.booking-close svg {
  width: 18px;
  height: 18px
}

.booking-step-of {
  font-family: "outfit", sans-serif;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 24px
}

/* ---- Step pills ---- */
.booking-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px
}

.booking-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 32px;
  font-family: "Urbanist", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5%;
  text-transform: uppercase;
  color: var(--gold);
  border: 0.7px solid var(--gold);
  background: transparent;
  white-space: nowrap;
}

.booking-pill .num {
  font-weight: 700
}

.booking-pill.is-done {
  background: rgba(22, 163, 74, .20);
  border-color: rgba(22, 163, 74, .20);
  color: var(--green)
}

.booking-pill.is-done .num {
  display: none
}

.booking-pill.is-done .check {
  display: inline-flex
}

.booking-pill.is-active {
  background: var(--panel);
  border-color: var(--gold)
}

.booking-pill .check {
  display: none;
  width: 9px;
  height: 7px;
  border: 1.5px solid var(--green);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px)
}

/* ---- Panel frame ---- */
.booking-frame {
  background: var(--panel);
  border: .5px solid var(--panel-line);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 32px);
}

.step-panel {
  display: none
}

.step-panel.is-active {
  display: block;
  animation: fadeIn .35s var(--ease)
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.step-heading {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px
}

.step-sub {
  font-family: "outfit", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(102, 102, 102, 0.9);
  margin-bottom: 24px
}

/* ---- Category tabs (Step 1) ---- */
/* ---- Top-level Services / Packages / Offers tabs (Step 1) ---- */
.top-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--panel-line);
  padding-bottom: 2px
}

.top-tab {
  padding: 10px 4px;
  margin-right: 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: rgba(102, 102, 102, 0.8);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.top-tab.is-active {
  color: var(--ink);
  border-color: var(--gold)
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--panel);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 22px
}

.cat-pill {
  flex: 1 1 auto;
  min-width: 90px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 16px);
  color: var(--gold);
}

.cat-pill.is-active {
  background: var(--gold);
  color: var(--ivory)
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px;
}

.svc-card {
  background: var(--ivory);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), border-color .2s var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (hover:hover) and (pointer:fine) {
  .svc-card:hover { transform: translateY(-4px) }
}

.svc-card.is-selected {
  border-color: var(--gold)
}

.svc-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background: #D9D9D9;
  margin-bottom: 12px
}

.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.svc-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  background: var(--gold);
  color: var(--ivory);
  font-family: "outfit", sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 6px
}

.svc-cat {
  color: var(--gold);
  font-family: "outfit", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 5%;
  text-transform: uppercase;
  margin-bottom: 4px
}

.svc-name {
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px
}

.svc-desc {
  font-family: "outfit", sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  min-height: 32px;
  margin-bottom: 8px
}

.svc-price {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.svc-price .now {
  color: var(--gold);
  font-family: "outfit", sans-serif;
  font-weight: 500;
  font-size: 14px
}

.svc-price .old {
  color: var(--muted);
  font-size: 10px;
  text-decoration: line-through
}

.svc-dur {
  margin-left: auto;
  font-family: "outfit", sans-serif;
  font-size: 11px;
  color: var(--muted)
}

.svc-check {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ivory);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px
}

.svc-card.is-selected .svc-check {
  display: flex
}

.svc-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--muted);
  font-family: "outfit", sans-serif;
  padding: 30px 0
}

/* ---- Packages tab ---- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 26px
}

.pkg-card {
  background: var(--ivory);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), border-color .2s var(--ease);
}

@media (hover:hover) and (pointer:fine) {
  .pkg-card:hover { transform: translateY(-4px) }
}

.pkg-card.is-selected {
  border-color: var(--gold)
}

.pkg-card .pkg-check {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ivory);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px
}

.pkg-card.is-selected .pkg-check {
  display: flex
}

.pkg-name {
  font-family: "Urbanist", sans-serif;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
  padding-right: 26px
}

.pkg-includes {
  font-family: "outfit", sans-serif;
  font-size: 12px;
  color: var(--gold);
  line-height: 1.5;
  margin-bottom: 10px
}

.pkg-desc {
  font-family: "outfit", sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 32px
}

.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px
}

.pkg-price .now {
  color: var(--gold);
  font-family: "outfit", sans-serif;
  font-weight: 500;
  font-size: 16px
}

.pkg-price .old {
  color: var(--muted);
  font-size: 12px;
  text-decoration: line-through
}

.pkg-validity {
  font-family: "outfit", sans-serif;
  font-size: 11px;
  color: var(--muted)
}

/* ---- Offers tab ---- */
.offer-tab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 26px
}

.offer-tab-card {
  position: relative;
  background: var(--ivory);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), border-color .2s var(--ease)
}

@media (hover:hover) and (pointer:fine) {
  .offer-tab-card:hover { transform: translateY(-4px); border-color: var(--gold) }
}

.offer-tab-card.is-selected {
  border-color: var(--gold)
}

.offer-tab-check {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ivory);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 1
}

.offer-tab-card.is-selected .offer-tab-check {
  display: flex
}

.offer-tab-card.is-unbookable {
  cursor: default;
  opacity: .65
}

.offer-tab-card.is-unbookable:hover {
  transform: none;
  border-color: transparent
}

.offer-tab-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px
}

.offer-tab-price .now {
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px
}

.offer-tab-price .old {
  color: var(--muted);
  font-size: 12px;
  text-decoration: line-through
}

.offer-tab-cta-disabled {
  color: var(--muted);
  text-decoration: none;
  font-style: italic
}

.offer-tab-media {
  position: relative;
  aspect-ratio: 16/10;
  background: #D9D9D9
}

.offer-tab-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.offer-tab-media .tag {
  position: absolute;
  left: 8px;
  top: 8px;
  background: var(--gold);
  color: var(--ivory);
  font-family: "outfit", sans-serif;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px
}

.offer-tab-body {
  padding: 12px 14px
}

.offer-tab-discount {
  font-family: "Urbanist", sans-serif;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 4px
}

.offer-tab-title {
  font-family: "outfit", sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4
}

.offer-tab-cta {
  margin-top: 8px;
  font-family: "outfit", sans-serif;
  font-size: 11px;
  color: var(--ink);
  text-decoration: underline
}

/* ---- Section labels (Step 2) ---- */
.field-label {
  color: var(--gold);
  font-family: "Urbanist", sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: 4%;
  text-transform: uppercase;
  margin: 26px 0 14px
}

.field-label:first-child {
  margin-top: 0
}

.pick-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px
}

.pick-card {
  background: var(--ivory);
  border-radius: 15px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pick-card.is-selected {
  border-color: var(--gold)
}

.pick-card:disabled,
.pick-card.is-disabled {
  opacity: .4;
  cursor: not-allowed
}

.pick-card .thumb {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 9px;
  background: #D9D9D9;
  margin-bottom: 10px
}

.pick-card .eyebrow-sm {
  color: var(--gold);
  font-family: "outfit", sans-serif;
  font-size: 10px;
  letter-spacing: 5%;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pick-card .name {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink)
}

.pick-card .meta {
  font-family: "outfit", sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px
}

.pick-card .rating {
  font-family: "Urbanist", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px
}

/* ---- Calendar (date) and Time chips share the same card design:
   a small label on top, the prominent value centered, a secondary
   label below it. ---- */
.calendar-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.calendar-chip {
  flex: none;
  width: 64px;
  padding: 14px 8px;
  border-radius: 15px;
  background: var(--ivory);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}

.calendar-chip .chip-top {
  font-family: "outfit", sans-serif;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold)
}

.calendar-chip .chip-main {
  font-family: "Urbanist", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1
}

.calendar-chip .chip-bottom {
  font-family: "outfit", sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .75
}

.calendar-chip.is-selected {
  background: var(--gold);
  border-color: var(--gold)
}

.calendar-chip.is-selected .chip-top,
.calendar-chip.is-selected .chip-main,
.calendar-chip.is-selected .chip-bottom {
  color: var(--ivory)
}

.calendar-chip:disabled,
.calendar-chip.is-disabled {
  opacity: .35;
  cursor: not-allowed
}

.calendar-chip:disabled:hover,
.calendar-chip.is-disabled:hover {
  transform: none
}

.time-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.calendar-chip-time {
  flex: none;
  width: 88px;
  padding: 8px 16px;
  border-radius: 48px;
  background: var(--ivory);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform .2s var(--ease);
  font-family: "Urbanist", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 5%;
  color: rgba(17, 17, 17, 0.8);
}

.calendar-chip-time.is-selected {
  background: var(--gold);
  border-color: var(--gold)
}

.calendar-chip-time.is-selected .chip-time {
  color: var(--ivory)
}

.calendar-chip-time:disabled,
.calendar-chip-time.is-disabled {
  opacity: .35;
  cursor: not-allowed
}

.calendar-chip-time:disabled:hover,
.calendar-chip-time.is-disabled:hover {
  transform: none
}

/* ---- Multi-service selection tray (Step 1) ---- */
.selected-tray {
  background: var(--panel);
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px
}

.selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px
}

.selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ivory);
  border-radius: 32px;
  padding: 8px 12px 8px 16px;
  font-family: "outfit", sans-serif;
  font-size: 13px;
  color: var(--ink)
}

.selected-chip .price {
  color: var(--gold);
  font-size: 13px;
  font-weight: 500
}

.selected-chip .remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--panel);
  border: 0;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  position: relative;
}

.selected-tray-total {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

.selected-tray-total strong {
  color: #111111;
}

/* ---- Per-service staff + time block (Step 2) ---- */
.service-staff-block {
  border-top: 1px solid var(--panel-line);
  margin-top: 24px;
  padding-top: 20px
}

.service-staff-block:first-child {
  border-top: 0;
  margin-top: 24px;
  padding-top: 0
}

.service-staff-block .block-title {
    background-color: rgba(207, 165, 122, 1);
    width: fit-content;
    justify-self: end;
    font-family: "Urbanist", sans-serif;
    text-transform: uppercase;
    letter-spacing: 4%;
    object-position: right;
    font-weight: 500;
    font-size: 12px;
    color: #F4EEE7;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: -44px;
}

/* ---- Selection summary bar (Steps 3–4) ---- */
.pick-summary {
  background: var(--gold);
  border-radius: 15px;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 26px
}

.pick-summary .hms {
  display: flex;
  gap: 18px 64px;
  flex-wrap: wrap;
}

.pick-summary .col span {
  display: block;
  color: var(--ivory);
  font-family: "outfit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85
}

.pick-summary .col strong {
  display: block;
  color: var(--ivory);
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-top: 3px
}

/* ---- Form fields (Step 3) ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px
}

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

.form-field label {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink)
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.form-field textarea {
  resize: vertical;
  min-height: 76px
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(17, 17, 17, .5)
}

.same-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Urbanist", sans-serif;
  font-size: 11px;
  color: var(--gold);
  margin-top: 4px;
  cursor: pointer
}

.same-phone input {
  width: auto
}

.field-error {
  color: #c0392b;
  font-family: "outfit", sans-serif;
  font-size: 12px;
  display: none
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #c0392b
}

.form-field.has-error .field-error {
  display: block
}

/* ---- Review + payment (Step 4) ---- */
.review-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start
}

.review-list {
  display: flex;
  flex-direction: column
}

.review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--panel-line)
}

.review-row:last-child {
  border-bottom: 0
}

.review-row .k {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(102, 102, 102, 0.9);
  flex: 0 1 auto;
  min-width: 0;
}

.review-row .v {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pay-card {
  background: var(--ivory);
  border-radius: 16px;
  padding: 20px
}

.pay-title {
  color: var(--gold);
  font-family: "outfit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px
}

.pay-row {
  display: flex;
  justify-content: space-between;
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: rgba(102, 102, 102, 0.9);
  padding: 6px 0
}

.pay-row .v {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.pay-row.discount .v {
  color: var(--green)
}

.pay-row.total {
  border-top: 1px solid var(--panel-line);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 13px;
  color: var(--muted)
}

.pay-row.total .v {
  color: var(--ink)
}

.pay-row.advance .v {
  color: var(--ink);
  font-weight: 500
}

.coupon-row {
  display: flex;
  gap: 10px;
  margin-top: 22px
}

.coupon-row input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "Urbanist", sans-serif;
  font-size: 13px;
  color: var(--ink)
}

.coupon-row button {
  flex: none;
  background: var(--gold);
  color: var(--ivory);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 0 22px;
  font-family: "outfit", sans-serif;
  font-size: 14px;
  cursor: pointer
}

.coupon-msg {
  font-family: "outfit", sans-serif;
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px
}

.coupon-msg.ok {
  color: var(--green)
}

.coupon-msg.err {
  color: #c0392b
}

/* ---- Nav buttons ---- */
.booking-actions {
  display: flex;
  gap: 16px;
  margin-top: 28px
}

.btn-back,
.btn-next {
  flex: 1;
  padding: 15px 18px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "outfit", sans-serif;
  font-size: 17px;
  cursor: pointer;
  text-decoration: none;
}

.btn-back {
  flex: 0 0 auto;
  min-width: 130px;
  background: transparent;
  border: .5px solid var(--gold);
  color: var(--gold)
}

.btn-next {
  background: var(--gold);
  border: 0;
  color: var(--ivory)
}

.btn-next:disabled {
  opacity: .55;
  cursor: not-allowed
}

.btn-next .chev,
.btn-back .chev {
  width: 5px;
  height: 10px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(-45deg)
}

.btn-back .chev {
  transform: rotate(135deg)
}

.submit-error {
  color: #c0392b;
  font-family: "outfit", sans-serif;
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  display: none
}

/* ---- Confirmation (Step 5) ---- */
.confirm-wrap {
  text-align: center;
  padding: 20px 0 6px
}

.confirm-icon {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(22, 163, 74, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px
}

.confirm-icon svg {
  width: 36px;
  height: 36px
}

.confirm-title {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink);
  margin-bottom: 12px
}

.confirm-copy {
  font-family: "outfit", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: rgba(102, 102, 102, 0.9);
  max-width: 430px;
  margin: 0 auto 30px;
}

.confirm-card {
  background: var(--ivory);
  border-radius: 16px;
  padding: 32px;
  max-width: 540px;
  margin: 0 auto 26px;
  text-align: left
}

.confirm-card .pay-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.confirm-card .review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0px;
}

.confirm-card .review-row .k {
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(102, 102, 102, 0.9);
  flex: 0 1 auto;
  min-width: 0;
}

.confirm-card .review-row .v {
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.confirm-back {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--gold);
  color: var(--ivory);
  padding: 15px 28px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: "outfit", sans-serif;
  font-size: 17px
}

/* ================================================================
   FULL RESPONSIVE SYSTEM — everything above keeps its original
   colors, fonts, spacing and component look. Everything below only
   reflows layout at the requested breakpoints:
   1200 / 1000 / 900 / 680 / 480 / 380.
   Ordered largest → smallest so each breakpoint naturally inherits
   the one above it (normal CSS cascade, no !important needed).
   ================================================================ */

/* Respect users who've asked the OS for reduced motion (not
   width-dependent, applies at every size) */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   1200px — large desktop → laptop
   Grids are already fluid via auto-fill/minmax, so at this size we
   just tighten the shell edges and the grid minimums a touch so
   laptop screens (which have less width than a full desktop) never
   feel cramped or force an extra half-column.
--------------------------------------------------------------- */
@media (max-width: 1200px) {
  .booking-shell {
    width: min(1200px, calc(100% - 48px))
  }

  .svc-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))
  }

  .pkg-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))
  }

  .offer-tab-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
  }
}

/* ---------------------------------------------------------------
   1000px — small laptop / tablet landscape
   The two-column Review + Payment layout starts to feel tight
   before it truly needs to stack, so give it a fairer split and
   tighten a couple of gaps.
--------------------------------------------------------------- */
@media (max-width: 1000px) {
  .review-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 20px
  }

  .pick-row {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr))
  }

  .form-grid {
    gap: 16px
  }
}

/* ---------------------------------------------------------------
   900px — tablet portrait
   This is where two-column text-heavy layouts (Review/Payment)
   properly stack, and the card padding eases off slightly since
   there's less width to work with.
--------------------------------------------------------------- */
@media (max-width: 900px) {
  .review-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .booking-card {
    padding: clamp(20px, 3.5vw, 40px)
  }

  .booking-frame {
    padding: clamp(18px, 2.6vw, 28px)
  }
}

/* ---------------------------------------------------------------
   680px — large phones / small tablets
   The wizard fully commits to a mobile presentation here: the
   booking form drops to one column, step-pill text labels hide
   (numbers/checks stay), the modal goes edge-to-edge and fills the
   viewport using dvh so the mobile browser chrome doesn't clip it,
   and inputs get bumped to 16px so iOS Safari doesn't auto-zoom on
   focus.
--------------------------------------------------------------- */
@media (max-width: 680px) {
  .gbw-modal-overlay {
    padding: 0
  }

  .gbw-modal-dialog {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .gbw-modal-dialog .booking-card {
    border-radius: 0;
    min-height: 100vh;
    padding: 20px 18px;
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .booking-pill span.label {
    display: none
  }

  .form-field input,
  .form-field textarea,
  .coupon-row input {
    font-size: 16px
  }

  .service-staff-block .block-title {
    text-align: right;
    margin-bottom: -43px;
    font-size: 10px;
    }
    
  .pick-card .eyebrow-sm{
    font-size: 8px;
    letter-spacing: 4%;
  } 

  .pick-summary .hms {
    gap: 14px 32px
  }
  
  .pick-summary .col strong {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------
   480px — phones
   Multi-column grids collapse to something thumb-friendly, the
   Back/Next actions stack full-width with Next on top, and the
   category tabs/pills switch from wrapping to a horizontal swipe
   strip so they never break into a messy multi-row block.
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  
  .svc-card{
    padding:10px;
  }
  
  .svc-media {
    aspect-ratio: 4 / 3;
  }
  
  .svc-media img {
    width: 100%;
    height: 100%;
    object-position: left;
    object-fit: cover;
}

  .pkg-grid {
    grid-template-columns: 1fr
  }

  .offer-tab-grid {
    grid-template-columns: 1fr
  }

  .pick-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .booking-actions {
    flex-wrap: wrap
  }

  .btn-back {
    flex: 1 1 100%;
    order: 2
  }

  .btn-next {
    flex: 1 1 100%;
    order: 1
  }
  
  .step-sub{
    font-size: 15px;
    line-height: 20px;
  }

  .pick-summary {
    gap: 14px 20px
  }

  .top-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin
  }

  .top-tab {
    flex: none
  }

  .cat-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .cat-pill {
    flex: none;
    min-width: auto
  }

  .review-row .k,
  .review-row .v,
  .confirm-card .review-row .k,
  .confirm-card .review-row .v {
    font-size: 13px
  }
  
  .step-heading{
    letter-spacing: -2%;
    margin-bottom: 6px;
  }
  
  .confirm-copy{
    font-size: 14px;
    line-height: 21px;
  }
  
  .confirm-card .pay-title {
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------
   380px — small phones & foldable cover screens
   Last safety net: shrink outer padding and headline sizes a bit
   more so nothing clips or forces sideways scroll on the smallest
   real devices in use today.
--------------------------------------------------------------- */
@media (max-width: 380px) {
  .booking-shell {
    width: calc(100% - 20px)
  }

  .booking-card {
    padding: 16px
  }

  .booking-frame {
    padding: 14px
  }
  
  .svc-desc{
    font-size: 11px;
  }

  .step-heading,
  .booking-title {
    font-size: 21px
  }
  
  .step-sub{
    font-size: 15px;
    line-height: 20px;
  }

  .pick-row {
    grid-template-columns: 1fr
  }

  .calendar-chip {
    width: 56px;
    padding: 12px 6px
  }

  .calendar-chip-time {
    width: 76px;
    padding: 8px 12px
  }

  .confirm-icon {
    width: 68px;
    height: 68px
  }

  .confirm-card {
    padding: 22px
  }

  .review-row {
    gap: 8px;
    padding: 10px 0
  }

  .review-row .k,
  .review-row .v,
  .confirm-card .review-row .k,
  .confirm-card .review-row .v {
    font-size: 12.5px
  }
}

/* ---------------------------------------------------------------
   Landscape phones / short viewports (height-based, independent of
   the width breakpoints above): let the modal scroll internally
   instead of clipping content against a short viewport.
--------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .gbw-modal-overlay {
    padding: 12px
  }

  .gbw-modal-dialog {
    min-height: 0
  }

  .gbw-modal-dialog .booking-card {
    min-height: 0
  }

  .confirm-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px
  }

  .confirm-copy {
    margin-bottom: 16px
  }
}

/* ---------------------------------------------------------------
   Touch devices (input-based, independent of width): enlarge only
   the invisible tap area around small icon buttons (close /
   remove-chip) — the visible icon size never changes.
--------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .booking-close::before {
    content: "";
    position: absolute;
    inset: -10px
  }

  .selected-chip .remove::before {
    content: "";
    position: absolute;
    inset: -8px
  }
}