/* =====================================================
   EV ACCUCHECK – PREMIUM PAGE LAYER
   Alleen page-specifiek, geen globale section overrides
===================================================== */

/* Hero finetune (basis komt uit styles.css) */
.hero-accucheck h1{
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

/* Overlap intro card onder hero */
.accu-intro-wrap{
  padding: 0;
}

.premium-intro{
  margin-top: -3.6rem;
  background: #ffffff;
  padding: 3.2rem 3.6rem;
  border-radius: 26px;
  box-shadow: 0 40px 80px rgba(0,0,0,.08);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
}

.accu-intro-text h3{
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin-bottom: .8rem;
}

.accu-intro-text p{
  color: rgba(20,20,20,.70);
  line-height: 1.75;
}

/* Kleine spacing correcties voor deze pagina */
#tarief .btn-primary,
#tarief .btn-secondary{
  margin-top: .4rem;
}

/* Responsive */
@media (max-width: 900px){
  .premium-intro{
    padding: 2.4rem 2.1rem;
    margin-top: -2.4rem;
  }
}

.ev-card-grid .premium-card{
  display:flex;
  flex-direction:column;
}

.ev-card-grid .premium-card a.btn-primary{
  margin-top:auto;
  align-self:center;
}

/* ======================================================
   EV ACCUCHECK – AANKOOPADVIES CARD UPGRADE (FINAL)
====================================================== */

#tarief .package{
  border-radius:34px;
  border:1.5px solid rgba(215,181,109,.45);
  box-shadow:
    0 28px 70px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  background:linear-gradient(180deg,#ffffff 0%, #fbfaf7 100%);
}

/* Gold premium frame */
#tarief .package--premium{
  border:2.5px solid rgba(215,181,109,.9);
  box-shadow:
    0 32px 90px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Content spacing */
#tarief .package-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* CTA always baseline */
#tarief .package > a{
  margin-top:auto;
  align-self:flex-start;
}

/* Visuele lucht onder CTA */
#tarief .package a{
  margin-top:48px;
}

/* ======================================================
   EV ACCUCHECK – CTA PERFECT CENTER ALIGN
====================================================== */

#tarief .package a{
  align-self:center !important;
}

/* Card 3 – force same CTA dimensions as Card 1 */
#tarief .premium-card:nth-child(3) a{
  min-width: 260px;
  height: 58px;
  padding: 0;
  font-size: .88rem;
  letter-spacing: .12em;
  align-self: center;
}

/* === EV ACCUCHECK – CTA HARD LOCK (alleen deze pagina) ================= */

body.page-ev-accucheck #tarief .package a.btn,
body.page-ev-accucheck #tarief .package a.btn-primary,
body.page-ev-accucheck #tarief .package a.btn-secondary{

  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:58px !important;

  padding:0 !important;
  line-height:58px !important;
  text-align:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

/* Zorg dat lange tekst nooit de knop kan oprekken */
body.page-ev-accucheck #tarief .package a span,
body.page-ev-accucheck #tarief .package a{
  max-width:260px !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===================================================
   EV ACCUCHECK – PRICING GRID (ISOLATED & STABLE)
=================================================== */

#tarief .packages-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:72px;
  align-items:stretch;
}

#tarief .package{
  display:flex;
  flex-direction:column;
  padding:58px 56px 56px;
  border-radius:34px;
  background:linear-gradient(180deg,#ffffff,#fbfaf7);
  border:1.5px solid rgba(215,181,109,.55);
  box-shadow:0 28px 70px rgba(0,0,0,.12);
}

#tarief .package--premium{
  border:2.5px solid rgba(215,181,109,.95);
  transform:translateY(-24px);
}

#tarief .package > a{
  margin-top:auto;
  align-self:center;
  width:260px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#0c1220,#02060d);
  color:#ffffff;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 18px 42px rgba(0,0,0,.45);
  cursor:pointer;
}

/* kaart 3 twee regels */
#tarief .package:nth-child(3) > a{
  white-space:normal;
  padding:0 26px;
  line-height:1.2;
  letter-spacing:.10em;
}

#tarief .package:nth-child(3) > a{
  max-width:240px;
  letter-spacing:.08em;
  font-size:.76rem;
}

#tarief .package:nth-child(1) > a{
  margin-top:42px;
}

/* EV AccuCheck – unlock full width layout */
body.page-ev-accucheck .pricing-engine,
body.page-ev-accucheck .pricing-grid{
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
}

body.page-ev-accucheck .pricing-grid{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 72px !important;
}

/* Final spacing polish */
.pricing-engine{
  margin-top: 3.4rem;
}

.pricing-cta{
  color:#ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: linear-gradient(180deg,#0b1324,#02060f);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 55px rgba(0,0,0,.45);
}

.pricing-card{
  display:flex;
  flex-direction:column;
}

.pricing-cta{
  margin-top:auto;
}

.pricing-featured{
  transform: translateY(-14px);
}

/* =========================================
   ZAKELIJKE USE CASE BLOK – ZOW PREMIUM
========================================= */

.usecase-block{
  margin-top:2.4rem;
  padding:1.6rem 1.8rem;
  background:#f9f7f3;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
}

.usecase-block h4{
  margin-bottom:1rem;
  font-size:1rem;
  letter-spacing:.02em;
}

.usecase-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.usecase-item{
  background:#ffffff;
  padding:1rem 1.1rem;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
}

.usecase-item strong{
  display:block;
  margin-bottom:.35rem;
  color:#0b1220;
}

.usecase-item p{
  font-size:.92rem;
  opacity:.78;
  line-height:1.5;
}

@media(max-width:760px){
  .usecase-grid{
    grid-template-columns:1fr;
  }
}