/* ==================================================================
   trixino-nl.com - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Navigation column on the right. Night indigo ground, violet
      surfaces, purple buttons and magenta labels, following the
      Snelle registratie and Begin met spelen buttons, the pink
      slots package card and the stage spotlight on the login screen
      in the supplied Trixino artwork.
   2. Baloo 2 headings over Outfit body text.
   3. Each H2 carries a small sparkle and a soft violet underline;
      tables sit on rounded violet cards with a magenta head row.
   4. Supplied artwork keeps its transparent background, floats left
      or right of the text and sits on a soft spotlight glow.
   ================================================================== */

:root {
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --tx-violet-wash: rgba(160, 107, 255, 0.12);
  --tx-violet-line: rgba(160, 107, 255, 0.36);
  --tx-pink-line: rgba(255, 79, 154, 0.42);
  --tx-row: rgba(33, 26, 82, 0.55);
  --tx-btn: linear-gradient(180deg, #b57bff 0%, #8b45ff 52%, #6c2bd9 100%);
  --tx-btn-glow: 0 6px 22px rgba(139, 69, 255, 0.45);
}

body { background: var(--color-bg, #0e0a26); }

/* ---- 1. Navigation column on the right --------------------------- */
@media (min-width: 900px) {
  .wi-shell {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "main sidebar";
  }
  .wi-sidebar {
    border-right: 0;
    border-left: 1px solid var(--tx-violet-line);
    background:
      radial-gradient(120% 40% at 50% 0%, rgba(139, 69, 255, 0.28) 0%, rgba(139, 69, 255, 0) 70%),
      linear-gradient(180deg, rgba(24, 18, 61, 0.98) 0%, rgba(8, 6, 26, 0.99) 100%);
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}
@media (max-width: 899px) {
  .wi-sidebar {
    left: auto;
    right: -290px;
    transition: right 0.28s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.55);
    border-right: 0;
    border-left: 1px solid var(--tx-violet-line);
  }
  .wi-sidebar { top: 56px; height: calc(100vh - 56px); height: calc(100dvh - 56px); }
  .wi-sidebar.open { left: auto; right: 0; }
  .wi-mobile-topbar { flex-direction: row-reverse; }
}

.wi-sidebar__logo-img { max-width: 214px; height: auto; }

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 0.62rem;
  color: var(--color-accent-secondary, #ff4f9a);
}

.wi-sidebar__nav a { font-family: var(--font-body); font-weight: 600; border-radius: 14px; }
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--tx-violet-wash);
  color: var(--color-text, #f6f2ff);
  box-shadow: inset -3px 0 0 var(--color-accent, #a06bff);
}
.wi-sidebar__nav-icon { color: var(--color-accent, #a06bff); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #ffffff);
  background: var(--tx-btn);
  box-shadow: var(--tx-btn-glow);
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 14px;
}
.wi-sidebar__cta-sub { color: #f2eaff; opacity: 0.92; font-family: var(--font-body); }

/* ---- 2. Type ----------------------------------------------------- */
h1, h2, h3,
.wi-hero__h1,
.wi-page-header h1,
.wi-faq-accordion__title,
.wi-payments__title,
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.12; }
h2 { line-height: 1.2; }
h3 {
  font-family: var(--font-body);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-accent-secondary, #ff4f9a);
}

.wi-main p, .wi-main li, .wi-main td, .wi-main th {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  hyphens: none;
}
.wi-main p, .wi-main li { font-size: 1rem; line-height: 1.74; color: var(--color-text, #f6f2ff); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #bb93ff); }

/* Sparkle before each H2 and a soft violet underline */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0.2rem 0 0.55rem 2rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--tx-violet-line);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ffc846 0%, #ff4f9a 100%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(100deg, rgba(8, 6, 26, 0.94) 0%, rgba(14, 10, 38, 0.66) 55%, rgba(14, 10, 38, 0.06) 100%);
}
.wi-hero__eyebrow {
  color: #f2eaff;
  border: 1px solid var(--tx-pink-line);
  background: rgba(255, 79, 154, 0.12);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.6px;
}
.wi-hero__h1 { color: var(--color-text, #f6f2ff); font-size: clamp(28px, 3.1vw, 44px); line-height: 1.1; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: var(--tx-btn);
  box-shadow: var(--tx-btn-glow);
  color: var(--color-cta-text, #ffffff);
  border-color: transparent;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.wi-hero__cta--ghost { border-color: var(--tx-violet-line); color: var(--color-text, #f6f2ff); border-radius: 14px; }
.wi-hero__trust-dot { background: var(--color-accent-secondary, #ff4f9a); }

.wi-page-header__eyebrow {
  color: var(--color-accent-secondary, #ff4f9a);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.wi-page-header { border-bottom: 1px solid var(--tx-violet-line); }

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 32px;
  background: radial-gradient(90% 70% at 50% 25%, rgba(139, 69, 255, 0.22) 0%, rgba(255, 79, 154, 0.07) 55%, rgba(14, 10, 38, 0) 100%);
}
.shot img { display: block; width: 100%; height: auto; }

@media (min-width: 761px) {
  .shot { width: 300px; max-width: 42%; }
  .shot--right { float: right; margin-left: 1.8rem; }
  .shot--left  { float: left;  margin-right: 1.8rem; }
}
@media (max-width: 760px) {
  .shot { width: 100%; max-width: 320px; margin-inline: auto; float: none; }
}

.wi-main .content-section .container::after { content: ""; display: block; clear: both; }
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { display: flow-root; }

/* ---- 5. Tables -------------------------------------------------- */
.tw {
  margin: 1.4rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-2, #4a3c96);
  border-radius: 18px;
  background: rgba(24, 18, 61, 0.88);
  display: flow-root;
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 30rem; font-size: 0.93rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.7rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--color-text, #f6f2ff);
  background: linear-gradient(90deg, rgba(139, 69, 255, 0.30) 0%, rgba(24, 18, 61, 0) 80%);
  border-bottom: 1px solid var(--tx-violet-line);
}
.tw thead th {
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #ffd2e6;
  background: #3a1e5e;
  border-bottom: 1px solid var(--tx-pink-line);
}
.tw tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border, #342a72);
  vertical-align: top;
  color: var(--color-text, #f6f2ff);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--tx-row); }
.tw tbody td:first-child { font-weight: 600; }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(232, 44, 128, 0.22) 0%, rgba(24, 18, 61, 0.96) 50%, rgba(139, 69, 255, 0.24) 100%);
  border: 1px solid var(--tx-pink-line);
  border-radius: 24px;
}
.cta-banner h2 { color: var(--color-text, #f6f2ff); }
.cta-banner .btn--primary,
.btn--primary {
  background: var(--tx-btn);
  box-shadow: var(--tx-btn-glow);
  color: var(--color-cta-text, #ffffff);
  border-color: transparent;
  border-radius: 14px;
}
.cta-banner .container--narrow p { max-width: 44rem; margin-left: auto; margin-right: auto; }

.wi-payments { border-color: var(--color-border-2, #4a3c96); }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 12px; border-color: var(--color-border-2, #4a3c96); background: var(--color-surface, #18123d); }
.wi-pay__name { color: var(--color-text, #f6f2ff); }
.wi-payments__link { color: var(--color-accent-hover, #bb93ff); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 84px; } }

.wi-faq-item { border-color: var(--color-border, #342a72); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 600; color: var(--color-text, #f6f2ff); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #bb93ff); }
.wi-faq-chevron { color: var(--color-accent-secondary, #ff4f9a); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: var(--tx-btn);
  color: var(--color-cta-text, #ffffff);
  border-color: transparent;
  border-radius: 12px;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--tx-violet-line); color: var(--color-text, #f6f2ff); border-radius: 12px; }
.wi-mobile-topbar { background: rgba(8, 6, 26, 0.96); border-bottom: 1px solid var(--tx-violet-line); }

.sticky-cta { background: rgba(8, 6, 26, 0.97); border-top: 1px solid var(--color-accent-secondary, #ff4f9a); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: #ffd2e6; }
@media (max-width: 640px) {
  .sticky-cta__text > span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.84rem; line-height: 1.25; }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: 0.6rem; }
  .sticky-cta .btn { white-space: nowrap; }
}

.wi-footer__cols a:hover { color: var(--color-accent-hover, #bb93ff); }
.content-section[id], .wi-main h2[id] { scroll-margin-top: 80px; }

@media (min-width: 1300px) { .wi-main { max-width: 1080px; } }

/* Theme 4 sets uppercase section titles; this site keeps Baloo 2 in sentence case */
.wi-main .content-section h2,
.wi-main .wi-faq-accordion h2,
.wi-main .cta-banner h2,
.wi-main .wi-payments__title {
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
}
.wi-main .content-section h2 { font-size: clamp(25px, 2.4vw, 32px); }

/* ---- 8. Trixino extras ------------------------------------------ */
.wi-main .content-section .container > ul li::marker,
.wi-main .content-section .container > ol li::marker { color: var(--color-accent-secondary, #ff4f9a); font-weight: 700; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }