/* css/booking.css */

.modal-overlay {
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.92); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.open { display:flex; }

.modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--rx); width:100%; max-width:760px;
  position:relative; max-height:95vh; overflow:hidden;
  animation:modalIn .3s ease;
  display:grid; grid-template-columns:248px 1fr;
}

/* ── LEFT ── */
.modal-left {
  padding:2rem 1.75rem;
  border-right:1px solid var(--border);
  background:var(--bg3);
  border-radius:var(--rx) 0 0 var(--rx);
  display:flex; flex-direction:column; gap:.55rem;
  overflow-y:auto;
}
.modal-left-org  { font-size:.67rem; color:var(--muted); font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.modal-left-service { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-top:.1rem; }
.modal-left-meta { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; padding-top:1rem; border-top:1px solid var(--border); }
.modal-meta-row  { display:flex; align-items:flex-start; gap:.55rem; font-size:.8rem; color:var(--muted); line-height:1.5; }
.modal-meta-row svg { width:13px; height:13px; stroke:var(--muted); stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:2px; }
.modal-warning {
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.16);
  border-radius:var(--rl); padding:.9rem;
  font-size:.74rem; color:#fca5a5; line-height:1.65; margin-top:auto;
}
.modal-warning strong { display:block; margin-bottom:.25rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }

/* ── RIGHT ── */
.modal-right { padding:1.75rem 1.85rem; overflow-y:auto; max-height:95vh; }
.modal-close {
  position:absolute; top:.85rem; right:.85rem;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--muted); width:27px; height:27px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:all .2s; z-index:1; font-family:var(--font-body);
}
.modal-close:hover { border-color:var(--red); color:var(--red); }
.modal-right h2 { font-size:1.25rem; font-weight:800; margin-bottom:.2rem; letter-spacing:-.02em; }
.modal-sub { color:var(--muted); font-size:.81rem; margin-bottom:1.35rem; line-height:1.6; }

/* ── PROGRESS ── */
.modal-progress { display:flex; gap:.38rem; margin-bottom:1.35rem; }
.progress-step { height:2px; border-radius:2px; background:var(--border); flex:1; transition:background .35s; }
.progress-step.done { background:var(--g); }

/* ── TYPE CHOOSER ── */
.type-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.1rem; }
.type-btn {
  padding:.9rem 1rem; border-radius:var(--rl); border:1px solid var(--border);
  background:var(--bg3); color:var(--text); text-align:left;
  transition:all .2s; font-family:var(--font-body);
}
.type-btn strong { display:block; font-size:.87rem; font-weight:700; font-family:var(--font-display); letter-spacing:-.01em; margin-bottom:.12rem; }
.type-btn span { font-size:.71rem; color:var(--muted); }
.type-btn:hover, .type-btn.sel { border-color:var(--g); background:rgba(74,222,128,.06); }
.type-btn.sel strong { color:var(--g); }

/* ── FORM ── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.fg { margin-bottom:.8rem; }
.fg label { display:block; font-size:.7rem; font-weight:600; color:var(--muted); margin-bottom:.35rem; letter-spacing:.04em; text-transform:uppercase; }
.fg input, .fg select, .fg textarea {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:.65rem .95rem;
  color:var(--text); font-size:.85rem; outline:none;
  font-family:var(--font-body); transition:border-color .2s; -webkit-appearance:none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:rgba(74,222,128,.35); }
.fg input::placeholder, .fg textarea::placeholder { color:var(--muted2); }
.fg select option { background:var(--bg2); }
.fg textarea { resize:vertical; min-height:70px; }

/* ── RADIO GROUP ── */
.radio-group { display:flex; flex-direction:column; gap:.34rem; margin-bottom:.8rem; }
.radio-opt {
  display:flex; align-items:center; gap:.58rem;
  padding:.55rem .82rem; border-radius:var(--r);
  border:1px solid var(--border); cursor:pointer;
  transition:all .2s; font-size:.82rem; color:var(--muted);
}
.radio-opt:hover { border-color:var(--border2); color:var(--text); }
.radio-opt input[type=radio] { display:none; }
.radio-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--border2); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.radio-opt.sel { border-color:var(--g); color:var(--text); }
.radio-opt.sel .radio-dot { border-color:var(--g); background:var(--g); }
.radio-dot-inner { width:5px; height:5px; border-radius:50%; background:var(--bg); display:none; }
.radio-opt.sel .radio-dot-inner { display:block; }

/* ── MATH CAPTCHA ── */
.captcha-wrap {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:1rem 1.1rem; margin-bottom:.8rem;
}
.captcha-label { font-size:.68rem; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; display:block; }
.captcha-row { display:flex; align-items:center; gap:.75rem; }
.captcha-question {
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  color:var(--g); flex-shrink:0;
  background:rgba(74,222,128,.07); border:1px solid rgba(74,222,128,.18);
  padding:.4rem .9rem; border-radius:var(--r);
}
.captcha-answer {
  flex:1; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:.5rem .85rem;
  color:var(--text); font-size:.95rem; font-family:var(--font-display);
  font-weight:600; outline:none; transition:border-color .2s; text-align:center;
}
.captcha-answer:focus { border-color:rgba(74,222,128,.35); }
.captcha-feedback { font-size:.76rem; margin-top:.5rem; font-weight:500; min-height:1rem; }
.captcha-note { font-size:.7rem; color:var(--muted2); margin-top:.35rem; }

/* ── CALENDAR ── */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-header h4 { font-size:.93rem; font-weight:700; letter-spacing:-.01em; }
.cal-nav { background:none; border:1px solid var(--border); color:var(--muted); width:27px; height:27px; border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:.9rem; font-family:var(--font-body); }
.cal-nav:hover { border-color:var(--g); color:var(--g); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:.55rem; }
.cal-day-header { text-align:center; font-size:.58rem; font-weight:700; color:var(--muted2); letter-spacing:.06em; padding:.35rem 0; }
.cal-day { text-align:center; font-size:.79rem; padding:.48rem .1rem; border-radius:var(--r); cursor:default; transition:all .18s; color:var(--muted2); position:relative; }
.cal-day.other-month { opacity:.18; }
.cal-day.past { opacity:.18; }
.cal-day.avail { color:var(--text); cursor:pointer; background:rgba(74,222,128,.05); border:1px solid rgba(74,222,128,.1); }
.cal-day.avail:hover { background:rgba(74,222,128,.13); border-color:var(--g); }
.cal-day.picked { background:var(--g); color:var(--bg); font-weight:700; border:1px solid var(--g); }
.cal-day.today::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:var(--g); }
.cal-day.picked.today::after { background:var(--bg); }
.cal-tz { font-size:.71rem; color:var(--muted); margin-bottom:1rem; display:flex; align-items:center; gap:.4rem; }
.cal-tz svg { width:11px; height:11px; stroke:var(--muted); stroke-width:1.75; fill:none; stroke-linecap:round; }

/* ── TIME SLOTS ── */
.time-slots-label { font-size:.68rem; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.55rem; display:none; }
.time-slots { display:none; grid-template-columns:repeat(4,1fr); gap:.38rem; margin-bottom:1rem; }
.time-slot { padding:.5rem .3rem; border-radius:var(--r); border:1px solid var(--border); background:transparent; color:var(--muted); font-size:.76rem; cursor:pointer; transition:all .18s; text-align:center; font-family:var(--font-body); }
.time-slot:hover, .time-slot.picked { border-color:var(--g); color:var(--g); background:rgba(74,222,128,.06); }
.time-slot.picked { background:var(--g); color:var(--bg); font-weight:700; }

/* ── STEPS ── */
.bstep { display:none; } .bstep.on { display:block; }
.modal-actions { display:flex; gap:.6rem; margin-top:.85rem; }
.back-link { background:none; border:none; color:var(--muted); font-size:.82rem; cursor:pointer; font-family:var(--font-body); padding:.4rem; transition:color .2s; }
.back-link:hover { color:var(--text); }
.submit-btn { width:100%; background:var(--g); color:var(--bg); border:none; border-radius:var(--r); padding:.88rem; font-weight:700; font-size:.88rem; cursor:pointer; transition:all .2s; font-family:var(--font-display); margin-top:.45rem; letter-spacing:.02em; }
.submit-btn:hover { background:#fff; transform:translateY(-1px); }
.submit-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── SUCCESS ── */
.success-wrap { text-align:center; padding:2rem 0; }
.success-check { width:54px; height:54px; border-radius:var(--rl); background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.22); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; animation:scaleIn .4s ease; }
.success-check svg { width:22px; height:22px; stroke:var(--g); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.success-wrap h3 { font-size:1.4rem; font-weight:800; margin-bottom:.45rem; letter-spacing:-.02em; }
.success-wrap p { color:var(--muted); font-size:.86rem; line-height:1.78; margin-bottom:1.35rem; max-width:300px; margin-left:auto; margin-right:auto; }
.success-actions { display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap; }

@media(max-width:768px){
  .modal { grid-template-columns:1fr; max-width:460px; }
  .modal-left { display:none; }
  .modal-right { padding:1.65rem 1.15rem; max-height:95vh; }
  .form-row { grid-template-columns:1fr; }
  .time-slots { grid-template-columns:repeat(2,1fr); }
}

/* ── PHONE FIELD ── */
.phone-field-wrap { position:relative; }
.phone-field-hint {
  font-size:.7rem; color:var(--muted2);
  margin-top:.3rem; line-height:1.4;
}

/* ── intl-tel-input v23 dark theme ──
   Uses the library's official CSS variables instead of fighting its layout.
   In v23 the country button is absolutely positioned on the left, and the
   library itself sets padding-left on the input to make room — we must NOT
   override display/position/flex or the overlap returns immediately.
   Reference: https://intl-tel-input.com/docs/theming                     */

/* Official CSS variables — controls colors and spacing library-wide */
.iti {
  --iti-border-color:        rgba(74,222,128,.18);
  --iti-hover-color:         rgba(74,222,128,.08);
  --iti-dropdown-bg:         var(--bg3);
  --iti-dialcode-color:      var(--muted);
  --iti-arrow-color:         var(--muted);
  --iti-spacer-horizontal:   10px;
  width: 100%;
}

/* Input element — only color/font overrides, NO layout changes */
.iti input.iti__tel-input {
  background:    var(--bg3);
  color:         var(--text);
  border-color:  var(--border);
  font-family:   var(--font-body);
  font-size:     .85rem;
}
.iti input.iti__tel-input:focus {
  outline:      none;
  border-color: rgba(74,222,128,.35);
  box-shadow:   none;
}
.iti input.iti__tel-input::placeholder { color: var(--muted2); }

/* Country selector button — background and border only */
.iti__selected-country {
  background: var(--bg3) !important;
  border-right: 1px solid rgba(74,222,128,.15) !important;
}
.iti__selected-country:hover,
.iti__selected-country:focus {
  background: var(--bg4) !important;
}

/* Dial code text color */
.iti .iti__selected-dial-code {
  color: var(--muted);
  font-size: .83rem;
}

/* Dropdown list */
.iti__dropdown-content {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
}
.iti__country-list { max-height: 240px; }
.iti__country {
  padding: .5rem 1rem;
  font-size: .82rem;
  color: var(--muted);
}
.iti__country:hover,
.iti__country.iti__highlight {
  background: rgba(74,222,128,.08) !important;
  color: var(--text) !important;
}
.iti__country-name { color: var(--text) !important; }
.iti__dial-code    { color: var(--muted); font-size: .77rem; }

/* Search input inside dropdown */
.iti__search-input {
  background:  var(--bg2) !important;
  color:       var(--text) !important;
  border:      none !important;
  border-bottom: 1px solid var(--border) !important;
  padding:     .6rem 1rem !important;
  font-size:   .83rem !important;
  font-family: var(--font-body) !important;
  outline:     none !important;
}
.iti__search-input::placeholder { color: var(--muted2) !important; }