/* TintPilot dealer-wizard launcher (landing page popup) */
.tpw-backdrop{position:fixed;inset:0;z-index:99998;display:grid;place-items:center;padding:24px;
  background:rgba(4,5,9,.82);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);
  animation:tpwFade .3s ease both;overflow:auto;}
@keyframes tpwFade{from{opacity:0}to{opacity:1}}
.tpw-stage{width:min(680px,100%);}
.tpw-backdrop .dealer-wizard-modal{position:static;display:block;animation:none;}
.tpw-backdrop .dealer-wizard-panel{animation:tpwPop .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes tpwPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:620px){.tpw-backdrop{padding:0!important;place-items:stretch!important;overflow:hidden!important;}.tpw-stage{width:100%!important;height:100dvh!important;}}

:root {
  color-scheme: dark;
  --dash-bg: #08090c;
  --dash-rail: #0b0c10;
  --dash-panel: #0f1015;
  --dash-panel-2: #14151c;
  --dash-panel-3: #1a1b22;
  --dash-border: rgba(255,255,255,.08);
  --dash-border-strong: rgba(255,255,255,.16);
  --dash-text: #ecedf0;
  --dash-soft: rgba(236,237,240,.78);
  --dash-muted: rgba(236,237,240,.58);
  --dash-faint: rgba(236,237,240,.38);

  /* Accent — kept as a variable but reassigned to electric blue.
     Used for individual actions (status badges, focus states). */
  --dash-accent: #4f7cff;
  --dash-accent-rgb: 79, 124, 255;

  /* System gradient — fixed blue→violet→light-purple, matches the
     marketing site mockups. Used for: brand mark, KPI icons, primary
     CTAs, badges, avatars, hover states. */
  --dash-sys-blue:    #4f7cff;
  --dash-sys-violet:  #8b5cf6;
  --dash-sys-purple:  #c084fc;
  --dash-sys-grad:    linear-gradient(135deg, #4f7cff 0%, #8b5cf6 55%, #c084fc 100%);
  --dash-sys-grad-soft: linear-gradient(135deg, rgba(79,124,255,0.12), rgba(139,92,246,0.06));
  --dash-sys-soft:    rgba(79,124,255,0.12);
  --dash-sys-line:    rgba(79,124,255,0.30);
  --dash-sys-glow:    rgba(79,124,255,0.45);

  --dash-warning: #f5b25c;
  --dash-warning-rgb: 245, 178, 92;
  --dash-danger:  #ff5b5b;
  --dash-danger-rgb:  255, 91, 91;
  --dash-success: #2ecf73;
  --dash-success-rgb: 46, 207, 115;

  --dash-radius-xl: 18px;
  --dash-radius-lg: 14px;
  --dash-radius-md: 10px;
  --dash-shadow:    0 24px 80px rgba(0,0,0,.4);

  /* Typography */
  --dash-font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --dash-font-display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --dash-font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Easings */
  --dash-ease:     cubic-bezier(.4, 0, .2, 1);
  --dash-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dash-t-1: 120ms;
  --dash-t-2: 200ms;
  --dash-t-3: 360ms;
}
body{ margin:0; min-height:100vh; display:grid; place-items:center; padding:24px 16px; background: radial-gradient(130% 90% at 80% -10%, #161427, #0b0c12 60%); font-family:'Inter',system-ui,sans-serif; color:var(--dash-text); }
.stage{ width:min(680px,100%); }
@media(max-width:620px){.stage{width:100%;}body{padding:0!important;}}
.dealer-wizard-modal{ position:static; display:block; animation:none; }
.dash-btn{ padding:13px 22px; border-radius:12px; border:1px solid var(--dash-border-strong); background:rgba(255,255,255,.05); color:var(--dash-text); font:650 14px 'Inter',sans-serif; cursor:pointer; }
.dealer-wizard-choice, .dealer-accent-choice{ cursor:pointer; }
.dealer-accent-choice{ border:1.5px solid var(--dash-border); background:rgba(255,255,255,.03); border-radius:13px; padding:9px; display:flex; flex-direction:column; gap:7px; align-items:center; transition:transform .16s cubic-bezier(.16,1,.3,1),border-color .16s,box-shadow .2s; }
.dealer-accent-choice:hover{ transform:translateY(-3px); }
.dealer-accent-choice.is-selected{ border-color:var(--dealer-wizard-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--dealer-wizard-accent) 20%,transparent); }
.dealer-accent-swatch{ width:100%; height:30px; border-radius:8px; background:var(--dealer-accent-color); box-shadow:0 6px 14px -8px var(--dealer-accent-color); }
.dealer-accent-label{ font-size:11px; color:var(--dash-muted); font-weight:600; }
.pv-note{ color:var(--dash-faint); font-size:12px; text-align:center; margin:14px 0 0; }
.dealer-wizard-panel{ animation:none; }
ADD DEALER — onboarding wizard (premium, animated, effortless)
   Scoped under .dealer-wizard-panel / dw-* . Base modal layout lives above.
============================================================================= */
.dealer-wizard-panel {
  --dealer-wizard-accent: #4f7cff;
  --dealer-wizard-accent-deep: #3b3fae;
  --dw-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--dash-border-strong, rgba(255,255,255,.16));
  background:
    radial-gradient(120% 80% at 85% -10%, color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #15161d 0%, var(--dash-panel, #0f1015) 60%);
  box-shadow: 0 50px 110px -45px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: dw-panel-in .5s var(--dw-ease) both;
}
.dealer-wizard-backdrop { animation: dw-fade-in .35s ease both; backdrop-filter: blur(7px); background: rgba(4,5,8,.62) !important; }
@keyframes dw-panel-in { from { opacity: 0; transform: translateY(22px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes dw-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Soft accent glow that breathes behind the header */
.dealer-wizard-glow {
  position: absolute; top: -120px; right: -80px; width: 300px; height: 300px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--dealer-wizard-accent) 42%, transparent), transparent 70%);
  filter: blur(20px); opacity: .55; animation: dw-breathe 7s ease-in-out infinite;
}
@keyframes dw-breathe { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.18); opacity: .7; } }

.dealer-wizard-panel > *:not(.dealer-wizard-glow) { position: relative; z-index: 1; }

/* Header */
.dealer-wizard-head { display: block; padding-bottom: 2px; }
.dealer-wizard-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dealer-wizard-head-row p {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  font: 800 10.5px 'Inter', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--dealer-wizard-accent) 78%, #fff);
}
.dealer-wizard-head-row p::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dealer-wizard-accent); box-shadow: 0 0 10px var(--dealer-wizard-accent); animation: dw-pulse 1.8s ease-in-out infinite; }
@keyframes dw-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
[data-wizard-close] {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid var(--dash-border, rgba(255,255,255,.08));
  color: var(--dash-soft, rgba(236,237,240,.78)); cursor: pointer; transition: all .18s var(--dw-ease);
}
[data-wizard-close]:hover { background: rgba(255,255,255,.1); color: #fff; transform: rotate(90deg); }

/* Segmented stepper */
.dealer-wizard-stepper { display: flex; gap: 6px; margin: 16px 0 14px; }
.dw-seg { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; position: relative; transition: background .3s ease; }
.dw-seg.is-done { background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent)); }
.dw-seg.is-active { background: rgba(255,255,255,.12); }
.dw-seg.is-active::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px; transform-origin: left;
  background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent));
  animation: dw-seg-fill .55s var(--dw-ease) both;
}
.dw-seg.is-active::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: dw-shimmer 1.9s ease-in-out infinite .4s;
}
@keyframes dw-seg-fill { from { transform: scaleX(.12); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
@keyframes dw-shimmer { to { transform: translateX(100%); } }

.dealer-wizard-head h2 {
  margin: 0 0 6px; font-size: 25px; font-weight: 760; line-height: 1.12; letter-spacing: -.018em;
  color: var(--dash-text, #ecedf0);
  background: linear-gradient(100deg, #fff 30%, color-mix(in srgb, var(--dealer-wizard-accent) 60%, #fff) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Body + directional, staggered step reveal */
.dealer-wizard-body { padding-top: 6px; }
.dealer-wizard-body.is-in.dw-dir-fwd { animation: dw-in-fwd .42s var(--dw-ease); }
.dealer-wizard-body.is-in.dw-dir-back { animation: dw-in-back .42s var(--dw-ease); }
@keyframes dw-in-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes dw-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.dealer-wizard-body.is-in .dw-step > * { animation: dw-rise .5s var(--dw-ease) both; }
.dealer-wizard-body.is-in .dw-step > *:nth-child(1) { animation-delay: .05s; }
.dealer-wizard-body.is-in .dw-step > *:nth-child(2) { animation-delay: .12s; }
.dealer-wizard-body.is-in .dw-step > *:nth-child(3) { animation-delay: .19s; }
.dealer-wizard-body.is-in .dw-step > *:nth-child(4) { animation-delay: .26s; }
@keyframes dw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.dw-step { display: flex; flex-direction: column; gap: 15px; }
.dw-sub { margin: 0 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--dash-muted, rgba(236,237,240,.58)); }

/* Fields */
.dw-field { display: flex; flex-direction: column; gap: 8px; }
.dw-field-spaced { margin-top: 4px; }
.dw-field > span { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--dash-text); }
.dw-field input {
  width: 100%; box-sizing: border-box; padding: 15px 16px; border-radius: 13px;
  background: rgba(255,255,255,.035); border: 1.5px solid var(--dash-border, rgba(255,255,255,.09)); color: var(--dash-text);
  font-size: 16px; font-family: inherit; transition: border-color .18s var(--dw-ease), box-shadow .22s var(--dw-ease), background .18s ease, transform .18s var(--dw-ease);
}
.dw-field input::placeholder { color: rgba(236,237,240,.32); }
.dw-field input:hover { border-color: var(--dash-border-strong, rgba(255,255,255,.16)); }
.dw-field input:focus {
  outline: none; background: rgba(255,255,255,.06); transform: translateY(-1px);
  border-color: var(--dealer-wizard-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-wizard-accent) 20%, transparent), 0 8px 24px -12px var(--dealer-wizard-accent);
}
.dw-note { font-size: 12px; line-height: 1.45; color: var(--dash-muted); }

/* Area chips */
.dw-areas-label { display: block; font-size: 12.5px; color: var(--dash-muted); margin-bottom: 9px; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dw-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 9px 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--dash-text);
  background: color-mix(in srgb, var(--dealer-wizard-accent) 13%, rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--dealer-wizard-accent) 42%, transparent);
  transition: transform .16s var(--dw-ease), background .16s ease, box-shadow .16s ease; animation: dw-chip-pop .4s var(--dw-ease) both;
}
.dw-chips .dw-chip:nth-child(2) { animation-delay: .06s; }
.dw-chips .dw-chip:nth-child(3) { animation-delay: .12s; }
.dw-chips .dw-chip:nth-child(4) { animation-delay: .18s; }
.dw-chip.is-county { background: rgba(255,255,255,.05); border-color: var(--dash-border-strong); }
.dw-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--dealer-wizard-accent); }
.dw-chip i { font-style: normal; font-size: 16px; line-height: 1; opacity: .55; transition: opacity .15s; }
.dw-chip:hover i { opacity: 1; }
@keyframes dw-chip-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

/* Accent step + mini browser */
.dw-accent-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .dw-accent-layout { grid-template-columns: 1.05fr 1fr; align-items: center; } }
.dw-accent-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 11px; }
.dw-preview-wrap { position: relative; }
.dw-preview-tag { position: absolute; top: -10px; left: 14px; z-index: 3; font: 800 9px 'Inter',sans-serif; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--dealer-wizard-accent) 80%, #fff); background: #14151c; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dealer-wizard-accent) 40%, var(--dash-border)); }
.dw-mini {
  border: 1px solid var(--dash-border-strong); border-radius: 16px; overflow: hidden; background: #0c0d12;
  box-shadow: 0 26px 50px -28px #000, 0 0 0 1px rgba(255,255,255,.02) inset; animation: dw-float 6s ease-in-out infinite;
}
@keyframes dw-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dw-mini-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #11121a; border-bottom: 1px solid var(--dash-border); position: relative; }
.dw-mini-bar::before { content: ''; position: absolute; left: 12px; width: 30px; height: 7px; border-radius: 999px; background: radial-gradient(circle 3.5px at 3.5px 3.5px, #ff5f57 99%, transparent) 0/10px, radial-gradient(circle 3.5px at 3.5px 3.5px, #febc2e 99%, transparent) 10px/10px, radial-gradient(circle 3.5px at 3.5px 3.5px, #28c840 99%, transparent) 20px/10px; background-repeat: no-repeat; }
.dw-mini-logo { width: 26px; height: 10px; border-radius: 3px; margin-left: 40px; background: var(--dealer-wizard-accent); transition: background .4s var(--dw-ease); }
.dw-mini-nav { display: flex; gap: 6px; margin-left: auto; }
.dw-mini-nav i { width: 17px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); }
.dw-mini-cta { width: 32px; height: 13px; border-radius: 4px; background: var(--dealer-wizard-accent); transition: background .4s var(--dw-ease); }
.dw-mini-hero { padding: 24px 16px; display: flex; flex-direction: column; gap: 9px; background: radial-gradient(130% 100% at 78% 0, color-mix(in srgb, var(--dealer-wizard-accent) 26%, transparent), transparent 62%); }
.dw-mini-h1 { width: 66%; height: 13px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.5)); }
.dw-mini-h2 { width: 44%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.36); }
.dw-mini-btn { margin-top: 5px; width: 86px; height: 23px; border-radius: 8px; background: var(--dealer-wizard-accent); box-shadow: 0 8px 18px -8px var(--dealer-wizard-accent); transition: background .4s var(--dw-ease), box-shadow .4s var(--dw-ease); }
.dw-mini-cards { display: flex; gap: 8px; padding: 0 16px 16px; }
.dw-mini-cards span { flex: 1; height: 36px; border-radius: 8px; background: #14151d; border: 1px solid var(--dash-border); border-top: 2px solid var(--dealer-wizard-accent); transition: border-color .4s var(--dw-ease); }

/* Logo step */
.dw-upload {
  display: flex; align-items: center; gap: 15px; cursor: pointer; padding: 17px;
  border: 1.5px dashed var(--dash-border-strong); border-radius: 15px; background: rgba(255,255,255,.025);
  transition: border-color .18s var(--dw-ease), background .18s ease, transform .18s var(--dw-ease);
}
.dw-upload:hover { border-color: var(--dealer-wizard-accent); background: color-mix(in srgb, var(--dealer-wizard-accent) 7%, transparent); transform: translateY(-2px); }
.dw-upload input { display: none; }
.dw-upload-plus { width: 48px; height: 48px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 26px; font-weight: 300; color: var(--dealer-wizard-accent); background: color-mix(in srgb, var(--dealer-wizard-accent) 14%, transparent); transition: transform .25s var(--dw-ease); }
.dw-upload:hover .dw-upload-plus { transform: rotate(90deg) scale(1.05); }
.dw-upload-preview { width: 66px; height: 48px; flex: none; object-fit: contain; border-radius: 9px; background: #0a0b0f; padding: 4px; box-sizing: border-box; }
.dw-upload-copy { display: flex; flex-direction: column; gap: 3px; }
.dw-upload-copy strong { font-size: 14px; color: var(--dash-text); }
.dw-upload-copy small { font-size: 12px; color: var(--dash-muted); }
.dw-or { text-align: center; font-size: 11.5px; letter-spacing: .04em; color: var(--dash-muted); position: relative; margin: 6px 0; }
.dw-or::before, .dw-or::after { content: ''; position: absolute; top: 50%; width: 36%; height: 1px; background: linear-gradient(90deg, transparent, var(--dash-border)); }
.dw-or::before { left: 0; transform: scaleX(-1); } .dw-or::after { right: 0; }
.dw-logo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 11px; }
.dw-logo-tile {
  cursor: pointer; padding: 11px; border-radius: 13px; background: rgba(255,255,255,.03);
  border: 1.5px solid var(--dash-border); display: flex; align-items: center; justify-content: center; min-height: 66px;
  transition: border-color .18s var(--dw-ease), transform .16s var(--dw-ease), box-shadow .2s var(--dw-ease), background .18s ease;
}
.dw-logo-tile img { max-width: 100%; max-height: 44px; display: block; }
.dw-logo-tile:hover { transform: translateY(-3px) scale(1.02); border-color: var(--dash-border-strong); background: rgba(255,255,255,.05); }
.dw-logo-tile.is-selected { border-color: var(--dealer-wizard-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-wizard-accent) 20%, transparent), 0 12px 26px -14px var(--dealer-wizard-accent); }
.dw-logo-order {
  flex-direction: column; gap: 5px; text-align: center; grid-column: 1 / -1; padding: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dealer-wizard-accent) 12%, rgba(255,255,255,.02)), rgba(255,255,255,.02));
  border-style: solid; border-color: color-mix(in srgb, var(--dealer-wizard-accent) 30%, var(--dash-border));
}
.dw-logo-order-brush { color: var(--dealer-wizard-accent); }
.dw-logo-order-brush svg { width: 24px; height: 24px; }
.dw-logo-order:hover .dw-logo-order-brush { animation: dw-wiggle .5s ease; }
@keyframes dw-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.dw-logo-order strong { font-size: 14px; color: var(--dash-text); }
.dw-logo-order-price { font-size: 12.5px; font-weight: 750; color: color-mix(in srgb, var(--dealer-wizard-accent) 80%, #fff); }
.dw-logo-order small { font-size: 11.5px; line-height: 1.45; color: var(--dash-muted); max-width: 44ch; margin: 0 auto; }

/* Services — photo cards */
.dw-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 13px; }
.dw-svc-card {
  position: relative; cursor: pointer; border-radius: 15px; overflow: hidden;
  border: 1.5px solid var(--dash-border); background: rgba(255,255,255,.03);
  transition: border-color .18s var(--dw-ease), transform .16s var(--dw-ease), box-shadow .2s var(--dw-ease), opacity .2s ease;
}
.dw-svc-card input { position: absolute; opacity: 0; pointer-events: none; }
.dw-svc-card:not(.is-on) { opacity: .64; }
.dw-svc-card:hover { transform: translateY(-3px); opacity: 1; border-color: var(--dash-border-strong); box-shadow: 0 16px 30px -18px #000; }
.dw-svc-card.is-on { border-color: var(--dealer-wizard-accent); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 20%, transparent), 0 14px 28px -16px var(--dealer-wizard-accent); }
.dw-svc-photo { display: block; height: 92px; background-size: cover; background-position: center; background-color: #0a0b0f; transition: transform .4s var(--dw-ease); }
.dw-svc-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 92px; background: linear-gradient(180deg, transparent 40%, rgba(10,11,15,.55)); pointer-events: none; }
.dw-svc-card:hover .dw-svc-photo { transform: scale(1.07); }
.dw-svc-photo-fallback { display: grid; place-items: center; color: var(--dealer-wizard-accent); }
.dw-svc-body { display: block; padding: 11px 13px 13px; }
.dw-svc-body strong { display: block; font-size: 13.5px; color: var(--dash-text); }
.dw-svc-body small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--dash-muted); margin-top: 3px; max-height: 2.8em; overflow: hidden; }
.dw-svc-check {
  position: absolute; top: 11px; right: 11px; z-index: 2; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--dealer-wizard-accent);
  box-shadow: 0 6px 14px -4px var(--dealer-wizard-accent); opacity: 0; transform: scale(.4) rotate(-30deg);
  transition: opacity .18s ease, transform .3s var(--dw-ease);
}
.dw-svc-check svg { width: 14px; height: 14px; }
.dw-svc-card.is-on .dw-svc-check { opacity: 1; transform: scale(1) rotate(0); }

/* Contact step — switch + reveal */
.dw-toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; font-size: 13.5px; color: var(--dash-text); user-select: none; }
.dw-toggle-row input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.12); cursor: pointer; transition: background .22s var(--dw-ease); }
.dw-toggle-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .24s var(--dw-ease); box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.dw-toggle-row input:checked { background: var(--dealer-wizard-accent); }
.dw-toggle-row input:checked::after { transform: translateX(18px); }
.dw-public { display: flex; flex-direction: column; gap: 15px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--dash-border); }
.dw-public[hidden] { display: none !important; }
.dw-public:not([hidden]) { animation: dw-reveal .35s var(--dw-ease); }
@keyframes dw-reveal { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 320px; } }

/* Footer buttons */
.dealer-wizard-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding-top: 6px; }
.dealer-wizard-panel .dash-btn { padding: 13px 22px; border-radius: 12px; font-weight: 650; transition: transform .15s var(--dw-ease), box-shadow .2s var(--dw-ease), filter .2s ease, opacity .2s ease; }
.dealer-wizard-panel .dash-btn-primary {
  background: linear-gradient(180deg, var(--dealer-wizard-accent), color-mix(in srgb, var(--dealer-wizard-accent) 60%, #000)); border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px -12px var(--dealer-wizard-accent);
}
.dealer-wizard-panel .dash-btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px var(--dealer-wizard-accent); filter: brightness(1.06); }
.dealer-wizard-panel .dash-btn-primary:not(:disabled):active { transform: translateY(0) scale(.985); }
.dealer-wizard-panel .dash-btn-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.dealer-wizard-panel [data-wizard-back]:not(:disabled):hover { transform: translateX(-2px); }

/* Creating / success overlay */
.dealer-wizard-creating { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: color-mix(in srgb, #0c0d12 90%, transparent); backdrop-filter: blur(8px); border-radius: inherit; animation: dw-fade-in .25s ease; }
.dealer-wizard-creating[hidden] { display: none !important; }
.dw-creating-card { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 26px; animation: dw-rise .35s var(--dw-ease); }
.dw-creating-card strong { font-size: 18px; letter-spacing: -.01em; color: var(--dash-text); }
.dw-creating-step { font-size: 13px; color: var(--dash-muted); transition: opacity .2s ease; }
.dw-creating-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--dealer-wizard-accent)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  animation: dw-spin .85s linear infinite;
}
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-creating-card.is-done { animation: dw-pop .4s var(--dw-ease); }
.dw-creating-check { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--dash-success, #2ecf73); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-success, #2ecf73) 60%, transparent); animation: dw-burst .6s var(--dw-ease); }
.dw-creating-check svg { width: 30px; height: 30px; animation: dw-check-draw .4s ease .12s both; }
@keyframes dw-burst { 0% { transform: scale(.4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-success,#2ecf73) 55%, transparent); } 60% { transform: scale(1.08); } 100% { transform: scale(1); box-shadow: 0 0 0 22px transparent; } }
@keyframes dw-check-draw { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes dw-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .dealer-wizard-panel, .dealer-wizard-backdrop, .dealer-wizard-glow,
  .dealer-wizard-body.is-in, .dealer-wizard-body.is-in .dw-step > *,
  .dw-seg.is-active::after, .dw-seg.is-active::before, .dw-chip, .dw-mini, .dw-public,
  .dw-creating-card, .dw-creating-check, .dw-svc-check, .dealer-wizard-head-row p::before { animation: none !important; }
  .dealer-wizard-panel *, .dw-field input, .dw-logo-tile, .dw-svc-card, .dw-svc-photo, .dealer-wizard-panel .dash-btn { transition: none !important; }
  .dw-creating-spinner { animation: dw-spin 1.2s linear infinite; }
}

/* Add Dealer wizard — percent progress (non-linear) + custom palette swatch */
.dealer-wizard-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 15px 0 8px; }
.dealer-wizard-progress-caption { font: 650 12px 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: var(--dash-soft, rgba(236,237,240,.78)); transition: color .3s ease; }
.dealer-wizard-progress-pct {
  font: 800 19px 'Inter', system-ui, sans-serif; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--dealer-wizard-accent) 75%, #fff));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dealer-wizard-progress-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.dealer-wizard-progress-fill {
  display: block; height: 100%; width: 35%; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--dealer-wizard-accent) 70%, transparent);
  transition: width .65s cubic-bezier(.16, 1, .3, 1);
}
.dealer-wizard-progress-fill::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: dw-shimmer 2s ease-in-out infinite .5s;
}

/* 7th option — custom color via palette */
.dealer-accent-custom-choice .dealer-custom-accent-input-row { display: flex; align-items: center; gap: 8px; justify-content: center; }
.dealer-accent-custom-choice .dealer-custom-accent-input-row span { font-size: 11px; font-weight: 600; color: var(--dash-muted); }
.dealer-accent-custom-choice input[type="color"] {
  width: 30px; height: 30px; padding: 0; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 0deg, #ff5f57, #febc2e, #28c840, #2f6bff, #7c4dff, #ff2d9a, #ff5f57);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); transition: transform .15s cubic-bezier(.16,1,.3,1);
}
.dealer-accent-custom-choice input[type="color"]:hover { transform: scale(1.1) rotate(15deg); }
.dealer-accent-custom-choice input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dealer-accent-custom-choice input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.dealer-accent-custom-choice input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .dealer-wizard-progress-fill { transition: none !important; }
  .dealer-wizard-progress-fill::after { animation: none !important; display: none; }
}

/* =============================================================================
   Add Dealer wizard — refinements (curve bar, centered Continue, bonus logo,
   accent-tinted popup, mobile, working close)
============================================================================= */
.dealer-wizard-panel {
  width: min(680px, 94vw);
  max-height: min(880px, 94vh);
  /* Reset the landing page's global `section { padding-block: var(--section-y) }`
     rule. The wizard panel is a <section>, so on index.html it inherited
     ~240px of top/bottom padding, which pushed the content into the middle and
     left empty bands above and below it. head/body/foot own their own padding,
     so the panel itself must stay at zero. (Admin uses dashboard.css, which has
     no such global section padding — this keeps both hosts identical.) */
  padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--dealer-wizard-accent) 40%, rgba(255,255,255,.12));
  background:
    radial-gradient(130% 80% at 85% -12%, color-mix(in srgb, var(--dealer-wizard-accent) 22%, transparent), transparent 58%),
    linear-gradient(180deg, #15161d 0%, #0f1015 62%);
  box-shadow: 0 50px 110px -45px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb, var(--dealer-wizard-accent) 14%, transparent) inset;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.dealer-wizard-head { display: block; padding: 22px 24px 8px; border-bottom: 0; flex: none; }
.dealer-wizard-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 24px 8px; margin: 0; }
.dealer-wizard-foot { flex: none; position: relative; justify-content: center; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--dash-border); }

/* Close button — reliable hit area + polish */
[data-wizard-close] { z-index: 3; }
[data-wizard-close] svg { pointer-events: none; }

/* Taller, prettier non-linear progress bar */
.dealer-wizard-progress-meta { justify-content: flex-start; }
.dealer-wizard-progress-caption { font-weight: 700; color: color-mix(in srgb, var(--dealer-wizard-accent) 55%, #fff); }
.dealer-wizard-progress-track {
  height: 12px; border-radius: 999px; padding: 2px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
.dealer-wizard-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent) 70%, color-mix(in srgb, var(--dealer-wizard-accent) 60%, #fff));
  box-shadow: 0 0 16px color-mix(in srgb, var(--dealer-wizard-accent) 75%, transparent), 0 2px 6px rgba(0,0,0,.4);
  transition: width .7s cubic-bezier(.16, 1, .3, 1);
}
.dealer-wizard-progress-fill::after { border-radius: 999px; }

/* Centered Continue with arrow; Back tucked to the left */
.dealer-wizard-panel [data-wizard-next] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 30px; min-width: 200px; }
.dw-next-label, .dw-next-arrow { pointer-events: none; }
.dw-next-arrow { transition: transform .22s cubic-bezier(.16,1,.3,1); }
.dealer-wizard-panel [data-wizard-next]:not(:disabled):hover .dw-next-arrow { transform: translateX(4px); }
.dealer-wizard-panel [data-wizard-back] { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding: 10px 14px; background: transparent; border-color: transparent; color: var(--dash-muted); }
.dealer-wizard-panel [data-wizard-back]:not(:disabled):hover { color: var(--dash-text); transform: translateY(-50%) translateX(-2px); }

/* Manual "add area" row */
.dw-area-add { display: flex; gap: 8px; margin-top: 10px; }
.dw-area-add input {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: 11px; font-size: 14px; font-family: inherit;
  background: rgba(255,255,255,.04); border: 1.5px solid var(--dash-border); color: var(--dash-text);
  transition: border-color .16s ease, box-shadow .2s ease;
}
.dw-area-add input::placeholder { color: rgba(236,237,240,.34); }
.dw-area-add input:focus { outline: none; border-color: var(--dealer-wizard-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 18%, transparent); }
.dw-area-add-btn {
  flex: none; width: 44px; border-radius: 11px; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(120deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent)); border: none;
  transition: transform .15s ease, filter .15s ease;
}
.dw-area-add-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Custom logo — free bonus presentation */
.dw-logo-order { position: relative; padding-top: 22px; }
.dw-logo-order-badge {
  position: absolute; top: 11px; right: 11px; font: 800 9.5px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #08210f; background: linear-gradient(120deg, #2ee37a, #1faa59); padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 6px 14px -6px #1faa59;
}
.dw-logo-order-price { display: inline-flex; align-items: baseline; gap: 9px; }
.dw-logo-order-price s { color: var(--dash-faint); font-weight: 600; text-decoration-thickness: 2px; }
.dw-logo-order-price .dw-free { font-size: 14px; font-weight: 850; letter-spacing: -.01em; color: #34d77f; text-shadow: 0 0 14px rgba(46,227,122,.4); }

/* Mobile */
@media (max-width: 560px) {
  .dealer-wizard-modal { padding: 0; place-items: stretch; }
  .dealer-wizard-panel { width: 100%; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
  .dealer-wizard-head { padding: 18px 18px 8px; }
  .dealer-wizard-body { padding: 6px 18px 10px; }
  .dealer-wizard-foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .dealer-wizard-head h2 { font-size: 21px; }
  .dealer-wizard-panel [data-wizard-next] { width: 100%; min-width: 0; }
  .dealer-wizard-panel [data-wizard-back] { position: static; transform: none; order: 2; margin: 4px auto 0; }
  .dealer-wizard-panel [data-wizard-back]:not(:disabled):hover { transform: none; }
  .dw-accent-layout { grid-template-columns: 1fr; }
  .dw-svc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .dw-logo-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (max-width: 380px) {
  .dw-svc-grid { grid-template-columns: 1fr 1fr; }
  .dw-accent-options { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

/* =============================================================================
   Add Dealer wizard — softer, calmer, more pleasant pass
============================================================================= */
.dealer-wizard-panel {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--dealer-wizard-accent) 15%, rgba(255,255,255,.10));
  background:
    radial-gradient(150% 95% at 82% -18%, color-mix(in srgb, var(--dealer-wizard-accent) 12%, transparent), transparent 62%),
    linear-gradient(180deg, #17181f 0%, #101116 66%);
  box-shadow: 0 40px 90px -52px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.04) inset;
}
.dealer-wizard-body { flex: 0 1 auto; }
.dealer-wizard-glow { opacity: .4; filter: blur(36px); width: 340px; height: 340px; }
@keyframes dw-breathe { 0%,100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.12); opacity: .46; } }
.dealer-wizard-panel { animation-duration: .55s; }

.dealer-wizard-head { padding: 24px 26px 8px; }
.dealer-wizard-body { padding: 8px 26px 12px; }
.dealer-wizard-foot { padding: 18px 26px 24px; }
.dealer-wizard-head h2 { font-size: 24px; font-weight: 720; letter-spacing: -.022em; margin-bottom: 4px; }
.dw-step { gap: 17px; }
.dw-sub { color: color-mix(in srgb, var(--dash-text) 68%, transparent); line-height: 1.6; }

/* Softer, rounder inputs with a gentle focus */
.dw-field input, .dw-area-add input {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 15px 16px;
}
.dw-field input:focus, .dw-area-add input:focus {
  border-color: color-mix(in srgb, var(--dealer-wizard-accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 13%, transparent);
  transform: none;
}

/* Gentler progress bar */
.dealer-wizard-progress-track { height: 10px; background: rgba(255,255,255,.06); }
.dealer-wizard-progress-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--dealer-wizard-accent) 72%, #000), var(--dealer-wizard-accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--dealer-wizard-accent) 42%, transparent);
}
.dealer-wizard-progress-caption { color: color-mix(in srgb, var(--dealer-wizard-accent) 42%, #fff); font-weight: 650; }

/* Calmer buttons + chips */
.dealer-wizard-panel .dash-btn-primary { box-shadow: 0 10px 24px -15px var(--dealer-wizard-accent); }
.dealer-wizard-panel .dash-btn-primary:not(:disabled):hover { box-shadow: 0 14px 28px -15px var(--dealer-wizard-accent); }
.dw-chip { background: color-mix(in srgb, var(--dealer-wizard-accent) 9%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--dealer-wizard-accent) 26%, transparent); }

/* Slightly slower, smoother step motion for a relaxed feel */
.dealer-wizard-body.is-in.dw-dir-fwd { animation-duration: .5s; }
.dealer-wizard-body.is-in.dw-dir-back { animation-duration: .5s; }
.dealer-wizard-body.is-in .dw-step > * { animation-duration: .6s; }

/* =============================================================================
   Add Dealer wizard — color step layout, contained progress, arrow, notes
============================================================================= */
/* Blue-violet identity wash (matches the main site) layered under accent */
.dealer-wizard-panel {
  background:
    radial-gradient(150% 95% at 84% -18%, color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent), transparent 58%),
    radial-gradient(120% 80% at 8% 2%, color-mix(in srgb, #8b5cf6 12%, transparent), transparent 52%),
    linear-gradient(180deg, #16171f 0%, #0f1016 66%);
}

/* Color step — clean 2-column grid, Custom spans both bottom cells (no empty space) */
.dw-accent-options { grid-template-columns: 1fr 1fr; gap: 12px; }
.dealer-accent-custom-choice { grid-column: 1 / -1; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.dealer-accent-custom-choice .dealer-accent-site-preview { display: none; }
.dealer-accent-custom-choice .dealer-custom-accent-input-row { width: 100%; justify-content: space-between; }
.dealer-accent-custom-choice .dealer-custom-accent-input-row span { font-size: 13px; font-weight: 650; color: var(--dash-text); order: -1; }

/* Progress bar — contained + beautiful (no overflow off the panel) */
.dealer-wizard-progress-track { overflow: hidden; height: 11px; padding: 0; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.dealer-wizard-progress-fill {
  min-width: 0;
  background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent) 58%, color-mix(in srgb, var(--dealer-wizard-accent) 55%, #fff));
  box-shadow: none;
}
.dealer-wizard-progress-fill::after { border-radius: 0; }

/* Continue — arrow vertically centered with the label */
.dealer-wizard-panel [data-wizard-next] { align-items: center; line-height: 1; gap: 8px; }
.dw-next-label { line-height: 1; display: inline-block; vertical-align: middle; }
.dw-next-arrow { display: inline-block; vertical-align: middle; flex: none; margin-top: 0; }

/* Upload — free designer-review reassurance */
.dw-upload-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: var(--dash-muted); }
.dw-upload-note svg { flex: none; margin-top: 1px; color: color-mix(in srgb, var(--dealer-wizard-accent) 72%, #fff); }
.dw-upload-note strong { color: color-mix(in srgb, var(--dealer-wizard-accent) 60%, #fff); font-weight: 700; }

/* =============================================================================
   Add Dealer wizard — taller live preview + phone OTP verification popup
============================================================================= */
/* Live preview matches the height of the color-swatch column */
.dw-accent-layout { align-items: stretch; }
.dw-preview-wrap { display: flex; flex-direction: column; }
.dw-mini { flex: 1 1 auto; min-height: 332px; display: flex; flex-direction: column; }
.dw-mini-hero { flex: 1 1 auto; }

/* OTP popup — themed in the chosen accent color */
.dw-otp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; max-width: 384px; margin: 0 auto; padding: 6px 18px; }
.dw-otp-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--dealer-wizard-accent), var(--dealer-wizard-accent-deep)); box-shadow: 0 14px 30px -12px var(--dealer-wizard-accent); }
.dw-otp-icon svg { width: 26px; height: 26px; }
.dw-otp strong { font-size: 21px; font-weight: 720; letter-spacing: -.02em; }
.dw-otp-sub { margin: 0; color: var(--dash-muted); font-size: 13.5px; line-height: 1.55; }
.dw-otp-sub b { color: var(--dash-text); }
.dw-otp-inputs { display: flex; gap: 10px; margin: 4px 0; }
.dw-otp-digit { width: 46px; height: 56px; text-align: center; font-size: 23px; font-weight: 700; color: var(--dash-text); background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; transition: border-color .15s, box-shadow .2s, transform .12s; }
.dw-otp-digit:focus { outline: none; border-color: var(--dealer-wizard-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-wizard-accent) 20%, transparent); transform: translateY(-2px); }
.dw-otp.is-error .dw-otp-digit { border-color: #ff5a5a; animation: dw-otp-shake .4s; }
@keyframes dw-otp-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.dw-otp-error { margin: 0; color: #ff8a8a; font-size: 13px; font-weight: 600; }
.dw-otp-verify { width: 100%; max-width: 320px; margin-top: 2px; }
.dw-otp-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 320px; gap: 10px; }
.dw-otp-resend { background: none; border: 0; color: var(--dealer-wizard-accent); font-weight: 650; font-size: 13px; cursor: pointer; padding: 4px; }
.dw-otp-resend:hover { text-decoration: underline; }
.dw-otp-hint { color: var(--dash-faint); font-size: 11.5px; }
.dw-open-site { margin-top: 8px; min-width: 210px; }

/* =============================================================================
   Add Dealer wizard — custom rainbow swatch, car preview, free-logo bonus,
   site-generation animation, set-password screen
============================================================================= */
/* Custom color tile: designed card with a rectangular RAINBOW swatch */
.dealer-accent-custom-choice { grid-column: 1 / -1; flex-direction: column !important; align-items: stretch; justify-content: flex-start; gap: 7px; padding: 9px; }
.dealer-accent-custom-choice .dealer-accent-site-preview,
.dealer-accent-custom-choice .dealer-custom-accent-input-row { display: none !important; }
.dealer-accent-rainbow { position: relative; display: block; width: 100%; height: 30px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(90deg,#ff5f57,#ff8a3d,#febc2e,#28c840,#22c3e6,#2f6bff,#7c4dff,#ff2d9a,#ff5f57);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14); }
.dealer-accent-rainbow input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; }
.dealer-accent-rainbow input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.dealer-accent-rainbow input[type=color]::-webkit-color-swatch { border: none; }
.dealer-accent-rainbow-dot { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.5); }

/* Live preview — tint-simulator car block fills the empty space */
.dw-mini-hero { display: flex; gap: 10px; align-items: stretch; }
.dw-mini-copy { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; }
.dw-mini-sim { position: relative; flex: 1.15; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 10px 8px 6px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); }
.dw-mini-sim-tag { position: absolute; top: 5px; left: 8px; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dealer-wizard-accent); opacity: .9; }
.dw-mini-car { width: 100%; height: auto; }
.dw-car-glass { fill: var(--dealer-wizard-accent); opacity: .82; }

/* Free-logo bonus plate (gift styling, with a checkmark) */
.dw-logo-bonus { position: relative; width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 16px; cursor: pointer; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, #2bd47d 34%, rgba(255,255,255,.12));
  background: linear-gradient(135deg, color-mix(in srgb, #1f9d57 15%, transparent), rgba(255,255,255,.02));
  transition: transform .16s var(--dw-ease), border-color .16s, box-shadow .2s; }
.dw-logo-bonus:hover { transform: translateY(-2px); }
.dw-logo-bonus.is-selected { border-color: #2bd47d; box-shadow: 0 0 0 4px color-mix(in srgb, #2bd47d 18%, transparent); }
.dw-logo-bonus-ribbon { position: absolute; top: 0; right: 0; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #04130b; background: linear-gradient(135deg, #3ee98a, #1f9d57); padding: 4px 12px; border-bottom-left-radius: 12px; }
.dw-logo-bonus-tick { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d27c, #179a52); box-shadow: 0 8px 18px -8px #1f9d57; }
.dw-logo-bonus-tick svg { width: 22px; height: 22px; }
.dw-logo-bonus-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dw-logo-bonus-body strong { font-size: 14.5px; font-weight: 700; }
.dw-logo-bonus-body span { font-size: 12px; line-height: 1.45; color: var(--dash-muted); }
.dw-logo-bonus-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dw-logo-bonus-price s { color: var(--dash-faint); font-size: 12px; }
.dw-logo-bonus-price b { color: #3ee98a; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.dw-upload.is-selected { border-color: var(--dealer-wizard-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent); }

/* Site-generation animation */
.dw-gen { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 20px; max-width: 384px; margin: 0 auto; }
.dw-gen-orb { position: relative; width: 64px; height: 64px; }
.dw-gen-orb i { position: absolute; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--dealer-wizard-accent); animation: dw-spin 1s linear infinite; }
.dw-gen-orb i:nth-child(1) { inset: 0; }
.dw-gen-orb i:nth-child(2) { inset: 8px; border-top-color: color-mix(in srgb, var(--dealer-wizard-accent) 55%, #fff); animation-duration: 1.5s; animation-direction: reverse; }
.dw-gen-orb i:nth-child(3) { inset: 16px; border-top-color: rgba(255,255,255,.5); animation-duration: 2s; }
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-gen strong { font-size: 19px; font-weight: 720; }
.dw-gen-step { color: var(--dash-muted); font-size: 13px; min-height: 18px; }
.dw-gen-bar { width: 240px; max-width: 80%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dw-gen-bar i { display: block; width: 6%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dealer-wizard-accent-deep), var(--dealer-wizard-accent)); transition: width 2.6s cubic-bezier(.3,.8,.3,1); }

/* Set-password screen */
.dw-pass { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; max-width: 360px; margin: 0 auto; padding: 6px 18px; }
.dw-pass-check { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d27c, #179a52); box-shadow: 0 14px 30px -12px #1f9d57; }
.dw-pass-check svg { width: 26px; height: 26px; }
.dw-pass strong { font-size: 21px; font-weight: 720; letter-spacing: -.02em; }
.dw-pass-sub { margin: 0; color: var(--dash-muted); font-size: 13.5px; line-height: 1.55; }
.dw-pass-sub b { color: var(--dash-text); }
.dw-pass-fields { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.dw-pass-input { width: 100%; padding: 14px 15px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); color: var(--dash-text); font-size: 15px; }
.dw-pass-input:focus { outline: none; border-color: var(--dealer-wizard-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 14%, transparent); }
.dw-pass-error { margin: 0; color: #ff8a8a; font-size: 13px; font-weight: 600; }
.dw-pass-submit { width: 100%; max-width: 320px; margin-top: 2px; }

/* =============================================================================
   Add Dealer wizard — header order, rounded custom hue palette, logo gift
============================================================================= */
/* Title on top, encouragement caption below the progress bar */
.dealer-wizard-head h2 { margin: 10px 0 0; }
.dealer-wizard-progress-track { margin-top: 12px; }
.dealer-wizard-progress-meta { margin: 8px 0 0; }
.dealer-wizard-progress-caption { display: inline-block; }

/* Custom color: rounded swatch (rainbow until picked, then the chosen color) */
.dealer-accent-custom-choice { grid-column: 1 / -1; flex-direction: column !important; align-items: stretch; justify-content: flex-start; gap: 7px; padding: 9px; cursor: pointer; }
.dealer-accent-customswatch { display: block; width: 100%; height: 30px; border-radius: 9px;
  background: linear-gradient(90deg,#ff5f57,#ff8a3d,#febc2e,#28c840,#22c3e6,#2f6bff,#7c4dff,#ff2d9a,#ff5f57);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 14px -10px rgba(0,0,0,.6); }
.dealer-accent-customswatch.is-picked { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 14px -8px currentColor; }

/* Rounded rainbow hue palette (replaces the native picker) */
.dw-hue-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.dw-hue-label { font-size: 11.5px; color: var(--dash-muted); font-weight: 600; }
.dw-hue { position: relative; height: 18px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, hsl(0 90% 55%), hsl(45 90% 55%), hsl(90 90% 50%), hsl(140 80% 48%), hsl(180 85% 50%), hsl(215 95% 58%), hsl(260 90% 62%), hsl(300 85% 60%), hsl(340 90% 58%), hsl(360 90% 55%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px -6px rgba(0,0,0,.5); }
.dw-hue-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 26px; border-radius: 7px; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.55); pointer-events: none; }
.dw-hue:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 30%, transparent); }

/* Small "free review" note under Upload */
.dw-upload-note-sm { font-size: 11.5px; margin: 7px 2px 0; }
.dw-upload-note-sm svg { color: #3ee98a; }

/* Bonus plate gift icon (replaces the checkmark) */
.dw-logo-bonus-gift svg { width: 23px; height: 23px; }

/* =============================================================================
   Add Dealer wizard — dark SV+hue color palette, password strength, email code
============================================================================= */
/* Full color palette on a DARK plate (saturation/value square + hue bar) */
.dw-picker { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 11px; padding: 12px; border-radius: 16px;
  background: rgba(10, 11, 16, .55); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 28px -18px rgba(0,0,0,.8); }
.dw-sv { position: relative; width: 100%; height: 156px; border-radius: 13px; cursor: crosshair; touch-action: none;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    hsl(var(--pick-hue, 215) 100% 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.dw-sv-cursor { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.55); transform: translate(-50%, -50%); pointer-events: none; }
.dw-huebar { position: relative; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* Password strength meter */
.dw-pass-meter { width: 100%; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 1px; }
.dw-pass-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: #ff5a5a; transition: width .25s ease, background .25s ease; }
.dw-pass-meter-label { font-size: 11.5px; font-weight: 700; color: var(--dash-muted); letter-spacing: .01em; }

/* Email-code: change-email row + error shake */
.dw-otp-dot { color: var(--dash-faint); }
.dw-otp-changeemail-row { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.dw-otp-changeemail-row .dw-pass-input { flex: 1; }
.dw-otp-sendnew { white-space: nowrap; }
.dw-otp.is-error .dw-otp-inputs { animation: dwShake .32s; }
@keyframes dwShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* Welcome / tutorial stub */
.dw-welcome { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.dw-welcome strong { font-size: 19px; }
.dw-welcome-stub { width: 100%; border: 1px dashed rgba(255,255,255,.22); border-radius: 14px; padding: 16px;
  background: rgba(255,255,255,.03); color: var(--dash-muted); font-size: 13px; }
.dw-welcome-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dealer-wizard-accent); background: color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 7px; }

/* =============================================================================
   Add Dealer wizard — motion polish, valid-field feedback, new-popup, address menu
============================================================================= */
/* Smooth, springy feedback on interactive bits */
.dealer-wizard-panel .dw-field input,
.dealer-wizard-panel .dw-pass-input,
.dealer-wizard-panel .dw-otp-digit {
  transition: border-color .22s var(--dw-ease), box-shadow .22s var(--dw-ease), background-color .22s ease, transform .12s var(--dw-ease);
}
.dealer-wizard-panel .dw-field input:focus { transform: translateY(-1px); }

/* Green "valid" feedback as you type a good value */
.dealer-wizard-panel .dw-field input.is-valid,
.dealer-wizard-panel .dw-pass-input.is-valid {
  border-color: #2bd47d;
  box-shadow: 0 0 0 3px rgba(43,212,125,.14);
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232bd47d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"),
    linear-gradient(90deg, rgba(43,212,125,.30), rgba(43,212,125,.08));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, left center;
  background-size: 15px 15px, 0% 100%;
  animation: dwFieldSweep .55s var(--dw-ease) forwards;
}
@keyframes dwFieldSweep { from { background-size: 15px 15px, 0% 100%; } to { background-size: 15px 15px, 100% 100%; } }
.dealer-wizard-panel .dw-otp-digit.is-valid { border-color: #2bd47d; box-shadow: 0 0 0 3px rgba(43,212,125,.16); }
@keyframes dwValidPop { 0% { box-shadow: 0 0 0 0 rgba(43,212,125,.5); } 55% { box-shadow: 0 0 0 7px rgba(43,212,125,.08); } 100% { box-shadow: 0 0 0 3px rgba(43,212,125,.16); } }

/* "Create my website" -> the wizard chrome fades out, a fresh popup pops in */
.dealer-wizard-panel.is-creating .dealer-wizard-head,
.dealer-wizard-panel.is-creating [data-wizard-body],
.dealer-wizard-panel.is-creating .dealer-wizard-foot {
  opacity: 0; transform: scale(.96) translateY(-6px); pointer-events: none;
  transition: opacity .32s var(--dw-ease), transform .32s var(--dw-ease);
}
.dealer-wizard-creating { backdrop-filter: blur(3px); transition: backdrop-filter .3s ease; }
.dw-gen, .dw-pass, .dw-otp, .dw-welcome, .dw-creating-card { animation: dwPopIn .44s var(--dw-ease) both; }
@keyframes dwPopIn { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* Clearer selected / not-selected logo states (default = nothing selected) */
.dw-upload, .dw-logo-bonus { position: relative; transition: border-color .2s var(--dw-ease), box-shadow .22s var(--dw-ease), transform .18s var(--dw-ease), background-color .22s ease, opacity .2s ease; }
.dw-upload:not(.is-selected), .dw-logo-bonus:not(.is-selected) { opacity: .88; }
.dw-upload:not(.is-selected):hover, .dw-logo-bonus:not(.is-selected):hover { opacity: 1; transform: translateY(-2px); }
.dw-upload.is-selected, .dw-logo-bonus.is-selected {
  opacity: 1; border-color: var(--dealer-wizard-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-wizard-accent) 22%, transparent), 0 16px 32px -20px var(--dealer-wizard-accent);
}
.dw-logo-bonus.is-selected { background: color-mix(in srgb, var(--dealer-wizard-accent) 10%, rgba(255,255,255,.02)); }
.dw-upload.is-selected::after, .dw-logo-bonus.is-selected::after {
  content: ''; position: absolute; top: -10px; right: -10px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--dealer-wizard-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
  border: 2.5px solid #14151c; box-shadow: 0 5px 12px -3px rgba(0,0,0,.6);
  animation: dwValidPop .4s var(--dw-ease);
}

/* Address suggestions dropdown */
.dw-ac-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #14151c; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 6px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.85); display: flex; flex-direction: column; gap: 2px;
  animation: dwPopIn .2s var(--dw-ease) both;
}
.dw-ac-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px;
  border-radius: 9px; border: 0; background: transparent; color: var(--dash-text); cursor: pointer;
  font-size: 13.5px; transition: background .15s ease, transform .12s var(--dw-ease);
}
.dw-ac-item:hover { background: rgba(255,255,255,.07); transform: translateX(2px); }
.dw-ac-item svg { color: var(--dealer-wizard-accent); flex: none; }

/* Strength meter: animate the fill smoothly */
.dw-pass-meter > i { transition: width .35s var(--dw-ease), background-color .3s ease; }

/* =============================================================================
   Add Dealer wizard — centering, centered Continue, logo/gift, svc fill, otp fill
============================================================================= */
/* Result popup (generation / password / code / welcome) is centered + compact */
.dealer-wizard-panel.is-creating .dealer-wizard-head,
.dealer-wizard-panel.is-creating [data-wizard-body],
.dealer-wizard-panel.is-creating .dealer-wizard-foot { display: none !important; }
.dealer-wizard-panel.is-creating .dealer-wizard-creating {
  position: relative; inset: auto; min-height: 460px; padding: 44px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dealer-wizard-panel.is-creating { animation: dwPanelShrink .4s var(--dw-ease) both; }
@keyframes dwPanelShrink { from { transform: scale(.98); } to { transform: scale(1); } }

/* Continue centered; Back floats on the left */
.dealer-wizard-foot { position: relative; justify-content: center; }
.dealer-wizard-foot [data-wizard-back] { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }
.dealer-wizard-foot [data-wizard-back]:not(:disabled):hover { transform: translateY(-50%) translateX(-2px); }

/* Free-logo plate: no outline until selected */
.dw-logo-bonus:not(.is-selected) { border-color: transparent !important; box-shadow: none; }

/* Gift: just the icon, no box */
.dw-logo-bonus-gift {
  background: none !important; box-shadow: none !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  color: var(--dealer-wizard-accent);
}
.dw-logo-bonus-gift svg { width: 32px !important; height: 32px !important; }

/* Service category: green left->right fill + "Added to site" */
.dw-svc-card { position: relative; overflow: hidden; }
.dw-svc-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(43,212,125,.26), rgba(43,212,125,.06));
  transform: scaleX(0); transform-origin: left; transition: transform .42s var(--dw-ease);
}
.dw-svc-card.is-on::before { transform: scaleX(1); }
.dw-svc-card.is-on { border-color: #2bd47d; }
.dw-svc-card > * { position: relative; z-index: 1; }
.dw-svc-added {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #2bd47d;
  opacity: 0; transform: translateX(-6px); transition: opacity .3s ease .12s, transform .3s var(--dw-ease) .12s;
}
.dw-svc-added::before { content: '✓'; font-weight: 900; }
.dw-svc-card.is-on .dw-svc-added { opacity: 1; transform: translateX(0); }

/* OTP: green left->right fill bar under the digits */
.dw-otp-progress { width: 100%; max-width: 240px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px auto 2px; }
.dw-otp-progress > i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #19c97a, #57e39b); box-shadow: 0 0 12px -2px rgba(43,212,125,.6);
  transition: width .4s var(--dw-ease); }

/* Make sure [hidden] always wins over flex layouts */
.dw-otp-changeemail-row[hidden] { display: none !important; }
.dw-public[hidden] { display: none !important; }

.dw-ac-menu[hidden] { display: none !important; }

/* =============================================================================
   Add Dealer wizard — mockup-grade services, rich green field fill, glowing bar
============================================================================= */
/* --- Services step: photo cards with a ring indicator (accent-themed) --- */
.dw-svc-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.dw-svc-card { border-radius: 18px; background: #0f1116; border: 1.5px solid var(--dash-border); }
.dw-svc-card:not(.is-on) { opacity: .96; }
.dw-svc-card:hover { transform: translateY(-3px); }
.dw-svc-photo { display: block; position: relative; height: 132px; background-size: cover; background-position: center; }
.dw-svc-photo-grad { background:
    radial-gradient(120% 90% at 80% -10%, color-mix(in srgb, var(--dealer-wizard-accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg, #1b1e27, #0c0d12); }
.dw-svc-watermark { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.10); }
.dw-svc-watermark .dealer-service-preview svg { width: 56px; height: 56px; }
.dw-svc-watermark .dealer-service-preview i { display: none; }
.dw-svc-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 132px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(8,9,13,.6)); transition: background .3s ease; }
.dw-svc-card.is-on::after { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--dealer-wizard-accent) 42%, transparent)); }
/* one-time left->right accent wipe behind the body when selected */
.dw-svc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 132px; bottom: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dealer-wizard-accent) 30%, transparent), color-mix(in srgb, var(--dealer-wizard-accent) 6%, transparent));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--dw-ease); border-radius: 0; }
.dw-svc-card.is-on::before { transform: scaleX(1); }
/* ring -> filled accent check */
.dw-svc-indicator { position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.28);
  color: transparent; transition: border-color .25s var(--dw-ease), background .25s var(--dw-ease), box-shadow .25s var(--dw-ease); }
.dw-svc-indicator svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .3s var(--dw-ease); }
.dw-svc-card.is-on .dw-svc-indicator { border-color: transparent; background: var(--dealer-wizard-accent); color: #fff; box-shadow: 0 6px 16px -4px var(--dealer-wizard-accent); }
.dw-svc-card.is-on .dw-svc-indicator svg { opacity: 1; transform: scale(1); }
/* body row with a small icon box */
.dw-svc-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; position: relative; z-index: 1; }
.dw-svc-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--dash-muted);
  transition: background .25s var(--dw-ease), color .25s var(--dw-ease), border-color .25s var(--dw-ease), box-shadow .25s var(--dw-ease); }
.dw-svc-ic .dealer-service-preview svg { width: 23px; height: 23px; }
.dw-svc-ic .dealer-service-preview i { display: none; }
.dw-svc-card.is-on .dw-svc-ic { background: var(--dealer-wizard-accent); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px var(--dealer-wizard-accent); }
.dw-svc-body { padding: 0; flex: 1; min-width: 0; }
.dw-svc-body strong { font-size: 15px; }
.dw-svc-body small { font-size: 12px; max-height: 2.9em; }
.dw-svc-card.is-on { border-color: var(--dealer-wizard-accent);
  box-shadow: 0 0 0 1.5px var(--dealer-wizard-accent), 0 0 26px -6px var(--dealer-wizard-accent), 0 18px 40px -22px var(--dealer-wizard-accent); }
@media (max-width: 560px) { .dw-svc-grid { grid-template-columns: 1fr; } }

/* --- Rich green fill for entered fields (with glow + filled circle check) --- */
.dealer-wizard-panel .dw-field input.is-valid,
.dealer-wizard-panel .dw-pass-input.is-valid {
  border-color: #2bd47d;
  box-shadow: 0 0 0 1.5px #2bd47d, 0 0 22px -6px rgba(43,212,125,.7);
  padding-right: 44px; caret-color: #2bd47d;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%232bd47d'/><path d='M16.5 9l-5.5 5.5L8 11.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    radial-gradient(140% 120% at 18% 50%, rgba(120,240,180,.16), rgba(43,212,125,0) 55%),
    linear-gradient(90deg, rgba(43,212,125,.12), rgba(43,212,125,.34) 65%, rgba(120,240,180,.18));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 12px center, left center, left center;
  background-size: 19px 19px, 60% 100%, 0% 100%;
  animation: dwFieldSweep .55s var(--dw-ease) forwards, dwFieldShine 1.5s var(--dw-ease) .25s;
}
@keyframes dwFieldSweep { from { background-size: 19px 19px, 60% 100%, 0% 100%; } to { background-size: 19px 19px, 60% 100%, 100% 100%; } }
@keyframes dwFieldShine { 0% { background-position: right 12px center, -20% 50%, left center; } 100% { background-position: right 12px center, 120% 50%, left center; } }

/* --- Glowing top progress bar (like the mockup) --- */
.dealer-wizard-panel .dealer-wizard-progress-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--dealer-wizard-accent) 70%, #000), var(--dealer-wizard-accent) 70%, color-mix(in srgb, var(--dealer-wizard-accent) 60%, #fff)) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--dealer-wizard-accent) 80%, transparent), 0 0 7px color-mix(in srgb, var(--dealer-wizard-accent) 95%, transparent) !important;
}
.dealer-wizard-progress-caption { color: var(--dealer-wizard-accent) !important; font-weight: 700; }
.dealer-wizard-head-row p { color: var(--dealer-wizard-accent); }

/* --- Glowing Continue button --- */
.dealer-wizard-panel .dash-btn-primary { box-shadow: 0 0 22px -6px var(--dealer-wizard-accent), 0 12px 26px -14px var(--dealer-wizard-accent); }
.dealer-wizard-panel .dash-btn-primary:not(:disabled):hover { box-shadow: 0 0 30px -4px var(--dealer-wizard-accent), 0 16px 30px -14px var(--dealer-wizard-accent); }

/* =============================================================================
   Add Dealer wizard — accent-only validation, building preview, mockup welcome
============================================================================= */
/* Validation: accent ring + accent check mark, NO green, NO gradient fill */
.dealer-wizard-panel .dw-field input.is-valid,
.dealer-wizard-panel .dw-pass-input.is-valid {
  border-color: color-mix(in srgb, var(--dealer-wizard-accent) 70%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-wizard-accent) 15%, transparent), 0 0 18px -8px var(--dealer-wizard-accent) !important;
  background-image: none !important;
  animation: none !important;
}
.dw-field { position: relative; }
.dw-field::after {
  content: ''; position: absolute; right: 15px; bottom: 16px; width: 20px; height: 20px;
  background: var(--dealer-wizard-accent);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17 3.7 11.7 5.1 10.3 9 14.2 18.9 4.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17 3.7 11.7 5.1 10.3 9 14.2 18.9 4.3z'/></svg>") center/contain no-repeat;
  opacity: 0; transform: scale(.3) rotate(-25deg); pointer-events: none;
  transition: opacity .2s ease, transform .35s var(--dw-ease);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dealer-wizard-accent) 60%, transparent));
}
.dw-field:has(input.is-valid)::after { opacity: 1; transform: scale(1) rotate(0); }
.dw-field input.is-valid { padding-right: 44px; }

/* Shop-name field: leading icon, bigger, animated "Available" pill */
.dw-field-lg input { font-size: 17px; padding: 17px 18px; }
.dw-field-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--dash-text); margin-bottom: 9px; }
.dw-field-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent); color: var(--dealer-wizard-accent); }
.dw-field-ic svg { width: 18px; height: 18px; }
.dw-field-name::after { display: none !important; }
.dw-field-name .dw-available {
  position: absolute; right: 12px; bottom: 13px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 999px;
  color: var(--dealer-wizard-accent); background: color-mix(in srgb, var(--dealer-wizard-accent) 16%, transparent);
  opacity: 0; transform: scale(.6) translateX(8px); pointer-events: none;
  transition: opacity .2s ease, transform .32s var(--dw-ease);
}
.dw-field-name .dw-available::before { content: '\2713'; font-weight: 900; }
.dw-field-name:has(input.is-valid) .dw-available { opacity: 1; transform: scale(1) translateX(0); }

/* Drop green/gradient: accent solid for the success badges (welcome check stays green) */
.dw-pass-check, .dw-otp-icon { background: var(--dealer-wizard-accent) !important; box-shadow: 0 14px 30px -12px var(--dealer-wizard-accent) !important; }
.dealer-wizard-panel .dash-btn-primary { background: var(--dealer-wizard-accent) !important; }

/* "Building your website" — the live preview assembling */
.dw-gen-build { gap: 16px; max-width: 420px; }
.dw-gen-build .dw-mini { width: 100%; min-height: 0; }
.dw-build > * { animation: dwBuildIn .55s var(--dw-ease) both; }
.dw-build .dw-mini-bar { animation-delay: .05s; }
.dw-build .dw-mini-hero { animation-delay: .35s; }
.dw-build .dw-mini-cards { animation-delay: .7s; }
.dw-build .dw-mini-cards span:nth-child(2) { animation-delay: .82s; }
.dw-build .dw-mini-cards span:nth-child(3) { animation-delay: .94s; }
@keyframes dwBuildIn { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }

/* Password screen — fully centered */
.dw-pass { align-items: center; width: 100%; }
.dw-pass-fields, .dw-pass-error, .dw-pass-submit { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
.dw-pass-submit { margin-top: 6px; }

/* OTP footer — tidy, centered */
.dw-otp-foot { justify-content: center; gap: 12px; }
.dw-otp-changeemail-row { max-width: 320px; }

/* Welcome screen — mockup layout (accent everything; check stays green) */
.dw-welcome { gap: 13px; max-width: 460px; }
.dw-welcome-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; justify-content: center; padding: 6px 0 2px; }
.dw-welcome-logo img { max-height: 66px; max-width: 220px; object-fit: contain; }
.dw-welcome-monogram { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff;
  background: var(--dealer-wizard-accent); box-shadow: 0 10px 24px -10px var(--dealer-wizard-accent); }
.dw-welcome-brand { font-size: 13px; font-weight: 800; letter-spacing: .22em; color: var(--dash-text); }
.dw-welcome-spark { position: absolute; width: 6px; height: 6px; border-radius: 1px; background: var(--dealer-wizard-accent); transform: rotate(45deg);
  box-shadow: 0 0 8px var(--dealer-wizard-accent); animation: dwTwinkle 2.4s ease-in-out infinite; }
@keyframes dwTwinkle { 0%,100% { opacity: .15; transform: rotate(45deg) scale(.5); } 50% { opacity: .95; transform: rotate(45deg) scale(1); } }
.dw-welcome-check { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: #21c25a; box-shadow: 0 0 26px -3px rgba(33,194,90,.85), 0 12px 26px -10px rgba(33,194,90,.6); }
.dw-welcome-check svg { width: 28px; height: 28px; }
.dw-welcome strong { font-size: 30px; font-weight: 760; letter-spacing: -.02em; }
.dw-welcome .dw-accent { color: var(--dealer-wizard-accent); }
.dw-welcome-divider { width: 64%; height: 2px; margin: 6px auto 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--dealer-wizard-accent), transparent);
  box-shadow: 0 0 16px var(--dealer-wizard-accent); }
.dw-welcome-rows { width: 100%; max-width: 384px; display: flex; flex-direction: column; }
.dw-welcome-row { display: flex; align-items: center; gap: 16px; padding: 15px 6px; }
.dw-welcome-row + .dw-welcome-row { border-top: 1px solid rgba(255,255,255,.07); }
.dw-welcome-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--dealer-wizard-accent);
  border-right: 1px solid rgba(255,255,255,.12); padding-right: 16px; }
.dw-welcome-ic svg { width: 25px; height: 25px; }
.dw-welcome-rc { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.dw-welcome-rc small { font-size: 12.5px; color: var(--dash-muted); }
.dw-welcome-rc b { font-size: 16px; font-weight: 700; color: var(--dash-text); overflow: hidden; text-overflow: ellipsis; }
.dw-welcome .dw-open-site { width: 100%; max-width: 384px; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Shop-name field: icon without box (car) + "Checking… → Available" animation */
.dw-field-ic { background: none !important; border: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--dealer-wizard-accent); }
.dw-field-ic svg { width: 23px; height: 23px; }

.dw-field-name .dw-available { display: inline-flex; align-items: center; gap: 6px; opacity: 0; }
.dw-field-name .dw-available::before { content: none !important; }
.dw-field-name:has(input.is-valid) .dw-available { opacity: 0; }      /* override old auto-show; class states drive it */
.dw-field-name.is-checking .dw-available,
.dw-field-name.is-available .dw-available { opacity: 1; transform: scale(1) translateX(0); }

.dw-av-spin, .dw-av-check { display: none; }
.dw-av-check { font-weight: 900; }
.dw-field-name.is-checking .dw-av-spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--dealer-wizard-accent) 28%, transparent); border-top-color: var(--dealer-wizard-accent);
  animation: dwAvSpin .6s linear infinite; }
.dw-field-name.is-available .dw-av-check { display: inline; }
@keyframes dwAvSpin { to { transform: rotate(360deg); } }

.dw-av-text::after { content: ''; }
.dw-field-name.is-checking .dw-available { color: var(--dash-muted); background: color-mix(in srgb, var(--dash-muted) 12%, transparent); }
.dw-field-name.is-checking .dw-av-text::after { content: 'Checking\2026'; }
.dw-field-name.is-available .dw-av-text::after { content: 'Available'; }

/* =============================================================================
   Building animation (fly-in assembly) · centered ready screen · inline welcome tick
============================================================================= */
/* Center every creating-stage screen uniformly */
.dealer-wizard-panel.is-creating .dealer-wizard-creating { min-height: 0; padding: 42px 28px; justify-content: center; }
.dw-pass, .dw-otp, .dw-welcome, .dw-gen-build { width: 100%; max-width: 400px; margin: 0 auto; align-items: center; text-align: center; }
.dw-pass-fields, .dw-pass-error, .dw-pass-submit { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
.dw-pass-submit { margin-top: 6px; }

/* "Building your website" — pieces fly in from different sides and assemble */
.dw-gen-build .dw-mini { overflow: hidden; }
.dw-build .dw-mini-bar, .dw-build .dw-mini-hero, .dw-build .dw-mini-cards,
.dw-build .dw-mini-logo, .dw-build .dw-mini-nav i, .dw-build .dw-mini-cta,
.dw-build .dw-mini-h1, .dw-build .dw-mini-h2, .dw-build .dw-mini-btn,
.dw-build .dw-mini-sim, .dw-build .dw-mini-cards span {
  opacity: 0; animation-fill-mode: both !important; animation-timing-function: var(--dw-ease) !important;
}
.dw-build .dw-mini-bar   { animation: dwFlyDown .5s .05s both !important; }
.dw-build .dw-mini-logo  { animation: dwPiecePop .5s .22s both !important; }
.dw-build .dw-mini-nav i { animation: dwFlyLeft .42s both !important; }
.dw-build .dw-mini-nav i:nth-child(1) { animation-delay: .30s !important; }
.dw-build .dw-mini-nav i:nth-child(2) { animation-delay: .38s !important; }
.dw-build .dw-mini-nav i:nth-child(3) { animation-delay: .46s !important; }
.dw-build .dw-mini-cta   { animation: dwFlyRight .42s .52s both !important; }
.dw-build .dw-mini-hero  { animation: dwFadeUp .55s .6s both !important; }
.dw-build .dw-mini-h1    { animation: dwFlyLeft .42s .72s both !important; }
.dw-build .dw-mini-h2    { animation: dwFlyLeft .42s .82s both !important; }
.dw-build .dw-mini-btn   { animation: dwPiecePop .46s .94s both !important; }
.dw-build .dw-mini-sim   { animation: dwFlyRight .58s .78s both !important; }
.dw-build .dw-mini-cards span { animation: dwFlyUp .44s both !important; }
.dw-build .dw-mini-cards span:nth-child(1) { animation-delay: 1.02s !important; }
.dw-build .dw-mini-cards span:nth-child(2) { animation-delay: 1.14s !important; }
.dw-build .dw-mini-cards span:nth-child(3) { animation-delay: 1.26s !important; }
@keyframes dwFlyDown  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes dwFlyUp    { from { opacity: 0; transform: translateY(28px); }  to { opacity: 1; transform: none; } }
@keyframes dwFlyLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes dwFlyRight { from { opacity: 0; transform: translateX(30px); }  to { opacity: 1; transform: none; } }
@keyframes dwFadeUp   { from { opacity: 0; transform: translateY(16px); }  to { opacity: 1; transform: none; } }
@keyframes dwPiecePop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }

/* Welcome: no big green square; small green tick beside the name */
.dw-welcome-check { display: none !important; }
.dw-welcome strong { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.dw-welcome-tick { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; margin-left: 8px;
  color: #fff; background: #21c25a; box-shadow: 0 0 16px -2px rgba(33,194,90,.75); vertical-align: middle;
  animation: dwPiecePop .5s .15s both; }
.dw-welcome-tick svg { width: 16px; height: 16px; }

/* =============================================================================
   Build "done" check · password fixed-width centering · in-field corner checks
   · OTP phone fallback · welcome big check (no logo / no inline tick)
============================================================================= */
/* "Building" finishes with a green "done" check over the assembled site */
.dw-gen-stage { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: grid; place-items: center; }
.dw-gen-done { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: #fff; background: #21c25a; box-shadow: 0 0 30px -3px rgba(33,194,90,.85), 0 14px 30px -10px rgba(33,194,90,.6);
  opacity: 0; transform: scale(.3); pointer-events: none; }
.dw-gen-done svg { width: 33px; height: 33px; }
.dw-gen-build.is-done .dw-mini { filter: blur(2px) brightness(.62); transform: scale(.95); transition: filter .4s ease, transform .4s ease; }
.dw-gen-build.is-done .dw-gen-done { animation: dwPiecePop .55s var(--dw-ease) both; }

/* Password screen: inputs + button SAME width, centered, never resize on input */
.dw-pass { align-items: center; }
.dw-pass-fields, .dw-pass-error, .dw-pass-submit { width: 100%; max-width: 330px; margin-left: auto; margin-right: auto; }
.dw-pass-submit { margin-top: 8px; }
.dealer-wizard-panel .dw-pass-input { box-sizing: border-box; width: 100%; padding-right: 42px; }
.dealer-wizard-panel .dw-pass-input.is-valid { padding-right: 42px; }   /* width unchanged when valid */
.dw-inwrap { position: relative; display: block; width: 100%; }
.dw-inwrap::after {
  content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.3) rotate(-25deg);
  width: 19px; height: 19px; background: var(--dealer-wizard-accent); opacity: 0; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17 3.7 11.7 5.1 10.3 9 14.2 18.9 4.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20.3 5.7 9 17 3.7 11.7 5.1 10.3 9 14.2 18.9 4.3z'/></svg>") center/contain no-repeat;
  transition: opacity .2s ease, transform .35s var(--dw-ease);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dealer-wizard-accent) 60%, transparent));
}
.dw-inwrap:has(input.is-valid)::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }

/* OTP: phone fallback button */
.dw-otp-altmethod { margin-top: 6px; width: 100%; max-width: 320px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--dash-border-strong); background: rgba(255,255,255,.04);
  color: var(--dash-text); font: 650 13px 'Inter', sans-serif; cursor: pointer; transition: border-color .18s, background .18s; }
.dw-otp-altmethod:hover { border-color: color-mix(in srgb, var(--dealer-wizard-accent) 55%, transparent); background: rgba(255,255,255,.06); }
.dw-otp-altmethod svg { width: 16px; height: 16px; color: var(--dealer-wizard-accent); }

/* Welcome: big green check at top (logo + inline tick removed) */
.dw-welcome-tick { display: none !important; }
.dw-welcome-logo { min-height: 64px; }
.dw-welcome-bigcheck { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: #21c25a; box-shadow: 0 0 30px -3px rgba(33,194,90,.85), 0 14px 30px -10px rgba(33,194,90,.6);
  animation: dwPiecePop .55s .1s both; }
.dw-welcome-bigcheck svg { width: 34px; height: 34px; }

/* =============================================================================
   Wizard polish: stronger backdrop dim+blur, open animation, logo upload UX
============================================================================= */
.dealer-wizard-modal { animation: dwModalFade .3s ease both; }
.dealer-wizard-backdrop { background: rgba(4,5,9,.82) !important; backdrop-filter: blur(20px) saturate(125%) !important; -webkit-backdrop-filter: blur(20px) saturate(125%) !important; }
.dealer-wizard-panel { animation: dwPanelIn .44s var(--dw-ease) both; }
@keyframes dwModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dwPanelIn { from { opacity: 0; transform: translateY(20px) scale(.965); } to { opacity: 1; transform: none; } }

/* Upload: the "+" flies away on hover */
.dw-upload-plus { transition: transform .32s var(--dw-ease), opacity .25s ease; }
.dw-upload:hover .dw-upload-plus { transform: translateY(-30px) rotate(90deg) scale(.5); opacity: 0; }
.dw-upload:hover { border-color: color-mix(in srgb, var(--dealer-wizard-accent) 55%, transparent); }
.dw-upload-preview { transition: transform .18s ease; transform-origin: center; max-height: 86px; }

/* Logo size adjuster (shown after upload) */
.dw-logo-size { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px;
  border: 1px solid var(--dash-border); border-radius: 13px; background: rgba(255,255,255,.03); animation: dwFadeUp .35s var(--dw-ease) both; }
.dw-logo-size-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--dash-text); }
.dw-logo-size-head svg { width: 16px; height: 16px; color: var(--dealer-wizard-accent); }
.dw-logo-size-row { display: flex; align-items: center; gap: 11px; }
.dw-logo-size-row input[type="range"] { flex: 1; accent-color: var(--dealer-wizard-accent); height: 4px; cursor: pointer; }
.dw-logo-size-min { font-size: 12px; font-weight: 800; color: var(--dash-muted); }
.dw-logo-size-max { font-size: 19px; font-weight: 800; color: var(--dash-muted); line-height: 1; }
.dw-logo-size-val { min-width: 44px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--dealer-wizard-accent); }

.dw-upload.is-selected:has(.dw-upload-preview){border:0!important;background:none!important;padding:6px 0!important;transform:none!important;}
.dw-upload.is-selected:has(.dw-upload-preview):hover{border:0!important;background:none!important;transform:none!important;}
.dw-upload-stage{width:auto!important;height:auto!important;overflow:visible!important;}
.dw-upload-preview{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;width:auto!important;max-width:150px;max-height:64px!important;height:auto!important;}

.dw-headprev{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.dw-headprev-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dash-muted);}
.dw-headprev-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;overflow:hidden;border:1px solid var(--dash-border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));}
.dw-headprev-logo{max-height:40px;max-width:110px;width:auto;height:auto;object-fit:contain;transform-origin:left center;transition:transform .12s ease;flex:none;}
.dw-headprev-text{display:flex;flex-direction:column;gap:1px;transition:transform .12s ease;min-width:0;}
.dw-headprev-text strong{font-size:16px;font-weight:760;color:var(--dash-text);letter-spacing:-.01em;white-space:nowrap;}
.dw-headprev-text small{font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--dealer-wizard-accent);white-space:nowrap;}

.dealer-wizard-head [data-wizard-progress]{font-size:15px!important;font-weight:800!important;color:var(--dealer-wizard-accent);}
.dw-welcome-title{text-align:center;line-height:1.18;}
.dw-field.dw-field-error input{border-color:#ff5a5a!important;box-shadow:0 0 0 3px rgba(255,90,90,.16)!important;}
.dw-field.dw-field-error .dw-field-head,.dw-field.dw-field-error>span:first-child{color:#ff5a5a;}
.dw-field-errmsg{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#ff5a5a;}

.dw-upload-done{position:relative;display:flex;align-items:center;justify-content:center;min-height:78px;padding:12px;border:1px solid var(--dash-border);border-radius:15px;background:rgba(255,255,255,.025);}
.dw-upload-done .dw-upload-stage{width:auto!important;height:auto!important;overflow:visible;}
.dw-upload-done .dw-upload-preview{max-width:180px;max-height:70px!important;height:auto!important;width:auto!important;background:none!important;padding:0!important;}
.dw-reupload{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:7px 11px;border-radius:10px;border:1px solid var(--dash-border-strong);background:rgba(20,22,28,.78);color:var(--dash-text);font-size:12px;font-weight:700;backdrop-filter:blur(6px);transition:border-color .16s,background .16s,transform .16s;}
.dw-reupload input{display:none;}
.dw-reupload:hover{border-color:var(--dealer-wizard-accent);background:color-mix(in srgb,var(--dealer-wizard-accent) 16%,rgba(20,22,28,.78));transform:translateY(-1px);}
.dw-reupload svg{width:14px;height:14px;color:var(--dealer-wizard-accent);}
.dw-upload-loading{display:flex;align-items:center;gap:15px;padding:17px;border:1.5px dashed var(--dash-border-strong);border-radius:15px;background:rgba(255,255,255,.025);}
.dw-upload-spinner{width:30px;height:30px;flex:none;border-radius:50%;border:3px solid color-mix(in srgb,var(--dealer-wizard-accent) 26%,transparent);border-top-color:var(--dealer-wizard-accent);animation:dwAvSpin .65s linear infinite;}
@keyframes dwAvSpin{to{transform:rotate(360deg);}}

.dw-inwrap{position:relative;}
.dw-pass-input{padding-left:42px!important;}
.dw-eye{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;color:var(--dash-muted);cursor:pointer;transition:color .16s;}
.dw-eye:hover{color:var(--dash-text);}
.dw-eye svg{width:20px;height:20px;}
.dw-eye .dw-eye-off{display:none;}
.dw-eye.is-on .dw-eye-open{display:none;}
.dw-eye.is-on .dw-eye-off{display:block;color:var(--dealer-wizard-accent);}
.dw-inwrap::after{right:14px;filter:none!important;}
.dw-pass-match{display:block;margin:-4px auto 2px;font-size:12px;font-weight:700;text-align:center;}
.dw-pass-match.is-bad{color:#ff5a5a;}
.dw-pass-match.is-ok{color:#2bd47d;}
.dw-pass-input.dw-pass-mismatch{border-color:#ff5a5a!important;box-shadow:none!important;}
.dw-svc-card:hover{transform:none!important;box-shadow:none!important;border-color:var(--dash-border-strong)!important;}
.dw-svc-card.is-on{box-shadow:none!important;border-color:var(--dealer-wizard-accent)!important;}
.dw-svc-card.is-on .dw-svc-photo::after{display:none!important;}
.dw-svc-card.is-on .dw-svc-photo,.dw-svc-card .dw-svc-photo::after,.dw-svc-card::before{box-shadow:none!important;}
.dw-svc-card:hover .dw-svc-photo{transform:none!important;}
.dw-svc-indicator{box-shadow:none!important;}
.dealer-wizard-panel .dw-field input:focus,.dealer-wizard-panel .dw-pass-input:focus{outline:none;border-color:var(--dealer-wizard-accent)!important;box-shadow:none!important;}
.dealer-wizard-panel .dw-field input.is-valid,.dealer-wizard-panel .dw-pass-input.is-valid{box-shadow:none!important;background-image:none!important;}
.dw-field::after{filter:none!important;}

.dw-svc-card.is-on::after{background:linear-gradient(180deg,transparent 40%,rgba(10,11,15,.55))!important;}
.dw-svc-card::before{display:none!important;}
.dw-svc-card.is-on .dw-svc-indicator{box-shadow:none!important;}
.dw-svc-card.is-on .dw-svc-ic{box-shadow:none!important;}
.dw-svc-card.is-on{box-shadow:none!important;}

.dw-headprev-bar{position:relative;padding-right:120px;min-height:64px;overflow:hidden;}
.dw-reupload-hp{position:absolute;top:50%;right:12px;transform:translateY(-50%);}
.dw-reupload-hp:hover{transform:translateY(-50%) translateY(-1px);}
.dw-headprev-logo{max-height:44px;}
.dw-field:has(.dw-note)::after,.dw-field:has(small)::after{display:none!important;}

.dw-build .dw-mini-bar{animation:dwFlyDown .55s .10s both!important;}
.dw-build .dw-mini-logo{animation:dwPiecePop .55s .45s both!important;}
.dw-build .dw-mini-nav i:nth-child(1){animation:dwFlyLeft .5s .65s both!important;}
.dw-build .dw-mini-nav i:nth-child(2){animation:dwFlyLeft .5s .80s both!important;}
.dw-build .dw-mini-nav i:nth-child(3){animation:dwFlyLeft .5s .95s both!important;}
.dw-build .dw-mini-cta{animation:dwFlyRight .5s 1.10s both!important;}
.dw-build .dw-mini-hero{animation:dwFadeUp .6s 1.35s both!important;}
.dw-build .dw-mini-h1{animation:dwFlyLeft .5s 1.60s both!important;}
.dw-build .dw-mini-h2{animation:dwFlyLeft .5s 1.78s both!important;}
.dw-build .dw-mini-btn{animation:dwPiecePop .5s 1.96s both!important;}
.dw-build .dw-mini-sim{animation:dwFlyRight .65s 1.55s both!important;}
.dw-build .dw-mini-cards span:nth-child(1){animation:dwFlyUp .5s 2.25s both!important;}
.dw-build .dw-mini-cards span:nth-child(2){animation:dwFlyUp .5s 2.45s both!important;}
.dw-build .dw-mini-cards span:nth-child(3){animation:dwFlyUp .5s 2.65s both!important;}
.dw-gen-stage{position:relative;}
.dw-gen-build:not(.is-done) .dw-mini::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--dealer-wizard-accent) 26%,transparent) 50%,transparent 70%);background-size:220% 100%;animation:dwScan 1.7s linear .3s 2;opacity:.8;}
@keyframes dwScan{from{background-position:160% 0;}to{background-position:-60% 0;}}
.dw-gen-done svg{width:100%;height:100%;}
.dw-gen-done .dw-gen-done-ring{stroke-dasharray:145;stroke-dashoffset:145;}
.dw-gen-done .dw-gen-done-tick{stroke-dasharray:44;stroke-dashoffset:44;}
.dw-gen-build.is-done .dw-gen-done{animation:dwPiecePop .5s var(--dw-ease) both;}
.dw-gen-build.is-done .dw-gen-done-ring{animation:dwDraw .5s ease .05s forwards;}
.dw-gen-build.is-done .dw-gen-done-tick{animation:dwDraw .4s ease .4s forwards;}
@keyframes dwDraw{to{stroke-dashoffset:0;}}
.dw-upload-plus{display:flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;padding:0!important;font-size:30px!important;font-weight:300!important;}
.dw-welcome strong.dw-welcome-title{display:block!important;}

.dw-gen-tick{display:none;width:30px;height:30px;margin:2px auto 0;color:var(--dealer-wizard-accent);}
.dw-gen-tick svg{width:100%;height:100%;display:block;}
.dw-gen-tick-ring{stroke-dasharray:139;stroke-dashoffset:139;}
.dw-gen-tick-path{stroke-dasharray:44;stroke-dashoffset:44;}
.dw-gen-build.is-done #gstep,.dw-gen-build.is-done [data-gen-step]{opacity:0;transition:opacity .25s ease;}
.dw-gen-build.is-done .dw-gen-tick{display:block;animation:dwTickPop .45s var(--dw-ease) .1s both;}
.dw-gen-build.is-done .dw-gen-tick-ring{animation:dwDraw .55s ease .15s forwards;}
.dw-gen-build.is-done .dw-gen-tick-path{animation:dwDraw .45s ease .55s forwards;}
@keyframes dwTickPop{0%{opacity:0;transform:scale(.5);}70%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
.dw-gen-build.is-done .dw-gen-done{background:var(--dealer-wizard-accent)!important;box-shadow:0 0 30px -3px var(--dealer-wizard-accent),0 14px 30px -10px var(--dealer-wizard-accent)!important;}
.dw-gen-build.is-done .dw-gen-done::after{content:'';position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--dealer-wizard-accent);opacity:0;animation:dwDonePulse .9s ease .25s 2;}
@keyframes dwDonePulse{0%{opacity:.6;transform:scale(.85);}100%{opacity:0;transform:scale(1.25);}}
.dw-gen-build.is-done .dw-mini{animation:dwSettle .5s var(--dw-ease) both;}
@keyframes dwSettle{0%{transform:scale(.97);}55%{transform:scale(1.015);}100%{transform:scale(.95);}}

@media(min-width:720px){
.dw-accent-layout{align-items:start!important;grid-template-columns:1.05fr 1fr;}
.dw-accent-options{max-height:360px;overflow-y:auto;padding-right:6px;align-content:start;}
.dw-preview-wrap{position:sticky;top:4px;align-self:start;}
.dw-preview-wrap .dw-mini{animation:none;}
}
.dw-mini{max-height:380px;display:flex;flex-direction:column;}

@media(max-width:620px){
.dw-accent-layout{grid-template-columns:1fr;gap:14px;}
.dw-accent-options{grid-template-columns:repeat(3,1fr)!important;gap:8px;max-height:168px;overflow-y:auto;padding-right:4px;}
.dealer-accent-choice{padding:7px 6px;gap:5px;border-radius:11px;}
.dealer-accent-swatch{height:20px;}
.dealer-accent-label{font-size:10px;}
.dw-picker{grid-column:1 / -1;}
.dw-preview-wrap{order:-1;position:static;margin-bottom:2px;}
.dw-preview-wrap .dw-mini{animation:none;max-height:230px;}
.dw-mini-hero{padding:12px 13px;gap:7px;}
.dw-mini-h1{height:10px;}.dw-mini-h2{height:7px;}.dw-mini-btn{height:18px;width:70px;}
.dw-mini-cards{padding:0 13px 11px;}.dw-mini-cards span{height:26px;}
.dw-mini-sim{min-height:64px;}
}

@media(max-width:620px){
.dealer-wizard-panel{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
.dealer-wizard-head{flex:0 0 auto;padding:14px 16px 10px!important;}
.dealer-wizard-head h2{font-size:19px!important;}
.dealer-wizard-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:8px 16px 10px!important;-webkit-overflow-scrolling:touch;}
.dealer-wizard-foot{flex:0 0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;}
.dealer-wizard-panel [data-wizard-next]{width:100%;min-width:0;}
.dealer-wizard-panel.is-creating .dealer-wizard-creating{min-height:0!important;padding:18px 16px!important;}
.dw-step > .dw-sub{font-size:12.5px!important;line-height:1.4;margin:0 0 10px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dw-accent-layout{grid-template-columns:1fr!important;gap:12px!important;}
.dw-preview-wrap{order:-1;position:static!important;margin:2px 0 0!important;}
.dw-preview-wrap .dw-mini{animation:none!important;max-height:200px!important;}
.dw-mini-hero{padding:11px 12px!important;gap:6px!important;}
.dw-mini-h1{height:9px!important;}.dw-mini-h2{height:6px!important;}
.dw-mini-btn{height:16px!important;width:64px!important;}
.dw-mini-cards{padding:0 12px 10px!important;}.dw-mini-cards span{height:22px!important;}
.dw-mini-sim{min-height:56px!important;}
.dw-mini-bar{padding:7px 10px!important;}
.dw-accent-options{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;max-height:none!important;overflow:visible!important;}
.dealer-accent-choice{padding:7px 6px!important;gap:4px!important;border-radius:11px!important;}
.dealer-accent-swatch{height:18px!important;}
.dealer-accent-label{font-size:10px!important;}
.dw-picker{grid-column:1 / -1;}
}
@media(max-width:380px){
.dw-preview-wrap .dw-mini{max-height:176px!important;}
.dw-mini-sim{min-height:46px!important;}
.dealer-wizard-head h2{font-size:18px!important;}
}

.dealer-service-preview{display:grid!important;place-items:center!important;}
.dealer-service-preview svg{width:auto!important;height:auto!important;max-width:60%!important;max-height:60%!important;display:block;margin:auto;}
.dw-svc-ic{display:grid!important;place-items:center!important;}
.dw-svc-ic .dealer-service-preview{width:100%;height:100%;border:0;background:none;}
.dw-svc-ic .dealer-service-preview svg{max-width:22px!important;max-height:22px!important;}
.dw-svc-watermark .dealer-service-preview svg{max-width:52px!important;max-height:52px!important;width:auto!important;height:auto!important;}
@media(max-width:620px){
.dealer-wizard-foot{flex-wrap:wrap!important;justify-content:center!important;position:relative!important;}
.dealer-wizard-panel [data-wizard-next]{order:1;width:100%!important;}
.dealer-wizard-panel [data-wizard-back]{position:static!important;transform:none!important;order:2!important;width:auto!important;margin:8px auto 0!important;left:auto!important;top:auto!important;}
.dealer-wizard-panel [data-wizard-back]:not(:disabled):hover{transform:none!important;}
}