/* ── IV Studio home (wireframe layout) ─────────────────────────────────────
   Uses the theme tokens from style.css (hsl(var(--…))) so light + dark both work. */

.studio-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .8rem; border:1px solid hsl(var(--border)); border-radius:999px; font-size:.8rem; font-weight:600; background:hsl(var(--card)); color:hsl(var(--foreground)); }
.studio-dot { width:.5rem; height:.5rem; border-radius:999px; background:#16a34a; animation:studio-pulse 2s infinite; }
@keyframes studio-pulse { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow:0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow:0 0 0 0 rgba(22,163,74,0); } }

.studio-h1 { font-size:clamp(2.4rem, 5.5vw, 4rem); line-height:1.05; font-weight:800; letter-spacing:-.03em; }
.studio-h2 { font-size:clamp(1.8rem, 3.5vw, 2.6rem); line-height:1.1; font-weight:800; letter-spacing:-.02em; }
.studio-eyebrow { display:flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:hsl(var(--muted-foreground)); margin-bottom:.6rem; }
.studio-eyebrow::before { content:""; width:1.75rem; height:1px; background:hsl(var(--foreground)/.5); }
.studio-eyebrow.justify-center { justify-content:center; }

.studio-proof { display:grid; gap:.55rem; }
.studio-proof li { display:flex; align-items:center; gap:.65rem; color:hsl(var(--muted-foreground)); }
.studio-proof i { width:1rem; text-align:center; color:hsl(var(--foreground)); }
.studio-events { font-size:.85rem; color:hsl(var(--muted-foreground)); }
.studio-chip { display:inline-flex; gap:.35rem; align-items:baseline; padding:.3rem .7rem; border:1px solid hsl(var(--border)); border-radius:.5rem; font-size:.8rem; font-weight:600; }
.studio-chip em { font-style:normal; font-weight:500; color:hsl(var(--muted-foreground)); }

/* ── Quiz card ── */
.studio-quiz { background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:1.25rem; padding:1.75rem; box-shadow:0 24px 60px -28px hsl(var(--foreground)/.35); min-height:420px; }
.quiz-top { display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; color:hsl(var(--muted-foreground)); margin-bottom:.75rem; }
.quiz-progress { height:4px; background:hsl(var(--muted)); border-radius:99px; overflow:hidden; margin-bottom:1.25rem; }
.quiz-progress span { display:block; height:100%; background:hsl(var(--foreground)); transition:width .35s ease; }
.quiz-q { font-size:1.35rem; font-weight:700; line-height:1.25; margin-bottom:1rem; }
.quiz-opts { display:grid; gap:.5rem; }
.quiz-opt { display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; padding:.8rem 1rem; border:1px solid hsl(var(--border)); border-radius:.75rem; background:hsl(var(--background)); color:hsl(var(--foreground)); font-weight:500; cursor:pointer; transition:border-color .15s, transform .15s, background .15s; }
.quiz-opt:hover, .quiz-opt:focus-visible { border-color:hsl(var(--foreground)/.6); transform:translateX(2px); outline:none; }
.quiz-opt i { width:1.1rem; text-align:center; color:hsl(var(--muted-foreground)); }
.quiz-foot { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.1rem; font-size:.85rem; }
.quiz-link { background:none; border:0; padding:0; cursor:pointer; color:hsl(var(--muted-foreground)); text-decoration:underline; text-underline-offset:3px; }
.quiz-link:hover { color:hsl(var(--foreground)); }
.quiz-result-pkg { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem; border:1.5px solid hsl(var(--foreground)); border-radius:.9rem; margin:.25rem 0 1rem; }
.quiz-extra { display:flex; align-items:center; gap:.65rem; padding:.55rem .1rem; border-bottom:1px dashed hsl(var(--border)); font-size:.92rem; cursor:pointer; }
.quiz-extra input { width:1rem; height:1rem; accent-color:hsl(var(--foreground)); }
.quiz-total { display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; margin:1rem 0; }

/* ── Packages ── */
.pkg-card { position:relative; display:flex; flex-direction:column; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:1rem; padding:1.4rem; transition:transform .2s, border-color .2s, box-shadow .2s; }
.pkg-card:hover { transform:translateY(-3px); border-color:hsl(var(--foreground)/.5); }
.pkg-card.is-suggested { border:2px solid hsl(var(--foreground)); box-shadow:0 18px 40px -18px hsl(var(--foreground)/.35); }
.pkg-card.is-added { border-color:hsl(142 60% 40% / .75); }
.pkg-badge { display:none; position:absolute; top:-.7rem; left:1.2rem; background:hsl(var(--foreground)); color:hsl(var(--background)); font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:99px; text-transform:uppercase; letter-spacing:.06em; }
.pkg-card.is-suggested .pkg-badge { display:inline-block; }
.pkg-icon { width:2.5rem; height:2.5rem; border-radius:.7rem; display:flex; align-items:center; justify-content:center; background:hsl(var(--foreground)); color:hsl(var(--background)); margin-bottom:1rem; flex-shrink:0; }
.pkg-title { font-size:1.1rem; font-weight:700; }
.pkg-desc { color:hsl(var(--muted-foreground)); font-size:.92rem; margin:.35rem 0 1rem; flex:1; }
.pkg-price { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; margin-bottom:1rem; }
.pkg-price span { font-size:.8rem; font-weight:500; color:hsl(var(--muted-foreground)); letter-spacing:0; }
.pkg-actions { display:flex; gap:.5rem; }
.btn.is-added { background:hsl(142 65% 32%); border-color:transparent; color:#fff; }
.btn.is-added:hover { background:hsl(142 65% 27%); }

.addon-row { display:flex; gap:.9rem; align-items:flex-start; padding:1rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:.85rem; transition:border-color .2s; }
.addon-row.is-added { border-color:hsl(142 60% 40% / .75); }
.addon-icon { width:2rem; height:2rem; border-radius:.55rem; display:flex; align-items:center; justify-content:center; background:hsl(var(--muted)); color:hsl(var(--foreground)); flex-shrink:0; font-size:.85rem; }

/* ── Demos ── */
.demo-card { background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:1rem; padding:1.25rem; }
.demo-head { display:flex; align-items:center; gap:.6rem; font-weight:700; }
.demo-price { margin-left:auto; font-weight:600; font-size:.9rem; color:hsl(var(--muted-foreground)); }
.demo-links { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1rem; }
.demo-link { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.6rem; border:1px dashed hsl(var(--border)); border-radius:.65rem; font-size:.9rem; font-weight:600; transition:border-color .15s, background .15s; }
.demo-link:hover { border-style:solid; border-color:hsl(var(--foreground)/.6); background:hsl(var(--muted)/.5); }

/* ── FAQ ── */
.studio-faq { border:1px solid hsl(var(--border)); border-radius:.8rem; background:hsl(var(--card)); padding:0 1.1rem; }
.studio-faq summary { cursor:pointer; padding:1rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.studio-faq summary::-webkit-details-marker { display:none; }
.studio-faq summary::after { content:"+"; font-weight:400; font-size:1.3rem; line-height:1; color:hsl(var(--muted-foreground)); }
.studio-faq[open] summary::after { content:"–"; }
.studio-faq p { padding-bottom:1rem; color:hsl(var(--muted-foreground)); }

/* ── Live quote bar ── */
.quote-bar { position:fixed; left:0; right:0; bottom:0; z-index:45; padding:.8rem 0; background:hsl(var(--background)/.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid hsl(var(--border)); }
.quote-bar[hidden] { display:none; }
body.has-quote-bar #back-to-top { bottom:5.5rem; }

/* ── Quote page: same look as the home page ─────────────────────────────────
   Restyles the markup quote.js generates; the logic is untouched. */
.quote-trust { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:1.25rem; }
.quote-trust li { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:hsl(var(--muted-foreground)); }
.quote-trust i { color:hsl(var(--foreground)); }
.quote-step-title { font-size:1.35rem; font-weight:800; letter-spacing:-.01em; color:hsl(var(--foreground)); }

body.quote-page .step-badge { width:2.1rem; height:2.1rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:hsl(var(--foreground)); color:hsl(var(--background)); font-weight:800; font-size:.9rem; border:0; box-shadow:none; }

body.quote-page .quote-type-card { position:relative; display:flex; flex-direction:column; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:1rem; padding:1.4rem; cursor:pointer; box-shadow:none; transition:transform .2s, border-color .2s, box-shadow .2s; }
body.quote-page .quote-type-card:hover { transform:translateY(-3px); border-color:hsl(var(--foreground)/.5); }
body.quote-page .quote-type-card > i:first-child { width:2.5rem; height:2.5rem; border-radius:.7rem; display:flex !important; align-items:center; justify-content:center; background:hsl(var(--foreground)); color:hsl(var(--background)) !important; font-size:1rem !important; margin-bottom:1rem !important; }
body.quote-page .quote-type-card > p.font-semibold { font-size:1.05rem; font-weight:700; }
body.quote-page .quote-type-card > p.text-xs.leading-relaxed { flex:1; font-size:.88rem; }
body.quote-page .quote-type-card .text-gradient { background:none; -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:currentColor; color:hsl(var(--foreground)); font-weight:800; letter-spacing:-.02em; }
body.quote-page .quote-type-card.selected { border-color:hsl(142 60% 40% / .8); box-shadow:0 0 0 1px hsl(142 60% 40% / .5); background:hsl(var(--card)); }
body.quote-page .quote-type-card.selected .btn { background:hsl(142 65% 32%); border-color:transparent; color:#fff; }

body.quote-page .quote-addon-row { display:flex; align-items:center; justify-content:space-between; gap:.9rem; padding:1rem 1.1rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:.85rem; box-shadow:none; transition:border-color .2s; }
body.quote-page .quote-addon-row:hover { border-color:hsl(var(--foreground)/.4); }
body.quote-page .quote-addon-row.selected { border-color:hsl(142 60% 40% / .8); background:hsl(var(--card)); }
body.quote-page .quote-addon-row .btn-destructive { background:hsl(142 65% 32%); border-color:transparent; color:#fff; }

body.quote-page #custom-addons .glass { background:hsl(var(--card)); border-radius:1rem; }

body.quote-page .quote-sidebar { position:sticky; top:6rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:1.25rem; padding:1.5rem; box-shadow:0 24px 60px -28px hsl(var(--foreground)/.35); }
body.quote-page #sidebar-total-val { font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }

body.quote-page #mobile-cart-bar { background:hsl(var(--background)/.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid hsl(var(--border)); }
body.quote-page .modal-box { border-radius:1.25rem; }

/* ── Quote page: review list ── */
.review-row { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:.85rem; }
.review-icon { width:2.1rem; height:2.1rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; background:hsl(var(--foreground)); color:hsl(var(--background)); flex-shrink:0; font-size:.85rem; }
.review-remove { width:2rem; height:2rem; border-radius:.55rem; display:flex; align-items:center; justify-content:center; color:hsl(var(--muted-foreground)); border:1px solid transparent; background:none; cursor:pointer; flex-shrink:0; }
.review-remove:hover { color:hsl(var(--destructive)); border-color:hsl(var(--border)); }
.quote-link-btn { background:none; border:0; padding:0; cursor:pointer; font-size:.85rem; color:hsl(var(--muted-foreground)); text-decoration:underline; text-underline-offset:3px; }
.quote-link-btn:hover { color:hsl(var(--foreground)); }
body.quote-page #types-toggle { margin-bottom:1rem; }

/* Demo links inside each package card */
.pkg-demos { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem; margin-top:.9rem; padding-top:.8rem; border-top:1px dashed hsl(var(--border)); font-size:.85rem; }
.pkg-demos span { color:hsl(var(--muted-foreground)); }
.pkg-demos a { font-weight:600; color:hsl(var(--foreground)); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center; gap:.35rem; min-height:32px; }
.pkg-demos a:hover { color:hsl(142 65% 32%); }
.pkg-demos a i { font-size:.7rem; opacity:.7; }

/* What each package includes */
.quote-includes, .pkg-includes { list-style:none; margin:0 0 .9rem; padding:0; display:grid; gap:.3rem; font-size:.82rem; color:hsl(var(--muted-foreground)); }
.quote-includes li, .pkg-includes li { position:relative; padding-left:1.15rem; line-height:1.35; }
.quote-includes li::before, .pkg-includes li::before { content:""; position:absolute; left:0; top:.32rem; width:.55rem; height:.3rem; border-left:2px solid hsl(142 65% 32%); border-bottom:2px solid hsl(142 65% 32%); transform:rotate(-45deg); }
.price-vat { font-size:.75rem; font-weight:500; color:hsl(var(--muted-foreground)); letter-spacing:0; }