/* ============================================================
   AVI'S BEAUTY STUDIO — modal.css
   Booking modal: overlay, stepper, form elements,
   service picker, staff grid, date/time, payment, success
   ============================================================ */

/* ── OVERLAY & MODAL SHELL ── */
.overlay {
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(26,20,16,.9); backdrop-filter:blur(5px);
    align-items:center; justify-content:center; padding:1rem;
  }
  .overlay.open { display:flex; }
  
  .modal {

    background:var(--warm-white);
  
    width:100%;
    max-width:700px;
  
    border-radius:24px;
  
    max-height:94vh;
  
    overflow-y:auto;
  
    animation:slideUp .4s ease;
  
    box-shadow:0 30px 80px rgba(0,0,0,.35);
  
  }
  .modal::-webkit-scrollbar       { width:4px; }
  .modal::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }
  
  /* ── MODAL HEADER ── */
  .modal-hd {
    background:var(--charcoal); padding:2rem 2.5rem;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:10;
  }
  .modal-hd h2    { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:300; color:#fff; }
  .modal-hd h2 em { color:var(--gold); }
  .modal-close    { background:none; border:none; color:var(--text-on-dark); font-size:1.3rem; cursor:pointer; padding:.3rem; transition:.2s; }
  .modal-close:hover { color:var(--gold); }
  
  .modal-bd { padding:2.5rem; }
  
  /* ── STEPPER ── */
  .stepper { display:flex; margin-bottom:2.5rem; border-bottom:1px solid var(--border); }
  .stp {
    flex:1; text-align:center; padding:.7rem .3rem;
    font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-light); cursor:default; position:relative; transition:.3s;
  }
  .stp::after        { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:transparent; transition:.3s; }
  .stp.active        { color:var(--text-dark); font-weight:600; }
  .stp.active::after { background:var(--gold); }
  .stp.done          { color:var(--gold); }
  .stp.done::after   { background:var(--gold); opacity:.4; }
  
  /* ── STEP PAGES ── */
  .pg      { display:none; }
  .pg.show { display:block; }
  
  /* ── FORM ELEMENTS ── */
  .f-group { margin-bottom:1.4rem; }
  .f-lbl   { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mid); display:block; margin-bottom:.45rem; }
  .f-in, .f-sel {
    width:100%; padding:.75rem 1rem; border:1px solid rgba(42,31,18,.18);
    background:var(--warm-white); font-family:'Jost',sans-serif; font-size:.88rem;
    color:var(--text-dark); outline:none; transition:border .3s;
  }
  .f-in:focus, .f-sel:focus { border-color:var(--gold-deep); }
  .f-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  
  /* ── SERVICE PICKER ── */
  .svc-pick { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
  .svc-opt {
    padding:.9rem 1rem; border:1px solid rgba(42,31,18,.12);
    cursor:pointer; transition:.25s; background:var(--warm-white);
    display:flex; align-items:flex-start; gap:.75rem;
  }
  .svc-opt:hover   { border-color:var(--gold-deep); }
  .svc-opt.on      { border-color:var(--gold); background:var(--gold-pale); }
  .svc-chk {
    width:16px; height:16px; border:1px solid rgba(42,31,18,.25);
    flex-shrink:0; margin-top:.15rem; position:relative; transition:.25s;
  }
  .svc-opt.on .svc-chk            { background:var(--gold); border-color:var(--gold); }
  .svc-opt.on .svc-chk::after     { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--rich-black); font-size:.6rem; }
  .svc-opt-name  { font-size:.83rem; color:var(--text-dark); font-weight:500; }
  .svc-opt-price { font-size:.7rem; color:var(--text-light); margin-top:.15rem; }
  
  /* ── STAFF GRID ── */
  .staff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
  .staff-c {
    padding:1.1rem .8rem; border:1px solid rgba(42,31,18,.12);
    cursor:pointer; transition:.25s; text-align:center; background:var(--warm-white);
  }
  .staff-c:hover { border-color:var(--gold-deep); }
  .staff-c.on    { border-color:var(--gold); background:var(--gold-pale); }
  .staff-av {
    width:46px; height:46px; border-radius:50%; margin:0 auto .55rem;
    background:var(--cream-dark); display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--text-mid);
  }
  .staff-nm { font-size:.78rem; font-weight:600; color:var(--text-dark); }
  .staff-rl { font-size:.67rem; color:var(--text-light); margin-top:.15rem; }
  
  /* ── DATE STRIP ── */
  .date-strip { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:1.5rem; }
  .date-strip::-webkit-scrollbar       { height:3px; }
  .date-strip::-webkit-scrollbar-thumb { background:var(--gold); }
  .d-cell {
    flex-shrink:0; padding:.7rem .9rem; border:1px solid rgba(42,31,18,.12);
    cursor:pointer; text-align:center; background:var(--warm-white); transition:.25s; min-width:58px;
  }
  .d-cell:hover:not(.off) { border-color:var(--gold); }
  .d-cell.on  { background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
  .d-cell.off { opacity:.35; cursor:not-allowed; }
  .d-day      { font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light); }
  .d-cell.on .d-day { color:var(--text-on-dark-muted); }
  .d-num      { font-size:.95rem; font-weight:500; margin-top:.2rem; }
  
  /* ── TIME GRID ── */
  .time-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; }
  .t-slot {
    padding:.55rem .3rem; text-align:center; border:1px solid rgba(42,31,18,.12);
    cursor:pointer; font-size:.78rem; background:var(--warm-white); transition:.25s;
  }
  .t-slot:hover:not(.taken) { border-color:var(--gold); }
  .t-slot.on    { background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
  .t-slot.taken { opacity:.3; cursor:not-allowed; text-decoration:line-through; }
  
  /* ── BOOKING SUMMARY ── */
  .summary  { background:var(--cream); padding:1.4rem 1.6rem; margin-bottom:1.5rem; }
  .s-row    { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid rgba(42,31,18,.07); font-size:.83rem; }
  .s-row:last-child { border-bottom:none; }
  .s-row label { color:var(--text-mid); }
  .s-row span  { color:var(--text-dark); font-weight:500; }
  .s-total {
    display:flex; justify-content:space-between; align-items:center;
    padding:.8rem 0 0; margin-top:.5rem; border-top:1px solid rgba(42,31,18,.18);
  }
  .s-total label { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--text-dark); }
  .s-total span  { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--gold); }
  
  /* ── PAYMENT OPTIONS ── */
  .pay-opts { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.5rem; }
  .pay-opt {
    padding:.95rem 1.2rem; border:1px solid rgba(42,31,18,.12);
    cursor:pointer; display:flex; align-items:center; gap:1rem;
    transition:.25s; background:var(--warm-white);
  }
  .pay-opt:hover { border-color:var(--gold-deep); }
  .pay-opt.on    { border-color:var(--gold); background:var(--gold-pale); }
  .pay-radio {
    width:16px; height:16px; border-radius:50%;
    border:1.5px solid rgba(42,31,18,.3); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:.25s;
  }
  .pay-opt.on .pay-radio         { border-color:var(--gold); }
  .pay-opt.on .pay-radio::after  { content:''; width:8px; height:8px; border-radius:50%; background:var(--gold); display:block; }
  .pay-info label { font-size:.85rem; font-weight:600; color:var(--text-dark); cursor:pointer; }
  .pay-info p     { font-size:.72rem; color:var(--text-light); margin-top:.12rem; }
  .pay-logo       { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
  .pay-badge      { font-size:.65rem; padding:.2rem .5rem; background:rgba(42,31,18,.06); border-radius:2px; color:var(--text-mid); }
  
  /* ── EXTRA PAYMENT FIELDS ── */
  .extra-fields      { display:none; margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--border); }
  .extra-fields.show { display:block; }
  
  /* ── SECURE NOTE ── */
  .secure-note { display:flex; align-items:center; gap:.6rem; font-size:.7rem; color:var(--text-light); margin-top:1rem; }
  .secure-note::before { content:'🔒'; font-size:.8rem; }
  
  /* ── MODAL NAV BUTTONS ── */
  .m-nav { display:flex; justify-content:space-between; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
  .btn-back {
    background:none; border:1px solid rgba(42,31,18,.18);
    padding:.7rem 1.8rem; font-family:'Jost',sans-serif; font-size:.75rem;
    letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--text-mid); transition:.3s;
  }
  .btn-back:hover { border-color:var(--gold-deep); color:var(--text-dark); }
  .btn-nxt {

    background:var(--charcoal);
  
    border:none;
  
    padding:.7rem 2.2rem;
  
    font-family:'Jost',sans-serif;
  
    font-size:.75rem;
  
    letter-spacing:.1em;
  
    text-transform:uppercase;
  
    cursor:pointer;
  
    color:#fff;
  
    transition:.3s ease;
  
  }
  .btn-nxt:hover {

    background:var(--charcoal-mid);
  
    transform:translateY(-2px);
  
  }
  .btn-pay-now {

    background:var(--gold);
  
    border:none;
  
    padding:.7rem 2.2rem;
  
    font-family:'Jost',sans-serif;
  
    font-size:.78rem;
  
    letter-spacing:.1em;
  
    text-transform:uppercase;
  
    cursor:pointer;
  
    color:var(--rich-black);
  
    font-weight:600;
  
    transition:.3s ease;
  
  }
  .btn-pay-now:hover {

    background:var(--gold-light);
  
    transform:translateY(-2px);
  
  }
  
  /* ── PROCESSING STATE ── */
  .processing      { display:none; text-align:center; padding:4rem 2rem; }
  .processing.show { display:block; }
  .spinner {
    width:48px; height:48px; border:2px solid rgba(42,31,18,.1);
    border-top-color:var(--gold); border-radius:50%;
    margin:0 auto 1.5rem; animation:spin .8s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg); } }
  
  /* ── SUCCESS STATE ── */
  .success      { display:none; text-align:center; padding:3.5rem 2.5rem; }
  .success.show { display:block; }
  .succ-ring {
    width:74px; height:74px; border-radius:50%;
    border:2px solid var(--gold); margin:0 auto 1.5rem;
    display:flex; align-items:center; justify-content:center;
  }
  .success h2   { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--text-dark); margin-bottom:.8rem; }
  .success p    { color:var(--text-mid); font-size:.88rem; line-height:1.85; font-weight:300; }
  .booking-ref  {
    background:var(--cream); padding:.8rem 1.5rem;
    display:inline-block; margin:1.5rem 0;
    font-size:.8rem; color:var(--text-dark); letter-spacing:.1em;
    border-left:3px solid var(--gold);
  }

  /* ─────────────────────────
   TOAST MESSAGE
───────────────────────── */

.toast-msg{

    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
  
    background:#111;
    color:#fff;
  
    padding:14px 22px;
  
    border-radius:14px;
  
    font-size:.88rem;
    font-weight:500;
  
    z-index:99999;
  
    opacity:0;
  
    transition:.35s ease;
  
    box-shadow:0 12px 30px rgba(0,0,0,.25);
  
    border:1px solid rgba(255,255,255,.08);
  
  }
  
  .show-toast{
  
    opacity:1;
  
    transform:translateX(-50%) translateY(0);
  
  }
  /* ─────────────────────────
   MODAL MOBILE FIXES
───────────────────────── */

@media(max-width:768px){

    .modal{
  
      border-radius:18px;
  
      max-height:96vh;
  
    }
  
    .modal-hd{
  
      padding:1.4rem 1.2rem;
  
    }
  
    .modal-bd{
  
      padding:1.4rem;
  
    }
  
    .staff-grid{
  
      grid-template-columns:1fr 1fr;
  
    }
  
    .time-grid{
  
      grid-template-columns:1fr 1fr 1fr;
  
    }
  
    .svc-pick{
  
      grid-template-columns:1fr;
  
    }
  
    .f-row2{
  
      grid-template-columns:1fr;
  
    }
  
    .m-nav{
  
      gap:1rem;
  
      flex-direction:column;
  
    }
  
    .btn-back,
    .btn-nxt,
    .btn-pay-now{
  
      width:100%;
  
    }
  
  }