/* Global layout, alignment, and responsive fixes */

*,
*::before,
*::after{box-sizing:border-box;}

html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  max-width:100vw;
}

img,
video,
svg{
  max-width:100%;
  height:auto;
}

/* ===== Header alignment ===== */
.vn-header-inner{
  align-items:center;
  min-height:72px;
}
.vn-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.vn-logo img{
  height:52px;
  width:auto;
  display:block;
}
.vn-nav a{
  display:inline-flex;
  align-items:center;
  line-height:1.2;
  padding:8px 0;
}
.vn-header-actions{
  align-items:center;
  flex-shrink:0;
}
.vn-btn-cta{
  line-height:1.2;
  min-height:44px;
  padding:10px 20px;
}

/* ===== Pricing: dedicated hero + clean content ===== */
.pricing-hero{
  position:relative;
  padding:70px 20px 60px;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,40,80,.7)),
    url('../assets/images/page-hero.jpg') center / cover no-repeat;
}
.pricing-hero .pricing-badge{
  display:inline-block;
  padding:10px 24px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50px;
  color:#fff;
  background:rgba(255,255,255,.12);
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:18px;
}
.pricing-hero h1,
.pricing-hero h2{
  margin:0 0 14px;
  font-size:clamp(28px, 4.5vw, 48px);
  font-weight:800;
  line-height:1.2;
  color:#fff;
}
.pricing-hero h1 span,
.pricing-hero h2 span{
  color:#00AEEF;
}
.pricing-hero p{
  max-width:680px;
  margin:0 auto;
  color:#dbeafe;
  font-size:17px;
  line-height:1.7;
}

.pricing-section{
  position:relative;
  padding:60px 20px 100px !important;
  background:#fff !important;
}
.pricing-section::before{display:none !important;}

.pricing-heading{
  text-align:center;
  margin:0 auto 28px;
  max-width:760px;
}
.pricing-heading h2{
  font-size:clamp(28px, 4vw, 42px) !important;
  font-weight:800;
  color:#111;
  margin:0 0 14px !important;
  line-height:1.25;
}
.pricing-heading p{
  margin:0 auto 10px !important;
  font-size:17px !important;
  line-height:1.7 !important;
  color:#666;
}
.currency-hint{
  margin:12px auto 0 !important;
  font-size:15px;
}

.vin-prefill-bar{
  max-width:560px;
  margin:28px auto 48px !important;
  padding:22px 24px !important;
}
.vin-prefill-bar label{
  display:block;
  font-weight:600;
  margin-bottom:10px;
  font-size:14px;
  color:#334155;
  line-height:1.4;
}
.vin-prefill-bar input{
  width:100%;
  min-height:48px;
  padding:14px 16px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:16px;
  line-height:1.4;
}

/* Price amount alignment — currency sits on baseline, not floating high */
.price-top{
  padding:32px 20px 28px !important;
}
.price-top h3{
  margin:0 0 16px !important;
  line-height:1.25;
  font-size:clamp(22px, 2.5vw, 28px);
}
.price{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:center;
  gap:4px;
  font-size:clamp(40px, 5vw, 52px) !important;
  font-weight:800;
  color:#fff;
  line-height:1 !important;
  margin:0;
}
.price small,
.price [data-price-symbol]{
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1 !important;
  vertical-align:baseline !important;
  position:static !important;
  top:auto !important;
  margin:0 2px 0 0 !important;
  transform:none !important;
}
.price [data-price-amount]{
  font-size:inherit;
  font-weight:inherit;
  line-height:1;
}
.price-sub{
  margin-top:14px !important;
  line-height:1.4;
}

.pricing-grid{
  gap:28px !important;
  margin-bottom:20px;
}
.price-card.popular{
  transform:none !important;
}
@media(min-width:1100px){
  .price-card.popular{
    transform:translateY(-8px) !important;
  }
}

.features{padding:28px 24px !important;}
.features li{
  padding:14px 0 !important;
  line-height:1.45;
  align-items:flex-start;
}
.price-footer{padding:8px 24px 28px !important;}

/* ===== Page heroes ===== */
.page-hero{
  padding:72px 20px 64px !important;
}
.page-hero h1{
  margin:0 0 16px !important;
  line-height:1.2 !important;
}
.page-hero p{
  margin:0 auto !important;
  line-height:1.7 !important;
}

/* ===== Homepage hero search ===== */
.vin-search-box{
  align-items:stretch;
}
.vin-search-box input,
.vin-search-box button{
  min-height:54px;
  line-height:1.3;
}
.vin-features{
  align-items:center;
}
.vin-features div{
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1.4;
}

/* ===== Cards / sections ===== */
.about-title,
.what-title,
.services-title,
.process-heading h2,
.testimonial-heading h2,
.faq-heading h2,
.sample-vehicles-heading h2,
.stats-heading h2{
  line-height:1.2 !important;
}

.pkg-card .pkg-body,
.service-card.has-photo .service-body{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.pkg-card p,
.service-card p{
  line-height:1.65;
}

.sample-vehicle-body ul li{
  align-items:center;
}

.contact-info-item{
  align-items:flex-start;
}
.contact-info-item > div h4{
  line-height:1.3;
}
.contact-info-item > div p{
  line-height:1.5;
}

.footer-contact .contact li{
  align-items:flex-start;
}
.footer-contact .contact-icon{
  margin-top:3px;
}

/* ===== Tablet ===== */
@media(max-width:1100px){
  .pricing-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .price-card.popular{grid-column:span 1;}
  .services-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .pkg-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .zt-container{
    grid-template-columns:1fr 1fr !important;
    gap:40px !important;
  }
}

@media(max-width:991px){
  .pricing-grid{
    grid-template-columns:1fr !important;
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
  }
  .commerce-grid{grid-template-columns:1fr !important;}
  .about-content{grid-template-columns:1fr !important;gap:40px !important;}
  .what-grid{grid-template-columns:1fr 1fr !important;}
}

/* ===== Mobile nav / phone ===== */
@media(max-width:921px){
  .vn-header-inner{
    flex-wrap:nowrap;
    min-height:64px;
  }
  .vn-nav{
    align-items:stretch;
    text-align:left;
    z-index:1001;
  }
  .vn-nav a{
    padding:12px 4px;
    width:100%;
  }
}

@media(max-width:768px){
  .pricing-hero{padding:56px 16px 48px;}
  .pricing-section{padding:40px 16px 72px !important;}
  .pricing-heading{margin-bottom:20px;}
  .vin-prefill-bar{margin:20px auto 36px !important;padding:18px !important;}

  .vin-hero{padding:56px 16px !important;}
  .vin-content h1{font-size:clamp(28px, 8vw, 36px) !important;}
  .vin-search-box{
    flex-direction:column;
    background:transparent !important;
    padding:0 !important;
    gap:12px;
  }
  .vin-search-box input{
    background:#fff;
    border-radius:12px;
    width:100%;
  }
  .vin-search-box button{width:100%;border-radius:12px;}

  .what-grid{grid-template-columns:1fr !important;}
  .services-grid,
  .pkg-grid,
  .process-grid,
  .stats-grid,
  .sample-vehicles-grid,
  .testimonial-grid,
  .about-right{
    grid-template-columns:1fr !important;
  }

  .zt-container{
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:36px !important;
  }
  .footer-contact .contact{align-items:center;}
  .footer-contact .contact li{
    grid-template-columns:22px minmax(0, 280px);
    justify-content:center;
    text-align:left;
  }
  .footer-logo{margin-left:auto;margin-right:auto;}

  .page-hero{padding:56px 16px 48px !important;}
  .page-hero h1{font-size:clamp(26px, 7vw, 34px) !important;}

  .contact-wrap{grid-template-columns:1fr !important;gap:28px !important;}
  .contact-form-box{padding:24px 18px !important;}

  .hero-vehicle-photo img{height:180px;}
  .service-card.has-photo .service-photo,
  .pkg-card .pkg-photo{height:150px;}

  .visual-cta{padding:64px 16px;}
  .visual-cta-content h2{font-size:28px !important;}

  .faq-question{
    font-size:16px !important;
    padding:16px 18px !important;
    align-items:flex-start;
  }
  .faq-icon{flex-shrink:0;}
}

@media(max-width:480px){
  .vn-logo img{height:44px;}
  .pricing-hero h1,
  .pricing-hero h2{font-size:26px;}
  .price{font-size:40px !important;}
  .price small,
  .price [data-price-symbol]{font-size:16px !important;}
  .ribbon{
    top:14px;
    right:-40px;
    font-size:11px;
    padding:6px 36px;
  }
  .policy-links a{
    display:inline-block;
    margin:6px 10px;
  }
}

/* Legal / commerce polish */
.legal-section{padding:60px 20px 90px;}
.legal-container{
  max-width:860px;
  margin:0 auto;
  line-height:1.75;
}
.legal-container h1{
  margin:0 0 12px;
  line-height:1.25;
  font-size:clamp(28px, 4vw, 40px);
}
.legal-container h2{
  margin:32px 0 12px;
  line-height:1.3;
  font-size:clamp(20px, 2.5vw, 26px);
}
.legal-container p,
.legal-container li{line-height:1.7;}
.legal-meta{color:#666;margin-bottom:24px;}

.scroll-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:#0088D4;
  color:#fff;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.scroll-top.visible{display:flex;}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
}
@media(max-width:1100px){
  .process-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}
@media(max-width:640px){
  .process-grid{grid-template-columns:1fr !important;}
  .legal-section{padding:40px 16px 70px;}
}

/* Prevent popular card overflow causing horizontal scroll */
.price-card,
.service-card,
.pkg-card,
.sample-vehicle-card,
.testimonial-card{
  max-width:100%;
}
.ribbon{max-width:none;}