/* ===========================================================
   motion.css — CrispMotion builder extras
   Loaded after lobby.css + panel.css so we can refine only
   what differs (secondary CTA, sticky mobile bar, preview tweaks).
=========================================================== */

/* Reset anchor underlines for builders (panel pages) */
body.panel-page a { text-decoration: none; color: inherit; }

/* CrispMotion pages: glue the price box to the bottom of the viewport on desktop
   so it stays anchored to the design canvas while the controls above scroll.
   Keep the dark navy background from panel.css — the white text only reads
   correctly on a dark surface. We just enhance shadow + z-index so it floats
   convincingly above scrolling content. On mobile the dedicated
   .auto-sticky-bar handles this, so the rail-buy can flow normally. */
body.panel-page.auto-page .rail-buy {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  /* Premium elevation — deeper than other rail cards so it reads as floating */
  box-shadow:
    0 1px 2px rgba(10,18,38,0.10),
    0 18px 48px rgba(10,18,38,0.32),
    0 4px 12px rgba(10,18,38,0.18);
}

@media (max-width: 880px) {
  /* On mobile the sticky mobile bar handles glued pricing — revert rail-buy. */
  body.panel-page.auto-page .rail-buy {
    position: static;
    box-shadow: var(--panel-shadow-sm);
  }
}

/* Secondary CTA below the primary Buy Now button */
.rail-buy-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid rgba(10,18,38,0.15);
  border-radius: 12px;
  color: var(--panel-ink, #0A1226);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.rail-buy-secondary:hover {
  background: #F4EFE6;
  border-color: rgba(10,18,38,0.32);
}
.rail-buy-secondary:active { transform: translateY(1px); }

/* Sticky mobile price bar (hidden on desktop) */
.auto-sticky-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10,18,38,0.96);
  color: #FAF7F2;
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.auto-sticky-meta {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.auto-sticky-amount {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .auto-sticky-bar { display: flex; }
  .panel-shell { padding-bottom: 80px; }
}

/* Two-line segmented chip (size selector with size-class blurb) */
.seg .seg-btn .seg-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.62;
  line-height: 1.25;
}
.seg .seg-btn.is-active .seg-sub { opacity: 0.85; }

/* Van-large preset tag (small pill inside size preset button) */
.size-preset .preset-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(232, 24, 32, 0.12);
  color: #E81820;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.size-preset.is-active .preset-tag {
  background: rgba(255,255,255,0.22);
  color: #FAF7F2;
}
.size-preset.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Preview stage tightening for auto builder */
.panel-page .panel-canvas-stage svg {
  width: 100%;
  max-height: 540px;
}

/* Coming-soon (auto.html) template grid */
.auto-stub-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.auto-stub-card {
  background: #fff;
  border: 1px solid rgba(10,18,38,0.10);
  border-radius: 20px;
  padding: 56px 56px 48px;
  box-shadow: 0 1px 2px rgba(10,18,38,0.04), 0 24px 64px rgba(10,18,38,0.10);
  text-align: center;
}
.auto-stub-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E81820;
  margin-bottom: 18px;
}
.auto-stub-card h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: #0A1226;
  margin: 0 0 18px;
}
.auto-stub-card p.lede {
  max-width: 580px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.55;
  color: #5b6478;
}
.auto-stub-templates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 36px 0 32px;
}
.auto-stub-tile {
  aspect-ratio: 4 / 5;
  min-height: 220px;
  border-radius: 14px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(10,18,38,0.08);
  color: #0A1226;
  text-align: left;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(160deg, #F4EFE6 0%, #FAF7F2 60%, #EDE6D6 100%);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
a.auto-stub-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10,18,38,0.14);
}
.auto-stub-tile .tile-art {
  flex: 1 1 auto;
  width: 100%;
  margin: 8px 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(10,18,38,0.06), 0 0 0 1px rgba(10,18,38,0.04) inset;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.auto-stub-tile .tile-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.auto-stub-tile.t2 { background: linear-gradient(160deg, #0A1226 0%, #1A2138 100%); color: #FAF7F2; }
.auto-stub-tile.t3 { background: linear-gradient(160deg, #E81820 0%, #B81218 100%); color: #FAF7F2; }
.auto-stub-tile.t5 { background: linear-gradient(160deg, #0A1226 0%, #2A3148 100%); color: #FAF7F2; }
.auto-stub-tile.t6 { background: linear-gradient(160deg, #FAF7F2 0%, #F4EFE6 100%); }
.auto-stub-tile.t7 { background: linear-gradient(160deg, #1A2138 0%, #E81820 110%); color: #FAF7F2; }
.auto-stub-tile.t8 { background: linear-gradient(160deg, #FAF7F2 0%, #E81820 220%); }
.auto-stub-tile .tile-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}
.auto-stub-tile .tile-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.auto-stub-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.auto-stub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .15s ease, background .15s ease;
  border: 1px solid transparent;
  text-decoration: none;
}
.auto-stub-cta.primary {
  background: #E81820;
  color: #fff;
}
.auto-stub-cta.primary:hover { background: #B81218; transform: translateY(-1px); }
.auto-stub-cta.ghost {
  background: transparent;
  color: #0A1226;
  border-color: rgba(10,18,38,0.18);
}
.auto-stub-cta.ghost:hover { background: #F4EFE6; }

@media (max-width: 800px) {
  .auto-stub-templates { grid-template-columns: repeat(2, 1fr); }
  .auto-stub-card { padding: 36px 22px 32px; }
}
@media (max-width: 420px) {
  .auto-stub-templates { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* =================================================================
   v2: Photorealistic vehicle canvas (sizing-accurate decal overlay)
   ================================================================= */

/* Vehicle picker tabs above the canvas */
.vehicle-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(10,18,38,0.08);
}
.vehicle-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.vehicle-tab:hover { background: #F4EFE6; }
.vehicle-tab.is-active {
  background: #0A1226;
  border-color: #0A1226;
}
.vehicle-tab.is-active .vehicle-tab-label,
.vehicle-tab.is-active .vehicle-tab-sub { color: #FAF7F2; }
.vehicle-tab-label {
  font-size: calc(14px * var(--ui-scale, 1));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0A1226;
}
.vehicle-tab-sub {
  font-size: calc(11px * var(--ui-scale, 1));
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #6b7280;
}

/* Canvas */
.vehicle-canvas {
  position: relative;
  width: 100%;
  background: #EFEAE0;
  overflow: hidden;
  border-radius: 0;
}
.vehicle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* True-scale decal overlay */
.decal-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px dashed #E81820;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 4px 14px rgba(10,18,38,0.10);
  overflow: hidden;
  transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease;
  /* Container query context so children can size relative to overlay width */
  container-type: inline-size;
  box-sizing: border-box;
}
.decal-overlay.is-magnet {
  background: rgba(250, 247, 242, 0.92);
  border: 2px dashed rgba(10, 18, 38, 0.65);
}
.decal-overlay.is-oversized {
  background: transparent;
  border: 2px dashed #FFB400;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 4px rgba(255,180,0,0.18);
}
.decal-placeholder {
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #E81820;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 6px;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.6);
}
.decal-overlay.is-magnet .decal-placeholder { color: #0A1226; text-shadow: none; }
.decal-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: rgba(255,255,255,0.04);
}
.decal-art.fit-fit     { object-fit: contain; object-position: center; }
.decal-art.fit-center  { object-fit: none;    object-position: center; }
.decal-art.fit-stretch { object-fit: fill;    object-position: center; }

/* ===== Material spec card with 3M-style brand lockup ===== */
.material-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(10, 18, 38, 0.10);
  border-radius: 12px;
  background: #FAF7F2;
}
.material-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.material-logo .mat-3m-logo {
  display: block;
  width: 56px;
  height: auto;
  flex-shrink: 0;
  /* official 3M corporate logo, vector */
}
.material-logo .mat-product {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.material-logo .mat-product strong {
  font-size: 16px;
  color: #0A1226;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.material-logo .mat-sub {
  font-size: 12px;
  color: rgba(10, 18, 38, 0.65);
  font-weight: 500;
  margin-top: 1px;
}
.material-card .rail-spec-line {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(10, 18, 38, 0.85);
}
.material-spec-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #E81820;
  text-decoration: none;
  padding: 6px 10px;
  margin: 2px -10px -4px;
  border-radius: 6px;
  align-self: flex-start;
  transition: background-color .15s ease;
}
.material-spec-link:hover,
.material-spec-link:focus-visible {
  background: rgba(232, 24, 32, 0.08);
  text-decoration: none;
}
.material-spec-link .link-arrow {
  flex-shrink: 0;
  margin-top: -1px;
}

/* ===== Pro install finder explainer ===== */
.rail-finder-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(232, 24, 32, 0.06);
  border-left: 3px solid #E81820;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(10, 18, 38, 0.78);
}
.rail-finder-note strong {
  color: #0A1226;
  font-weight: 700;
}

/* ===== Fit-mode block (revealed after artwork upload) ===== */
.fit-mode-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(10, 18, 38, 0.12);
  animation: fitFadeIn .25s ease-out;
}
.fit-mode-block[hidden] { display: none; }
.fit-mode-block .rail-sub-tight {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 18, 38, 0.65);
}
.fit-mode-block .rail-microcopy {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(10, 18, 38, 0.55);
}
.fit-mode-block .rail-microcopy strong {
  color: rgba(10, 18, 38, 0.85);
  font-weight: 600;
}
@keyframes fitFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Size dimension pill, top center */
.canvas-size-pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,18,38,0.90);
  color: #FAF7F2;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* Oversized warning banner */
.canvas-warning {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(232, 24, 32, 0.96);
  color: #FAF7F2;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
  max-width: 88%;
}

/* Caption under canvas */
.canvas-caption {
  padding: 12px 16px;
  font-size: 12.5px;
  color: #5b6478;
  background: #fff;
  border-top: 1px solid rgba(10,18,38,0.06);
}
.canvas-caption strong { color: #0A1226; }

/* In-canvas "Upload artwork" button — centered, scales with overlay size.
   Uses container query units so it always reads as ~1/4 of the overlay width,
   clamped to a readable min and a not-too-loud max. Sits ABOVE the placeholder
   text via a small vertical offset; the placeholder shifts up via .has-upload. */
.canvas-upload-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 92%;
  box-sizing: border-box;
  /* Gap scales with font */
  gap: 0.45em;
  /* Padding scales with font (em-based) so it always proportions correctly */
  padding: 0.55em 1.1em;
  background: rgba(10, 18, 38, 0.88);
  color: #FAF7F2;
  font-family: 'Inter', sans-serif;
  /* Font scales smoothly with overlay width via container queries */
  font-size: clamp(11px, 4.2cqw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 4;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(10,18,38,0.35), 0 1px 3px rgba(10,18,38,0.20);
  line-height: 1;
}
.canvas-upload-btn svg {
  flex-shrink: 0;
  width: 1em !important;
  height: 1em !important;
  margin-top: -0.05em;
}
.canvas-upload-btn:hover {
  background: #E81820;
  border-color: rgba(255,255,255,0.22);
  transform: translate(-50%, calc(-50% - 1px));
  box-shadow: 0 6px 20px rgba(232,24,32,0.40), 0 1px 3px rgba(10,18,38,0.20);
}
.canvas-upload-btn:active { transform: translate(-50%, -50%); }

/* When magnet/decal placeholder is present, push it up to make room for centered button */
.decal-overlay .decal-placeholder {
  transform: translateY(-1.8em);
  transition: transform .15s ease;
}
.decal-overlay .decal-art ~ .canvas-upload-btn {
  background: rgba(10, 18, 38, 0.65);
}
.decal-overlay:has(.decal-art) .canvas-upload-btn {
  background: rgba(10, 18, 38, 0.65);
}

/* Very small decals — hide the text, icon only */
@container (max-width: 140px) {
  .canvas-upload-btn span { display: none; }
  .canvas-upload-btn { padding: 0.5em; }
}

/* Draggable magnet affordance */
.decal-overlay.is-draggable {
  cursor: grab;
  /* Smooth drag — disable the transition during interaction (set inline by JS) */
}
.decal-overlay.is-draggable.is-dragging {
  cursor: grabbing;
  transition: none;
  outline-color: rgba(232, 24, 32, 0.95);
  box-shadow: 0 6px 22px rgba(10,18,38,0.32);
}

/* "Drag to reposition" hint, fades on first drag */
.canvas-drag-hint {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(10, 18, 38, 0.78);
  color: #FAF7F2;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity .3s ease;
  z-index: 3;
  backdrop-filter: blur(6px);
}

/* Mobile: container queries handle scaling already — just ensure small decals
   gracefully fall back to icon-only via the @container query above. */

/* Restyle the canvas container — kill old padding so the image fills */
.panel-page .panel-canvas {
  padding: 0;
  background: #fff;
  overflow: hidden;
}
/* Hide the 'YOUR LIVE PREVIEW' pill on auto pages — the photoreal canvas
   is self-explanatory and the vehicle tabs are a cleaner anchor. */
body.panel-page.auto-page .panel-canvas-pill { display: none; }
.panel-page .panel-canvas-stage {
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
  border: none;
  min-height: 320px;
  overflow: hidden;
}
.panel-page .panel-canvas-help { display: none; }

/* Mobile: keep canvas at the top, rail below */
@media (max-width: 880px) {
  body.panel-page.auto-page .panel-canvas {
    display: block;
    min-height: 320px;
    overflow: visible;
  }
  body.panel-page.auto-page .panel-canvas-stage,
  body.panel-page.auto-page #autoPreview {
    display: block;
    min-height: 320px;
    width: 100%;
  }
  body.panel-page.auto-page .vehicle-canvas {
    display: block;
    min-height: 320px;
    width: 100%;
  }
  .vehicle-tabs { padding: 8px 8px; gap: 6px; }
  .vehicle-tab { padding: 8px 6px; }
  .vehicle-tab-label { font-size: 12.5px; }
  .vehicle-tab-sub { font-size: 10.5px; }
  .canvas-size-pill { top: 10px; font-size: 11.5px; padding: 6px 11px; }
}

@media (max-width: 420px) {
  body.panel-page.auto-page .panel-canvas,
  body.panel-page.auto-page .panel-canvas-stage,
  body.panel-page.auto-page #autoPreview,
  body.panel-page.auto-page .vehicle-canvas {
    min-height: 300px;
  }
}