/* =====================================================================
   MUEVO · Components (add-on batch)
   Auth/login, guided service gallery, conversational + split booking.
   Token-driven like the core sheet.
   ===================================================================== */

/* ---------- auth / login ---------- */
.mv-social{ display:flex; align-items:center; justify-content:center; gap:.55em; width:100%; padding:.78em 1em; border-radius:var(--muevo-radius-input); border:var(--muevo-stroke-width) solid var(--muevo-border); background:var(--muevo-surface-soft); color:var(--muevo-text); font-weight:600; font-size:.88rem; transition:.25s; }
.mv-social:hover{ border-color:var(--muevo-border-strong); transform:translateY(-1px); }
.mv-social svg{ width:17px; height:17px; }
.mv-or{ display:flex; align-items:center; gap:12px; color:var(--muevo-text-faint); font-size:.76rem; font-family:var(--muevo-font-mono); letter-spacing:.06em; text-transform:uppercase; }
.mv-or::before,.mv-or::after{ content:""; flex:1; height:1px; background:var(--muevo-border); }
.mv-otp{ display:flex; gap:8px; }
.mv-otp input{ width:100%; aspect-ratio:1; text-align:center; font-family:var(--muevo-font-display); font-weight:500; font-size:1.4rem; background:var(--muevo-surface-soft); border:var(--muevo-stroke-width) solid var(--muevo-border); border-radius:var(--muevo-radius-input); color:var(--muevo-text); outline:none; transition:.2s; }
.mv-otp input:focus{ border-color:var(--muevo-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--muevo-primary) 22%, transparent); }
.mv-otp input:not(:placeholder-shown){ border-color:var(--muevo-border-strong); }
.mv-link{ color:var(--muevo-primary); font-weight:600; }
.mv-link:hover{ text-decoration:underline; }
.mv-label.mv-spread{ display:flex; }

/* ---------- guided service gallery ---------- */
.mv-crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; font-size:.84rem; }
.mv-crumbs .cr{ display:inline-flex; align-items:center; gap:8px; color:var(--muevo-text-faint); }
.mv-crumbs .cr.done{ color:var(--muevo-text-soft); cursor:pointer; }
.mv-crumbs .cr.active{ color:var(--muevo-primary); font-weight:650; }
.mv-crumbs .cr .i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; border:1px solid var(--muevo-border); flex-shrink:0; }
.mv-crumbs .cr.done .i{ background:var(--muevo-primary); color:var(--muevo-on-primary); border-color:var(--muevo-primary); }
.mv-crumbs .cr.active .i{ border-color:var(--muevo-primary); color:var(--muevo-primary); }
.mv-crumbs .sep{ color:var(--muevo-text-faint); display:inline-flex; }
.mv-crumbs .sep svg{ width:14px; height:14px; }
.mv-gstage{ display:none; }
.mv-gstage.on{ display:block; animation:mv-fade .35s var(--muevo-ease); }
.mv-gback{ display:inline-flex; align-items:center; gap:6px; color:var(--muevo-text-muted); font-size:.84rem; font-weight:600; background:none; border:none; padding:0; margin-bottom:16px; }
.mv-gback:hover{ color:var(--muevo-text); }
.mv-gback svg{ width:16px; height:16px; }

/* ---------- conversational big-target options ---------- */
.mv-bigopt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; border-radius:var(--muevo-radius-md); border:var(--muevo-stroke-width) solid var(--muevo-border); background:var(--muevo-surface-soft); color:var(--muevo-text); transition:.25s var(--muevo-ease); }
.mv-bigopt:hover{ border-color:var(--muevo-primary); transform:translateY(-2px); box-shadow:var(--muevo-shadow-sm); }
.mv-bigopt .ic{ width:48px; height:48px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--muevo-primary) 12%, transparent); color:var(--muevo-primary); }
.mv-bigopt .ic svg{ width:24px; height:24px; }
.mv-bigopt b{ font-family:var(--muevo-font-display); font-weight:var(--muevo-display-weight); font-size:1.05rem; display:block; }
.mv-bigopt small{ color:var(--muevo-text-muted); display:block; font-size:.84rem; }
.mv-bigopt .go{ margin-left:auto; color:var(--muevo-text-faint); display:inline-flex; }
.mv-bigopt .go svg{ width:18px; height:18px; }

/* ---------- single-page split booking ---------- */
.mv-split-book{ display:grid; grid-template-columns:1.5fr .9fr; gap:22px; align-items:start; }
@media (max-width:860px){ .mv-split-book{ grid-template-columns:1fr; } }
.mv-summary-side{ position:sticky; top:84px; }
@media (max-width:860px){ .mv-summary-side{ position:static; } }

/* =====================================================================
   Inline-icon safety net — keep every icon proportional to its context.
   (Bare icons dropped into buttons/avatars/chips would otherwise render
   at their default oversized size.)  Loads last, so it wins safely.
   ===================================================================== */
.mv-btn svg{ width:1.1em; height:1.1em; flex-shrink:0; }
.mv-btn--sm svg{ width:1em; height:1em; }
.mv-avatar svg{ width:46%; height:46%; }
.mv-chip svg{ width:13px; height:13px; flex-shrink:0; }
.mv-muted svg, .mv-soft svg{ width:14px; height:14px; flex-shrink:0; }
.mv-resv .sub svg{ width:13px; height:13px; }
.mv-staff .ph svg{ width:30px; height:30px; }
.mv-gift svg{ width:18px; height:18px; }
.mv-loyalty .mv-spread svg{ width:18px; height:18px; }
.mv-tier-badge svg{ width:14px; height:14px; flex-shrink:0; }
.mv-pkg ul li svg{ width:17px; height:17px; }
.mv-meter-row svg, .mv-step-h svg{ width:15px; height:15px; }
.mv-svc .meta svg{ width:14px; height:14px; flex-shrink:0; }

/* Catch-all FLOOR for any bare/unsized inline icon. :where() keeps this at
   zero specificity for the svg, so every explicit component size above still
   wins — this only sizes icons that would otherwise default to ~49px. */
[class*="muevo-theme-"] :where(svg){ width:18px; height:18px; }

/* =====================================================================
   Gift-card design variants  (all token-driven; restyle per theme)
   Base layout/size/padding come from .mv-gift in the core sheet.
   ===================================================================== */
.mv-gift-glyph{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.mv-gift-accent{ width:46px; height:3px; border-radius:2px; background:var(--muevo-primary); }

/* A · Outline / minimal — light, bordered, accent rule */
.mv-gift--outline{ background:var(--muevo-surface); color:var(--muevo-text); border:var(--muevo-stroke-width) solid var(--muevo-border); box-shadow:var(--muevo-shadow-sm); }
.mv-gift--outline::after{ display:none; }
.mv-gift--outline .gk{ color:var(--muevo-text-muted); opacity:1; }
.mv-gift--outline .grow{ color:var(--muevo-text-muted); opacity:1; }
.mv-gift--outline .mv-gift-glyph{ border:1px solid var(--muevo-border-strong); color:var(--muevo-primary); }

/* B · Monogram — solid primary with translucent initial watermark */
.mv-gift--mono{ background:var(--muevo-primary); color:var(--muevo-on-primary); }
.mv-gift--mono::after{ background:radial-gradient(120% 90% at 90% 0%, rgba(255,255,255,.22), transparent 55%); }
.mv-gift--mono .mv-gift-monogram{ position:absolute; right:-6px; bottom:-44px; z-index:0; font-family:var(--muevo-font-display); font-weight:700; font-size:11rem; line-height:1; color:rgba(255,255,255,.16); pointer-events:none; }
.mv-gift-tagpill{ font-family:var(--muevo-font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; border:1px solid currentColor; border-radius:100px; padding:.4em .8em; opacity:.85; }

/* C · Duotone — diagonal accent gradient with subtle stripes */
.mv-gift--stripe{ color:#fff; background:linear-gradient(135deg, color-mix(in srgb, var(--muevo-primary) 92%, #000), color-mix(in srgb, var(--muevo-secondary) 82%, #000)); }
.mv-gift--stripe::after{ background:repeating-linear-gradient(125deg, rgba(255,255,255,.10) 0 2px, transparent 2px 16px); }