/*
 * Issue #503 - Value Your Aircraft public page.
 * Uses the F411 v3 brand tokens defined in assets/pages/css/home.css
 * (Libre Baskerville display + Plus Jakarta Sans body + royal navy
 * accent). This file inherits those tokens via --v3-* variables with
 * local fallbacks so the page still renders if home.css is not loaded.
 */

:root {
  --vya-ink:     var(--v3-ink,     #0E1A2B);
  --vya-muted:   var(--v3-muted,   #4A6E82);
  --vya-muted2:  var(--v3-muted2,  #5F7F91);
  --vya-border:  var(--v3-border,  rgba(90,138,167,0.18));
  --vya-border2: var(--v3-border2, rgba(90,138,167,0.10));
  --vya-snow:    var(--v3-snow,    #F8FAFC);
  --vya-snow2:   var(--v3-snow2,   #EEF4F8);
  --vya-white:   var(--v3-white,   #FFFFFF);
  --vya-royal:   var(--v3-royal,   #2843A7);
  --vya-royal2:  var(--v3-royal-lt,#3A58C4);
  --vya-steel:   var(--v3-steel,   #5A8AA7);
  --vya-ff-display: var(--v3-ff-display, 'Libre Baskerville', Georgia, serif);
  --vya-ff-body:    var(--v3-ff-body,    'Plus Jakarta Sans', sans-serif);
}

body {
  font-family: var(--vya-ff-body);
  color: var(--vya-ink);
  background: var(--vya-snow);
}

/* ── Card (v3 white + soft shadow + thin border) ───────────────────── */
.soft-card {
  background: var(--vya-white);
  border: 1px solid var(--vya-border2);
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(40, 67, 167, 0.08), 0 1px 4px rgba(14, 26, 43, 0.06);
  transition: box-shadow .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.vya-hero {
  padding: 80px 0 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--vya-white) 0%, var(--vya-snow) 100%);
  border-bottom: 1px solid var(--vya-border2);
  margin-bottom: 48px;
}

.vya-h1 {
  font-family: var(--vya-ff-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--vya-ink);
  margin-bottom: 16px;
}
.vya-h1 em {
  font-family: var(--vya-ff-display);
  font-style: italic;
  color: var(--vya-royal);
}

.vya-h2 {
  font-family: var(--vya-ff-display);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--vya-ink);
}
.vya-h2 em { font-style: italic; color: var(--vya-royal); }

.vya-h3 {
  font-family: var(--vya-ff-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--vya-ink);
  letter-spacing: -.005em;
}

.vya-h4 {
  font-family: var(--vya-ff-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--vya-ink);
  margin-bottom: 8px;
}

.vya-sub {
  font-family: var(--vya-ff-body);
  color: var(--vya-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 12px;
}

.vya-trust {
  font-family: var(--vya-ff-body);
  font-size: 13px;
  color: var(--vya-muted2);
}
.vya-trust a {
  color: var(--vya-royal);
  text-decoration: none;
  font-weight: 500;
}
.vya-trust a:hover { text-decoration: underline; }

/* ── Form ───────────────────────────────────────────────────────────── */
.vya-main { padding-bottom: 80px; }

.form-label {
  font-family: var(--vya-ff-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--vya-ink);
  letter-spacing: .005em;
}

.form-control {
  font-family: var(--vya-ff-body);
  font-size: 15px;
  border-radius: 6px;
  border-color: var(--vya-border);
  color: var(--vya-ink);
  padding: 10px 14px;
}
.form-control::placeholder { color: var(--vya-muted2); }
.form-control:focus {
  border-color: var(--vya-royal);
  box-shadow: 0 0 0 3px rgba(40, 67, 167, .12);
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--vya-royal);
  border-color: var(--vya-royal);
}
.btn-primary:hover { background-color: var(--vya-royal2); border-color: var(--vya-royal2); }

.vya-cta {
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--vya-ff-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Result / sample band ───────────────────────────────────────────── */
.vya-sample-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vya-ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vya-royal);
  padding: 5px 14px;
  background: rgba(40, 67, 167, 0.08);
  border: 1px solid rgba(40, 67, 167, 0.14);
  border-radius: 100px;
  margin-bottom: 16px;
}
.vya-sample-label::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--vya-royal);
  border-radius: 50%;
}

.vya-result-title {
  font-family: var(--vya-ff-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--vya-ink);
  margin-bottom: 28px;
}

.vya-numbers {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  text-align: center;
}

.vya-label {
  font-family: var(--vya-ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vya-muted);
  margin-bottom: 8px;
}

.vya-number {
  font-family: var(--vya-ff-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--vya-ink);
  letter-spacing: -.01em;
}

.vya-number-big {
  font-family: var(--vya-ff-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--vya-royal);
  letter-spacing: -.02em;
}

@media (max-width: 480px) {
  .vya-number     { font-size: 18px; }
  .vya-number-big { font-size: 28px; }
}

/* ── Range bar ──────────────────────────────────────────────────────── */
.vya-range-bar {
  height: 14px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.vya-range-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--vya-royal)  0%,
    var(--vya-royal2) 50%,
    var(--vya-steel) 100%
  );
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.vya-range-bar {
  height: 8px;
  background: var(--vya-snow2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

/* Result + sample bands sit in a full-width row so they aren't pinched
   to the form column's 8/12. Inner content is kept to a comfortable
   reading width (.vya-band-inner) so the low/median/high numbers
   don't stretch across the full 1200px container AND so every child
   (label chip, title, numbers grid, range bar, trust list) shares the
   same left/right edge -- no awkward "the chip is at the card edge
   but the numbers start 160px to the right" misalignment.  */
.vya-result-band,
.vya-sample-band {
  max-width: 100%;
}
.vya-band-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Result band animates in when revealed */
.vya-result-band {
  animation: vya-slide-in .4s cubic-bezier(.22, 1, .36, 1);
}

@keyframes vya-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vya-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--vya-text);
}

.vya-trust-list li {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vya-trust-list i {
  color: var(--vya-royal);
  font-size: 16px;
}

.vya-trust-list a {
  color: var(--vya-royal);
  text-decoration: none;
  font-weight: 500;
}
.vya-trust-list a:hover { text-decoration: underline; }

/* ── How It Works sidebar ──────────────────────────────────────────── */
.vya-howit { font-family: var(--vya-ff-body); }
.vya-howit ol li,
.vya-howit p { color: var(--vya-ink); }
.vya-howit ol li { margin-bottom: 8px; line-height: 1.6; }
.vya-howit ol li strong { color: var(--vya-royal); font-weight: 600; }

/* ── Methodology ───────────────────────────────────────────────────── */
.vya-methodology { font-family: var(--vya-ff-body); }
.vya-methodology a { color: var(--vya-royal); text-decoration: none; font-weight: 500; }
.vya-methodology a:hover { text-decoration: underline; }
.vya-methodology p { color: var(--vya-ink); line-height: 1.65; }
.vya-methodology h4 i { color: var(--vya-royal); margin-right: 4px; }

/* ── Autocomplete dropdown (manufacturer + model fields) ──────────── */
.vya-ac-wrap { position: relative; }

.vya-ac-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid var(--vya-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  max-height: 260px;
  overflow-y: auto;
  font-size: 14px;
}

.vya-ac-item {
  padding: 9px 14px;
  cursor: pointer;
  color: var(--vya-text);
  border-bottom: 1px solid #f1f5f9;
  user-select: none;
}
.vya-ac-item:last-child   { border-bottom: none; }
.vya-ac-item:hover,
.vya-ac-item.is-active {
  background: var(--vya-snow2);
  color: var(--vya-royal);
}

/* ── Mobile polish ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .vya-hero { padding: 40px 0 20px; }
  .vya-main { padding-bottom: 40px; }
  .vya-numbers { grid-template-columns: 1fr; gap: 8px; }
  .vya-numbers > div { padding: 8px 0; border-bottom: 1px solid var(--vya-border); }
  .vya-numbers > div:last-child { border-bottom: none; }
}