/* ==================================================================
   gt-spins.me.uk - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   Goal: a Theme 4 shell that reads as GT Spins and as nothing else in
   the repository.

   1. Night aubergine ground from the operator's own artwork, gold as
      the first accent, hot magenta for anything actionable.
   2. Condensed headings, each one carrying two short gold rungs in
      front of the text and a short magenta hairline underneath.
   3. Topic markers are solid magenta pills with dark text.
   4. Step tables put the rung number in a gold key column.
   5. Supplied artwork keeps its transparent background and sits in a
      magenta into gold wash so it never floats on flat purple.
   ================================================================== */

:root {
  --font-display: 'DejaVu Sans Condensed', 'Liberation Sans Narrow', 'Arial Narrow', Verdana, system-ui, sans-serif;
  --font-body: Verdana, 'DejaVu Sans', Geneva, system-ui, -apple-system, sans-serif;
  --font-num: 'DejaVu Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --gt-rule: rgba(255, 200, 0, 0.28);
  --gt-rule-strong: rgba(255, 45, 120, 0.45);
  --gt-gold-wash: rgba(255, 200, 0, 0.08);
  --gt-mag-wash: rgba(255, 45, 120, 0.1);
  --gt-row: rgba(46, 32, 71, 0.55);
}

/* ---- 1. Sidebar on the left, gold hairline ---------------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 274px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid var(--color-border-2, #54366f);
    background: linear-gradient(180deg, rgba(46, 32, 71, 0.85), rgba(15, 8, 25, 0.97));
  }
  .wi-main { grid-column: 2; grid-row: 1; min-width: 0; margin-inline: auto; }
}

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

.wi-sidebar__nav-label-text {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 1.7px;
  border: 1px solid var(--gt-rule);
  border-radius: 4px;
  background: var(--gt-gold-wash);
  color: var(--color-accent, #ffc800);
}

/* ---- 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: 700;
  text-transform: none;
  letter-spacing: 0.004em;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.14; }
h2 { line-height: 1.26; }
h3 {
  line-height: 1.4;
  font-size: 1.06rem;
  color: var(--color-accent, #ffc800);
  clear: both;
}
h4 { color: var(--color-text, #f6f0fa); }

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

.wi-main p, .wi-main li { font-size: 0.95rem; line-height: 1.72; }

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

/* Two short gold rungs in front of the text, a short magenta hairline
   underneath. Nothing runs the full width of the column. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding: 0 0 0.6rem 2.15rem;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1.45rem;
  height: 0.62rem;
  border-top: 3px solid var(--color-accent, #ffc800);
  border-bottom: 3px solid var(--color-accent, #ffc800);
}
.wi-main .content-section .container > h2::after,
.wi-main .seo-content h2::after {
  content: "";
  position: absolute;
  left: 2.15rem;
  bottom: 0;
  width: 4.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-cta, #ff2d78);
}

/* ---- 3. Topic marker: solid magenta pill ------------------------ */
.step {
  display: inline-block;
  vertical-align: 0.12em;
  margin-right: 12px;
  padding: 0.26em 0.7em;
  font-family: var(--font-body);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-cta, #ff2d78);
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- 4. Step tables: the rung, then what it asks for ------------ */
.pairs {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #382450);
  border-radius: 8px;
  overflow: hidden;
}

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #382450);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--gt-row); }

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

.pr-key {
  color: var(--color-accent, #ffc800);
  font-family: var(--font-num);
  font-size: 0.85rem;
  background: var(--gt-gold-wash);
}
.pr-val { color: var(--color-text, #f6f0fa); }

.pr-head > span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text, #f6f0fa);
  background: rgba(15, 8, 25, 0.72);
}

@media (max-width: 700px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-row > span { border-right: 0; border-bottom: 1px dotted var(--gt-rule); }
  .pr-row > span:last-child { border-bottom: 0; }
  .pr-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(15, 8, 25, 0.72); }
  .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, #c6b6d6); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-cta, #ff2d78); }
}

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

/* ---- 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(--gt-mag-wash);
  border: 1px solid var(--gt-rule-strong);
  border-left: 3px solid var(--color-cta, #ff2d78);
  border-radius: 0 8px 8px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--color-text, #f6f0fa);
}
.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, #231634);
  border: 1px solid var(--gt-rule);
  border-left: 3px solid var(--color-accent, #ffc800);
  border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
  color: var(--color-text-muted, #c6b6d6);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(118% 76% at 34% 14%, rgba(255, 45, 120, 0.22) 0%, rgba(255, 200, 0, 0.09) 52%, rgba(15, 8, 25, 0) 100%);
  border-radius: 12px;
  filter: drop-shadow(0 14px 26px rgba(8, 4, 16, 0.7));
}
.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.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 block 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(15, 8, 25, 0.96) 0%,
    rgba(46, 32, 71, 0.7) 50%,
    rgba(46, 32, 71, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #ffc800);
  border-color: var(--gt-rule);
  background: var(--gt-gold-wash);
  border-radius: 4px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(15, 8, 25, 0.96);
  border-top: 1px solid var(--color-cta, #ff2d78);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 10. Accent details ---------------------------------------- */
.wi-sidebar__cta a { color: #1a0f2b; }
.wi-sidebar__cta-sub { color: #2a1a3f; opacity: 0.92; }
.wi-pay { border-radius: 6px; }
blockquote, .wi-infobox { border-left: 3px solid var(--color-cta, #ff2d78); }

/* ---- 11. Tables, readable on a phone too ----------------------- */
.wi-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.wi-main thead th {
  font-family: var(--font-display);
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent, #ffc800);
  border-bottom: 1px solid var(--color-accent-dark, #c79b00);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #382450);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td { background: var(--gt-row); }
.wi-main table caption {
  caption-side: top;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted, #c6b6d6);
  background: rgba(15, 8, 25, 0.6);
  border-bottom: 1px solid var(--gt-rule);
}

@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 ------------------------------------ */
.tw {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--gt-rule);
  background: rgba(15, 8, 25, 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.9rem; }
  .tw > table th,
  .tw > table td { padding: 0.55rem 0.7rem; }
}

/* ---- Centred call to action ------------------------------------ */
.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 ----------------------------------- */
.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; }
}

/* ---- 11b. Wide tables get more room on a large display ---------- */
@media (min-width: 1300px) {
  .wi-main { max-width: 1080px; }
}
.wi-main table.tbl-wide { font-size: 0.84rem; }
.wi-main table.tbl-wide thead th { padding: 0.55rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.9px; }
.wi-main table.tbl-wide tbody td { padding: 0.55rem 0.5rem; }

/* ---- 14. Lift the dimmest payment name for contrast ------------- */
.wi-pay--eth .wi-pay__name { color: #b9c1e0; }