@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;600&family=Oswald:wght@700&display=swap');

/* =============== Palet =============== */
:root{
  --spix-green:#2CA946;
  --spix-green-600:#234F23;
  --spix-green-hover:#99C336; /* streepkleur */

  --txt:#e6e9ef;
  --muted:#cbd3dd;
  --panel:#1b1b1b;
  --panel-border:#2a2a2a;

  /* Flow van groen → geel (prijsband) */
  --flow-1:#7ed321;
  --flow-2:#a7d821;
  --flow-3:#cfe01f;
  --flow-4:#e5e41a;
  --flow-5:#f8e71c;

  /* Overlays voor body (subtiele kleurzweem per kaart) */
  --t1a: rgba(126,211,33,.16); --t1b: rgba(126,211,33,.06);
  --t2a: rgba(167,216,33,.16); --t2b: rgba(167,216,33,.06);
  --t3a: rgba(207,224,31,.16); --t3b: rgba(207,224,31,.06);
  --t4a: rgba(229,228,26,.16); --t4b: rgba(229,228,26,.06);
  --t5a: rgba(248,231,28,.16); --t5b: rgba(248,231,28,.06);
}

/* Fonts */
.price-block{ font-family:'Oswald', sans-serif; }

/* Container */
.hosting_new_compare{
  max-width:1140px;
  margin:0 auto;
  padding:18px 10px 0; /* badge niet afkappen in iframe */
  position:relative;
  color:var(--txt);
  font-family:'Mukta','Segoe UI',system-ui,sans-serif;
}

/* ===== Swiper: gelijke hoogtes ===== */
.swiper-container{ overflow:hidden !important; position:relative; width:100%; }
.swiper-wrapper{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.swiper-slide{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
  max-width:100%;
  overflow:visible; /* nodig voor actieve buitenrand */
}
.swiper-button-prev, .swiper-button-next{
  top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.swiper-button-prev{ left:10px; }
.swiper-button-next{ right:10px; }

/* =============== Package box (basis) =============== */
.package-box{
  width:100%;
  max-width:260px;
  min-width:230px;
  margin:20px 0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;                 /* maakt eigen stacking context voor ::before */
  background:var(--panel);
  border:1px solid var(--panel-border);
  padding-top:10px;
  transition:box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.package-box:hover{ box-shadow:0 12px 24px rgba(0,0,0,.35); }

/* Donkere body per pakket (subtiele zweem) */
.package-box.small  { background:linear-gradient(180deg,var(--t1a),var(--t1b)), var(--panel); border-color:color-mix(in oklab, var(--flow-1) 45%, var(--panel-border)); }
.package-box.medium { background:linear-gradient(180deg,var(--t2a),var(--t2b)), var(--panel); border-color:color-mix(in oklab, var(--flow-2) 45%, var(--panel-border)); }
.package-box.large  { background:linear-gradient(180deg,var(--t3a),var(--t3b)), var(--panel); border-color:color-mix(in oklab, var(--flow-3) 45%, var(--panel-border)); }
.package-box.xl     { background:linear-gradient(180deg,var(--t4a),var(--t4b)), var(--panel); border-color:color-mix(in oklab, var(--flow-4) 45%, var(--panel-border)); }
.package-box.xxl    { background:linear-gradient(180deg,var(--t5a),var(--t5b)), var(--panel); border-color:color-mix(in oklab, var(--flow-5) 45%, var(--panel-border)); }

/* Badge half over de rand */
.populair-label{
  position:absolute;
  top:0; left:50%; transform:translate(-50%,-50%);
  background:linear-gradient(90deg,var(--flow-3),var(--flow-4));
  color:#141414;
  font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:1px;
  padding:6px 10px;
  border-radius:0;
  z-index:10;
  white-space:nowrap;
}

/* ========= ACTIVE kaart ========== */
/* Subtiele groene achtergrondzweem + enkelvoudige buitenkader dat óók achtergrond schildert */
.package-box.active{
  z-index:2;
  border-color:transparent !important;          /* geen dubbele lijn */
  background:
    linear-gradient(180deg,
      rgba(153,195,54,.08), rgba(153,195,54,.03)), /* groenige tint */
    var(--panel);
  box-shadow:0 16px 28px rgba(0,0,0,.45);
  position:relative;
}
.package-box.active::before{
  content:"";
  position:absolute;
  top:-10px; bottom:-10px; left:-2px; right:-2px;
  background:inherit;                            /* ★ neem dezelfde achtergrond mee */
  border:2px solid var(--spix-green-hover);      /* #99C336 */
  pointer-events:none;
  z-index:-1;                                     /* ★ achter de kaart, maar zichtbaar */
}

/* Koppen */
.package-header{
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1.5px;
  text-align:center; margin:0; padding:10px 0 0; color:var(--muted);
}
.package-title{
  font-size:28px; font-weight:800; text-align:center; margin:6px 0 0; color:#fff;
}
.product-base{ font-size:12px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.5px; }
.product-size{ font-size:24px; font-weight:800; color:#fff; display:inline-block; margin-left:5px; }

/* ===== Prijsband ===== */
.price-block{
  font-size:60px; font-weight:900; color:#fff;
  text-align:center; padding:20px 12px; margin:0; line-height:1.2;
  border-bottom:1px solid var(--panel-border);
  background-size:200% 100%; background-position:0% 0%;
  transition:background-position .45s ease;
}
.package-box.small  .price-block{  background:linear-gradient(90deg, color-mix(in srgb,var(--flow-1) 80%,#000), color-mix(in srgb,var(--flow-2) 80%,#000)); }
.package-box.medium .price-block{  background:linear-gradient(90deg, color-mix(in srgb,var(--flow-2) 80%,#000), color-mix(in srgb,var(--flow-3) 80%,#000)); }
.package-box.large  .price-block{  background:linear-gradient(90deg, color-mix(in srgb,var(--flow-3) 80%,#000), color-mix(in srgb,var(--flow-4) 80%,#000)); }
.package-box.xl     .price-block{  background:linear-gradient(90deg, color-mix(in srgb,var(--flow-4) 80%,#000), color-mix(in srgb,var(--flow-5) 80%,#000)); }
.package-box.xxl    .price-block{  background:linear-gradient(90deg, color-mix(in srgb,var(--flow-5) 80%,#000), color-mix(in srgb,var(--flow-5) 80%,#000)); }
.package-box:hover .price-block{ background-position:100% 0%; }
.price-sub{ font-size:14px; color:#fff; margin-top:4px; display:block; opacity:.95; }

/* Features */
.package-details{
  list-style:none;
  padding:16px 20px;
  font-size:14px;
  color:var(--txt);
  line-height:1.7;
  flex:1 1 auto;
}
.package-details li{ position:relative; padding-left:26px; margin-bottom:10px; }
.package-details li::before{
  content:''; position:absolute; left:0; top:4px; width:16px; height:16px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cfead5"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>') no-repeat center/contain;
}

/* ===== Bestelknop (onder verankerd) ===== */
.order-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px;
  width:auto; min-width:180px; max-width:220px;
  margin:20px auto;
  text-align:center; text-decoration:none; text-transform:uppercase; letter-spacing:1px;
  font-family:'Segoe UI', sans-serif; font-size:15px; font-weight:900;
  color:#fff !important;
  border-radius:0; box-shadow:none;
  border:2px solid var(--spix-green); background:var(--spix-green-600);
  transition:background .12s, border-color .12s, transform .02s;
  margin-top:auto; align-self:center;
}
.order-btn:hover  { background:var(--spix-green);       border-color:var(--spix-green); }
.order-btn:active { background:var(--spix-green-hover); border-color:var(--spix-green-hover); transform:translateY(1px); }

/* Responsive */
@media (max-width:1140px){
  .swiper-slide{ max-width:100%; }
}