/* ==================================================================
   spin-fin.uk.net - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   Goal: a Theme 4 shell that reads as SpinFin and not as any other
   build in the repository.

   1. Deep ocean ground taken from the operator's own artwork, one
      sunny orange for anything actionable, a bright cyan second.
   2. Section headings sit above a full width hairline that runs
      orange into cyan, and carry a small orange marker in front of
      the text. No vertical bar, no boxed heading.
   3. Topic markers are outlined cyan pills, not solid ones.
   4. The offer week table: the day window, then what it releases.
   5. Supplied artwork keeps its transparent background and sits in a
      cyan to orange wash so it never floats on flat blue.
   ================================================================== */

:root {
  --font-display: Tahoma, 'DejaVu Sans', Verdana, Geneva, system-ui, sans-serif;
  --font-body: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
  --font-num: 'DejaVu Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sf-rule: rgba(63, 208, 242, 0.3);
  --sf-rule-strong: rgba(247, 161, 43, 0.48);
  --sf-cyan-wash: rgba(63, 208, 242, 0.09);
  --sf-amber-wash: rgba(247, 161, 43, 0.1);
}

/* ---- 1. Sidebar: ocean gradient, cyan hairline ------------------ */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 272px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border-2, #2a6b9e);
    background: linear-gradient(180deg, rgba(18, 64, 95, 0.72), rgba(6, 26, 44, 0.96));
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.1px;
  font-size: 0.6rem;
  color: var(--color-text-faint, #7fa3c4);
}

.wi-sidebar__nav-label-text {
  display: inline-block;
  padding: 0 0 0.34rem;
  font-size: 0.63rem;
  letter-spacing: 1.9px;
  border-bottom: 2px solid var(--color-accent-secondary, #3fd0f2);
  color: var(--color-accent-secondary, #3fd0f2);
}

/* ---- 2. Headings ------------------------------------------------ */
h1, h2, h3, h4,
.hero h1,
.page-hero h1,
.wi-hero__title,
.wi-page-header h1,
.content-section h2,
.content-section h3,
.wi-seo__heading,
.wi-games-tabs__title,
.wi-payments__title,
.wi-faq__title,
.wi-cta-banner__title,
.wi-banking__title,
.section-title,
.seo-content h2,
.seo-content h3,
.wi-faq-item__question,
.faq-accordion__question {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: -0.005em;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.15; font-weight: 700; }
h2 { line-height: 1.3; }
h3 {
  line-height: 1.38;
  font-size: 1.04rem;
  color: var(--color-accent, #f7a12b);
  clear: both;
}

.wi-main p,
.wi-main li,
.wi-main td,
.wi-main th {
  font-family: var(--font-body);
  hyphens: none;
  overflow-wrap: break-word;
}

.wi-page-header__eyebrow,
.wi-hero__eyebrow,
.wi-footer__col-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

/* Every section heading sits above a hairline that runs orange into
   cyan, with a small orange marker in front of the text. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding: 0 0 0.62rem;
  overflow: hidden;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 0.6rem;
  vertical-align: 0.02em;
  border-radius: 2px;
  background: var(--color-accent, #f7a12b);
  transform: rotate(45deg);
}
.wi-main .content-section .container > h2::after,
.wi-main .seo-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent, #f7a12b) 0%, var(--color-accent-secondary, #3fd0f2) 34%, rgba(63, 208, 242, 0) 100%);
}

/* ---- 3. Topic marker: outlined cyan pill ------------------------ */
.step {
  display: inline-block;
  vertical-align: 0.14em;
  margin-right: 12px;
  padding: 0.24em 0.66em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #3fd0f2);
  background: var(--sf-cyan-wash);
  border: 1px solid var(--sf-rule);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- 4. The offer week table: window, then what it releases ----- */
.pairs {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #1d5480);
  border-radius: 10px;
  overflow: hidden;
}

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #1d5480);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: rgba(22, 66, 103, 0.5); }

.pr-row > span {
  padding: 0.72rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted, #a9c8e3);
  border-right: 1px solid var(--color-border, #1d5480);
}
.pr-row > span:last-child { border-right: 0; }

.pr-key {
  color: var(--color-accent-secondary, #3fd0f2);
  font-family: var(--font-num);
  font-size: 0.86rem;
}
.pr-val { color: var(--color-text, #eef7ff); }

.pr-head > span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--color-text, #eef7ff);
  background: rgba(6, 26, 44, 0.7);
}

@media (max-width: 700px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-row > span { border-right: 0; border-bottom: 1px dotted var(--sf-rule); }
  .pr-row > span:last-child { border-bottom: 0; }
  .pr-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(6, 26, 44, 0.7); }
  .pr-head > span { display: inline; padding: 0; border: 0; background: none; }
  .pr-head > span + span::before { content: "\00A0\2192\00A0"; color: var(--color-text-muted, #a9c8e3); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-accent, #f7a12b); }
}

/* Figures inside running text */
.fig {
  font-family: var(--font-num);
  font-size: 0.93em;
  letter-spacing: -0.01em;
  color: var(--color-text, #eef7ff);
}

/* ---- 5. Box for the terms the operator has not published -------- */
.blank-fields {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 0.95rem;
  background: var(--sf-cyan-wash);
  border: 1px solid var(--sf-rule);
  border-left: 3px solid var(--color-accent-secondary, #3fd0f2);
  border-radius: 0 10px 10px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 0.99rem;
  color: var(--color-text, #eef7ff);
}
.blank-fields ul { margin: 0; padding-left: 1.15rem; }
.blank-fields li { margin-bottom: 0.42rem; }

/* ---- 6. Aside paragraph ---------------------------------------- */
p.aside {
  margin: 1.5rem 0;
  padding: 0.9rem 1.15rem;
  background: var(--color-surface, #0f3556);
  border: 1px solid var(--sf-rule-strong);
  border-left: 3px solid var(--color-accent, #f7a12b);
  border-radius: 0 10px 10px 0;
  font-size: 0.96rem;
  color: var(--color-text-muted, #a9c8e3);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(120% 78% at 32% 12%, rgba(63, 208, 242, 0.2) 0%, rgba(247, 161, 43, 0.08) 54%, rgba(6, 26, 44, 0) 100%);
  border-radius: 12px;
  filter: drop-shadow(0 14px 26px rgba(3, 14, 24, 0.66));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 761px) {
  .shot { width: 302px; max-width: 42%; }
  .shot--right { float: right; margin-left: 1.9rem; }
  .shot--left  { float: left;  margin-right: 1.9rem; }
}

@media (max-width: 760px) {
  .shot {
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    float: none;
  }
}

/* A following section must not slide up beside a floated image. */
.wi-main .content-section .container::after {
  content: "";
  display: block;
  clear: both;
}

/* ---- 8. Hero recoloured ---------------------------------------- */
.wi-hero::before {
  background: linear-gradient(
    92deg,
    rgba(6, 26, 44, 0.96) 0%,
    rgba(18, 64, 95, 0.68) 50%,
    rgba(18, 64, 95, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #f7a12b);
  border-color: var(--sf-rule-strong);
  background: var(--sf-amber-wash);
  border-radius: 999px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(6, 26, 44, 0.96);
  border-top: 1px solid var(--color-accent-dark, #c1761a);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 10. Accent details ---------------------------------------- */
.wi-sidebar__cta a { color: var(--color-cta-text, #2a1503); }
.wi-pay { border-radius: 8px; }
blockquote, .wi-infobox { border-left: 3px solid var(--color-accent, #f7a12b); }

/* ---- 11. Tables, readable on a phone too ----------------------- */
.wi-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}
.wi-main thead th {
  font-family: var(--font-display);
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--color-accent, #f7a12b);
  border-bottom: 1px solid var(--color-accent-dark, #c1761a);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #1d5480);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td {
  background: rgba(22, 66, 103, 0.5);
}

@media (max-width: 760px) {
  .wi-main table { display: block; overflow-x: auto; }
  .wi-main table thead,
  .wi-main table tbody { min-width: 34rem; }
}

/* ---- Sticky bar: keep it compact on narrow screens ------------- */
@media (max-width: 640px) {
  .sticky-cta__bonus {
    font-size: .74rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: .6rem; }
}

/* ---- Table scroll container -------------------------------------
   The cashier table carries four columns and fourteen rows, which is
   more than a 390px viewport can hold. Wrapping it lets the table
   keep its natural column widths and scroll sideways inside the
   column instead of pushing the whole page wider. */
.tw {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--sf-rule);
  background: rgba(6, 26, 44, 0.35);
}
.tw > table {
  margin: 0;
  border: 0;
  min-width: 34rem;
}
@media (max-width: 620px) {
  .tw { box-shadow: inset -12px 0 12px -12px rgba(0, 0, 0, 0.65); }
  .tw > table { min-width: 30rem; font-size: 0.92rem; }
  .tw > table th,
  .tw > table td { padding: 0.55rem 0.7rem; }
}

/* ---- Centred call to action -------------------------------------
   The heading rule elsewhere hangs a marker in front of the text and
   a hairline under it. Inside a centred banner both read as stray
   marks, so they are dropped and the heading keeps its centring. */
.cta-banner h2::before,
.cta-banner h2::after { display: none; }
.cta-banner h2 { padding-left: 0; text-align: center; }
.cta-banner .container--narrow p { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ---- Payments strip, wrapped -------------------------------------
   Ten methods will not fit the content column at any viewport, and
   the theme default scrolls them sideways, which leaves the last chip
   sliced against the panel border and the rest behind a gesture.
   Wrapping onto a second row keeps every route legible at a glance,
   which is the only reason the strip is here. */
.wi-payments__strip {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 10px;
}
.wi-payments__strip .wi-pay { flex: 1 1 auto; }
@media (max-width: 520px) {
  .wi-payments__strip .wi-pay { min-width: 88px; }
}