/* ==================================================================
   spinbob.de - site sheet, loaded last, after base.css, style.css
   and theme4.css.

   1. Deep petrol ground, porthole aqua for frames and table heads,
      sun yellow for buttons and highlights, coral used sparingly.
      Taken from the yellow LOG IN and CLAIM buttons, the steel
      frames and the underwater cashier scene in the supplied screens.
   2. Paytone One headings over Asap body text.
   3. Sections sit in riveted panels with a dotted aqua top edge; a
      yellow coin dot leads each H2; tables have aqua heads and a
      yellow caption.
   ================================================================== */

:root {
  --font-display: 'Paytone One', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Asap', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sd-aqua: #8fd3e0;
  --sd-aqua-line: rgba(143, 211, 224, 0.34);
  --sd-aqua-wash: rgba(143, 211, 224, 0.08);
  --sd-sun: #ffcc1f;
  --sd-sun-line: rgba(255, 204, 31, 0.42);
  --sd-coral: #ef4b4b;
  --sd-panel: linear-gradient(180deg, rgba(16, 52, 61, 0.78) 0%, rgba(11, 40, 48, 0.62) 100%);
  --sd-btn: linear-gradient(180deg, #ffe066 0%, #ffcc1f 52%, #f0b400 100%);
  --sd-rivet: radial-gradient(circle, #5f98a4 0 2.4px, transparent 3px);
}

body {
  background:
    radial-gradient(1200px 520px at 70% -120px, rgba(143, 211, 224, 0.10), transparent 70%),
    var(--color-bg, #061a20);
}

/* ---- 1. Sidebar ------------------------------------------------- */
@media (min-width: 1025px) {
  .wi-sidebar {
    border-right: 2px solid var(--color-border, #1c4a55);
    background: linear-gradient(180deg, #0b2830 0%, #061a20 100%);
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}
.wi-sidebar__logo-img { max-width: 210px; height: auto; }
.wi-sidebar__nav-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sd-aqua);
}
.wi-sidebar__nav a {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
}
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--sd-aqua-wash);
  border-color: var(--sd-aqua-line);
  color: var(--color-text, #ecf7f9);
}
.wi-sidebar__nav a.active { box-shadow: inset 0 -2px 0 var(--sd-sun); }
.wi-sidebar__nav-icon {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 204, 31, 0.14);
  color: var(--sd-sun); font-size: 0.8rem;
}
.wi-sidebar__cta a {
  background: var(--sd-btn);
  color: var(--color-cta-text, #1a1300);
  font-family: var(--font-display);
  font-weight: 400;
  border-radius: 999px;
  box-shadow: 0 4px 0 #b88900;
}
.wi-sidebar__cta-sub { color: #3a2c00; 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: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.16; }
h2 { line-height: 1.25; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--sd-aqua); }

.wi-main p, .wi-main li, .wi-main td, .wi-main th {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  hyphens: manual;
}
.wi-main p, .wi-main li { font-size: 1rem; line-height: 1.72; color: var(--color-text, #ecf7f9); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) {
  color: var(--sd-sun);
  text-decoration-color: var(--sd-sun-line);
  text-underline-offset: 3px;
}

/* ---- 3. Riveted section panels ---------------------------------- */
.wi-main .content-section .container {
  position: relative;
  background: var(--sd-panel);
  border: 1px solid var(--color-border, #1c4a55);
  border-top: 3px dotted var(--sd-aqua-line);
  border-radius: 18px;
  padding: 1.6rem 1.7rem 1.3rem;
}
.wi-main .content-section .container::before {
  content: "";
  position: absolute; top: 10px; left: 10px; right: 10px; height: 8px;
  background: var(--sd-rivet) left center / 8px 8px no-repeat, var(--sd-rivet) right center / 8px 8px no-repeat;
  pointer-events: none;
}
.wi-main .content-section { padding-top: 0.9rem; padding-bottom: 0.9rem; }

.wi-main .content-section .container > h2 {
  position: relative;
  padding-left: 2.1rem;
  margin: 0.2rem 0 1rem;
  font-size: clamp(23px, 2.2vw, 30px);
  color: var(--color-text, #ecf7f9);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute; left: 0; top: 0.32em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2b0 0 18%, #ffcc1f 45%, #d9a000 100%);
  box-shadow: 0 0 0 3px rgba(255, 204, 31, 0.18);
}

/* ---- 4. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(95deg, rgba(4, 18, 22, 0.94) 0%, rgba(6, 26, 32, 0.70) 58%, rgba(6, 26, 32, 0.12) 100%);
}
.wi-hero__eyebrow {
  color: var(--sd-aqua);
  background: rgba(143, 211, 224, 0.08);
  border: 1px dashed var(--sd-aqua-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.wi-hero__h1 { color: var(--color-text, #ecf7f9); font-size: clamp(27px, 3vw, 41px); }
.wi-hero__h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.wi-hero__cta--primary {
  background: var(--sd-btn);
  color: var(--color-cta-text, #1a1300);
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 4px 0 #b88900;
  font-family: var(--font-display);
  font-weight: 400;
}
.wi-hero__cta--ghost { border: 2px solid var(--sd-aqua-line); color: var(--color-text, #ecf7f9); border-radius: 999px; }
.wi-hero__trust-dot { background: var(--sd-sun); }

.wi-page-header { border-bottom: 3px dotted var(--sd-aqua-line); }
.wi-page-header__eyebrow {
  color: var(--sd-sun);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- 5. Supplied screens ---------------------------------------- */
.shot {
  margin: 0 0 1rem;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 211, 224, 0.16) 0%, rgba(6, 26, 32, 0) 100%);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6));
}
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 761px) {
  .shot { width: 280px; max-width: 38%; }
  .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: 290px; 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; }
.wi-main .content-section .container > ul li::marker { color: var(--sd-sun); }
.wi-main .content-section .container > ol li::marker { color: var(--sd-aqua); font-family: var(--font-display); }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }

/* ---- 6. Tables -------------------------------------------------- */
.tw {
  margin: 1.3rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--color-border-2, #27606c);
  border-radius: 14px;
  background: rgba(6, 26, 32, 0.7);
  display: flow-root;
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 28rem; font-size: 0.93rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--sd-sun);
  border-bottom: 1px dotted var(--sd-aqua-line);
}
.wi-main .tw thead th,
.tw thead th {
  text-align: left;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #062027;
  background: var(--sd-aqua);
}
.tw tbody td {
  padding: 0.58rem 1rem;
  border-bottom: 1px solid var(--color-border, #1c4a55);
  vertical-align: top;
  color: var(--color-text, #ecf7f9);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(odd) td { background: rgba(16, 52, 61, 0.55); }
.tw tbody td:first-child { font-weight: 600; color: #ffffff; }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* ---- 7. CTA banner, payments, FAQ ------------------------------- */
.cta-banner {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(255, 204, 31, 0.16), transparent 60%),
    linear-gradient(135deg, #10343d 0%, #0b2830 100%);
  border: 2px solid var(--sd-sun-line);
  border-radius: 20px;
}
.cta-banner h2 { color: var(--color-text, #ecf7f9); }
.cta-banner .btn--primary,
.btn--primary {
  background: var(--sd-btn);
  color: var(--color-cta-text, #1a1300);
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 4px 0 #b88900;
}
.cta-banner .container--narrow p { max-width: 42rem; margin-left: auto; margin-right: auto; }

.wi-payments { border: 1px solid var(--color-border, #1c4a55); border-top: 3px dotted var(--sd-aqua-line); border-radius: 18px; }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 10px; border: 1px solid var(--color-border-2, #27606c); background: var(--color-surface, #0b2830); }
.wi-pay__name { color: var(--color-text, #ecf7f9); font-weight: 600; }
.wi-payments__link { color: var(--sd-sun); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 88px; } }

.wi-faq-item { border-color: var(--color-border, #1c4a55); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 700; color: var(--color-text, #ecf7f9); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--sd-sun); }
.wi-faq-chevron { color: var(--sd-aqua); }

/* ---- 8. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: var(--sd-btn);
  color: var(--color-cta-text, #1a1300);
  border-color: transparent;
  border-radius: 999px;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--sd-aqua-line); color: var(--color-text, #ecf7f9); border-radius: 999px; }
.wi-mobile-topbar { background: rgba(4, 18, 22, 0.96); border-bottom: 2px solid var(--color-border, #1c4a55); }

.sticky-cta { background: rgba(4, 18, 22, 0.97); border-top: 2px solid var(--sd-sun); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--sd-sun); }
@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-main .content-section .container { padding: 1.3rem 1rem 1rem; border-radius: 14px; }
}

.wi-footer { border-top: 3px dotted var(--sd-aqua-line); }
.wi-footer__cols a:hover { color: var(--sd-sun); }
.content-section[id], .wi-main h2[id] { scroll-margin-top: 80px; }

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

.wi-main .content-section h2,
.wi-main .wi-faq-accordion h2,
.wi-main .cta-banner h2,
.wi-main .wi-payments__title { text-transform: none; letter-spacing: 0.2px; font-weight: 400; }