/* ============================================================
   WATAD — Booking modal + form controls + toast
   ============================================================ */
.bkg {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: clamp(.5rem, 3vw, 1.5rem);
  opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--e-out), visibility var(--t-med);
}
.bkg.is-open { opacity: 1; visibility: visible; }
.bkg__scrim { position: absolute; inset: 0; background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.bkg__panel {
  position: relative; width: min(96vw, 680px); max-height: 92svh;
  background: var(--ivory); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(26px) scale(.98); opacity: 0; transition: transform var(--t-med) var(--e-out), opacity var(--t-med);
}
.bkg.is-open .bkg__panel { transform: none; opacity: 1; }

/* same visual language as the gold Continue button, so the dialog reads as one
   UI system — kept circular and icon-only so it's still obviously "close" */
.bkg__close {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--onyx); background: var(--grad-gold); background-size: 180% 180%;
  box-shadow: var(--sh-gold);
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast), background var(--t-fast);
}
.bkg__close:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(160,122,44,.6); }
.bkg__close:active { transform: translateY(0); }
.bkg__close svg { width: 20px; height: 20px; }

.bkg__head { padding: 1.7rem clamp(1.3rem, 4vw, 2.2rem) 1.2rem; border-bottom: 1px solid var(--line); }
.bkg__eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
[dir="rtl"] .bkg__eyebrow { letter-spacing: normal; }
.bkg__mark { height: 22px; width: auto; object-fit: contain; }
.bkg__title { font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-top: .5rem; line-height: 1.15; }
.bkg__progress { margin-top: 1.1rem; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bkg__progress-fill { display: block; height: 100%; width: 0; background: var(--grad-gold); transition: width var(--t-med) var(--e-out); }

.bkg__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bkg__steps { padding: 1.4rem clamp(1.3rem, 4vw, 2.2rem); overflow-y: auto; flex: 1; }
.bkg__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.3rem, 4vw, 2.2rem); border-top: 1px solid var(--line); background: var(--ivory);
}
.bkg__foot-right { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }
.bkg__stepinfo { font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
[dir="rtl"] .bkg__stepinfo { letter-spacing: normal; }

/* step */
.step-pane { animation: paneIn .45s var(--e-out); }
/* the step is being re-rendered in place — don't replay the entry animation,
   it would flash the fields the user is halfway through reading */
.step-pane--static { animation: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step-pane__lead { color: var(--muted); font-size: .95rem; margin-bottom: 1.3rem; }

/* 3-day advance notice + WhatsApp escape hatch */
.lead-note {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .9rem 1rem; margin-bottom: 1.4rem;
  border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-tint);
}
.lead-note > svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; margin-top: .1rem; }
.lead-note p { font-size: .88rem; color: var(--ink); line-height: 1.5; }
.lead-note__wa {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem;
  font-size: .82rem; font-weight: 600; color: #1c7a3a;
  border-bottom: 1px solid rgba(28,122,58,.35); padding-bottom: 1px;
}
.lead-note__wa:hover { color: #14602c; border-bottom-color: #14602c; }
.lead-note__wa svg { width: 15px; height: 15px; flex: none; }

/* service chooser */
.bkg-choose { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.bkg-opt {
  display: flex; align-items: center; gap: .8rem; text-align: start;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.bkg-opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.bkg-opt.is-active { border-color: var(--gold); background: var(--gold-tint); box-shadow: var(--sh-inset-gold); }
.bkg-opt__n { font-family: var(--font-display); color: var(--gold-600); font-size: 1rem; flex: none; width: 1.6rem; }
.bkg-opt__t { font-weight: 600; font-size: .95rem; color: var(--ink); }
.bkg-opt__s { font-size: .76rem; color: var(--muted); }
@media (max-width: 480px) { .bkg-choose { grid-template-columns: 1fr; } }

/* fields */
.field { display: grid; gap: .4rem; margin-bottom: 1.05rem; }
.field__label { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .field__label { letter-spacing: 0; }
.field__label .req { color: var(--gold-600); }
.field__input, .field__select, .field__area {
  width: 100%; padding: .8rem .9rem; font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__area { resize: vertical; min-height: 90px; line-height: 1.5; }
.field__input:focus, .field__select:focus, .field__area:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); }
.field__hint { font-size: .78rem; color: var(--muted-2); }
.field__error { font-size: .78rem; color: #B4482F; display: none; }
.field.has-error .field__input, .field.has-error .field__select, .field.has-error .field__area { border-color: #C56A4E; box-shadow: 0 0 0 3px rgba(180,72,47,.1); }
.field.has-error .field__error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 460px) { .field-row { grid-template-columns: 1fr; } }

/* file input */
.filefield { position: relative; }
.filefield input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filefield__box {
  display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; border: 1px dashed var(--gold-line);
  border-radius: var(--r-sm); color: var(--muted); font-size: .9rem; background: var(--gold-tint);
}
.filefield__box svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; }

/* segmented option list */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.seg--1 { grid-template-columns: 1fr; }
.seg__opt {
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white);
  font-size: .9rem; color: var(--ink); text-align: start; transition: border-color var(--t-fast), background var(--t-fast);
}
.seg__opt:hover { border-color: var(--gold); }
.seg__opt.is-active { border-color: var(--gold); background: var(--gold-tint); font-weight: 600; box-shadow: var(--sh-inset-gold); }
@media (max-width: 460px) { .seg { grid-template-columns: 1fr; } }

/* stepper (people / bags) */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; width: fit-content; }
.stepper button { width: 42px; height: 42px; font-size: 1.2rem; color: var(--gold-700); background: var(--white); transition: background var(--t-fast); }
.stepper button:hover { background: var(--gold-tint); }
.stepper input { width: 52px; text-align: center; border: none; border-inline: 1px solid var(--line); padding: .7rem 0; font-size: .95rem; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* add-on */
.addon { margin-top: 1rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.addon__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.addon__t { font-weight: 600; font-size: .95rem; color: var(--ink); }
.addon__s { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.chip {
  font-size: .82rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); background: var(--white); transition: all var(--t-fast);
}
.chip:hover { border-color: var(--gold); }
.chip.is-active { background: var(--gold-tint); border-color: var(--gold); font-weight: 600; }

/* payment choose */
.pay-choose { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pay-opt { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); text-align: start; transition: all var(--t-fast); }
.pay-opt:hover { border-color: var(--gold); }
.pay-opt.is-active { border-color: var(--gold); background: var(--gold-tint); box-shadow: var(--sh-inset-gold); }
.pay-opt b { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); }
.pay-opt span { font-size: .76rem; color: var(--muted); }
.pay-note { margin-top: 1rem; font-size: .82rem; color: var(--muted); display: flex; gap: .6rem; align-items: flex-start; }
.pay-note svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; margin-top: .1rem; }
@media (max-width: 460px) { .pay-choose { grid-template-columns: 1fr; } }

/* summary */
.summary { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--line-soft); }
.summary__row:last-child { border-bottom: none; }
.summary__row dt { color: var(--muted); }
.summary__row dd { color: var(--ink); font-weight: 500; text-align: end; }

/* success */
.bkg-success { text-align: center; padding: 1.5rem 0 .5rem; display: grid; justify-items: center; gap: .8rem; }
.bkg-success__mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-tint); box-shadow: var(--sh-inset-gold); }
.bkg-success__mark svg { width: 30px; height: 30px; color: var(--gold-600); }
.bkg-success__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
[dir="rtl"] .bkg-success__title { font-family: var(--font-display-ar); }
.bkg-success__body { color: var(--muted); max-width: 40ch; }
.bkg-success__ref { margin-top: .5rem; font-size: .82rem; letter-spacing: .1em; color: var(--gold-700); background: var(--gold-tint); padding: .5rem 1rem; border-radius: var(--r-pill); }
[dir="rtl"] .bkg-success__ref { letter-spacing: normal; }

/* toast */
.toast {
  position: fixed; inset-block-end: 1.4rem; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 90vw;
  z-index: var(--z-toast); background: var(--onyx); color: var(--ivory); padding: .85rem 1.3rem; border-radius: var(--r-pill);
  font-size: .88rem; box-shadow: var(--sh-3); opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--e-out);
}
.toast.is-show { opacity: 1; transform: none; }