@font-face{font-family:LocalSerif;src:local("Baskerville")} :root{color-scheme:light;--navy:#152b3d;--gold:#edbb58;--cream:#fffaf0}*{box-sizing:border-box}body{margin:0;color:var(--navy);font-family:Arial,Helvetica,sans-serif;background:linear-gradient(to bottom,#fff 0%,#fff 35%,#c5b6a1 100%) fixed}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #2266a0;outline-offset:5px}.hero{min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column;padding:42px 6.5vw 24px;overflow:hidden}.scene{position:absolute;inset:0;z-index:-2;background:url('/assets/golden-lake-anniversary.jpg') center/cover no-repeat}.wordmark{font-family:Georgia,serif;font-size:29px;letter-spacing:-1px;font-weight:bold}.wordmark span{font-weight:normal;font-size:21px}.intro{margin:auto 0;max-width:650px;padding:65px 0 110px}h1{font-family:LocalSerif,Baskerville,Georgia,serif;font-size:clamp(60px,6.3vw,102px);font-weight:400;line-height:1.02;letter-spacing:-3px;margin:0 0 26px} .intro>p{font-size:18px;line-height:1.75;margin:0 0 30px;max-width:510px}.actions{display:flex;gap:15px}button.primary,button.secondary{min-height:52px;padding:15px 25px;border-radius:5px;font-size:15px;font-weight:600;transition:background .18s,transform .18s}.primary{background:var(--gold);border:1px solid #b5862e;color:var(--navy);box-shadow:0 3px 12px #4b361317}.secondary{background:#fffaf055;border:1.5px solid var(--navy);color:var(--navy)}.primary:hover{background:#f7cb74;transform:translateY(-2px)}.secondary:hover{background:#fffaf0b0;transform:translateY(-2px)}footer{font-size:12px;line-height:1.6}footer p{margin:0 0 5px}footer a{color:inherit;font-weight:bold;text-underline-offset:3px}footer small{font-size:10px}dialog{color:var(--navy);background:var(--cream);border:0;border-radius:10px;width:min(500px,calc(100% - 32px));padding:40px;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#10263799;backdrop-filter:blur(5px)}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:34px;margin:15px 0}dialog p{font-size:15px;line-height:1.65}.close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--navy);font-size:30px;width:40px;height:40px}.status{font-size:10px;letter-spacing:2px;font-weight:bold}.fineprint{font-size:12px;border-top:1px solid #d8cdb8;padding-top:18px}form{display:grid;gap:14px}label{font-size:14px;font-weight:bold}select{min-height:48px;padding:10px;background:white;border:1px solid #8b969e;border-radius:4px;color:var(--navy)}[hidden]{display:none!important}#result:empty{display:none}#result{border-left:3px solid #c39947;padding:8px 14px;background:#edbb581a}@media(min-width:1600px){.hero{padding-left:max(6.5vw,calc((100vw - 1500px)/2))}}@media(max-width:700px){
.hero{padding:20px 24px 16px;min-height:100svh}
.scene{background-size:cover;background-position:right center}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,247,229,.87),rgba(255,247,229,.69) 43%,rgba(255,247,229,.05) 73%)}
.wordmark{font-size:25px;flex-shrink:0}
.intro{margin:0;padding:clamp(20px,5svh,44px) 0 18px;max-width:450px;flex:1}
h1{font-size:clamp(46px,12vw,68px);letter-spacing:-2px;margin-bottom:16px}
.intro>p{font-size:15px;line-height:1.55;max-width:330px;margin-bottom:22px}
.desktop{display:none}
.actions{flex-direction:column;gap:10px;max-width:310px}
.actions button{width:100%;min-height:48px;padding:13px 20px}
footer{flex-shrink:0;margin-top:auto;background:#fffaf0d9;padding:8px 10px;margin-left:-10px;width:calc(100% + 20px);border-radius:4px;font-size:11px;line-height:1.4}
footer .legal{font-size:10px;line-height:1.4;margin-top:5px}
dialog{padding:35px 25px}
}
@media(max-width:700px) and (max-height:650px){.hero{padding:14px 20px 12px}.intro{padding-top:18px;padding-bottom:14px}h1{font-size:46px;margin-bottom:12px}.intro>p{font-size:14px;margin-bottom:16px}.actions{gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.legal{display:block;max-width:610px;font-size:10px;line-height:1.6;margin-top:8px}.quantity-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.quantity-row label{flex:1;line-height:1.5}.quantity-control{display:flex;align-items:center;flex-shrink:0;border:1px solid #8b969e;border-radius:5px;background:white}.quantity-control button{border:0;background:transparent;color:var(--navy);width:40px;height:46px;font-size:22px}.quantity-control button:hover:enabled{background:#edbb5833}.quantity-control button:disabled{opacity:.3;cursor:default}.quantity-control input{font:inherit;color:var(--navy);width:42px;min-height:46px;text-align:center;border:0;border-left:1px solid #ddd;border-right:1px solid #ddd;background:white;border-radius:0;appearance:textfield;-moz-appearance:textfield}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}@media(max-width:380px){.quantity-row{gap:8px}.quantity-control button{width:34px}.quantity-control input{width:35px}}

.gift-preview{margin:8px 0 2px;text-align:center}.gift-preview figcaption{font-family:Georgia,serif;font-size:17px;margin-bottom:12px}#gift-images{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-height:280px;overflow-y:auto;scrollbar-width:thin;padding:4px 4px 12px}#gift-images img{display:block;width:104px;height:128px;object-fit:contain;filter:drop-shadow(0 5px 4px #583b1720)}#gift-images.many-gifts img{width:70px;height:88px}dialog{max-height:calc(100svh - 32px);overflow-y:auto}@media(max-width:400px){#gift-images img{width:86px;height:110px}#gift-images{max-height:240px}}
@media(max-width:400px){#gift-images{gap:4px}#gift-images img{width:70px;height:100px}}

.gift-preview figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

button.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}button.primary:disabled:hover{background:var(--gold);transform:none}

.claim-preview{display:flex;align-items:center;justify-content:center;margin:18px 0 22px;min-height:144px}.claim-preview img{display:block;width:min(260px,100%);height:160px;object-fit:contain;filter:drop-shadow(0 7px 5px #583b1720)}

/* Keep gift mugs in one swipeable row at every quantity. */
#gift-images{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none;padding:4px 4px 12px;-webkit-overflow-scrolling:touch}
#gift-images::-webkit-scrollbar{display:none}
#gift-images img{flex:0 0 auto}
#gift-images img:first-child{margin-left:auto}
#gift-images img:last-child{margin-right:auto}
#gift-images.many-gifts img{width:104px;height:128px}
@media(max-width:400px){#gift-images.many-gifts img{width:70px;height:100px}}
/* Constrain the scrolling strip inside the dialog's available width. */
#give-form,.gift-preview{min-width:0;max-width:100%}
.gift-preview{width:100%;overflow:hidden}
#gift-images{width:100%;min-width:0;max-width:100%;justify-content:flex-start}
#gift-images img:first-child{margin-left:0}
#gift-images img:last-child{margin-right:0}
#gift-images:focus-visible{outline:2px solid #2266a0;outline-offset:-2px;border-radius:4px}

#check-availability{width:100%}

/* Fit every selected mug within the fixed preview width. */
#gift-images{display:flex;flex-wrap:nowrap;justify-content:center;overflow:hidden;gap:0;height:148px;max-height:none}
#gift-images img,#gift-images.many-gifts img{flex:0 1 104px;min-width:0;max-width:104px;width:104px;height:128px;object-fit:contain;margin:0}
@media(max-width:400px){#gift-images{height:120px}#gift-images img,#gift-images.many-gifts img{flex-basis:70px;width:70px;max-width:70px;height:100px}}

/* Wrap and scale mugs inside a preview with fixed dimensions. */
#gift-images{flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:4px;padding:0;height:148px;overflow:hidden}
#gift-images img,#gift-images.many-gifts img{flex:0 0 var(--cup-width,104px);width:var(--cup-width,104px);height:var(--cup-height,128px);max-width:none;margin:0;min-width:0}
@media(max-width:400px){#gift-images{height:120px}}

.at-home{text-align:center;margin:0 0 24px}.at-home p{font-size:13px;line-height:1.6;margin:0 0 8px}.at-home-links{display:flex;justify-content:center;align-items:center;gap:14px;font-size:13px}.at-home a{color:var(--navy);text-underline-offset:4px;padding:8px 0}.at-home a:hover{color:#805b1c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

#flow-title:focus{outline:none}
.close:focus:not(:focus-visible){outline:none}
/* Keep the right-hand product in frame across landscape aspect ratios. */
.scene{background-position:right center}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,247,229,.64),rgba(255,247,229,.32) 35%,transparent 63%)}
.secondary{background:#fffaf0d9}
footer{width:fit-content;max-width:610px;padding:10px 12px;margin-left:-12px;border-radius:4px;background:#fffaf0e6}
/* Portrait tablets need the same top-copy/lower-product composition as phones. */
@media(orientation:portrait) and (min-width:701px){
.hero{padding:32px 5vw 24px;min-height:100svh}
.hero:before{background:linear-gradient(180deg,rgba(255,247,229,.93),rgba(255,247,229,.8) 32%,rgba(255,247,229,.08) 57%,transparent 72%)}
.intro{margin:0;flex:1;padding:clamp(36px,5svh,72px) 0 24px;max-width:620px}
h1{font-size:clamp(64px,7.5vw,84px);margin-bottom:22px}
.intro>p{font-size:18px;line-height:1.65;max-width:530px;margin-bottom:26px}
footer{margin-top:auto;flex-shrink:0;font-size:12px}
footer .legal{font-size:11px;line-height:1.5}
}
@media(max-width:700px){
.hero{padding-bottom:max(16px,env(safe-area-inset-bottom));min-height:100svh}
.hero:before{background:linear-gradient(180deg,rgba(255,247,229,.94),rgba(255,247,229,.8) 35%,rgba(255,247,229,.18) 53%,transparent 70%)}
footer{width:calc(100% + 20px);max-width:none;padding:8px 10px;margin-left:-10px;background:#fffaf0ed}
}
@media(max-height:500px) and (orientation:landscape){
.hero{padding:16px 5vw 12px}
.wordmark{font-size:24px}
.intro{padding:20px 0;margin:auto 0;max-width:520px}
h1{font-size:44px;margin-bottom:12px}
.intro>p{font-size:14px;line-height:1.45;margin-bottom:16px}
.actions button{min-height:44px;padding:10px 18px}
footer{max-width:65%;font-size:10px;padding:6px 10px}
footer .legal{font-size:9px;line-height:1.3;margin-top:4px}
}
/* Keep the footer understated and integrated with the scenery. */
.hero footer{background:transparent;border-radius:0;padding:0;margin-left:0;max-width:610px;width:fit-content;color:#152b3d;text-shadow:0 1px 3px #fffaf0,0 0 8px #fffaf0b3}
.hero footer .legal{opacity:.8}
@media(max-width:700px){.hero footer{width:100%;max-width:none;font-size:10px}.hero footer .legal{font-size:9px;line-height:1.4}}
/* Soften the scene behind the footer without a white panel or text glow. */
.hero footer{position:relative;isolation:isolate;text-shadow:none}
.hero footer::before{content:"";position:absolute;inset:-12px -14px;z-index:-1;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:radial-gradient(ellipse at center,#000 50%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 75%)}
/* Feather a light wash into the footer corner, matching the hero treatment. */
.hero footer::before{inset:-36px -40px -32px;backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none;background:radial-gradient(ellipse at bottom left,rgba(255,250,240,.88) 0%,rgba(255,250,240,.66) 42%,rgba(255,250,240,.25) 65%,transparent 82%)}
/* Anchor the footer wash to the scene edges rather than the text box. */
.hero footer::before{content:none}
.hero::after{content:"";position:absolute;left:0;bottom:0;width:min(860px,100%);height:220px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse farthest-side at 0% 100%,rgba(255,250,240,.55) 0%,rgba(255,250,240,.38) 40%,rgba(255,250,240,.15) 70%,transparent 100%)}
@media(max-width:700px){.hero::after{width:130%;height:200px;background:radial-gradient(ellipse farthest-side at 0% 100%,rgba(255,250,240,.64) 0%,rgba(255,250,240,.4) 42%,rgba(255,250,240,.14) 74%,transparent 100%)}}

.payment-note{font-size:12px;line-height:1.5;margin:0;color:var(--navy)}

/* Local claim testing uses the same restrained modal treatment. */
.claim-test-note{font-size:12px;opacity:.75;margin:0 0 12px}
#claim-stock{font-size:14px;margin:0 0 18px}
#claim-form{gap:12px}
#claim-form select{width:100%;min-width:0;font-size:14px}
#claim-flow .claim-help{font-size:12px;line-height:1.5;margin:0;opacity:.8}
#claim-reserved{text-align:center}
#claim-reserved h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:18px 0 10px}
.reserved-cup{display:block;object-fit:contain;width:104px;height:128px;margin:0 auto}
#reservation-location{font-size:14px;margin:12px 0 6px}
#reservation-clock{font-variant-numeric:tabular-nums;font-size:17px;font-weight:600;margin:6px 0 16px}
#claim-reserved .primary{width:100%;margin-top:20px}
.release-reservation{display:block;margin:8px auto 0;background:transparent;border:0;color:var(--navy);min-height:44px;text-decoration:underline;text-underline-offset:4px;font-size:13px}
#claim-feedback{font-size:13px;line-height:1.5}
#claim-feedback:empty{display:none}

/* Give the mobile product breathing room and keep both actions above it. */
@media(max-width:700px) and (orientation:portrait){
  .hero{background:linear-gradient(to bottom,#fff,#f5edda 45%,#b7a58e)}
  .scene{inset:12% 0 0;background-size:auto 100%;background-position:right bottom;mask-image:linear-gradient(to bottom,transparent,#000 18%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%)}
  .actions{flex-direction:row;justify-content:center;gap:10px;max-width:390px;width:100%;margin-inline:auto}
  .actions button{flex:1;min-width:0;min-height:48px;padding:12px 8px;font-size:14px;white-space:nowrap}
  .hero::after{width:100%;height:190px;background:linear-gradient(to top,rgba(255,250,240,.88),rgba(255,250,240,.78) 45%,rgba(255,250,240,.35) 72%,transparent)}
  .hero footer .legal{opacity:1}
}
@media(max-width:350px) and (orientation:portrait){
  .actions{gap:8px}
  .actions button{font-size:12px;padding-inline:5px}
}

/* Match the page and browser edges to the sky above and warm stone below. */
html{background:#fff}
@media(max-width:700px) and (orientation:portrait){
  .hero:before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 12%,rgba(255,247,229,.8) 35%,rgba(255,247,229,.18) 53%,transparent 70%)}
}

/* Local claim steps share the site's existing form and modal styles. */
#claim-test h3{font-family:Georgia,serif;font-weight:400;font-size:24px;margin:14px 0}
#claim-test input{font:inherit;color:var(--navy);width:100%;min-height:46px;border:1px solid #8b969e;border-radius:4px;padding:10px;background:#fff}
#claim-test label{display:block;line-height:1.5}
#claim-test input:focus-visible{outline:3px solid #2266a0;outline-offset:3px}
#claim-test form{gap:12px}
#claim-test .primary{width:100%}
.contact-names{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-names>div{display:grid;gap:8px;min-width:0}
#claim-test .text-button{border:0;background:transparent;color:var(--navy);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:8px;font-size:13px}
.test-inbox,.test-controls{border-top:1px solid #d8cdb8;margin-top:20px;padding-top:16px;font-size:13px}
.test-inbox summary{cursor:pointer;min-height:32px;font-weight:bold}
.test-inbox p{font-size:13px;overflow-wrap:anywhere}
.test-inbox a{display:inline-block;color:var(--navy);padding:10px 0;text-underline-offset:3px}
#table-camera{width:100%;max-height:240px;border-radius:5px;object-fit:cover}
#claim-review,#order-summary,#preparing-summary,#table-location{font-size:14px;line-height:1.6}
#reservation-clock{font-size:13px;margin:4px 0 18px}
@media(max-width:350px){.contact-names{grid-template-columns:1fr}}
/* Long restaurant options must not widen a phone-sized claim form. */
#claim-test,#claim-test form,#claim-test section{min-width:0;max-width:100%}
#claim-test form{grid-template-columns:minmax(0,1fr)}
#claim-test select{width:100%;min-width:0;max-width:100%}
#claim-test p{overflow-wrap:anywhere}

/* A quieter order confirmation, with a table marker inspired by the restaurant. */
.confirmation-modal #flow-title,.confirmation-modal>.status{display:none}
.confirmation-modal .claim-test-note{font-size:11px;line-height:1.4;text-align:center;margin:0 18px 16px}
.confirmation-modal #reservation-clock{font-size:12px;text-align:center;margin:0 0 14px;font-weight:400}
#claim-test .order-confirmation{text-align:center}
#claim-test .order-confirmation h3{font-size:32px;line-height:1.13;margin:8px 0 22px;text-wrap:balance}
.confirmation-cup{display:block;object-fit:contain;width:96px;height:118px;margin:0 auto 18px}
#claim-test .confirmation-drink{font-size:18px;font-weight:600;text-transform:capitalize;margin:0 0 8px}
#claim-test .confirmation-venue{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 4px}
#claim-test .confirmation-park{font-size:12px;line-height:1.4;margin:0;color:#50606a}
#claim-test .confirmation-instruction{font-size:14px;line-height:1.55;max-width:30ch;margin:22px auto}
#claim-test .confirmation-footnote{font-size:12px;line-height:1.5;margin:12px 0 0;color:#50606a}
.table-marker{width:156px;height:156px;flex-shrink:0;border-radius:50%;background:linear-gradient(90deg,#142762 0 19%,#08769d 19% 81%,#142762 81%);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;margin:4px auto 24px;text-align:center}
.table-marker>span,#claim-test .table-marker label{color:#fff;text-transform:uppercase;letter-spacing:.08em;font:700 14px/1.3 Arial,sans-serif;margin:0 0 5px}
.table-marker strong{font:700 52px/1 Arial,sans-serif;font-variant-numeric:tabular-nums}
#claim-test .table-marker input{width:118px;min-height:62px;padding:0 2px;border:0;border-radius:0;border-bottom:2px solid #ffffff85;background:transparent;color:#fff;text-align:center;font:700 48px/1 Arial,sans-serif;caret-color:#fff}
#claim-test .table-marker input::placeholder{color:#ffffffb8;opacity:1}
#claim-test .table-marker input:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:2px}
#claim-table .table-marker{margin:10px auto}
#claim-table .secondary{width:100%}
#claim-table .confirmation-footnote{margin:0}
.table-qr-help{text-align:left;font-size:12px;margin:4px 0 10px}
.table-qr-help summary{cursor:pointer;min-height:40px;padding:12px 0;text-align:center;text-decoration:underline;text-underline-offset:3px}
.table-qr-help label{margin-bottom:6px}
.preparation-status{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;font-size:13px}
.preparation-status>span{width:7px;height:7px;background:#956818;border-radius:50%}
#claim-preparing .test-controls{text-align:left;font-size:12px}
.test-controls summary{cursor:pointer;padding:6px 0;min-height:36px}
#claim-preparing .test-controls button{width:100%;margin-top:8px;font-size:13px}
.confirmation-modal .release-reservation{margin:12px auto 0;font-size:12px}
.confirmation-modal .test-inbox{font-size:12px;margin-top:12px;padding-top:12px}
@media(max-width:400px){#claim-test .order-confirmation h3{font-size:29px}.table-marker{width:144px;height:144px}.confirmation-modal{padding:32px 24px 24px}}

.confirmation-modal{padding:32px}
#claim-table.order-confirmation{gap:10px}
#claim-table.order-confirmation h3{margin-bottom:4px}
@media(max-width:400px){.confirmation-modal{padding:32px 24px 24px}}

.private-test-banner{position:fixed;inset:auto 12px 12px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#152b3d;color:#fffaf0;border-radius:5px;font-size:12px;box-shadow:0 4px 18px #0003}.private-test-banner a{color:inherit;text-underline-offset:3px;padding:6px 0}.private-test-banner span{line-height:1.4}

.private-test-banner nav{display:flex;gap:14px;flex-shrink:0}.private-test-banner [aria-current]{font-weight:700;text-decoration:none}.live-test-notice{max-width:44ch;font-size:14px;line-height:1.6;padding:14px 0}.actions button:disabled{cursor:not-allowed;opacity:.55;transform:none}@media(max-width:600px){.private-test-banner{flex-wrap:wrap;gap:4px}.private-test-banner nav{width:100%;justify-content:space-between}}

.live-test-setup{max-width:510px;padding:20px;margin-top:22px;background:#fffaf0ed;border-radius:6px}.live-test-setup h2{font:400 27px/1.2 Georgia,serif;margin:0 0 12px}.live-test-setup p,.live-test-setup li{font-size:14px;line-height:1.5}.live-test-setup ul{padding-left:18px;margin-bottom:0}.live-test-setup li{margin:8px 0}

/* The native selector preserves keyboard and mobile country-picker behavior. */
.phone-field{display:flex;align-items:stretch;gap:0;min-width:0;width:100%;border:1px solid #8b969e;border-radius:5px;background:#fff}
.phone-country{position:relative;display:flex;align-items:center;gap:7px;padding:0 25px 0 11px;flex:none;border-right:1px solid #d8d5cf;min-width:98px}
.phone-country:after{content:"";position:absolute;right:10px;top:calc(50% - 3px);width:5px;height:5px;border-right:1px solid #152b3d;border-bottom:1px solid #152b3d;transform:rotate(45deg)}
.phone-country img{display:block;object-fit:contain;box-shadow:0 0 0 1px #152b3d15}
.phone-country span{font:14px Arial,sans-serif;white-space:nowrap}
.phone-country select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.phone-field input[type=tel]{flex:1;width:0;min-width:0;min-height:48px;margin:0;padding:12px;border:0;border-radius:0 5px 5px 0;background:transparent;font:16px Arial,sans-serif;color:#152b3d}
.phone-country:focus-within{outline:3px solid #2266a0;outline-offset:2px;border-radius:4px;z-index:1}

.field-error{color:#9a3023;font-size:13px!important;line-height:1.45!important;margin:4px 0 2px!important;font-weight:400}input[aria-invalid="true"],select[aria-invalid="true"]{border-color:#9a3023!important}.phone-field:has(input[aria-invalid="true"]){border-color:#9a3023}.contact-names .field-error{margin-top:6px!important}

/* Keep verification copy and secondary actions close to their section. */
#claim-test #claim-verify{gap:8px}
#claim-test #claim-verify h3{margin:4px 0 2px}
#claim-test #verify-destination{margin:0 0 10px;line-height:1.55}
#claim-test #edit-contact{margin:0;padding:8px;min-height:44px}
#claim-test:has(#claim-verify:not([hidden]))>.release-reservation{margin:0 auto;min-height:44px}

/* Match claim dropdowns to the text fields, including Safari's native control. */
#claim-test select:not(.phone-country select),.owner-panel #steps select{
  appearance:none;-webkit-appearance:none;
  box-sizing:border-box;width:100%;min-height:46px;
  padding:10px 40px 10px 12px;
  border:1px solid #8b969e;border-radius:4px;
  background-color:#fff;
  background-image:url('/assets/select-chevron.svg');
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
  color:var(--navy);font:inherit;line-height:1.5;
  cursor:pointer;
}
#claim-test select:focus-visible,.owner-panel #steps select:focus-visible{outline:3px solid #2266a0;outline-offset:3px}
#claim-test select:disabled,.owner-panel #steps select:disabled{opacity:.55;cursor:not-allowed}

.drink-options{border:0;padding:0;margin:4px 0;min-width:0}
.drink-options legend{font-size:14px;font-weight:700;line-height:1.5;padding:0;margin-bottom:10px}
.drink-options-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.drink-option{position:relative;cursor:pointer;min-width:0}
.drink-options input[type=radio],#claim-test .drink-options input[type=radio]{position:absolute;width:1px;min-height:1px;height:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden}
.drink-option-content{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 12px;border:1px solid #c7bda9;border-radius:6px;background:#fffaf066;color:#152b3d;font-size:14px;font-weight:600;text-align:center}
.drink-option img{display:block;max-width:100%;width:96px;height:120px;object-fit:contain}
.drink-option input:checked+.drink-option-content{border-color:#a57925;background:#edbb582e;box-shadow:inset 0 0 0 1px #a57925}
.drink-option input:focus-visible+.drink-option-content{outline:3px solid #2266a0;outline-offset:3px}
.drink-option:hover .drink-option-content{background:#edbb581a}
@media(max-width:400px){.drink-options-row{gap:7px}.drink-option img{height:96px}.drink-option-content{padding:8px 3px 10px}}

/* Keep reservation and arrival deadlines prominent across claim steps. */
#claim-test #reservation-clock,.confirmation-modal #reservation-clock{
  text-align:center;font-size:clamp(19px,5vw,23px);font-weight:600;
  line-height:1.4;font-variant-numeric:tabular-nums;margin:8px 0 20px;
}

/* One persistent notice keeps the customer flow free of repeated test labels. */
.private-test-banner{inset:0 0 auto;z-index:100;padding:10px 18px;border-radius:0;box-shadow:0 2px 10px #0002}
.has-test-banner{padding-top:var(--test-banner-height,44px)}
.has-test-banner .hero{min-height:calc(100svh - var(--test-banner-height,44px))}
.modal-test-banner{position:fixed;inset:0 0 auto;padding:12px 18px;min-height:44px;background:#152b3d;color:#fffaf0;font:12px/1.5 Arial,sans-serif;text-align:center;z-index:100;pointer-events:none}

.has-test-banner dialog{max-height:calc(100svh - 112px)}

/* A quiet availability marker and a separate reservation note. */
#claim-test #claim-stock{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;max-width:100%;margin:2px auto 22px;padding:9px 16px;border:1px solid #d5bc825c;border-radius:999px;background:#edbb5817;color:#654a1d;font-size:14px;line-height:1.4;text-align:center}
#claim-stock strong{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
#claim-test #claim-stock.is-empty{background:#152b3d08;border-color:#152b3d20;color:#50606a}
#claim-flow #claim-welcome>.claim-help{max-width:36ch;margin:13px auto 0;text-align:center;font-size:12px;line-height:1.65;color:#59636a;opacity:1}
#claim-welcome>.claim-help strong{color:#334959;font-weight:600;white-space:nowrap}

/* The same banner stays in the top layer, outside the modal's scroll area. */
.private-test-banner,.private-test-banner[popover]{
  position:fixed;inset:0 0 auto;margin:0;width:100%;max-width:none;
  height:auto;max-height:none;box-sizing:border-box;border:0;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 18px;background:#152b3d;color:#fffaf0;
  font:12px/1.5 Arial,sans-serif;text-align:center;overflow:visible;
}
.private-test-banner[popover]:not(:popover-open){display:none}
.private-test-banner nav{width:auto;justify-content:center;flex-wrap:wrap;gap:14px}
.private-test-banner::backdrop{background:transparent;pointer-events:none}
.has-test-banner dialog{max-height:calc(100dvh - var(--test-banner-height,44px) - 40px);margin-block:auto;inset-block-start:var(--test-banner-height,44px)}

#claim-test #claim-waiting #reservation-clock{margin:20px 0 12px}
#claim-test #claim-waiting .confirmation-instruction{margin:12px auto 22px}

#table-arrival-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 16px;margin-top:14px}
#claim-test #table-arrival-actions #reservation-clock{margin:0;font-size:12px;font-weight:400;line-height:1.5;color:#59636a;text-align:center}
#claim-test #table-arrival-actions .release-reservation{display:inline-block;margin:0;min-height:44px;padding:8px 0;font-size:12px}

.claim-limit>p:first-child{line-height:1.65;margin:0 0 24px}.claim-limit .claim-help{margin:0 0 12px}.claim-limit .primary{width:100%}

.claim-limit-prompt{color:#152b3d;font-size:18px;font-weight:600;line-height:1.4;margin:24px 0 12px}

#claim-test>#reservation-clock{margin:22px 0 2px}
#claim-test>#reservation-clock+#cancel-claim{margin-top:0}

/* A single gift illustration keeps claiming focused on the gesture. */
#claim-test #claim-stock{display:flex;align-items:center;justify-content:center;width:100%;margin:8px 0 24px;padding:0;border:0;border-radius:0;background:none}
#claim-test #claim-stock img{display:block;width:180px;max-width:60%;height:216px;object-fit:contain}
dialog[data-claim-step="claim-welcome"] #flow-title{text-align:center}
@media(max-width:480px){#claim-test #claim-stock img{width:160px;height:192px}}

/* Error rows must not stretch neighboring name fields. */
.contact-names>div{align-content:start;align-items:start}
#claim-test .contact-names input{height:46px}