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

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

   1. Warm charcoal ground with a violet lift, one rich gold for
      anything actionable, soft lavender as the second colour.
   2. Headings sit behind a short vertical gold bar on the left,
      not under a horizontal rule.
   3. Topic markers are solid gold pills with dark text, the same
      treatment the brand gives its own buttons.
   4. Two column arithmetic block: the figure, then what it costs
      the reader to reach it.
   5. Supplied artwork keeps its transparent background and sits in
      a violet to gold wash so it never floats on flat black.
   ================================================================== */

:root {
  --font-display: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, 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;
  --lk-rule: rgba(169, 139, 245, 0.32);
  --lk-rule-strong: rgba(227, 182, 77, 0.5);
  --lk-violet-wash: rgba(169, 139, 245, 0.09);
  --lk-gold-wash: rgba(227, 182, 77, 0.1);
}

/* ---- 1. Sidebar: violet gradient, gold hairline ----------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 264px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border, #3a2f4e);
    background: linear-gradient(180deg, rgba(46, 36, 64, 0.62), rgba(16, 13, 22, 0.94));
  }
  .wi-main { 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, #8b7fa0);
}

.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, #e3b64d);
  color: var(--color-accent, #e3b64d);
}

/* ---- 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;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.14; font-weight: 700; }
h2 { line-height: 1.28; }
h3 {
  line-height: 1.36;
  font-size: 1.05rem;
  color: var(--color-accent-secondary, #a98bf5);
}

.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;
}

/* A short gold bar stands to the left of every section heading. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding-bottom: 0;
  padding-left: 1.05rem;
  overflow: hidden;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  position: absolute;
  top: 0.22em;
  bottom: 0.22em;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent, #e3b64d), var(--color-accent-secondary, #a98bf5));
  border-radius: 4px;
}

/* ---- 3. Topic marker: solid gold pill --------------------------- */
.step {
  display: inline-block;
  vertical-align: 0.14em;
  margin-right: 12px;
  padding: 0.26em 0.62em;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #20180a;
  background: linear-gradient(180deg, var(--color-accent-hover, #f2ca6a), var(--color-cta, #c9973a));
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- 4. Arithmetic block: the figure, then what it asks back ---- */
.pairs {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #3a2f4e);
  border-radius: 8px;
  overflow: hidden;
}

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #3a2f4e);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: rgba(46, 36, 64, 0.48); }

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

.pr-key {
  color: var(--color-accent, #e3b64d);
  font-family: var(--font-num);
  font-size: 0.86rem;
}
.pr-val { color: var(--color-text, #f4f0f8); }

.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, #f4f0f8);
  background: rgba(16, 13, 22, 0.66);
}

@media (max-width: 700px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-row > span { border-right: 0; border-bottom: 1px dotted var(--lk-rule); }
  .pr-row > span:last-child { border-bottom: 0; }
  .pr-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(16, 13, 22, 0.66); }
  .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, #b3a7c4); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-accent, #e3b64d); }
}

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

/* ---- 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(--lk-violet-wash);
  border: 1px solid var(--lk-rule);
  border-left: 3px solid var(--color-accent-secondary, #a98bf5);
  border-radius: 0 8px 8px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 0.99rem;
  color: var(--color-text, #f4f0f8);
}
.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, #241d31);
  border: 1px solid var(--lk-rule-strong);
  border-left: 3px solid var(--color-accent, #e3b64d);
  border-radius: 0 8px 8px 0;
  font-size: 0.96rem;
  color: var(--color-text-muted, #b3a7c4);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(120% 78% at 30% 12%, rgba(169, 139, 245, 0.2) 0%, rgba(227, 182, 77, 0.07) 52%, rgba(16, 13, 22, 0) 100%);
  border-radius: 8px;
  filter: drop-shadow(0 14px 26px rgba(8, 6, 12, 0.62));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 761px) {
  .shot { width: 296px; 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(16, 13, 22, 0.96) 0%,
    rgba(46, 36, 64, 0.66) 50%,
    rgba(46, 36, 64, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #e3b64d);
  border-color: var(--lk-rule-strong);
  background: var(--lk-gold-wash);
  border-radius: 999px;
}

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

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

/* ---- 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, #e3b64d);
  border-bottom: 1px solid var(--color-accent-dark, #a67c25);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #3a2f4e);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td {
  background: rgba(46, 36, 64, 0.48);
}

@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 comparison tables carry four to six columns, which is more
   than a 390px viewport can hold. Wrapping them lets the table keep
   its own 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: 8px;
  border: 1px solid var(--lk-rule);
  background: rgba(16, 13, 22, 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; }
}

/* Brand tints for the two chips theme4 does not colour. */
.wi-pay--amex     .wi-pay__name { color: #2e77bc; letter-spacing: 0.4px; }
.wi-pay--neteller .wi-pay__name { color: #8dc63f; }
.wi-pay--skrill   .wi-pay__name { color: #c589dd; }

/* ---- Centred call to action -------------------------------------
   The h2 rule elsewhere on the site hangs a vertical gold bar off
   the left edge of the heading. Inside a centred banner that bar
   detaches from the text and reads as a stray mark, so it is
   removed here and the heading keeps the centred alignment. */
.cta-banner h2::before { 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 -------------------------------------
   Nine 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 hides the rest behind a
   gesture. Wrapping onto a second row keeps every method 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; }
}