/* Demo booking (#560): a dark section with a light work card. Loaded only by /shopify/. */
.demo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.demo-intro{position:sticky;top:40px}
.demo-card{--focus:var(--navy);background:var(--white);color:var(--ink);color-scheme:light;border-radius:14px;padding:32px;box-shadow:0 24px 60px #0006}
.demo-card [hidden]{display:none!important}
/* Without JavaScript the form cannot book — hide it rather than let a submit go anywhere. */
html:not(.js) .demo-form{display:none}
.demo-form{display:grid;gap:30px}
.demo-group,.demo-choices{border:0;margin:0;padding:0;min-width:0}
.demo-group>legend{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:16px;font-family:SofiaCondensed,Sofia,sans-serif;font-size:24px;font-weight:700;color:var(--ink)}
.demo-step{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--white);font-family:Sofia,sans-serif;font-size:15px;font-weight:700}
.demo-choices+.demo-choices{margin-top:18px}
.demo-choices>legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--ink)}
.demo-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.demo-field{display:grid;gap:6px;align-content:start}
.demo-field label{font-size:15px;font-weight:600;color:var(--ink)}
.demo-field small{font-size:inherit;font-weight:400;color:var(--muted)}
.demo-field input{font:inherit;font-size:17px;font-weight:400;min-height:48px;width:100%;padding:11px 14px;border:1px solid var(--line-soft);border-radius:6px;background:#fff;color:var(--ink)}
.demo-field textarea{font:inherit;font-size:17px;font-weight:400;min-height:96px;width:100%;padding:11px 14px;border:1px solid var(--line-soft);border-radius:6px;background:#fff;color:var(--ink);resize:vertical}
.demo-field input::placeholder{color:#7A8C97}
.demo-field input:hover,.demo-field textarea:hover{border-color:#8FA3AF}
.demo-field input[aria-invalid="true"],.demo-field textarea[aria-invalid="true"]{border-color:var(--speedy-fg)}
.demo-field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.demo-field-error{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--speedy-fg)}
.demo-field .demo-field-error{margin:0}
.demo-chips{display:flex;flex-wrap:wrap;gap:8px}
.demo-chip{position:relative;display:inline-flex}
.demo-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.demo-chip>span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 14px;border:1px solid var(--line-soft);border-radius:6px;background:#fff;color:var(--ink);font-size:16px;transition:background .15s,border-color .15s,color .15s}
.demo-chip:hover>span{border-color:var(--navy)}
.demo-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--white)}
.demo-chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
/* Taken: crossed out, muted, not selectable. */
.demo-chip input:disabled{cursor:not-allowed}
.demo-chip input:disabled+span{background:var(--pale);border-style:dashed;border-color:var(--line-soft);color:#7C8D97;text-decoration:line-through;text-decoration-thickness:1.5px}
.demo-chip:hover input:disabled+span{border-color:var(--line-soft)}
.demo-days .demo-chip input:disabled+span b{color:#8A9BA5}
.demo-days{display:flex;flex-wrap:wrap;gap:8px}
.demo-days .demo-chip{flex:none}
.demo-days .demo-chip>span{flex-direction:column;align-items:flex-start;gap:0;min-width:76px;padding:8px 12px;line-height:1.25}
.demo-days .demo-chip b{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.demo-days .demo-chip input:checked+span b{color:var(--night-text)}
.demo-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.demo-times .demo-chip>span{width:100%;justify-content:center;font-variant-numeric:tabular-nums}
.demo-status,.demo-note{margin:0;font-size:15px;color:var(--muted)}
.demo-status{min-height:48px}
.demo-note{margin-top:10px}
.demo-card a{color:var(--navy);font-weight:600}
.demo-error{margin:0;padding:12px 14px;border-radius:6px;background:var(--speedy-bg);color:var(--speedy-fg);font-size:15px;font-weight:600}
.demo-actions{display:grid;gap:14px}
.demo-actions .demo-turnstile:empty{display:none}
.demo-submit{justify-self:start;cursor:pointer}
.demo-submit[aria-disabled="true"]{opacity:.6;cursor:progress}
.demo-done{outline:none}
.demo-done-title{margin:0 0 8px;font-family:SofiaCondensed,Sofia,sans-serif;font-size:32px;font-weight:700;color:var(--green)}
.demo-done p{margin:0;font-size:18px}
.night .button-outline{border-color:var(--night-line);color:var(--white)}
.night .button-outline:hover{background:var(--white);color:var(--deep)}
.final-cta .button-outline{border-color:var(--navy)}
.final-actions{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
@media(max-width:1000px){.demo-grid{grid-template-columns:1fr;gap:40px}.demo-intro{position:static}}
@media(max-width:740px){
.demo-card{padding:22px 18px}.demo-fields{grid-template-columns:1fr}.demo-times{grid-template-columns:repeat(3,1fr)}.demo-group>legend{font-size:21px}
/* On a phone the days are one swipeable row; scroll-padding keeps the first chip on the content edge. */
.demo-days{flex-wrap:nowrap;overflow-x:auto;padding:4px 4px 10px;margin:-4px -4px 0;scroll-padding-inline:4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.demo-days .demo-chip{scroll-snap-align:start}
.final-actions{width:100%;margin-top:29px}.final-actions .button{flex:1 1 100%;margin-top:0}
}