/* Manage my booking: the redesign's sand page, navy ink, teal for actions that keep the booking, coral only
   on the big "move" button; cancelling is deliberately quieter. Built for a phone first. */
:root{
  --sand:#FBF6EC; --paper:#FFFFFF; --navy:#163A54; --soft:#4E6577; --line:rgba(22,58,84,.14);
  --coral:#FF6B57; --coral-ink:#2A1008; --teal:#127C7A; --foam:#E6F5F4; --gold:#F2B441; --in:#1E8E5A; --red:#A32A1B;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif; --body:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--sand);color:var(--navy);font:17px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
h1,h2{font-family:var(--display);line-height:1.1}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.top{background:var(--navy);padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--sand);text-decoration:none;max-width:640px;margin:0 auto}
.brand img{width:48px;height:48px;border-radius:12px;display:block}
.brand b{display:block;font:800 19px/1 var(--display)}
.brand small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C6DCE3}
main{max-width:640px;margin:0 auto;padding:20px 16px 60px;display:grid;gap:14px}
.loading{text-align:center;color:var(--soft);padding:40px 0}
.card{background:var(--paper);border-radius:20px;padding:20px;display:grid;gap:12px}
.card h1{font-size:30px;font-weight:800}
.card h2{font-size:23px;font-weight:800}
.card.quiet{background:transparent;border:2px solid var(--line)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.ticket{border:2px solid var(--navy)}
.ticket dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ticket dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.ticket dd{margin:2px 0 0;font:700 18px/1.25 var(--display)}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.day{flex:none;scroll-snap-align:start;min-height:48px;padding:8px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
.day.on{background:var(--navy);border-color:var(--navy);color:var(--sand)}
.other{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--soft);font-weight:700}
.other input{min-height:44px;border-radius:12px;border:2px solid var(--line);padding:6px 10px;background:#fff}
.note{color:var(--soft);font-weight:700}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.time{min-height:48px;border-radius:999px;border:2px solid var(--navy);background:#fff;font-weight:800;cursor:pointer}
.time.on{background:var(--navy);color:var(--sand)}
.time[disabled]{opacity:.4;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 22px;border-radius:999px;border:2px solid transparent;font:700 18px/1.1 var(--display);cursor:pointer;text-decoration:none;text-align:center}
.btn.go{background:var(--coral);color:var(--coral-ink)}
.btn.line{border-color:var(--navy);color:var(--navy);background:#fff}
.btn.danger{background:var(--navy);color:var(--sand)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.link{background:none;border:0;padding:4px 0;color:var(--teal);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start}
.err{color:var(--red);font-weight:800}
.done{text-align:center;justify-items:center}
.tick{width:84px;height:84px;border-radius:50%;background:var(--in) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/50px no-repeat}
@media (max-width:420px){.ticket dl{grid-template-columns:minmax(0,1fr)}.btns .btn{flex:1 1 100%}}

.area{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.area i{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.ok{color:var(--in);font-weight:800}
.small{font-size:15px;color:var(--soft)}
.stepper{display:flex;align-items:center;gap:18px}
.stepper button{width:56px;height:56px;border-radius:50%;border:2px solid var(--navy);background:#fff;font:800 26px var(--display);cursor:pointer;line-height:1}
.stepper button[disabled]{opacity:.35;cursor:not-allowed}
.stepper output{font:800 40px var(--display);min-width:60px;text-align:center;font-variant-numeric:tabular-nums}
.sum{background:var(--foam);border-radius:16px;padding:14px 16px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .big{font:800 22px var(--display)}

/* Food and notes (parties) */
.pick-food{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 16px}
.pick-food button{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--navy);font:inherit;cursor:pointer}
.pick-food button b{font:800 18px var(--display)}
.pick-food button span{font-size:14px;color:var(--soft)}
.pick-food button[aria-pressed="true"]{border-color:var(--navy);background:var(--foam)}
.note-l{display:block;font-weight:800;margin:6px 0 6px}
#party-note{width:100%;box-sizing:border-box;min-height:88px;border-radius:12px;border:2px solid var(--line);padding:10px 12px;font:16px/1.45 var(--body);color:var(--navy);resize:vertical;margin-bottom:14px}
@media (max-width:520px){.pick-food{grid-template-columns:minmax(0,1fr)}}
/* "Change or cancel a booking": the email box and button wrap on a phone */
main>*{min-width:0}
#find{flex-wrap:wrap}
#find label{flex:1 1 100%}
#find input{flex:1 1 200px;min-width:0}
#find .btn{flex:1 1 auto}