/* ─────────────────────────────────────────────
   QUOTE BUILDER (get-a-quote.html)
   Builds on the site's smart-quote card (.smart-quote, .sq-*) in site.css and adds the
   services step and the packages step. Everything offered comes live from the dashboard
   (app.advancedentertainment.ca/api/quote-form), so the page always offers what Tarcy's
   price list offers. No price is ever shown here.
   ───────────────────────────────────────────── */

.qb-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:980px){.qb-layout{grid-template-columns:minmax(0,1fr)}}

.qb-side{position:sticky;top:calc(var(--header-height-desktop) + 24px);display:grid;gap:16px}
@media (max-width:980px){.qb-side{position:static}}
.qb-side .card:hover{transform:none}
.qb-side ol{margin:12px 0 0;padding-left:20px;color:var(--card-text);font-size:15px;line-height:1.6}
.qb-side ol li + li{margin-top:8px}

.smart-quote.qb{padding:clamp(22px,3vw,34px)}
.qb .sq-q:focus{outline:none}
.qb .sq-q:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}

.qb-test{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:10px 14px;border-radius:10px;border:1px dashed var(--gold-deep);background:var(--gold-soft);color:var(--ink);font-size:13.5px;line-height:1.5}
.qb-test b{color:var(--gold-deeper)}

.qb-loading{display:grid;gap:12px}
.qb-loading span{display:block;height:54px;border-radius:14px;background:linear-gradient(90deg,var(--cream) 0%,var(--cream-deeper) 50%,var(--cream) 100%);background-size:200% 100%;animation:qbShimmer 1.2s linear infinite}
@keyframes qbShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.qb-loading span{animation:none}}

.qb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.qb-row{grid-template-columns:1fr}}
.qb .sq-field{margin-bottom:14px}
.qb .sq-field small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.qb textarea.sq-input{min-height:120px;resize:vertical}
.qb .sq-options .sq-chip{min-height:52px}
.qb-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qb-quick .sq-chip{padding:10px 14px;font-size:14px;min-height:44px}

.qb-picked{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--green-deep);margin:12px 0 0;min-height:18px}

/* ── step 4: what do you need. One card per service, ticked on and off. ── */

.qb-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (max-width:560px){.qb-services{grid-template-columns:1fr}}
.qb-service{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:16px 50px 16px 18px;text-align:left;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--cream-deeper);border-radius:14px;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.qb-service:hover{border-color:rgba(30,122,77,.45)}
.qb-service:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.qb-service.is-selected{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green)}
.qb-service__title{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.25}
.qb-service__blurb{font-size:13.5px;line-height:1.45;color:var(--muted)}
.qb-service__tick{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cream-deeper);background:#fff;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.qb-service.is-selected .qb-service__tick{border-color:var(--green);background:var(--green)}
.qb-service.is-selected .qb-service__tick::after{content:'';position:absolute;left:6.5px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.qb-popular{margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deeper);font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ── step 5: pick your packages. One panel per service they ticked. ── */

.qb-svc{margin-top:14px;padding:18px;border:1.5px solid var(--cream-deeper);border-radius:14px;background:#fff}
.qb-svc__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.qb-svc__title{margin:0;font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.25;color:var(--ink)}
.qb-svc__tag{padding:4px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-deep);font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.qb-sub{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin:16px 0 0}

.qb-packs{display:grid;gap:10px;margin-top:12px}
.qb-pack{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--cream-deeper);border-radius:12px;background:var(--cream);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.qb-pack.is-counted{cursor:default}
.qb-pack:hover{border-color:rgba(30,122,77,.35)}
.qb-pack.is-on{border-color:var(--green);background:var(--green-soft)}
@media (max-width:420px){.qb-pack{grid-template-columns:1fr}.qb-pack > .qb-add,.qb-pack > .qb-stepper{justify-self:start}}
.qb-pack__name{font-family:var(--font-body);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
.qb-pack.is-on .qb-pack__name{color:var(--green-deep)}
.qb-includes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
.qb-includes li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--body)}
.qb-includes li::before{content:'';position:absolute;left:2px;top:.5em;width:8px;height:4px;border:solid var(--green);border-width:0 0 2px 2px;transform:rotate(-45deg)}

.qb .qb-note-field{margin:16px 0 0}
/* The site's field labels are short tracked capitals ("DATE OF THE EVENT"). A note's label is
   a whole question, so it reads as a sentence instead. */
.qb .qb-note-field label{font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--ink)}
.qb textarea.qb-note{min-height:64px}

.qb-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--cream-deeper);border-radius:12px;overflow:hidden;background:#fff}
.qb-stepper button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qb-stepper button:hover:not(:disabled){background:var(--green-soft);color:var(--green-deep)}
.qb-stepper button:disabled{opacity:.35;cursor:not-allowed}
.qb-stepper output{min-width:34px;text-align:center;font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--ink)}
.qb-add{height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--green);background:#fff;color:var(--green-deep);font-family:var(--font-ui);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.qb-add:hover{background:var(--green-soft)}
.qb-add.is-on{background:var(--green);color:#fff}

.qb-summary{background:var(--green-soft);border:1px solid rgba(30,122,77,.2);border-radius:12px;padding:14px 16px;margin:0 0 18px;font-size:14px;color:var(--body);line-height:1.6}
.qb-summary b{color:var(--green-deep)}
.qb-summary ul{margin:6px 0 0;padding-left:18px}

.qb-msg{margin:12px 0 0;font-size:14px;line-height:1.5;color:#9b2c2c;min-height:20px}
.qb-msg a{color:inherit;font-weight:700}
.qb .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.qb-fallback{text-align:left}
.qb-fallback .btn{margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.qb-summary__edits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qb-summary__edit{min-height:44px;padding:8px 12px;border:1px solid rgba(30,122,77,.28);border-radius:8px;background:var(--white,#fff);color:var(--green-deep);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.qb-summary__edit:hover,.qb-summary__edit:focus-visible{border-color:var(--green);outline:2px solid var(--green);outline-offset:2px}