/* ============================================================
   MONUMENT — Configurator visual reskin
   ============================================================
   CSS-ONLY. Touches zero HTML or JavaScript.
   Loads AFTER the compiled {% stylesheet %} block, so cascade
   wins without !important on token overrides.
   ============================================================ */

/* ── 1. Design token overrides ───────────────────────────────
   Override the self-contained tokens declared inside the
   monument-route-builder {% stylesheet %} block.
   ─────────────────────────────────────────────────────────── */
.mrb-wrapper {
  --color-bg-base:       #1B2838;               /* Monument navy */
  --color-bg-elevated:   #1F3042;
  --color-bg-raised:     #253A54;
  --color-bg-overlay:    rgba(27,40,56,0.96);
  --color-fg:            #EFEAE1;               /* Monument cream */
  --color-fg-muted:      rgba(239,234,225,0.72);
  --color-fg-subtle:     rgba(239,234,225,0.42);
  --color-accent:        #fb5200;               /* Monument rust */
  --color-accent-hover:  #d54600;
  --color-accent-muted:  rgba(251,82,0,0.10);
  --color-accent-shadow: rgba(251,82,0,0.30);
  --color-border:        rgba(239,234,225,0.10);
  --color-border-strong: rgba(239,234,225,0.24);
  --color-border-focus:  #fb5200;
  --font-display:        'Fraunces', Georgia, serif;
}

/* ── 2. Global font base ─────────────────────────────────────
   Keep body font from theme; only override display elements.
   ─────────────────────────────────────────────────────────── */

/* ── 3. Header ───────────────────────────────────────────────*/
.mrb-header__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

/* ── 4. Step progress ─────────────────────────────────────── */
.mrb-step-dot[data-complete] {
  background: rgba(251,82,0,0.40);
}

.mrb-steps__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* ── 5. Step legend: mono label above, serif title below ──── */
.mrb-step__legend {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.mrb-step__number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
}

.mrb-step__number::after {
  content: none;
}

.mrb-step__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-fg);
}

.mrb-step__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-fg-muted);
}

/* ── 6. Preview tabs ──────────────────────────────────────── */
.mrb-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mrb-tab[aria-selected="true"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: transparent;
}

/* ── 7. Buttons ───────────────────────────────────────────── */
.mrb-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-fg);
  border-color: rgba(239,234,225,0.32);
}

.mrb-btn:hover {
  background: rgba(239,234,225,0.10);
  color: var(--color-fg);
}

/* Primary — rust fill */
.mrb-btn--primary {
  background: var(--color-accent);
  color: #EFEAE1;
  border-color: var(--color-accent);
}

.mrb-btn--primary:hover {
  background: var(--color-accent-hover);
  color: #EFEAE1;
  border-color: var(--color-accent-hover);
}

.mrb-btn--primary:active {
  background: var(--color-accent-hover);
}

/* Ghost — muted cream outline */
.mrb-btn--ghost {
  color: var(--color-fg-muted);
  border-color: rgba(239,234,225,0.22);
}

.mrb-btn--ghost:hover {
  color: var(--color-fg);
  background: rgba(239,234,225,0.06);
  border-color: rgba(239,234,225,0.45);
}

/* CTA — rust, full width (replaces Strava orange) */
.mrb-btn--cta {
  font-size: 13px;
  letter-spacing: 0.16em;
  background: var(--color-accent);
  color: #EFEAE1;
  border-color: var(--color-accent);
  min-height: 64px;
  padding: 20px 32px;
}

.mrb-btn--cta:hover {
  background: var(--color-accent-hover);
  color: #EFEAE1;
  border-color: var(--color-accent-hover);
}

/* ── 8. Dropzone ──────────────────────────────────────────── */
.mrb-dropzone {
  border-color: rgba(239,234,225,0.20);
}

.mrb-dropzone:hover,
.mrb-dropzone:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.mrb-dropzone--drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.mrb-dropzone__primary {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.mrb-dropzone__cta {
  color: var(--color-accent);
}

/* ── 9. Form fields ───────────────────────────────────────── */
.mrb-field__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.mrb-field__input {
  font-size: 15px;
  color: var(--color-fg);
  border-color: var(--color-border);
}

.mrb-field__input:focus {
  border-color: var(--color-accent);
  outline-color: var(--color-accent);
}

/* ── 10. Color pickers ────────────────────────────────────── */
.mrb-color-group__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── 11. Summary / review step ────────────────────────────── */
.mrb-summary__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.mrb-order__price-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.mrb-order__price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

/* ── 12. Loading overlay text ─────────────────────────────── */
.mrb-loading__text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── 13. Error state ──────────────────────────────────────── */
.mrb-error__retry {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ── 14. Strava connect button ────────────────────────────── */
.mrb-strava-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-color: rgba(239,234,225,0.22);
  color: var(--color-fg-muted);
}

.mrb-strava-btn:hover {
  border-color: rgba(239,234,225,0.45);
  color: var(--color-fg);
}

/* ── 15. Nav buttons ──────────────────────────────────────── */
.mrb-nav {
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* ── Mobile typography tweaks (max-width: 749px) ────────────── */
@media (max-width: 749px) {
  .mrb-steps__label { font-size: 10px; }
  .mrb-step__title  { font-size: clamp(24px, 7vw, 32px); }
}

/* ── Expand button (real <button> replaces ::after pseudo-element) ─────────── */
.mrb-expand-btn {
  display: none; /* hidden on desktop */
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 30, 42, 0.72);
  border: none;
  cursor: pointer;
  color: #fff;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  z-index: 11; /* above pane content, below lightbox */
  padding: 0;
}

.mrb-expand-btn:hover {
  opacity: 1;
  background: rgba(20, 30, 42, 0.92);
}

/* ── 3D fullscreen close button (inside the 3D pane, shown only when fullscreen) */
.mrb-3d-fullscreen-close {
  position: absolute;
  top: max(52px, env(safe-area-inset-top, 52px));
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* stacks within pane3d's own context */
}

.mrb-3d-fullscreen-close:hover {
  background: var(--color-accent-hover);
}

/* ── 3D pane fullscreen mode (CSS class toggle — no DOM move) ─────────────── */
.mrb-pane--3d-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  width: 100vw !important;
  max-height: none !important;
  z-index: 201 !important; /* above lightbox overlay (200) */
  overflow: hidden !important;
  background: var(--color-bg-base);
}

/* The 3D viewer fills the fullscreen pane */
.mrb-pane--3d-fullscreen .mrb-3d-viewer {
  width: 100%;
  height: 100%;
}

/* ── Mobile layout (max-width: 768px) ────────────────────────
   Simple stacked layout: preview on top, config below.
   The base liquid CSS already handles this correctly — we only
   add small tweaks here to match the Monument design tokens.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Fill the full viewport — prevents the Dawn theme's cream body background
     (#F6F2EE) from showing below the section when content is shorter than 100dvh. */
  .mrb-wrapper {
    min-height: 100dvh;
    background: var(--color-bg-base);
  }

  /* Ensure config area is never shorter than the remaining viewport space */
  .mrb-config {
    background: var(--color-bg-base);
  }

  /* Dark background on the 3D pane so it's visible even before canvas renders */
  .mrb-pane--3d {
    background: var(--color-bg-elevated);
  }

  /* Show expand button on mobile */
  .mrb-expand-btn {
    display: flex;
  }

  /* Compact tab strip */
  .mrb-tabs {
    padding: 8px 16px;
  }
  .mrb-tab {
    min-height: 36px;
    padding: 6px 14px;
  }

  /* Compact pane — no internal scroll.
     Scoped to .mrb-preview so fullscreen pane3d is NOT constrained. */
  .mrb-preview .mrb-pane {
    height: 180px;
    overflow: hidden;
  }

  /* Let max-height drive the poster size via aspect-ratio.
     Scoped to .mrb-preview so the lightbox (.mrb-lightbox__stage .mrb-poster)
     keeps its own min(280px, 78vw) width rule. */
  .mrb-preview .mrb-poster {
    width: auto;
  }

  /* Nav bar — ensure it renders above everything and uses Monument tokens.
     The base liquid CSS already sets position:fixed + bottom:0, but may
     lose to a parent stacking context. Raise z-index and restyle. */
  .mrb-nav {
    z-index: 100;
    background: var(--color-bg-base);
    border-top: 1px solid var(--color-border-strong);
  }

  /* "Næste" — rust, not Strava orange */
  .mrb-nav [data-nav="next"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #EFEAE1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .mrb-nav [data-nav="next"]:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }

  /* "Tilbage" — ghost cream */
  .mrb-nav [data-nav="back"] {
    color: var(--color-fg-muted);
    border-color: var(--color-border-strong);
    background: transparent;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .mrb-nav [data-nav="back"]:hover {
    color: var(--color-fg);
    border-color: rgba(239,234,225,0.45);
    background: rgba(239,234,225,0.06);
  }
}