/* =============== Basis =============== */
body.single-es_slots { background:#350156; overflow-x:hidden; }
.slot-es-wrap, .slot-es-wrap * { box-sizing:border-box; }
body.single-es_slots .entry-title { display:none; } /* Hello Elementor H1 verbergen */

/* Container */
.slot-es-container { max-width:1100px; margin:0 auto; padding:16px; }
@media (min-width:768px){ .slot-es-container{ padding:24px; } }

/* Palet / variabelen */
.slot-es-wrap{
  color:#f3eaff; background:transparent;
  --card-bg:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.22);
  --hero-bg:linear-gradient(180deg, rgba(255,255,255,.08), rgba(53,1,86,0) 70%), rgba(0,0,0,.08);
  --headline:#fff; --accent-blue:#9ad0ff; --accent-cyan:#b8ecff;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

/* =============== Hero =============== */
.slot-es-hero{
  background:var(--hero-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:14px; display:flex; gap:12px; align-items:center; margin-bottom:16px;
  box-shadow:var(--shadow); flex-wrap:wrap;
}
.slot-es-hero img{
  width:88px; height:88px; object-fit:cover; border-radius:12px;
  border:1px solid var(--card-border); background:rgba(0,0,0,.15); flex:0 0 auto;
}
.slot-es-hero-title{ min-width:0; }
.slot-es-hero h1{ margin:0; line-height:1.2; color:var(--headline); word-break:break-word; }
.slot-es-hero small{ color:var(--accent-cyan); display:block; margin-top:4px; font-size:.9rem; }

@media (min-width:480px){
  .slot-es-hero img{ width:100px; height:100px; }
  .slot-es-hero h1{ font-size:1.5rem; }
}
@media (min-width:768px){
  .slot-es-hero{ padding:16px; gap:16px; }
  .slot-es-hero img{ width:120px; height:120px; border-radius:14px; }
  .slot-es-hero h1{ font-size:1.7rem; }
}

/* =============== Kaarten & typografie =============== */
.slot-es-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
  box-shadow:var(--shadow); padding:12px; backdrop-filter:saturate(120%) blur(2px);
}
.slot-es-card h2{ margin:0 0 10px; color:var(--headline); font-size:1.1rem; }
@media (min-width:768px){
  .slot-es-card{ padding:14px; }
  .slot-es-card h2{ font-size:1.2rem; }
}

/* Flow onder elkaar */
.slot-es-flow{ display:flex; flex-direction:column; gap:16px; }

/* Intro tekst (platte tekst onder hero) */
.slot-es-intro-text h2{ margin:12px 0 4px; font-size:1.4rem; color:#fff; }
.slot-es-intro-text p{ margin:0 0 12px; color:#e0d7ff; font-size:.95rem; }

/* =============== Demo zonder box (full-bleed op mobiel) =============== */
.slot-es-demo{
  margin:0 0 16px; background:transparent; border:0; box-shadow:none; padding:0;
}
.slot-es-embed-wrap{ position:relative; width:100%; max-width:100%; overflow:hidden; }
.slot-es-embed-wrap iframe,
.slot-es-embed-wrap embed,
.slot-es-embed-wrap object,
.slot-es-embed-wrap video,
.slot-es-embed-wrap .wp-video,
.slot-es-embed-wrap .wp-block-embed__wrapper,
.slot-es-embed-wrap .mejs-container{
  width:100% !important; max-width:100% !important; display:block;
}
/* Mobiel/tablet: laat embed tot de randen lopen */
@media (max-width:1023px){
  .slot-es-demo{ margin-left:-16px; margin-right:-16px; }
  .slot-es-demo h2{ padding:0 16px; }
}
@media (min-width:768px) and (max-width:1023px){
  .slot-es-demo{ margin-left:-24px; margin-right:-24px; }
  .slot-es-demo h2{ padding:0 24px; }
}

/* =============== Meta (RTP/Volatilidad/...) =============== */
.slot-es-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.slot-es-meta div strong{ color:#fff; }
@media (max-width:420px){ .slot-es-meta{ grid-template-columns:1fr; } }

/* =============== Información =============== */
.slot-es-info p{ line-height:1.6; margin:0 0 10px; overflow-wrap:anywhere; }

/* =============== Vídeo (16:9) =============== */
.slot-es-video .slot-es-embed-wrap{ aspect-ratio:16/9; border-radius:12px; }
.slot-es-video .slot-es-embed-wrap iframe,
.slot-es-video .slot-es-embed-wrap video{
  position:absolute; inset:0; width:100% !important; height:100% !important; border:0;
}
@supports not (aspect-ratio:16/9){
  .slot-es-video .slot-es-embed-wrap{ height:0; padding-top:56.25%; }
  .slot-es-video .slot-es-embed-wrap iframe,
  .slot-es-video .slot-es-embed-wrap video{ position:absolute; top:0; left:0; }
}

/* =============== Detalles del juego (thumb links; mobiel onder) =============== */
.slot-es-details-wrap{
  display:grid; grid-template-columns:160px 1fr; gap:12px; align-items:start;
}
.slot-es-details-thumb img{
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.15);
}
.slot-es-details-body h2{ margin-top:0; }
@media (max-width:720px){
  .slot-es-details-wrap{ grid-template-columns:1fr; }
  .slot-es-details-body{ order:1; }
  .slot-es-details-thumb{ order:2; margin-top:8px; }
}
@media (min-width:1024px){
  .slot-es-details-wrap{ grid-template-columns:260px 1fr; gap:16px; } /* maak groter naar wens */
}

/* =============== Badge, Links, Hover =============== */
.slot-es-badge{
  display:inline-block; background:rgba(184,236,255,.12);
  border:1px solid rgba(184,236,255,.45); color:#e0f7ff;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
}
.slot-es-wrap a{ color:var(--accent-blue); text-decoration:none; }
.slot-es-wrap a:hover{ text-decoration:underline; }
@media (hover:hover){
  .slot-es-card:hover{ transform:translateY(-1px); transition:transform .15s, box-shadow .15s;
    box-shadow:0 12px 28px rgba(0,0,0,.4); }
}

/* =============== Auteur box =============== */
.slot-es-author{
  margin-top:18px; padding:14px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  display:flex; gap:14px; align-items:flex-start;
}
.slot-es-author-photo{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.25); flex:0 0 auto;
}
.slot-es-author-name{ margin:0 0 6px; font-size:1.05rem; color:#fff; }
.slot-es-author p{ margin:0; line-height:1.55; color:#f2eaff; }

/* Ofertas/bonussen onder de demo (zonder box) */
.slot-es-offers { margin: 8px 0 12px; }
.slot-es-offers h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: #fff;
}
.slot-es-offers-content { display: block; }
.slot-es-offers-content * { max-width: 100%; }

/* --- Heading scale alleen voor single es_slots --- */
body.single-es_slots .slot-es-wrap h1 { 
  font-size: 1.6rem; 
  line-height: 1.25;
}
body.single-es_slots .slot-es-wrap h2 { 
  font-size: 1.35rem; 
  line-height: 1.3;
}
body.single-es_slots .slot-es-wrap h3 { 
  font-size: 1.15rem; 
  line-height: 1.35;
}

/* Tablet */
@media (min-width: 768px){
  body.single-es_slots .slot-es-wrap h1 { font-size: 2.0rem; }
  body.single-es_slots .slot-es-wrap h2 { font-size: 1.6rem; }
  body.single-es_slots .slot-es-wrap h3 { font-size: 1.25rem; }
}

/* Desktop */
@media (min-width: 1024px){
  body.single-es_slots .slot-es-wrap h1 { font-size: 2.2rem; }
  body.single-es_slots .slot-es-wrap h2 { font-size: 1.8rem; }
  body.single-es_slots .slot-es-wrap h3 { font-size: 1.35rem; }
}

/* Zorg dat eventuele widget-stijlen niet groter pushen */
body.single-es_slots .slot-es-wrap .elementor-widget-heading h2,
body.single-es_slots .slot-es-wrap .elementor-widget-heading h3 {
  font-size: inherit;
  line-height: inherit;
}

/* Auteursnaam (is een H3): laat de schaal volgen */
body.single-es_slots .slot-es-author-name { 
  font-size: inherit; 
  line-height: inherit; 
}

/* =============== Breadcrumb =============== */
.slot-es-breadcrumb{
  font-size:.875rem;
  margin:0 0 8px;
}
.slot-es-breadcrumb ol{
  list-style:none; padding:0; margin:0;
  display:flex; gap:6px; flex-wrap:wrap;
}

.slot-es-breadcrumb li{ color:#cbd3ff; }
.slot-es-breadcrumb li+li:before{ content:"›"; margin:0 6px; opacity:.8; }
.slot-es-breadcrumb a{ text-decoration:none; color:var(--accent-blue); }
.slot-es-breadcrumb a:hover{ text-decoration:underline; }

.slot-es-titleline{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--card-border);
  padding-bottom:8px;
  margin-bottom:12px;
}
.slot-es-titleline h1{ margin:0; color:var(--headline); }

/* Provider direct achter de H1, als pill/badge */
.slot-es-provider-badge{
  display:inline-block;
  padding:4px 10px;
  border:1px solid rgba(184,236,255,.45);
  border-radius:999px;
  background:rgba(184,236,255,.12);
  color:#e0f7ff;
  font-weight:700;
  font-size:.9rem;
  line-height:1.2;
  white-space:nowrap;
}

.slot-es-container{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px;
}