/* ==================================================================
   diesel-win.casino - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Deep plum ground, gold for accents and every button, lilac silver
      for secondary labels. Colours follow the purple VIP backdrop, the
      gold benefit icons and the silver crown in the DieselWin artwork.
   2. Chakra Petch headings over Manrope body text.
   3. Sidebar on the right; each H2 carries a slanted gold bar.
   4. Supplied artwork keeps its transparent background and sits on a
      soft violet glow, floated left or right of the matching text.
   ================================================================== */

:root {
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --dw-gold-wash: rgba(240, 180, 41, 0.10);
  --dw-gold-line: rgba(240, 180, 41, 0.38);
  --dw-lilac-line: rgba(201, 194, 230, 0.26);
  --dw-row: rgba(36, 22, 63, 0.55);
}

body { background: var(--color-bg, #120a1f); }

/* ---- 1. Sidebar on the right with a gold edge -------------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 1fr 264px;
    grid-template-areas: "main sidebar";
  }
  .wi-sidebar {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
    border-left: 1px solid var(--dw-gold-line);
    background:
      linear-gradient(180deg, rgba(36, 22, 63, 0.92) 0%, rgba(10, 6, 19, 0.98) 100%);
  }
  .wi-main { grid-column: 1; grid-row: 1; min-width: 0; margin-inline: auto; }
}

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

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

.wi-sidebar__nav a {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 6px;
}
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--dw-gold-wash);
  color: var(--color-accent-hover, #f7c95a);
  box-shadow: inset -3px 0 0 var(--color-accent, #f0b429);
}
.wi-sidebar__nav-icon { color: var(--color-accent, #f0b429); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #1a1204);
  background: linear-gradient(135deg, #f7c95a 0%, #f0b429 55%, #b9861a 100%);
  font-family: var(--font-display);
  letter-spacing: 0.6px;
}
.wi-sidebar__cta-sub { color: #2a1d05; 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.01em;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.16; }
h2 { line-height: 1.28; }
h3 {
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--color-accent-secondary, #c9c2e6);
  clear: both;
}

.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: 0.97rem; line-height: 1.72; color: var(--color-text, #f1eefa); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #f7c95a); }

/* Slanted gold bar in front of each section heading, lilac hairline under it */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0 0 0.65rem 1.9rem;
  border-bottom: 1px solid var(--dw-lilac-line);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.22em;
  width: 0.5rem;
  height: 1.05em;
  transform: skewX(-18deg);
  border-radius: 2px;
  background: linear-gradient(180deg, #f7c95a 0%, #f0b429 60%, #b9861a 100%);
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(95deg, rgba(10, 6, 19, 0.9) 0%, rgba(18, 10, 31, 0.55) 55%, rgba(18, 10, 31, 0) 100%);
}
.wi-hero__eyebrow {
  color: var(--color-accent-secondary, #c9c2e6);
  border: 1px solid var(--dw-lilac-line);
  background: rgba(201, 194, 230, 0.08);
  border-radius: 999px;
  font-family: var(--font-body);
  letter-spacing: 1.6px;
}
.wi-hero__h1 { color: var(--color-text, #f1eefa); font-size: clamp(28px, 3.3vw, 44px); line-height: 1.14; letter-spacing: 0.01em; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: linear-gradient(135deg, #f7c95a 0%, #f0b429 60%, #d69a1c 100%);
  color: var(--color-cta-text, #1a1204);
  border-color: transparent;
}
.wi-hero__cta--ghost { border-color: var(--dw-lilac-line); color: var(--color-text, #f1eefa); }
.wi-hero__trust-dot { background: var(--color-accent, #f0b429); }

.wi-page-header__eyebrow {
  color: var(--color-accent-secondary, #c9c2e6);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}
.wi-page-header { border-bottom: 1px solid var(--dw-gold-line); }

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 16px;
  background: radial-gradient(110% 80% at 50% 20%, rgba(201, 194, 230, 0.14) 0%, rgba(240, 180, 41, 0.07) 55%, rgba(18, 10, 31, 0) 100%);
  filter: drop-shadow(0 16px 28px rgba(4, 2, 10, 0.75));
}
.shot img { display: block; width: 100%; height: auto; }

@media (min-width: 761px) {
  .shot { width: 290px; max-width: 40%; }
  .shot--right { float: right; margin-left: 2rem; }
  .shot--left  { float: left;  margin-right: 2rem; }
}
@media (max-width: 760px) {
  .shot { width: 100%; max-width: 300px; 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, #463276);
  border-radius: 10px;
  background: rgba(27, 16, 48, 0.7);
}
.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.65rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.8px;
  color: var(--color-accent-hover, #f7c95a);
  background: rgba(10, 6, 19, 0.6);
  border-bottom: 1px solid var(--dw-gold-line);
}
.tw thead th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #1a1204;
  background: #f0b429;
  border-bottom: 1px solid var(--color-border-2, #463276);
}
.tw tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border, #33235a);
  border-right: 1px solid var(--color-border, #33235a);
  vertical-align: top;
  color: var(--color-text, #f1eefa);
}
.tw tbody td:last-child { border-right: 0; }
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--dw-row); }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* Step list on the promotions page */
.pairs { margin: 1.5rem 0; border: 1px solid var(--color-border-2, #463276); border-radius: 10px; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 9rem 1fr; border-bottom: 1px solid var(--color-border, #33235a); }
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--dw-row); }
.pr-row > span { padding: 0.66rem 0.9rem; font-size: 0.93rem; line-height: 1.55; }
.pr-key { color: var(--color-accent-hover, #f7c95a); background: var(--dw-gold-wash); border-right: 1px solid var(--color-border, #33235a); font-weight: 700; }
.pr-val { color: var(--color-text, #f1eefa); }
.pr-head > span { font-size: 0.72rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-accent-secondary, #c9c2e6); background: rgba(36, 22, 63, 0.85); font-weight: 700; }
@media (max-width: 520px) { .pr-row { grid-template-columns: 6.4rem 1fr; } }

/* Aside note */
p.aside {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface, #1b1030);
  border: 1px solid var(--dw-lilac-line);
  border-left: 3px solid var(--color-accent, #f0b429);
  border-radius: 0 10px 10px 0;
  color: var(--color-text-muted, #b3a9d1);
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(240, 180, 41, 0.16) 0%, rgba(36, 22, 63, 0.9) 60%);
  border: 1px solid var(--dw-gold-line);
  border-radius: 14px;
}
.cta-banner h2 { color: var(--color-text, #f1eefa); }
.cta-banner .btn--primary,
.btn--primary {
  background: linear-gradient(135deg, #f7c95a 0%, #f0b429 60%, #d69a1c 100%);
  color: var(--color-cta-text, #1a1204);
  border-color: transparent;
}
.cta-banner .container--narrow p { max-width: 44rem; margin-left: auto; margin-right: auto; }

.wi-payments { border-color: var(--color-border-2, #463276); }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 8px; border-color: var(--color-border-2, #463276); background: var(--color-surface, #1b1030); }
.wi-pay__name { color: var(--color-text, #f1eefa); }
.wi-payments__link { color: var(--color-accent-hover, #f7c95a); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 90px; } }

.wi-faq-item { border-color: var(--color-border, #33235a); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 700; color: var(--color-text, #f1eefa); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #f7c95a); }
.wi-faq-chevron { color: var(--color-accent, #f0b429); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: linear-gradient(135deg, #f7c95a 0%, #f0b429 100%);
  color: var(--color-cta-text, #1a1204);
  border-color: transparent;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--dw-lilac-line); color: var(--color-text, #f1eefa); }
.wi-mobile-topbar { background: rgba(10, 6, 19, 0.96); border-bottom: 1px solid var(--dw-gold-line); }

.sticky-cta { background: rgba(10, 6, 19, 0.97); border-top: 1px solid var(--color-accent, #f0b429); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--color-accent-hover, #f7c95a); }
@media (max-width: 640px) {
  .sticky-cta__text > span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.82rem; 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, #f7c95a); }
.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 Chakra Petch in sentence case at weight 700 */
.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.01em;
}
.wi-main .content-section h2 { font-size: clamp(24px, 2.3vw, 32px); }
.wi-main .content-section h3 { font-weight: 600; color: var(--color-accent-secondary, #c9c2e6); }

/* ---- 8. DieselWin UK extras ------------------------------------- */
.wi-main .content-section .container > ul li::marker,
.wi-main .content-section .container > ol li::marker { color: var(--color-accent, #f0b429); font-weight: 700; }
.wi-hero__h1 { font-weight: 700; }
.wi-sidebar__logo-img { max-width: 200px; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }
@media (min-width: 1025px) {
  body.layout-sidebar .sticky-cta { left: 0; right: 264px; }
}