:root{
  --glass:rgba(54,54,54,.42);
  --glass-strong:rgba(39,39,39,.58);
  --line:rgba(255,255,255,.24);
  --white:#fff;
  --soft:#f4f2ed;
  --soft-2:#ebe7df;
  --ink:#1c1b19;
  --muted:rgba(255,255,255,.78);
  --accent:#d7a85d;
  --accent-2:#f1cf92;
  --success:#4ea66c;
  --danger:#b64a4a;
  --shadow:0 24px 70px rgba(0,0,0,.25);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--white)}
body.booking-page{min-height:100vh;overflow:hidden;background:#1d1d1d}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.background-image{position:fixed;inset:0;background:url('assets/restaurant-bg.jpg') center center/cover no-repeat;transform:scale(1.015);z-index:-3}
.background-overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.30),rgba(12,12,12,.44));z-index:-2}

.site-header{position:fixed;left:0;right:0;top:0;height:86px;padding:14px 34px 10px;display:flex;align-items:flex-start;justify-content:space-between;z-index:40}
.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.site-logo{width:96px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))}
.language-select{position:relative}
.language-button{height:44px;min-width:76px;border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(35,35,35,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.language-button svg,.select-chevron{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .22s ease}
.language-button[aria-expanded="true"] svg,.select-trigger[aria-expanded="true"] .select-chevron,.time-select-trigger[aria-expanded="true"] .select-chevron{transform:rotate(180deg)}
.language-menu{position:absolute;right:0;top:52px;width:112px;padding:6px;border-radius:12px;background:rgba(248,247,243,.98);box-shadow:0 18px 50px rgba(0,0,0,.24);border:1px solid rgba(0,0,0,.07);z-index:70}
.language-menu button{width:100%;border:0;background:transparent;color:#222;padding:10px 11px;border-radius:9px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.language-menu button:hover{background:#ece9e2}.language-menu button span{opacity:0}.language-menu button.active span{opacity:1;color:#8c6b31}

.booking-shell{min-height:100vh;padding:88px 24px 24px;display:grid;place-items:center}
.wizard-card{width:min(1160px,calc(100vw - 96px));height:min(760px,calc(100vh - 128px));min-height:560px;background:var(--glass);border:1px solid rgba(255,255,255,.20);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.05);-webkit-backdrop-filter:blur(14px) saturate(1.05);overflow:visible;position:relative}
.wizard-body{height:100%;padding:36px 48px;position:relative}
.wizard-step{display:none;height:100%;opacity:0;transform:translateY(14px)}
.wizard-step.is-active{display:flex;flex-direction:column;opacity:1;transform:translateY(0);animation:stageIn .42s cubic-bezier(.2,.75,.2,1)}
@keyframes stageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.step-header{text-align:center;transition:all .45s ease}
.step-header h1,.step-header h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.step-header h1{font-size:clamp(32px,3.2vw,52px)}
.step-header h2{font-size:clamp(30px,3vw,46px)}
.step-header p{margin:10px auto 0;max-width:720px;font-size:16px;color:var(--muted);line-height:1.5}
.visit-step:not(.has-preferences) .visit-header{margin-top:72px}
.visit-step.has-preferences .visit-header{transform:translateY(-4px)}

.booking-controls-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;width:min(820px,100%);margin:42px auto 0;position:relative;z-index:20;transition:margin .45s ease,transform .45s ease,width .45s ease}
.visit-step:not(.has-preferences) .booking-controls-row{margin-top:70px}
.visit-step.has-preferences .booking-controls-row{margin-top:24px;width:min(880px,100%)}
.select-field{position:relative}
.select-field>label{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.2)}
.light-select{width:100%;min-height:64px;border:0;border-radius:14px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.12);transition:box-shadow .2s ease,transform .2s ease,background .2s ease}
.light-select:hover{background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.16);transform:translateY(-1px)}
.select-trigger,.time-select-trigger{padding:11px 15px 11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left}
.select-copy,.time-select-copy{display:flex;flex-direction:column;min-width:0}
.select-copy strong,.time-select-copy strong{font-size:17px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-copy small,.time-select-copy small,.time-select-copy span{margin-top:3px;font-size:12px;color:#736f68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-chevron{flex:0 0 auto;color:#3d3933}
.select-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:286px;overflow:auto;padding:7px;border-radius:14px;background:rgba(255,255,255,.985);border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 46px rgba(0,0,0,.24);z-index:90}
.select-option{width:100%;border:0;background:transparent;color:#222;padding:10px 12px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.select-option:hover{background:#f1eee8}.select-option.selected{background:#ece5d7}.select-option:disabled{opacity:.38;cursor:not-allowed}
.select-option>span:first-child{display:flex;flex-direction:column;gap:2px}.select-option strong{font-size:14px}.select-option small{font-size:11px;color:#726c63}.option-check{opacity:0;color:#8f6b2f}.select-option.selected .option-check{opacity:1}

.availability-panel{width:min(720px,100%);margin:0 auto;max-height:0;opacity:0;overflow:hidden;transform:translateY(16px);pointer-events:none;transition:max-height .56s cubic-bezier(.2,.78,.2,1),opacity .34s ease,transform .45s ease,margin .45s ease}
.availability-panel.is-visible{max-height:620px;opacity:1;transform:none;pointer-events:auto;margin-top:22px;overflow:visible}
.availability-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px;padding:0 4px}
.availability-panel-head>div:first-child{display:flex;flex-direction:column;gap:2px}.availability-kicker{font-family:Georgia,"Times New Roman",serif;font-size:24px}.availability-panel-head small{font-size:12px;color:var(--muted)}
.visit-compact-summary{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;background:rgba(24,24,24,.28);padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
.summary-dot{opacity:.5}

.date-time-composer{display:flex;justify-content:center}
.calendar-card{width:430px;min-height:486px;border-radius:18px;background:rgba(250,249,245,.97);color:#24211d;box-shadow:0 16px 42px rgba(0,0,0,.20);padding:16px 18px 18px;position:relative;overflow:visible}
.calendar-toolbar{height:46px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px}
.calendar-toolbar strong{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:21px;font-weight:500;text-transform:capitalize}
.icon-button{width:38px;height:38px;border-radius:10px;border:1px solid #d9d4cb;background:#fff;color:#3a3630;font-size:23px;display:grid;place-items:center;line-height:1;transition:.18s ease}
.icon-button:hover:not(:disabled){background:#f0ece4;border-color:#c9c0b1}.icon-button:disabled{opacity:.32;cursor:not-allowed}
.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.weekday-row{padding:9px 0 7px;color:#817b72;font-size:11px;font-weight:800;text-align:center}
.calendar-grid{min-height:280px;grid-auto-rows:40px;align-content:start}
.calendar-day{border:0;border-radius:10px;background:transparent;color:#2f2b25;font-size:14px;position:relative;transition:.17s ease}
.calendar-day.available:hover{background:#eee8dd;transform:translateY(-1px)}
.calendar-day:disabled{color:#c7c1b8;cursor:not-allowed}
.calendar-day.today{outline:1px solid rgba(71,153,96,.7)}
.calendar-day.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;border-radius:50%;background:#4ea66c;transform:translateX(-50%)}
.calendar-day.selected{background:#d9ad67!important;color:#1f1a13!important;font-weight:800;box-shadow:0 7px 16px rgba(170,119,44,.28)}

.time-panel{margin-top:14px;padding-top:13px;border-top:1px solid #d9d3ca;position:relative}
.time-panel-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.time-panel-label>span{font-weight:800;font-size:13px}.time-panel-label small{font-size:11px;color:#79736a;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time-placeholder{height:55px;border:1px dashed #cec6ba;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#928b81;background:#f5f2ec;font-size:12px;text-align:center;padding:0 14px}
.time-select-wrap{position:relative}
.time-select-trigger{min-height:58px;border:1px solid #d8d1c7;box-shadow:none;background:#fff}
.time-select-menu{top:calc(100% + 7px);max-height:230px;z-index:120}

.details-step,.confirm-step{justify-content:center}
.details-step .step-header,.confirm-step .step-header{margin-bottom:24px}
.form-grid{width:min(860px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:24px}
.field-group{display:flex;flex-direction:column;gap:7px}.field-group.full{grid-column:1/-1}.field-group label{font-size:13px;font-weight:700}.field-group input,.field-group textarea{width:100%;border:0;outline:none;border-radius:12px;background:rgba(255,255,255,.96);color:#1e1c1a;padding:13px 14px;box-shadow:0 8px 22px rgba(0,0,0,.10)}.field-group input{height:48px}.field-group textarea{resize:vertical;min-height:96px;max-height:150px}.field-group input:focus,.field-group textarea:focus{box-shadow:0 0 0 3px rgba(220,176,105,.45),0 8px 22px rgba(0,0,0,.12)}
.step-actions{width:min(860px,100%);margin:22px auto 0;display:flex;justify-content:space-between;align-items:center;gap:14px}
.primary-button,.secondary-button{min-height:48px;border-radius:12px;padding:0 20px;font-weight:800;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.2s ease}
.primary-button{background:linear-gradient(180deg,#efc779,#d8a653);color:#21190f;box-shadow:0 10px 24px rgba(127,84,24,.24)}.primary-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}.primary-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.secondary-button{background:rgba(30,30,30,.26);border:1px solid rgba(255,255,255,.34);color:#fff}.secondary-button:hover{background:rgba(255,255,255,.12)}

.confirm-form{width:min(900px,100%);margin:0 auto}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.review-grid>div{min-height:74px;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.93);color:#24211d;box-shadow:0 8px 22px rgba(0,0,0,.10)}.review-grid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#837b70;margin-bottom:5px}.review-grid strong{font-size:14px;word-break:break-word}
.confirm-bottom-grid{margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}.consent-stack{display:flex;flex-direction:column;gap:10px}.check-row{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.4}.check-row input{width:18px;height:18px;accent-color:#d9ac65;flex:0 0 auto}.check-row a{text-decoration:underline}.turnstile-wrap{min-width:300px}.field-error{font-size:12px;color:#ffd7d7;margin-top:7px}
.notice{border-radius:12px;padding:10px 12px;font-size:13px}.notice.error{background:rgba(147,38,38,.72);color:#fff}.fatal-notice{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 40px));z-index:150}

.restaurant-contact{position:fixed;right:32px;bottom:22px;text-align:right;z-index:10;text-shadow:0 2px 12px rgba(0,0,0,.5)}.restaurant-contact .contact-line{width:34px;height:1px;background:#e3bd75;margin:0 0 8px auto}.restaurant-contact p{margin:0;color:rgba(255,255,255,.78);font-size:11px}.restaurant-contact a{display:inline-block;margin-top:3px;font-size:17px;font-weight:800;text-decoration:none}

.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,15,15,.52);backdrop-filter:blur(10px);z-index:200;padding:20px}.modal-card{width:min(460px,100%);background:rgba(248,247,243,.98);color:#24211d;border-radius:20px;padding:30px;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.35)}.success-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#e6f5e9;color:#32864c;font-size:30px}.card-eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.16em;font-weight:900;color:#8e6c34}.modal-card h2{margin:0 0 10px;font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:500}.modal-card p{color:#665f56}.success-note{font-size:13px;color:#696259;margin:12px 0 18px}

@media (max-height:780px) and (min-width:760px){
  .site-header{height:72px;padding-top:8px}.site-logo{width:82px}.booking-shell{padding-top:70px}.wizard-card{height:calc(100vh - 92px);min-height:600px}.wizard-body{padding:26px 40px}.visit-step:not(.has-preferences) .visit-header{margin-top:32px}.visit-step:not(.has-preferences) .booking-controls-row{margin-top:38px}.step-header h1{font-size:38px}.availability-panel.is-visible{margin-top:14px}.calendar-card{width:392px;min-height:446px;padding:12px 16px}.calendar-grid{min-height:246px;grid-auto-rows:35px}.calendar-toolbar{height:40px}.restaurant-contact{bottom:12px}
}

@media (max-width:760px){
  body.booking-page{overflow:auto}.site-header{height:72px;padding:10px 16px}.site-logo{width:78px}.language-button{height:40px;min-width:68px}.booking-shell{padding:78px 12px 84px;display:block}.wizard-card{width:100%;height:auto;min-height:calc(100vh - 164px);border-radius:20px}.wizard-body{padding:24px 16px}.wizard-step{min-height:640px}.visit-step:not(.has-preferences) .visit-header{margin-top:26px}.booking-controls-row,.visit-step.has-preferences .booking-controls-row{grid-template-columns:1fr;gap:14px;width:100%;margin-top:26px}.visit-step:not(.has-preferences) .booking-controls-row{margin-top:34px}.availability-panel.is-visible{margin-top:18px}.availability-panel-head{align-items:flex-start;flex-direction:column;gap:8px}.visit-compact-summary{align-self:flex-start}.calendar-card{width:100%;min-height:470px}.calendar-grid{grid-auto-rows:40px}.form-grid{grid-template-columns:1fr;padding:18px}.field-group.full{grid-column:auto}.step-actions{margin-top:18px}.review-grid{grid-template-columns:1fr 1fr}.confirm-bottom-grid{grid-template-columns:1fr}.turnstile-wrap{min-width:0;overflow:hidden}.restaurant-contact{position:static;text-align:center;margin:20px auto 24px}.restaurant-contact .contact-line{margin-left:auto;margin-right:auto}.restaurant-contact p{font-size:11px}.select-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:52vh;border-radius:16px;z-index:300}.time-select-menu{position:fixed}
}

@media (max-width:480px){
  .step-header h1,.step-header h2{font-size:32px}.step-header p{font-size:14px}.review-grid{grid-template-columns:1fr}.calendar-card{padding:12px}.weekday-row,.calendar-grid{gap:4px}.calendar-day{font-size:13px}.step-actions{gap:10px}.primary-button,.secondary-button{padding:0 14px;font-size:13px}
}
/* Compact transition after the visit preferences are chosen. */
.visit-step.has-preferences .visit-header h1{font-size:30px;transition:font-size .4s ease}
.visit-step.has-preferences .visit-header p{margin-top:4px;font-size:13px;opacity:.82;transition:all .4s ease}
.visit-step.has-preferences .booking-controls-row{margin-top:14px}
.availability-panel.is-visible{margin-top:14px}
.calendar-card{min-height:465px}

/* V7 — cleaner staged booking flow */
.select-copy small:empty,.time-select-copy span:empty{display:none}

.visit-header,.booking-controls-row{max-height:220px;opacity:1;overflow:visible;transition:max-height .46s cubic-bezier(.2,.78,.2,1),opacity .28s ease,transform .4s ease,margin .4s ease}
.visit-step.has-preferences .visit-header{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-18px);margin:0}
.visit-step.has-preferences .booking-controls-row{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-18px);margin:0!important}

.availability-panel{width:min(520px,100%)}
.availability-panel.is-visible{margin-top:0!important;max-height:680px}
.availability-panel-head{width:430px;max-width:100%;margin:0 auto 12px;align-items:flex-start}
.availability-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.availability-kicker{font-size:26px}
.availability-panel-head small{font-size:12px;line-height:1.45}
.visit-compact-summary{margin-top:7px;padding:0;border:0;background:transparent;border-radius:0;font-size:13px;font-weight:700;color:#fff}
.change-selection-button{flex:0 0 auto;margin-top:3px;border:1px solid rgba(255,255,255,.34);background:rgba(30,30,30,.20);color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:750;transition:.2s ease}
.change-selection-button:hover{background:rgba(255,255,255,.12)}

.date-time-composer{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}
.calendar-card{width:430px;min-height:442px}
.calendar-grid{min-height:260px}
.time-panel{width:430px;max-width:100%;margin:0;padding:12px 14px 14px;border:0;border-radius:15px;background:rgba(250,249,245,.97);color:#24211d;box-shadow:0 14px 34px rgba(0,0,0,.18);position:relative;animation:timeReveal .28s cubic-bezier(.2,.78,.2,1)}
@keyframes timeReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.time-panel-label{margin-bottom:8px}
.time-panel-label>span{font-size:13px}
.time-panel-label small{color:#79736a}
.time-select-trigger{min-height:56px;border:1px solid #d8d1c7;background:#fff;box-shadow:none}
.time-select-copy strong{font-size:16px}
.time-select-copy span{font-size:11px;color:#7a746b}

.review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.review-grid>div{min-height:78px;padding:13px 15px}
.review-grid strong{font-size:15px}

@media (max-height:780px) and (min-width:760px){
  .availability-panel{width:min(490px,100%)}
  .availability-panel-head,.calendar-card,.time-panel{width:390px}
  .calendar-card{min-height:405px}
  .calendar-grid{min-height:226px;grid-auto-rows:34px}
  .time-panel{padding:10px 12px 12px}
}

@media (max-width:760px){
  .availability-panel-head{width:100%;flex-direction:row;align-items:flex-start;gap:12px}
  .availability-copy{flex:1}
  .change-selection-button{margin-left:auto}
  .calendar-card,.time-panel{width:100%}
  .visit-step.has-preferences .visit-header,.visit-step.has-preferences .booking-controls-row{display:none}
  .review-grid{grid-template-columns:1fr}
}


/* V8 — compact calendar + contained time selector */
.calendar-card{
  width:410px;
  min-height:0!important;
  padding:14px 16px 16px;
}
.calendar-toolbar{height:44px}
.weekday-row{padding:7px 0 8px}
.calendar-grid{
  min-height:0!important;
  grid-auto-rows:42px!important;
  gap:5px 6px;
  align-content:start;
}
.calendar-day{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  justify-self:center;
  align-self:center;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.calendar-day.today::after{bottom:4px}

.date-time-composer{gap:12px}
.time-panel{
  width:410px;
  max-width:100%;
  padding:12px 12px 13px;
  overflow:visible;
}
.time-panel-label{margin-bottom:8px}
.time-select-trigger{min-height:58px}
.time-select-copy strong{font-size:17px}
.time-select-copy span{display:none!important}
.time-select-menu{
  position:static;
  margin-top:8px;
  width:100%;
  max-height:206px;
  overflow:auto;
  padding:7px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-radius:12px;
  box-shadow:none;
  background:#f3f0ea;
  border:1px solid #ded7cc;
}
.time-select-menu.hidden{display:none!important}
.time-select-menu .select-option{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  background:#fff;
  border:1px solid #e2dcd2;
  border-radius:10px;
}
.time-select-menu .select-option:hover{background:#eee8dd;border-color:#d4c7b4}
.time-select-menu .select-option.selected{background:#e8d3af;border-color:#d3a75f}
.time-select-menu .select-option strong{font-size:15px}
.time-select-menu .select-option small{display:none!important}

@media (max-height:780px) and (min-width:760px){
  .availability-panel{width:min(560px,100%)}
  .availability-panel-head{width:410px}
  .calendar-card{width:380px;min-height:0!important;padding:10px 14px 13px}
  .calendar-grid{min-height:0!important;grid-auto-rows:36px!important;gap:4px 5px}
  .calendar-day{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:9px}
  .time-panel{width:380px;padding:10px 11px 11px}
  .time-select-menu{max-height:170px}
}

@media (max-width:760px){
  .calendar-card,.time-panel{width:100%}
  .calendar-grid{grid-auto-rows:minmax(38px,1fr)!important}
  .calendar-day{width:38px;height:38px;min-width:38px;min-height:38px}
  .time-select-menu{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;display:flex;flex-direction:column;max-height:220px}
}

@media (max-width:420px){
  .calendar-grid{gap:4px 2px}
  .calendar-day{width:36px;height:36px;min-width:36px;min-height:36px}
}

/* V9 — one-column time selector aligned with calendar */
.time-select-menu .select-option{
  justify-content:space-between;
  text-align:left;
}
.time-select-menu::-webkit-scrollbar{width:8px}
.time-select-menu::-webkit-scrollbar-thumb{background:#cfc6b9;border-radius:999px;border:2px solid #f3f0ea}
.time-select-menu::-webkit-scrollbar-track{background:transparent}


/* V10 — bounded selects + mobile booking ergonomics */
.time-select-wrap{position:relative;z-index:130}
.time-select-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 8px)!important;
  bottom:auto!important;
  width:100%!important;
  max-height:var(--select-menu-max,220px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:160;
  margin-top:0;
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.time-select-menu.open-up{
  top:auto!important;
  bottom:calc(100% + 8px)!important;
}
.wizard-card,.wizard-body,.wizard-step,.availability-panel,.date-time-composer,.time-panel{overflow:visible}

/* Keep browser / iOS / Android autofill visually consistent with the form. */
.field-group input:-webkit-autofill,
.field-group input:-webkit-autofill:hover,
.field-group input:-webkit-autofill:focus{
  -webkit-text-fill-color:#1e1c1a;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.98) inset;
  transition:background-color 9999s ease-out 0s;
}

@media (max-width:760px){
  .booking-shell{padding-left:10px;padding-right:10px}
  .wizard-body{padding-left:14px;padding-right:14px}
  .booking-controls-row,.visit-step.has-preferences .booking-controls-row{gap:12px}
  .select-field>label{font-size:14px;margin-bottom:7px}
  .select-trigger,.time-select-trigger{min-height:60px;padding:12px 14px 12px 16px}
  .select-copy strong,.time-select-copy strong{font-size:17px}
  .select-copy small{font-size:12px;white-space:normal;line-height:1.3}

  /* Guest, zone and time choices become a safe mobile bottom sheet. */
  .select-menu,
  .time-select-menu,
  .time-select-menu.open-up{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-height:min(58dvh,460px)!important;
    margin:0!important;
    padding:18px 8px calc(10px + env(safe-area-inset-bottom));
    border-radius:20px;
    background:rgba(250,249,245,.995);
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 24px 70px rgba(0,0,0,.38);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:500;
  }
  .select-menu::before,
  .time-select-menu::before{
    content:"";
    display:block;
    width:42px;
    height:4px;
    border-radius:999px;
    background:#c9c2b7;
    margin:-7px auto 10px;
  }
  .select-option,
  .time-select-menu .select-option{
    min-height:50px;
    padding:12px 14px;
    border-radius:12px;
    font-size:16px;
  }
  .select-option strong,.time-select-menu .select-option strong{font-size:16px}
  .time-panel{position:relative;z-index:30}

  /* 16px prevents iOS Safari from zooming the page on focus. */
  .field-group input,.field-group textarea{font-size:16px;min-height:50px}
  .field-group textarea{min-height:100px}
  .form-grid{gap:14px;padding:16px}
}

.select-backdrop{display:none}
@media (max-width:760px){
  .select-backdrop:not(.hidden){
    display:block;
    position:fixed;
    inset:0;
    border:0;
    background:rgba(12,12,12,.38);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:450;
  }
  body.select-sheet-open{overflow:hidden!important}
}


/* V11: minimal booking confirmation */
.success-card{padding:34px 30px 30px}.success-card .card-eyebrow{margin-bottom:10px}.success-card h2{margin-bottom:22px}.success-card .primary-button{width:100%}


/* V14 — mobile card auto-height + multilingual zone descriptions */
.zone-option-copy{display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.zone-option-description{font-size:12px!important;line-height:1.35;color:#69645d!important;white-space:normal!important}
.zone-option-status{font-size:11px!important;color:#9a6f35!important;white-space:normal!important}
.zone-option:disabled .zone-option-status{color:#9a7c73!important}

@media (max-width:760px){
  /* On phones the glass panel follows the real content height instead of
     stretching to a large viewport-based minimum height. */
  .booking-shell{
    min-height:0!important;
    padding-bottom:24px!important;
  }
  .wizard-card{
    height:auto!important;
    min-height:0!important;
  }
  .wizard-body{
    height:auto!important;
    min-height:0!important;
    padding-bottom:24px!important;
  }
  .wizard-step,
  .wizard-step.is-active{
    height:auto!important;
    min-height:0!important;
  }
  .visit-step:not(.has-preferences) .visit-header{margin-top:26px!important}
  .visit-step:not(.has-preferences) .booking-controls-row{margin-bottom:10px}
  .select-option.zone-option{align-items:flex-start}
  .zone-option-copy{padding-right:8px}
  .zone-option-description{font-size:13px!important;line-height:1.42}
}

/* V16 — clean connection fallback dialog */
.connection-error-card{text-align:center;max-width:460px}.connection-error-card h2{margin-bottom:10px}.connection-error-text{margin:0 auto 22px;max-width:340px;color:var(--muted);line-height:1.55}.connection-phone-button{display:flex;justify-content:center;text-decoration:none;width:100%;box-sizing:border-box}.connection-error-card .card-eyebrow{color:#b44a3f}

/* V18 — polished mobile viewport/header + sold-out dialog */
.no-availability-card{max-width:480px;padding:32px 30px 28px}
.no-availability-card .card-eyebrow{color:#a56738}
.no-availability-card h2{font-size:28px;line-height:1.18;margin-bottom:12px}
.no-availability-text{max-width:370px;margin:0 auto 22px!important;line-height:1.55;color:#686158!important}
.no-availability-card .primary-button{width:100%}

@media (max-width:760px){
  html{min-height:100%;background:#171512;scroll-padding-top:96px}
  body.booking-page{
    min-height:100dvh;
    background:transparent;
    overflow-x:hidden;
    isolation:isolate;
  }

  /* iOS Safari changes the visible viewport while its address/tool bars move.
     Explicit dynamic-viewport sizing prevents an exposed strip at the page edge. */
  .background-image,
  .background-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100svh;
  }
  .background-image{
    transform:none;
    background-size:cover;
    background-position:56% center;
  }
  .background-overlay{
    background:
      radial-gradient(circle at 50% 24%,rgba(0,0,0,.12),rgba(0,0,0,.30) 48%,rgba(0,0,0,.47) 100%),
      linear-gradient(180deg,rgba(13,12,11,.50) 0%,rgba(13,12,11,.58) 48%,rgba(13,12,11,.68) 100%);
  }

  /* The top controls now belong to one visual header instead of floating over form text. */
  .site-header{
    height:82px;
    padding:12px 16px 11px;
    align-items:center;
    background:linear-gradient(180deg,rgba(28,25,22,.88),rgba(28,25,22,.72));
    border-bottom:1px solid rgba(255,255,255,.13);
    box-shadow:0 12px 32px rgba(0,0,0,.28);
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
  }
  .site-logo{width:86px;filter:drop-shadow(0 3px 9px rgba(0,0,0,.32))}
  .language-button{
    height:44px;
    min-width:72px;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.38);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  .language-menu{top:50px}

  .booking-shell{
    padding-top:96px!important;
    padding-bottom:calc(26px + env(safe-area-inset-bottom))!important;
  }
  .wizard-card{
    background:rgba(38,36,33,.55);
    border-color:rgba(255,255,255,.20);
    box-shadow:0 24px 60px rgba(0,0,0,.30);
    backdrop-filter:blur(15px) saturate(1.02);
    -webkit-backdrop-filter:blur(15px) saturate(1.02);
  }
  .wizard-body{padding-top:24px!important}
  .details-step .step-header,.confirm-step .step-header{margin-top:2px;margin-bottom:20px}
  .restaurant-contact{
    margin:22px auto max(24px,env(safe-area-inset-bottom));
    padding:0 12px;
  }

  /* Modal cards stay comfortably inside small phones. */
  .modal-backdrop{padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
  .no-availability-card{padding:28px 22px 22px}
  .no-availability-card h2{font-size:26px}
}


/* V18.5 — guest capacity comes from active single tables + special reservation path */
.unique-booking-option{
  margin-top:8px;
  padding-top:14px;
  border-top:1px solid rgba(34,34,34,.10);
  border-radius:0 0 10px 10px;
}
.unique-booking-option strong{color:#765727}
.unique-booking-option small{max-width:260px;line-height:1.35}
.unique-booking-arrow{font-size:20px;font-weight:800;color:#98713a;line-height:1}
.unique-booking-card{max-width:470px;padding:32px 30px 26px}
.unique-booking-card .card-eyebrow{color:#8e6c34}
.unique-booking-card h2{font-size:29px;line-height:1.15;margin-bottom:12px}
.unique-booking-text{margin:0 auto 22px;max-width:370px;line-height:1.55}
.unique-booking-phone{width:100%;box-sizing:border-box;text-decoration:none;font-size:18px;letter-spacing:.02em}
.unique-booking-close{
  width:100%;min-height:46px;margin-top:10px;border:0;background:transparent;color:#665f56;
  font:inherit;font-weight:800;border-radius:12px;cursor:pointer
}
.unique-booking-close:hover{background:#eee9e0}
@media(max-width:760px){
  .unique-booking-card{padding:28px 22px 22px}
  .unique-booking-card h2{font-size:26px}
  .unique-booking-option{padding-top:16px;padding-bottom:14px}
}

/* V18.6 — server-driven public customization */
.restaurant-contact .restaurant-address{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-size:10px;line-height:1.35;max-width:260px}
@media(max-width:760px){.restaurant-contact .restaurant-address{font-size:9px;max-width:220px}}


/* V19.2 — iPhone interaction, compact header and safe contact footer */
@media (max-width:760px){
  html,body{
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
  }
  button,a,input,textarea,select,[role="button"]{touch-action:manipulation}
  input,textarea,select{font-size:16px!important}

  /* Smaller mobile header: more room for the booking card. */
  .site-header{
    height:70px!important;
    padding:7px 14px 7px!important;
  }
  .site-logo{width:76px!important}
  .language-button{
    height:40px!important;
    min-width:66px!important;
    padding:0 12px!important;
    border-radius:11px!important;
  }
  .language-menu{top:44px!important}
  .booking-shell{padding-top:80px!important}

  /* Keep the restaurant contacts centered and scrollable above iOS Safari's
     bottom toolbar. Extra bottom space is intentional. */
  .restaurant-contact{
    position:static!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:calc(100% - 32px);
    text-align:center!important;
    margin:18px auto calc(112px + env(safe-area-inset-bottom))!important;
    padding:0 16px!important;
    gap:2px;
  }
  .restaurant-contact .contact-line{
    width:58px!important;
    margin:0 auto 8px!important;
  }
  .restaurant-contact p{
    font-size:13px!important;
    line-height:1.35!important;
    white-space:nowrap;
  }
  .restaurant-contact .restaurant-address{
    display:block;
    width:auto;
    max-width:100%!important;
    margin-top:1px!important;
    font-size:12px!important;
    line-height:1.4!important;
    white-space:nowrap;
    color:rgba(255,255,255,.80)!important;
  }
  .restaurant-contact a{
    display:block!important;
    margin-top:4px!important;
    font-size:20px!important;
    line-height:1.25!important;
    white-space:nowrap;
  }

  /* Swiping/scrolling must not act like a dismiss gesture. */
  .select-backdrop:not(.hidden){touch-action:pan-y}
  .select-menu,.time-select-menu{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
}


/* V19.2.1 — hard iOS zoom lock while preserving normal page scrolling */
html, body.booking-page {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width:760px){
  html, body, body.booking-page, .booking-shell, .wizard-card {
    touch-action: pan-x pan-y!important;
  }
  input, textarea, select, button {
    font-size: max(16px, 1em);
  }
}