/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · moving estimate tool (demo)

   Light and airy: Apple's clarity (system type, generous space, white
   cards, soft depth) with one lively accent, a blue to violet gradient,
   used for the progress, the price, the chosen options and the one button
   to press. Glassy panels float over soft colour washes.

   Designed at 390px first. From 960px up the live estimate moves into a
   sticky card beside the steps; below that it rides in the bottom dock.

   Loaded only by public/tools/movers/quote.html. Zero em dashes.
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --well: #f2f2f6;
  --glass: rgba(255, 255, 255, 0.72);
  --hair: rgba(29, 29, 31, 0.07);
  --hair-2: rgba(29, 29, 31, 0.12);
  --ink: #1d1d1f;
  --body: #3a3a3f;
  --muted: #6e6e76;
  --faint: #a1a1a8;
  --blue: #0a7cff;
  --violet: #7b3fe4;
  --accent: #4f5bf5;
  --grad: linear-gradient(120deg, #0a7cff 0%, #5a55f5 55%, #8b3ff0 100%);
  --accent-soft: rgba(79, 91, 245, 0.09);
  --accent-ring: rgba(79, 91, 245, 0.22);
  --ok: #1fb866;
  --err: #d70015;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 20px;
  --r-sm: 14px;
  --shadow: 0 1px 2px rgba(29, 29, 31, 0.04), 0 8px 24px rgba(29, 29, 31, 0.06);
  --shadow-lg: 0 2px 6px rgba(29, 29, 31, 0.04), 0 24px 60px rgba(40, 44, 110, 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.mv {
  min-height: 100dvh;
  background:
    radial-gradient(640px 420px at 0% -80px, rgba(10, 124, 255, 0.20), transparent 70%),
    radial-gradient(760px 480px at 100% -40px, rgba(139, 63, 240, 0.18), transparent 70%),
    radial-gradient(600px 400px at 70% 110%, rgba(255, 94, 170, 0.07), transparent 70%),
    var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* gradient text, for the few words that carry the accent */
.kicker,
.est__price,
.dock__price,
.summary__p {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── top bar ───────────────────────────────────────────────────────────── */

.mv-top {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* the lockup is one outlined SVG, so the name scales with the mark and can
   never truncate or wrap */
.brand__logo {
  display: block;
  flex: 0 0 auto;
  height: 38px;
  width: auto;
  aspect-ratio: 274 / 64;
}

.brand__tag {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}

.mv-top__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mv-top__meta::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31, 184, 102, 0.18);
}

/* ── layout ────────────────────────────────────────────────────────────── */

.mv-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px 0;
}

.mv-main { min-width: 0; }

.mv-side { display: none; }

@media (min-width: 960px) {
  .mv-top { padding-top: 24px; }
  .mv-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
    padding-top: 20px;
  }
  .mv-side {
    display: block;
    position: sticky;
    top: 24px;
  }
}

.mv-side[hidden] { display: none; }

@media (min-width: 960px) {
  .mv-shell.is-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
}

/* ── progress ──────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 10px 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.steps li {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steps li::before {
  content: "";
  height: 5px;
  border-radius: 5px;
  background: rgba(29, 29, 31, 0.08);
  background-size: 400% 100%;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* one gradient runs across the whole bar, each segment shows its slice */
.steps li.is-done::before,
.steps li.is-current::before { background-image: var(--grad); }
.steps li[data-dot="1"]::before { background-position: 0 0; }
.steps li[data-dot="2"]::before { background-position: 33.3% 0; }
.steps li[data-dot="3"]::before { background-position: 66.6% 0; }
.steps li[data-dot="4"]::before { background-position: 100% 0; }
.steps li.is-current::before { box-shadow: 0 2px 10px rgba(90, 85, 245, 0.45); }
.steps li.is-current { color: var(--ink); font-weight: 600; }
.steps li.is-done { color: var(--body); }

.steps__n { opacity: 0.55; margin-right: 4px; }

/* ── steps ─────────────────────────────────────────────────────────────── */

.step[hidden] { display: none; }

.step { animation: stepIn 0.5s var(--ease); }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.kicker {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.step__h {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(32px, 8.4vw, 48px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.step__h:focus { outline: none; }

.step__lede {
  margin: 0 0 26px;
  text-wrap: pretty;
  color: var(--muted);
  font-size: 17px;
}

.group {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
  min-width: 0;
}

.group__label,
.group legend,
.field label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.group__hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}

.row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 560px) {
  .row2 { grid-template-columns: 1fr 1fr; }
}

.field { margin: 0 0 16px; min-width: 0; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-2);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.input[type="date"] { color-scheme: light; }

.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.textarea { min-height: 96px; resize: vertical; }

.field.has-error .input,
.field.has-error .select { border-color: var(--err); box-shadow: 0 0 0 4px rgba(215, 0, 21, 0.1); }

.err {
  display: none;
  margin: 6px 0 0;
  color: var(--err);
  font-size: 13px;
}

.field.has-error .err,
.group.has-error .err { display: block; }

/* chosen options: a white card with a gradient ring */
.tile input:checked + span,
.chip input:checked + span {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 6px 18px rgba(79, 91, 245, 0.18);
}

/* home size tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
}

.tile { position: relative; }

.tile input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.tile span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 66px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.tile small {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

.tile input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tile input:active + span { transform: scale(0.97); }

/* the two ends of the move */

.ends {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .ends { grid-template-columns: 1fr 1fr; }
}

.end {
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow);
}

.end__t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.end__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 124, 255, 0.16);
}

.end__dot--to { background: var(--violet); box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.16); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
}

.check input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* distance */

.dist {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dist input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  min-height: 44px;
}

.dist .input {
  width: 108px;
  flex: 0 0 auto;
  text-align: right;
}

.dist__unit { color: var(--muted); font-size: 14px; margin-left: -6px; }

/* ── rooms and items ───────────────────────────────────────────────────── */

.prefill {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 14px;
}

.prefill svg {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}

.tabs {
  display: flex;
  gap: 6px;
  margin: -6px -20px 0;
  padding: 6px 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

@media (min-width: 960px) {
  .tabs { margin: 0 0 14px; padding: 0; flex-wrap: wrap; overflow: visible; }
}

.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--card);
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 29, 31, 0.18);
}

.tab__n {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  background: var(--well);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .tab__n { background: var(--grad); color: #fff; }

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  min-height: 66px;
  border-top: 1px solid var(--hair);
  transition: background 0.2s;
}

.item:first-child { border-top: 0; }

.item::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.2s;
}

.item.has-count::before { opacity: 1; }

.item__name {
  color: var(--ink);
  font-weight: 550;
  font-size: 16px;
  line-height: 1.25;
}

.item:not(.has-count) .item__name { color: var(--body); font-weight: 500; }

.item__vol {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.stepper button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--well);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.2s;
  touch-action: manipulation;
}

.stepper button:hover { background: #e8e8ee; }
.stepper button:active { transform: scale(0.92); }
.stepper button:disabled { opacity: 0.4; cursor: default; }

.stepper button.plus {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.stepper button.plus:hover { background: rgba(79, 91, 245, 0.16); }

.stepper output {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 17px;
  color: var(--ink);
}

.item:not(.has-count) .stepper output { color: var(--faint); font-weight: 500; }

.stepper output.bump { animation: bump 0.28s var(--ease); }

@keyframes bump {
  40% { transform: scale(1.3); color: var(--accent); }
}

/* ── the estimate card ─────────────────────────────────────────────────── */

.est {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

/* the glow behind the price */
.est::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90px; left: -60px;
  width: 360px; height: 240px;
  background:
    radial-gradient(closest-side at 35% 55%, rgba(10, 124, 255, 0.30), transparent),
    radial-gradient(closest-side at 70% 50%, rgba(139, 63, 240, 0.26), transparent);
  filter: blur(24px);
  pointer-events: none;
}

.est__k {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.est__price {
  display: inline-block;
  margin: 4px 0 4px;
  font-size: clamp(34px, 9vw, 42px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

.est__sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

.est__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}

.stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hair);
}

.stat__v {
  display: block;
  color: var(--ink);
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__l { display: block; color: var(--muted); font-size: 12.5px; }

.truck {
  margin: 0 0 14px;
  padding: 12px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hair);
}

.truck__top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  margin-bottom: 9px;
}

.truck__top span:last-child { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.truck__bar {
  height: 8px;
  border-radius: 8px;
  background: rgba(29, 29, 31, 0.07);
  overflow: hidden;
}

.truck__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: var(--grad);
  transition: width 0.6s var(--ease);
}

.lines {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--hair);
  font-size: 14px;
}

.lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  color: var(--body);
}

.lines li span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.est__note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--body);
  font-size: 12.5px;
  line-height: 1.45;
}

.est__note b { color: var(--accent); font-weight: 650; }

.est__empty { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ── booking step ──────────────────────────────────────────────────────── */

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--hair);
  background: var(--card);
  box-shadow: var(--shadow);
}

.summary__p { display: inline-block; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.summary__s { color: var(--muted); font-size: 13px; }

.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.chip { position: relative; }

.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.chip span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hair);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chip small { font-weight: 400; font-size: 12px; color: var(--muted); }

.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 8px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background: var(--card);
  font-size: 14px;
  color: var(--body);
  cursor: pointer;
}

.consent input {
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-err {
  display: none;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(215, 0, 21, 0.06);
  border: 1px solid rgba(215, 0, 21, 0.2);
  color: #a3000f;
  font-size: 14px;
}

.form-err.is-on { display: block; }

/* ── success ───────────────────────────────────────────────────────────── */

.done {
  text-align: center;
  padding: 28px 8px 12px;
}

.done__icon {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 40px rgba(79, 91, 245, 0.35);
  animation: pop 0.6s var(--ease);
}

@keyframes pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.done .step__lede { max-width: 440px; margin-left: auto; margin-right: auto; }

.done__card {
  max-width: 440px;
  margin: 0 auto 20px;
  text-align: left;
}

/* ── the dock: back, next, and the estimate on a phone ─────────────────── */

.dock {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 24px -20px 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -10px 30px rgba(40, 44, 110, 0.08);
}

.dock__est {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}

.dock__price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.dock__meta {
  min-width: 0;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

.dock__btns {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s, transform 0.12s, opacity 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.98); }

.btn--go {
  flex: 1;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 28px rgba(79, 91, 245, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn--go:hover { filter: brightness(1.06) saturate(1.1); }
.btn--go[disabled] { opacity: 0.6; cursor: progress; }

.btn--ghost {
  background: var(--card);
  border-color: var(--hair-2);
  color: var(--ink);
}

.btn--ghost:hover { background: var(--well); }

.btn[hidden] { display: none; }

.spin {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 960px) {
  .dock {
    position: static;
    margin: 28px 0 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .dock__est { display: none; }
  .dock__btns { justify-content: space-between; }
  .btn--go { flex: 0 0 auto; min-width: 220px; }
}

/* ── footer ────────────────────────────────────────────────────────────── */

.mv-foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 13px;
}

.mv-foot a {
  color: var(--body);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-2);
}

.mv-foot a:hover { color: var(--ink); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 440px) {
  .mv-top__meta { display: none; }
}