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

   The guide counts upward from the smallest deposit the cashier
   accepts, so the sheet is built to make numbers easy to compare
   and nothing else.

   1. Ink ground with a cool lift, one green-blue for anything a
      reader can follow, coral only where money changes hands.
   2. Section headings sit above a two tone rule that runs the full
      width of the text column, and carry no bar on the left.
   3. Topic markers are outlined tags in a monospaced face, so they
      read as annotations rather than as buttons.
   4. The counting block stacks a figure over its consequence in
      alternating bands.
   5. Supplied artwork keeps its transparent background and rests in
      a soft green-blue pool so it never sits 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(63, 191, 168, 0.30);
  --lk-rule-strong: rgba(239, 106, 82, 0.46);
  --lk-violet-wash: rgba(63, 191, 168, 0.08);
  --lk-gold-wash: rgba(239, 106, 82, 0.10);
  --lk-band: rgba(33, 43, 48, 0.62);
  --lk-deep: rgba(8, 12, 14, 0.66);
}

/* ---- 1. Sidebar: violet gradient, gold hairline ----------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 256px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border, #2b383e);
    background: linear-gradient(180deg, rgba(24, 32, 36, 0.72), rgba(8, 12, 14, 0.96));
  }
  .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, #7d9199);
}

/* Nav rows: no per-item rule. Only the current page is marked, with a short
   coral tick on its left edge plus a teal wash. */
.wi-sidebar__nav a {
  position: relative;
  border-radius: 0 8px 8px 0;
}
.wi-sidebar__nav a.active {
  background: var(--lk-violet-wash, rgba(63, 191, 168, 0.08));
}
.wi-sidebar__nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--color-cta, #ef6a52);
}
.wi-sidebar__nav-label-text {
  border-bottom: 0;
  letter-spacing: 0.2px;
  line-height: 1.35;
}

/* ---- 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, #9ad9c9);
}

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

/* Section headings sit above a two tone rule the width of the column. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  padding-left: 0;
  padding-bottom: 0.5rem;
  border-bottom: 0;
  overflow: hidden;
}
.wi-main .content-section .container > h2::after,
.wi-main .seo-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-accent, #3fbfa8) 0,
    var(--color-accent, #3fbfa8) 3.4rem,
    var(--color-cta, #ef6a52) 3.4rem,
    var(--color-cta, #ef6a52) 4.6rem,
    var(--color-border, #2b383e) 4.6rem,
    var(--color-border, #2b383e) 100%
  );
  border-radius: 2px;
}

/* ---- 3. Topic marker: outlined tag, monospaced ------------------ */
.step {
  display: inline-block;
  vertical-align: 0.16em;
  margin-right: 11px;
  padding: 0.2em 0.5em 0.16em;
  font-family: var(--font-num);
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #9ad9c9);
  background: var(--lk-violet-wash);
  border: 1px solid var(--lk-rule);
  border-radius: 3px;
  white-space: nowrap;
}

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

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #2b383e);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--lk-band); }

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

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

.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, #eef4f5);
  background: var(--lk-deep);
}

@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: var(--lk-deep); }
  .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, #a9bcc2); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-accent, #3fbfa8); }
}

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

/* ---- 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-top: 2px solid var(--color-cta, #ef6a52);
  border-left: 1px solid var(--lk-rule);
  border-radius: 0 0 8px 8px;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 0.99rem;
  color: var(--color-text, #eef4f5);
}
.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, #182024);
  border: 1px dashed var(--lk-rule);
  border-radius: 8px;
  font-size: 0.96rem;
  color: var(--color-text-muted, #a9bcc2);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(118% 82% at 68% 16%, rgba(63, 191, 168, 0.20) 0%, rgba(154, 217, 201, 0.06) 54%, rgba(8, 12, 14, 0) 100%);
  border-radius: 10px;
  filter: drop-shadow(0 15px 27px rgba(4, 8, 10, 0.64));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

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

@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(8, 12, 14, 0.96) 0%,
    rgba(23, 36, 42, 0.68) 52%,
    rgba(23, 36, 42, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent-secondary, #9ad9c9);
  border-color: var(--lk-rule);
  background: var(--lk-violet-wash);
  border-radius: 4px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(8, 12, 14, 0.97);
  border-top: 1px solid var(--color-accent-dark, #22806f);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

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

/* ---- 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, #3fbfa8);
  border-bottom: 1px solid var(--color-accent-dark, #22806f);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #2b383e);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td {
  background: var(--lk-band);
}

@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(8, 12, 14, 0.38);
}
.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 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 -------------------------------------
   Section headings elsewhere carry a two tone rule under the text.
   Inside a centred banner the coral notch in that rule lands away
   from the words and reads as a stray mark, so the rule is dropped
   here and the heading keeps its centred alignment. */
.wi-main .content-section.cta-banner .container > h2::after,
.wi-main .cta-banner h2::after { display: none; }
.wi-main .cta-banner .container--narrow p {
  color: var(--color-text, #eef4f5);
  opacity: 1;
}
.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; }
}

/* Optional table columns: dropped on narrow screens so the numbers that
   matter stay on screen without sideways dragging. */
@media (max-width: 760px) {
  .tw table .opt, .table-wrap table .opt { display: none; }
  .tw table, .table-wrap table { font-size: 0.83rem; }
  .tw table th, .tw table td,
  .table-wrap table th, .table-wrap table td { padding-left: 0.6rem; padding-right: 0.6rem; }
}

@media (max-width: 460px) {
  .tw table, .table-wrap table { font-size: 0.76rem; }
  .tw > table, .wi-main table tbody { min-width: 0; }
  .tw table th, .table-wrap table th { white-space: normal; line-height: 1.25; }
  .tw table th, .tw table td,
  .table-wrap table th, .table-wrap table td { padding-left: 0.45rem; padding-right: 0.45rem; }
}