/* Harper & Rose, booking flow scoped styles. Loaded after style.css on book.html. */

/* Floor plan, realistic top-down restaurant */
.floorplan{
  width:100%;height:auto;max-height:720px;display:block;
  background:#F6EFDD;
  border-radius:18px;touch-action:pan-x pan-y pinch-zoom;
  box-shadow:inset 0 0 0 1px rgba(107,68,35,0.15), 0 10px 30px rgba(43,31,24,0.08);
}
.fp-floor-bg{fill:url(#fpWood)}
.fp-booth-back{fill:#8B5E3A;stroke:#4A3B30;stroke-width:1.2}

/* Table, wood top with seam */
.table{cursor:pointer;outline:none}
.table:focus-visible .table-body{stroke:var(--green);stroke-width:2.5}
.table .table-body{
  fill:url(#fpTableWood);
  stroke:#6B4423;stroke-width:1.2;
  transition:fill .2s, stroke .2s, stroke-width .2s, filter .25s;
  filter:drop-shadow(0 3px 5px rgba(43,31,24,0.22));
}
.table .chair .chair-seat{
  fill:#E8D9B3;stroke:#9F8963;stroke-width:0.8;
  transition:fill .2s, stroke .2s;
}
.table .chair .chair-back{
  fill:none;stroke:#8B6E44;stroke-width:2;stroke-linecap:round;
  transition:stroke .2s;
}
.table .t-chip{fill:rgba(255,255,255,0.78);stroke:rgba(107,68,35,0.22);stroke-width:1}
.table .t-label{fill:var(--green);font:700 12px var(--sans);text-anchor:middle;pointer-events:none}
.table .t-cap{fill:rgba(74,59,48,0.9);font:600 9px var(--sans);text-anchor:middle;pointer-events:none;letter-spacing:0.18em;text-transform:uppercase}

.table:hover .table-body{stroke:var(--gold);stroke-width:2;filter:drop-shadow(0 4px 10px rgba(196,85,61,0.28))}
.table:hover .chair-seat{fill:#F0E0B8}

.table[data-state="selected"] .table-body{
  stroke:var(--gold);stroke-width:3;
  filter:drop-shadow(0 0 12px rgba(196,85,61,0.55));
  animation:tblPulse 1.6s ease-in-out infinite;
}
@keyframes tblPulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(196,85,61,0.3))}
  50%{filter:drop-shadow(0 0 14px rgba(196,85,61,0.65))}
}
.table[data-state="selected"] .t-chip{fill:var(--gold)}
.table[data-state="selected"] .t-label{fill:#fff}
.table[data-state="selected"] .chair-seat{fill:var(--gold-soft);stroke:var(--gold)}

.table[data-state="booked"] .table-body{fill:url(#fpStripe);stroke:#9b9380;filter:none}
.table[data-state="booked"] .chair-seat{fill:#bbb0a0;stroke:#9e9584}
.table[data-state="booked"] .chair-back{stroke:#9e9584}
.table[data-state="booked"] .t-chip{fill:rgba(255,255,255,0.6)}
.table[data-state="booked"] .t-label{fill:#7a7565}
.table[data-state="booked"]{cursor:not-allowed}

.table[data-state="small"]{opacity:0.38;cursor:not-allowed}

.tooltip{max-width:220px;white-space:normal;line-height:1.35}
.tooltip strong{color:var(--gold-soft);font-weight:600}

/* Legend bigger */
.fp-legend{gap:18px;margin-bottom:14px;padding:10px 4px;font-size:12.5px}
.fp-legend .fp-sw{border-radius:6px}

/* Mobile table list */
.fp-mobile-list{display:none}
@media (max-width:720px){
  .fp-wrap .floorplan{max-height:320px;opacity:0.9}
  .fp-mobile-list{display:grid;gap:8px;margin-top:14px}
  .fp-tbl-row{
    display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    cursor:pointer;transition:all .15s;text-align:left;
  }
  .fp-tbl-row:hover{border-color:var(--gold-soft)}
  .fp-tbl-row.is-sel{border-color:var(--gold);background:rgba(196,85,61,0.06)}
  .fp-tbl-row.is-booked{opacity:0.4;cursor:not-allowed}
  .fp-tbl-row.is-small{opacity:0.35;cursor:not-allowed}
  .fp-tbl-num{font-family:var(--serif);font-size:20px;color:var(--green);text-align:center;background:var(--cream-2);border-radius:8px;padding:4px 0}
  .fp-tbl-info{font-size:13px;color:var(--ink-2);line-height:1.3}
  .fp-tbl-info b{color:var(--green);display:block;font-size:14px}
  .fp-tbl-badge{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
}

/* Confirmation polish entry animation */
.confirm-card{animation:confEnter .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes confEnter{
  from{opacity:0;transform:translateY(12px) scale(0.98)}
  to{opacity:1;transform:none}
}
.wait-card{
  margin:26px 0 14px;
  background:linear-gradient(135deg, var(--cream-2), #efe2b8);
  border-radius:14px;padding:20px 22px;
  display:flex;gap:16px;align-items:center;text-align:left;
  border:1px solid rgba(196,85,61,0.15);
}
.wait-card .wait-ico{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;
  background:var(--green);color:var(--cream);display:grid;place-items:center;
}
.wait-card .wait-ico svg{width:26px;height:26px}
.wait-card h4{font-family:var(--serif);font-size:18px;color:var(--green);margin:0 0 4px;font-weight:500}
.wait-card p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}
.wait-card a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media (max-width:400px){
  .fp-legend{font-size:11px;gap:10px}
  .fp-summary{flex-direction:column;align-items:flex-start}
}

/* ============ Reduced motion gates (item 4) ============ */
@media (prefers-reduced-motion: reduce){
  .table[data-state="selected"] .table-body{animation:none !important}
  .confirm-card{animation:none !important}
  .fp-tbl-row,.table .table-body,.table .chair{transition:none !important}
}

/* ============================================================
   MOBILE-FIRST OPTIMISATION PASS
   Target: 320-414px primary, refinements up to 720px.
   ============================================================ */

/* Mobile stepper (progress bar + step label). Hidden on desktop. */
.stepper-mobile{display:none}

/* Error micro-copy under inputs */
.field-err{
  margin:4px 0 0;font-size:12.5px;color:var(--red);font-weight:500;
  display:flex;align-items:center;gap:6px;
}
.field-err::before{content:"!";display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-weight:700;font-style:normal}
.field input.is-err, .field textarea.is-err{border-color:var(--red);box-shadow:0 0 0 3px rgba(178,58,58,0.1)}

/* Occasion chip selector */
.occ-chips{display:flex;flex-wrap:wrap;gap:8px}
.occ-chip{
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  padding:10px 16px;border-radius:999px;font:600 14px var(--sans);
  cursor:pointer;transition:all .15s;min-height:44px;
}
.occ-chip:hover{border-color:var(--gold-soft)}
.occ-chip.is-on{background:var(--green);color:var(--cream);border-color:var(--green)}

/* Calendar: peak day dot */
.cal-day{position:relative}
.cal-day.is-peak::after{
  content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold);
}
.cal-day.is-sel.is-peak::after{background:var(--cream)}

/* Card number letter spacing (group of 4 feel) */
.card-num{letter-spacing:0.18em;font-variant-numeric:tabular-nums}

/* Floor plan toolbar (filter toggle) */
.fp-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.fp-filter{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--green);font-weight:600;cursor:pointer;
  min-height:40px;user-select:none;
}
.fp-filter input{accent-color:var(--green);width:16px;height:16px}
.fp-filter:hover{border-color:var(--gold-soft)}

/* Mobile list: status pill on the right */
.fp-tbl-row .fp-tbl-pill{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--cream-2);color:var(--green);font-weight:700;
}
.fp-tbl-row.is-booked .fp-tbl-pill{background:#e4e1d6;color:#7a7565}
.fp-tbl-row.is-small .fp-tbl-pill{background:#ebe6d6;color:#8a7f5e}
.fp-tbl-row.is-sel .fp-tbl-pill{background:var(--gold);color:#fff}
.fp-tbl-row.is-booked .fp-tbl-info b{text-decoration:line-through}

/* Pay summary collapse on mobile */
.pay-summary-toggle{display:none}

/* Sticky step-nav wrapper behaviour + safe area padding */
.book-wrap{padding-bottom:env(safe-area-inset-bottom)}

/* ============ Tablet / small-desktop tweaks (up to 720) ============ */
@media (max-width:720px){
  /* Two-column conf grid becomes one wide, metadata rows */
  .conf-grid{grid-template-columns:1fr}
  .conf-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
  .conf-item dt{margin:0;flex-shrink:0}
  .conf-item dd{text-align:right;font-size:17px}
  .conf-actions{flex-direction:column;gap:10px}
  .conf-actions .btn-gold, .conf-actions .btn-ghost{width:100%;justify-content:center;min-height:52px}

  .wait-card{flex-direction:column;text-align:center;padding:18px}
  .wait-card .wait-ico{margin:0 auto}

  /* Confirm card padding reduction */
  .confirm-card{padding:34px 22px;border-radius:18px}
  .confirm-card h1{font-size:30px}
  .confirm-check{width:72px;height:72px}
  .confirm-check svg{width:34px;height:34px}
  .ref-box{font-size:22px;padding:14px 16px;margin-bottom:22px}
}

/* ============ Mobile (<=560px) heavy rewrite ============ */
@media (max-width:560px){

  /* Topbar: tighter, wrap, mobile progress bar */
  .book-top{padding:12px 14px;gap:10px;flex-wrap:wrap}
  .book-top .brand-h{gap:8px}
  .book-top .brand-name{font-size:16px}
  .book-close{font-size:12px;padding:6px 8px;order:2}
  .stepper{display:none}
  .stepper-mobile{
    display:block;order:10;width:100%;margin-top:4px;
  }
  .sm-track{height:4px;background:#e4dcc5;border-radius:999px;overflow:hidden}
  .sm-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--green));border-radius:999px;transition:width .3s cubic-bezier(.2,.8,.2,1)}
  .sm-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
  .sm-count{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .sm-label{font-family:var(--serif);font-size:14px;color:var(--green)}

  .book-main{padding:22px 14px 140px}
  .step-head{margin-bottom:22px}
  .step-head h1{font-size:24px;line-height:1.2}
  .step-head p{font-size:13.5px;line-height:1.4}

  /* Step 1: calendar + party stacked */
  .split{grid-template-columns:1fr;gap:16px}
  .cal{padding:14px 12px;border-radius:14px}
  .cal-head{margin-bottom:10px}
  .cal-title{font-size:18px}
  .cal-nav button{width:44px;height:44px;border-radius:10px}
  .cal-grid{gap:2px}
  .cal-dow{font-size:10px;padding:4px 0}
  .cal-day{font-size:15px;border-radius:10px;min-height:44px;font-weight:500}
  .cal-day.is-today{outline:1.5px solid var(--gold)}
  .cal-day[disabled]{background:rgba(107,68,35,0.04);text-decoration:none;color:#bfb89f}
  .cal-legend{font-size:11px;gap:10px;flex-wrap:wrap;margin-top:10px}

  .party-card{padding:18px 16px;border-radius:14px}
  .party-card h3{font-size:18px}
  .party-card p{font-size:13px;margin-bottom:14px}
  .party-counter{margin:10px 0 14px;gap:16px}
  .party-counter button{
    width:56px;height:56px;border-radius:14px;font-size:24px;
  }
  .party-count{font-size:44px;min-width:56px}

  /* Step 2: slot pills, 3 columns, 48px tall */
  .slot-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .slot{
    min-height:60px;padding:8px 6px;border-radius:12px;gap:2px;
  }
  .slot-time{font-size:15px;font-family:var(--serif)}
  .slot-avail{font-size:9.5px;letter-spacing:0.02em;line-height:1.1}
  .slot[disabled] .slot-time{text-decoration:line-through}
  .service-block{margin-bottom:18px}
  .service-block h3{font-size:18px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
  .service-block h3::after{content:"";flex:1;height:1px;background:var(--line)}

  /* Step 3: floor plan */
  .fp-wrap{padding:12px;border-radius:14px}
  .fp-wrap .floorplan{max-height:220px;border-radius:10px}
  .fp-toolbar{margin-bottom:10px}
  .fp-legend{gap:10px;font-size:10.5px;margin-bottom:10px;padding:6px 2px}
  .fp-summary{padding:12px 14px;font-size:13px;border-radius:10px}
  .fp-summary strong{font-size:17px}
  .fp-mobile-list{gap:8px;margin-top:12px}
  .fp-tbl-row{
    grid-template-columns:48px 1fr auto;gap:10px;padding:12px;min-height:64px;border-radius:12px;
  }
  .fp-tbl-num{font-size:18px;padding:6px 0}
  .fp-tbl-info{font-size:13px}
  .fp-tbl-info b{font-size:14px}
  .fp-tbl-row.is-sel{box-shadow:0 0 0 2px var(--gold) inset}
  .fp-tbl-row.is-flash{animation:rowFlash .9s ease}
  @keyframes rowFlash{0%,100%{background:#fff}40%{background:rgba(196,85,61,0.14)}}

  .alt-strip{padding:14px;margin-top:16px;border-radius:12px}
  .alt-strip h4{font-size:15px;margin-bottom:10px}
  .alt-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;gap:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .alt-chips::-webkit-scrollbar{display:none}
  .alt-chip{
    flex-shrink:0;scroll-snap-align:start;min-height:44px;padding:10px 14px;font-size:13px;border-radius:999px;
  }

  /* Step 4: form */
  .form-grid{grid-template-columns:1fr;gap:14px}
  .field label{font-size:11px;letter-spacing:0.14em}
  .field input, .field select, .field textarea{
    /* 16px prevents iOS zoom on focus */
    font-size:16px;padding:14px 14px;min-height:48px;border-radius:12px;
  }
  .field textarea{min-height:96px}
  .addons{gap:8px}
  .addon{padding:14px 14px;border-radius:12px;min-height:56px}
  .addon input{width:22px;height:22px;flex-shrink:0}
  .addon-name{font-size:14px;line-height:1.3}
  .addon-price{font-size:14px}
  .occ-chip{padding:10px 14px;font-size:14px;min-height:44px}

  /* Step 5: pay */
  .pay-grid{grid-template-columns:1fr;gap:16px}
  .pay-summary{padding:0;border-radius:14px;overflow:hidden;position:static}
  .pay-summary-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;background:var(--cream-2);border:0;padding:14px 18px;
    font:600 14px var(--sans);color:var(--green);cursor:pointer;text-align:left;
  }
  .pay-summary-toggle strong{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:400;margin-left:auto}
  .pay-summary-toggle .pst-chev{transition:transform .2s;color:var(--green);flex-shrink:0}
  .pay-summary-toggle[aria-expanded="true"] .pst-chev{transform:rotate(180deg)}
  .pay-summary #paySumBody{display:none;padding:18px 20px 20px}
  .pay-summary.is-open #paySumBody{display:block}
  .pay-summary h3{display:none}
  .sum-row{font-size:14px;padding:8px 0}
  .sum-row.total{font-size:16px;padding-top:12px}
  .sum-row.total strong{font-size:24px}

  .card-form{padding:18px 16px;border-radius:14px}
  .card-form h3{font-size:18px}
  .card-form .hint{font-size:12px;margin-bottom:16px}
  .card-grid{gap:14px}

  /* Sticky step-nav on mobile */
  .step-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    margin:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
    background:rgba(250,247,240,0.96);
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    border-top:1px solid var(--line);
    display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  }
  .btn-back{justify-self:start;font-size:13px;padding:10px 12px}
  .btn-next{
    justify-self:stretch;width:100%;justify-content:center;min-height:52px;
    padding:14px;font-size:15px;border-radius:14px;
  }
  /* When only a back button (step 5 empty span) */
  .step-nav > span:empty{display:none}
  .step[data-step="5"] .step-nav{grid-template-columns:1fr}

  /* Pay button: extra punch, but not fixed (sticky nav below already there).
     Make it full-width at 56px within the form. */
  .pay-btn{min-height:56px;font-size:16px;padding:16px;border-radius:14px;margin-top:16px}

  /* Safe-area padding on body so sticky nav never covers last field */
  .book-main{padding-bottom:130px}

  /* Toast position: bottom centre clear of sticky nav */
  .toast-stack{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;align-items:center}
  .toast{min-width:0;width:100%;max-width:420px;margin:0 auto;transform:translateY(140%)}
  .toast.is-on{transform:none}
}

/* Extra-narrow (<=360) */
@media (max-width:360px){
  .cal-day{font-size:14px}
  .slot-grid{gap:6px}
  .slot{min-height:56px}
  .slot-time{font-size:14px}
  .step-head h1{font-size:22px}
  .party-counter button{width:52px;height:52px}
  .fp-tbl-row{grid-template-columns:44px 1fr auto;padding:10px;min-height:60px}
  .occ-chip{padding:9px 12px;font-size:13px}
}

/* iPad/small laptop: keep desktop pattern but tighten */
@media (min-width:561px) and (max-width:960px){
  .slot-grid{grid-template-columns:repeat(4,minmax(120px,1fr))}
  .form-grid{grid-template-columns:1fr 1fr}
}