/*
 * AutoVINChecks — Mobile UI/UX layer (v31)
 * PRESENTATION ONLY. Loaded last. Pure CSS.
 * No markup, JS, VIN, geo/IP, currency, pricing, payment, email or SEO
 * behaviour is touched by this file. Scope: screens <= 820px.
 */

@media (max-width:820px){

  /* ---------- Base rhythm ---------- */
  html,body{overflow-x:hidden!important}
  body.avc-page{-webkit-text-size-adjust:100%}
  img,svg,video{max-width:100%}

  /* ---------- Header: compact glass, elegant ---------- */
  .site-header{
    position:sticky!important;top:0;z-index:120;
    background:linear-gradient(180deg,rgba(12,12,12,.94) 0%,rgba(20,20,20,.88) 100%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.42)!important;
  }
  .header-inner{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center!important;
    gap:10px!important;
    padding:7px 14px 0!important;
  }
  .brand{width:auto!important;flex:0 0 auto!important;min-width:0;height:auto!important;display:flex!important;align-items:center}
  .brand-logo{height:30px!important;width:auto!important}
  .avc-brandmark{font-size:clamp(20px,6.4vw,25px)!important;letter-spacing:.02em!important}

  /* Currency / location pill — visual polish only, content stays dynamic */
  .country,#country-display{
    order:0!important;margin:0!important;
    min-width:0!important;max-width:52vw;
    padding:5px 10px!important;
    font-size:10.5px!important;font-weight:800!important;
    line-height:1.2!important;border-radius:999px!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
    color:#f2f2f2!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    text-align:center!important;
  }

  .main-nav{
    order:3!important;grid-column:1 / -1;
    flex:none!important;
    display:flex!important;justify-content:flex-start!important;
    gap:16px!important;
    flex-wrap:nowrap!important;align-items:center!important;
    height:34px!important;
    margin-top:2px!important;
    padding:0!important;
    font-size:10.5px!important;letter-spacing:.10em!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{
    padding:4px 0 8px!important;
    border-bottom-width:2px!important;
    flex:0 0 auto;min-height:30px;display:flex;align-items:center;
    transition:color .18s ease,border-color .18s ease;
  }

  /* ---------- Hero: visual band on top, copy below ---------- */
  .avc-hero{
    height:auto!important;min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  /* Photographic layer, gently zoomed to the vehicle */
  .avc-hero::before{
    background-position:62% 82%!important;
    background-size:cover!important;
    opacity:1!important;
  }
  /* Watermark word is the source of the H1 overlap on phones — remove it */
  .avc-hero::after{display:none!important;content:none!important}

  /* Layered depth: clear glass at top (vehicle visible), deep charcoal below */
  .avc-hero-overlay{
    background:
      radial-gradient(120% 60% at 78% 12%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 60%),
      radial-gradient(100% 55% at 8% 88%,rgba(224,31,38,.13) 0%,rgba(224,31,38,0) 70%),
      linear-gradient(180deg,
        rgba(10,10,11,.34) 0%,
        rgba(10,10,11,.20) 20%,
        rgba(12,12,13,.62) 44%,
        rgba(12,12,13,.90) 62%,
        rgba(10,10,11,.96) 100%)!important;
  }
  .avc-hero-inner{
    height:auto!important;
    padding:clamp(120px,32vw,160px) 18px 26px!important; /* safe visual band under header */
    max-width:none!important;
  }
  .avc-hero-copy{
    width:100%!important;min-width:0!important;max-width:none!important;
  }

  .avc-welcome{
    display:inline-flex!important;align-items:center;gap:7px;
    margin:0 0 11px!important;
    font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase;
    font-weight:800!important;
    padding:5px 11px!important;border-radius:999px!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .avc-welcome-icon{font-size:11px!important;width:auto!important;height:auto!important;padding:0!important;border:0!important;background:none!important}

  .avc-hero h1{
    font-size:clamp(22px,6.4vw,29px)!important;
    line-height:1.16!important;
    letter-spacing:-.3px!important;
    margin:0 0 10px!important;
    max-width:20ch;
    text-shadow:0 4px 20px rgba(0,0,0,.6)!important;
  }
  .avc-subtitle{
    font-size:clamp(12.5px,3.4vw,13.5px)!important;
    line-height:1.6!important;
    margin:0 0 16px!important;
    max-width:42ch;
    color:#d7d7d7!important;
  }

  /* ---------- VIN input + CTA ---------- */
  .avc-vin-form{max-width:none!important}
  .avc-vin-row{
    height:auto!important;flex-direction:column!important;
    gap:10px!important;
    background:transparent!important;
    border:0!important;box-shadow:none!important;border-radius:0!important;
    overflow:visible!important;
  }
  .avc-vin-input{
    width:100%!important;height:52px!important;
    flex:0 0 auto!important;min-height:52px!important;
    padding:0 16px!important;
    font-size:15px!important;font-weight:700;letter-spacing:.05em;
    background:#fff!important;color:#141414!important;
    border:1px solid rgba(255,255,255,.5)!important;border-radius:10px!important;
    box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 -1px 0 rgba(0,0,0,.06)!important;
    transition:box-shadow .18s ease,border-color .18s ease;
  }
  .avc-vin-input::placeholder{font-weight:600;letter-spacing:.02em;color:#7e7e7e}
  .avc-vin-input:focus{border-color:#e01f26!important;box-shadow:0 0 0 3px rgba(224,31,38,.22),0 14px 30px rgba(0,0,0,.34)!important;outline:none!important}
  .avc-vin-btn{
    width:100%!important;height:52px!important;flex:0 0 auto!important;
    font-size:13.5px!important;letter-spacing:.15em!important;font-weight:900!important;
    border-radius:10px!important;
    box-shadow:0 14px 28px rgba(224,31,38,.30),inset 0 1px 0 rgba(255,255,255,.18)!important;
    transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
  }
  .avc-vin-btn:active{transform:translateY(1px) scale(.995);box-shadow:0 8px 18px rgba(224,31,38,.26)!important}

  .avc-help-row{
    display:flex!important;flex-direction:column!important;gap:6px!important;
    margin-top:13px!important;
    font-size:11.5px!important;line-height:1.45!important;color:#c9c9c9!important;
  }
  .avc-notice{font-size:12px!important;margin-top:10px!important}

  /* ---------- Sections: restrained premium spacing ---------- */
  .avc-features{
    margin:14px 14px 0!important;
    grid-template-columns:repeat(2,1fr)!important;
    border-radius:12px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.14)!important;
  }
  .avc-feature{min-height:0!important;padding:14px 12px!important;gap:10px!important}
  .avc-feature-icon{flex:0 0 26px!important;font-size:22px!important}
  .avc-feature strong{font-size:13px!important;line-height:1.15!important}
  .avc-feature small{font-size:11.5px!important;margin-top:4px!important}

  .av-stats{padding:28px 16px!important}
  .av-stats-wrap{gap:16px!important;grid-template-columns:repeat(2,1fr)!important}
  .av-stat{padding-left:12px!important}
  .av-stat-num{font-size:clamp(23px,6.8vw,30px)!important}
  .av-stat small{font-size:10.5px!important;letter-spacing:.12em!important;margin-top:6px!important}

  .avc-howto,.avc-report-overview{padding-top:32px!important;padding-bottom:32px!important}
  .avc-howto-copy h2,.avc-report-copy h2{font-size:clamp(20px,5.6vw,25px)!important;line-height:1.22!important}
  .avc-kicker{font-size:10px!important;letter-spacing:2px!important}
  .avc-step h3{font-size:14.5px!important}
  .avc-step p,.avc-report-copy li,.avc-report-copy>p{font-size:13px!important;line-height:1.55!important}
  .avc-results{margin-top:32px!important}
  .avc-results h2,.avc-packages-head h2{font-size:clamp(20px,5.6vw,25px)!important}
  .avc-packages{margin-top:28px!important}
  .avc-package-card{padding-left:16px!important;padding-right:16px!important;border-radius:14px!important}

  /* Touch targets */
  .avc-package-choose,.avc-review-arrow,.avc-checkout-submit,.main-nav a,.country{min-height:38px}
  .avc-package-choose,.avc-checkout-submit{transition:transform .12s ease}
  .avc-package-choose:active,.avc-checkout-submit:active{transform:translateY(1px)}
}

/* Narrowest phones (320–361px) */
@media (max-width:361px){
  .main-nav{gap:13px!important;font-size:10px!important}
  .avc-brandmark{font-size:19px!important}
  .country,#country-display{font-size:9.5px!important;max-width:50vw}
  .avc-hero-inner{padding:112px 14px 22px!important}
  .avc-hero h1{font-size:21px!important;max-width:100%}
  .avc-subtitle{font-size:12px!important}
  .avc-features{grid-template-columns:1fr!important;margin-left:12px!important;margin-right:12px!important}
  .avc-feature:nth-child(n){border-right:0!important}
  .avc-feature:nth-child(n+2){border-top:1px solid var(--av-line)!important}
  .av-stats-wrap{grid-template-columns:1fr!important}
}

/* Accessibility: honour reduced motion for the polish added above */
@media (prefers-reduced-motion:reduce){
  .avc-vin-btn,.avc-vin-input,.main-nav a,.avc-package-choose,.avc-checkout-submit{transition:none!important}
}