:root{
    --primary:#FFFFFF;
    --cream:#FBF9F4;
    --olive:#808000;
    --olive-deep:#5c5c00;
    --olive-tint:#f2f2e0;
    --gold:#C08A34;
    --ink:#2E2A20;
    --ink-soft:#6b6558;
    --line:#e7e4da;
    --danger:#a6473e;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--primary);
    color:var(--ink);
    font-family:'Karla',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:520px;margin:0 auto;padding:0 20px 60px;}

  .hero{padding:32px 0 8px;text-align:center;}
  .brand-name{
    margin:0 0 6px;font-family:'Fraunces',serif;font-size:30px;
    font-weight:600;color:var(--ink);letter-spacing:-.02em;
  }
  .brand-sub{margin:0 0 18px;color:var(--gold);font-size:12px;letter-spacing:3px;font-weight:600;text-transform:uppercase;}
  .quick-links{display:flex;justify-content:center;gap:10px;font-size:13px;margin-bottom:22px;}
  .quick-links a{color:var(--olive-deep);text-decoration:none;font-weight:600;}
  .quick-links a:hover{text-decoration:underline;}
  .quick-links span{color:var(--line);}

  .booking-notice{
    margin:0 0 20px;display:flex;gap:10px;align-items:flex-start;
    padding:12px 14px;border:1px solid #f0d9ae;border-radius:8px;
    background:#fdf6e6;color:#8a5a12;font-size:12.5px;line-height:1.5;
  }
  .notice-icon{
    width:16px;height:16px;border-radius:50%;background:var(--gold);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;margin-top:1px;
  }

  /* ---------- ACCORDION CARD ---------- */
  .booker{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 4px 18px rgba(46,42,32,.06);overflow:hidden;
  }
  .step{border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:0;}
  .step-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;cursor:pointer;user-select:none;
  }
  .step.locked .step-head{cursor:default;opacity:.45;}
  .step-head-left{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-soft);}
  .step.done .step-head-left{color:var(--ink);font-weight:600;}
  .step-icon{width:18px;height:18px;flex:none;color:var(--olive-deep);}
  .step-chevron{width:16px;height:16px;flex:none;color:var(--ink-soft);transition:transform .2s ease;}
  .step.open .step-chevron{transform:rotate(90deg);}

  .step-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .step.open .step-body{max-height:900px;}
  .step-body-inner{padding:0 20px 20px;}

  /* guests grid */
  .guest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .guest-btn{
    padding:14px 0;border-radius:9px;border:1px solid var(--line);background:#fff;
    color:var(--olive-deep);font-weight:700;font-size:15px;cursor:pointer;
  }
  .guest-btn.active{background:var(--olive);border-color:var(--olive);color:#fff;}
  .guest-btn:hover:not(.active){border-color:var(--olive);}

  /* date cards */
  .date-badge{
    display:inline-block;margin:0 0 10px;padding:5px 12px;border-radius:999px;
    background:var(--olive-tint);color:var(--olive-deep);font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  }
  .date-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
  .date-card{
    padding:14px 6px;border-radius:9px;border:1px solid var(--line);background:#fff;
    text-align:center;cursor:pointer;
  }
  .date-card .d1{font-weight:700;font-size:14px;color:var(--ink);}
  .date-card .d2{font-size:12px;color:var(--ink-soft);margin-top:2px;}
  .date-card.active{background:var(--olive);border-color:var(--olive);}
  .date-card.active .d1,.date-card.active .d2{color:#fff;}
  input[type="date"].custom-date{
    width:100%;font-family:'Karla',sans-serif;font-size:15px;padding:12px 14px;
    border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);
  }

  /* time slots */
  .service-group{margin-bottom:16px;}
  .service-group:last-child{margin-bottom:0;}
  .service-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;}
  .slot-row{display:flex;flex-wrap:wrap;gap:8px;}
  .slot-btn{
    display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;
    border:1px solid var(--olive);background:#fff;color:var(--olive-deep);font-weight:600;font-size:14px;cursor:pointer;
  }
  .slot-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--olive);}
  .slot-btn.active{background:var(--olive);color:#fff;}
  .slot-btn.active .dot{background:#fff;}

  .continue-wrap{padding:6px 20px 20px;}
  .continue-btn{
    width:100%;background:var(--olive);color:#fff;border:none;padding:14px 16px;border-radius:10px;
    font-family:'Karla',sans-serif;font-weight:700;font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .continue-btn:disabled{background:#e3e2d6;color:#a8a495;cursor:not-allowed;}
  .continue-btn svg{width:17px;height:17px;}
  .step-hint{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:var(--ink-soft);padding:0 20px 12px;}
  .step-hint svg{width:14px;height:14px;flex:none;}

  /* details form */
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
  .field label{font-size:12.5px;font-weight:700;color:var(--ink);}
  input[type="text"],input[type="tel"],textarea{
    font-family:'Karla',sans-serif;font-size:15px;padding:12px 14px;border-radius:9px;
    border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;
  }
  textarea{resize:vertical;min-height:64px;}
  input:focus,textarea:focus{outline:none;border-color:var(--olive);}
  .error{font-size:12px;color:var(--danger);display:none;margin-top:2px;}
  .error.show{display:block;}
  .consent{display:flex;align-items:flex-start;gap:9px;margin:10px 0 4px;}
  .consent input[type="checkbox"]{
    appearance:none;width:18px;height:18px;flex:none;margin-top:1px;border:1.5px solid var(--line);
    border-radius:5px;background:#fff;cursor:pointer;position:relative;
  }
  .consent input[type="checkbox"]:checked{background:var(--olive);border-color:var(--olive);}
  .consent input[type="checkbox"]:checked::after{
    content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .consent label{font-size:12.5px;color:var(--ink-soft);line-height:1.5;cursor:pointer;}
  .consent a{color:var(--olive-deep);font-weight:700;text-decoration:underline;cursor:pointer;}

  footer{text-align:center;margin-top:30px;color:var(--ink-soft);font-size:12.5px;line-height:1.7;}
  footer strong{color:var(--ink);}

  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(46,42,32,.55);z-index:100;padding:20px;align-items:center;justify-content:center;}
  .modal-overlay.open{display:flex;}
  .modal{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}
  .modal-head h2{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;margin:0;color:var(--ink);}
  .modal-close{background:var(--olive-tint);border:none;width:32px;height:32px;border-radius:999px;cursor:pointer;color:var(--ink);}
  .modal-body{padding:18px 20px 22px;overflow-y:auto;font-size:.86rem;line-height:1.6;color:var(--ink-soft);}
  .modal-body h3{font-size:.92rem;color:var(--ink);margin:18px 0 6px;}
  .modal-foot{padding:14px 20px 18px;border-top:1px solid var(--line);}
  .modal-foot button{width:100%;background:var(--olive);color:#fff;border:none;padding:12px;border-radius:9px;font-weight:700;cursor:pointer;}

  @media (max-width:400px){.guest-grid{grid-template-columns:repeat(4,1fr);}}

  .language-switcher{
    display:flex;justify-content:center;align-items:center;gap:6px;
    margin:0 auto 18px;padding:4px;width:max-content;
    background:var(--olive-tint);border:1px solid var(--line);border-radius:999px;
  }
  .lang-btn{
    appearance:none;border:0;background:transparent;color:var(--ink-soft);
    padding:7px 13px;border-radius:999px;font-family:'Karla',sans-serif;
    font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  }
  .lang-btn:hover{color:var(--ink);}
  .lang-btn.active{background:var(--olive);color:#fff;}

  /* ---------- THANK YOU ---------- */
  .thankyou{display:none;text-align:center;padding:44px 24px;}
  .thankyou.show{display:block;}
  .thankyou-icon{
    width:56px;height:56px;border-radius:50%;background:var(--olive-tint);color:var(--olive-deep);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  }
  .thankyou-icon svg{width:28px;height:28px;}
  .thankyou h2{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin:0 0 10px;color:var(--ink);}
  .thankyou p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}
  .thankyou a.ig-link{
    display:inline-flex;align-items:center;gap:7px;color:var(--olive-deep);
    font-weight:700;font-size:13.5px;text-decoration:none;
  }
  .thankyou a.ig-link:hover{text-decoration:underline;}