/* igaming-wp front-end — modern card system.
 * All brand colours come from CSS custom properties the child theme defines:
 *   --ig-gold  --ig-gold-bright  --ig-accent  --ig-surface  --ig-ink
 *   --ig-card-grad (3-stop gradient)  --ig-text  --ig-text-dim
 * Fallbacks keep the default palette working with any theme.
 */

:root {--ig-gold: #d4a843;
  --ig-gold-bright: #f0c96a;
  --ig-accent: #1dbf73;
  --ig-surface: #16161f;
  --ig-ink: #0d0d14;
  --ig-card-grad: #1c1c2b; /* flat field, not a gradient */
  --ig-text: #f4f2ee;
  --ig-text-dim: rgba(244, 242, 238, 0.62);}

/* ---------- grids & cards ---------- */
.ig-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ig-card-art img, .ig-thumb { width: 100%; height: auto; border-radius: 12px; display: block; }
.casino-card, .ig-slot-card {background: var(--ig-card-grad); 
  border-radius: 16px; padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem;
  transition:border-color .25s, transform .25s;}
.casino-card:hover, .ig-slot-card:hover {transform: translateY(-2px);}
.ig-card-title { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.ig-card-title a { color: inherit; text-decoration: none; }
.ig-slot-card .rtp-badge { margin-top: .2rem; }
.ig-provider { margin: 0; font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--ig-text-dim); }
.ig-score { color: var(--ig-gold); font-weight: 700; }
.ig-bonus .bonus-amount { color: var(--ig-accent); font-weight: 700; font-size: 1.05em; }
.ig-card-excerpt { margin: .35rem 0 .5rem; opacity: .85; }
.rtp-badge, .volatility { display: inline-block; font-size: .875rem; padding: .2em .65em; border-radius: 999px; margin-right: .35rem; }
.rtp-badge { background: rgba(29, 191, 115, .14); color: var(--ig-accent); }
.volatility-low { background: rgba(29, 191, 115, .14); color: #1dbf73; }
.volatility-medium { background: rgba(212, 168, 67, .14); color: var(--ig-gold); }
.volatility-high { background: rgba(229, 80, 80, .14); color: #e55050; }
.ig-empty { opacity: .7; }
.ig-meta-table td input, .ig-meta-table td textarea { max-width: 100%; }

/* ---------- CTA ---------- */
.btn-cta {display: inline-block; text-align: center;
  background: var(--ig-gold);
  color: var(--ig-ink); font-weight: 800; letter-spacing: .02em;
  padding: .8em 1.4em; border-radius: 12px; text-decoration: none;
  transition:filter .2s;}
.btn-cta:hover, .btn-cta:focus-visible {filter: brightness(1.06);  text-decoration: none;}

/* ---------- filters ---------- */
.ig-filter-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ig-filter {padding: .35em .9em; border-radius: 999px;  color: inherit; text-decoration: none; font-size: .88rem; transition: border-color .2s, background .2s;}
.ig-filter:hover {}
.ig-filter.is-active {background: var(--ig-gold); color: var(--ig-ink);  font-weight: 700;}

/* ---------- ranked comparison cards ---------- */
.ig-ranked { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.4rem; }
.ig-rank-row { position: relative; }
.ig-card-shell {position: relative; display: grid; gap: 0;
  background: var(--ig-card-grad);
   border-radius: 20px;
  transition:border-color .3s, transform .3s;
  overflow: hidden;}
.ig-rank-row:hover .ig-card-shell {transform: translateY(-3px);}
.ig-rank-body { display: grid; grid-template-columns: minmax(180px, 240px) 1fr minmax(200px, 260px); gap: 1.4rem; padding: 1.5rem 1.6rem; align-items: center; }

.ig-rank-art {display: block; border-radius: 14px; overflow: hidden;}
.ig-rank-art img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.23, 1, .32, 1); }
.ig-rank-row:hover .ig-rank-art img { transform: scale(1.04); }

.ig-rank-main { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.ig-rank-main .ig-card-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.ig-rank-main .ig-card-title a { color: var(--ig-text); }
.ig-rank-main .ig-card-title a:hover { color: var(--ig-gold-bright); }

/* top-pick ribbon */
.ig-ribbon {position: absolute; top: 14px; left: -34px; z-index: 2;
  transform: rotate(-45deg); transform-origin: center;
  background: var(--ig-gold);
  color: var(--ig-ink); font-size: .875rem; font-weight: 900; letter-spacing: .04em; text-transform: none;
  padding: .35em 2.6em;}

/* score pill top right */
.ig-score-pill {position: absolute; top: 12px; right: 14px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: .25rem;
  background: rgba(8, 10, 16, .78); 
   border-radius: 999px; padding: .4em .9em;}
.ig-score-pill b { color: var(--ig-gold-bright); font-size: 1.05rem; font-weight: 800; line-height: 1; }
.ig-score-pill i { color: var(--ig-text-dim); font-style: normal; font-size: .875rem; }

/* stars */
.ig-stars { position: relative; display: inline-block; width: 132px; height: 8px; background: rgba(255,255,255,.14); vertical-align: middle; }
.ig-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; display: block; background: var(--ig-gold); }

/* fact chips */
.ig-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ig-chip {display: inline-flex; align-items: center; gap: .45em; font-size: .875rem;  border-radius: 999px; padding: .3em .8em; color: var(--ig-text); background: rgba(255, 255, 255, .03);}
.ig-chip::before { content: ""; width: .5em; height: .5em; border-radius: 999px; background: var(--ig-gold); }
.ig-chip-fast::before {background: var(--ig-accent);}
.ig-chip-info::before { background: #6ea8ff; }
.ig-chip > span { color: var(--ig-text-dim); text-transform: none; font-size: .875rem; letter-spacing: 0; }

/* offer column */
.ig-rank-offer { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; justify-content: center; }
.ig-bonus-box {
  position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center;
  background: rgba(255, 255, 255, .04); background: rgba(212, 168, 67, .14);
  border-radius: 14px; padding: 1.3rem .9rem 1rem;
}
.ig-deal-tag {position: absolute; top: -.65rem; left: 50%; transform: translateX(-50%);
  background: var(--ig-gold); color: var(--ig-ink);
  font-size: .875rem; font-weight: 900; letter-spacing: .04em; text-transform: none;
  padding: .28em .9em; border-radius: 999px;}
.ig-bonus-line { display: flex; align-items: baseline; gap: .45rem; justify-content: center; }
.ig-bonus-pct { font-size: 2.2rem; font-weight: 900; color: var(--ig-text); line-height: 1; }
.ig-bonus-amount { font-size: 1.45rem; font-weight: 800; color: var(--ig-accent); line-height: 1; }
.ig-wager { opacity: .7; }
.ig-code-chip { display: inline-block; margin-top: .35rem; background: rgba(212, 168, 67, .14); padding: .3em .7em; border-radius: 6px; font-size: .9rem; color: var(--ig-gold-bright); }
.ig-review-link { font-size: .875rem; opacity: .75; text-align: center; color: inherit; }
.ig-review-link:hover { opacity: 1; color: var(--ig-gold-bright); }
.ig-rank-offer .btn-cta { width: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ig-rank-body { grid-template-columns: minmax(150px, 190px) 1fr; }
  .ig-rank-offer { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ig-bonus-box { flex: 1 1 220px; }
  .ig-rank-offer .btn-cta { flex: 1 1 160px; }
}
@media (max-width: 640px) {
  .ig-rank-body { grid-template-columns: 1fr; padding: 2.6rem 1.1rem 1.3rem; }
  .ig-rank-art { max-width: 100%; }
  .ig-ribbon { top: 10px; left: -40px; }
}

/* ---------- vertical premium cards (grids + archives) ---------- */
.ig-vcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ig-vcard:hover {transform: translateY(-2px);}
.ig-vcard-media { position: relative; display: block; }
.ig-vcard-media img { width: 100%; height: auto; border-radius: 0; display: block; }
.ig-vcard-media .ig-score-pill { position: absolute; top: .6rem; right: .6rem; }
.ig-vcard-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.2rem; flex: 1; }
.ig-vcard-body .ig-stars { position: relative; display: inline-block; width: 132px; height: 8px; background: rgba(255,255,255,.14); vertical-align: middle; }
.ig-vcard-body .ig-bonus-box { margin-top: .15rem; }
.ig-vcard-body .ig-chips { margin: .1rem 0 0; }
.ig-provider { margin: 0; font-size: .875rem; letter-spacing: .16em; text-transform: none; color: var(--ig-text-dim); }
.ig-card-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.ig-vcard-cta { margin-top: auto; padding-top: .7rem; display: flex; flex-direction: column; gap: .45rem; align-items: center; }
.ig-vcard-cta .btn-cta { width: 100%; }
.ig-vslot-card .ig-vcard-media img { border-radius: 12px; margin: .8rem .8rem 0; width: calc(100% - 1.6rem); }

/* ---------- archive header band ---------- */
.ig-list-head { padding: 2.2rem 0 1.4rem; }
.ig-list-title { margin: 0 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.ig-list-sub { margin: 0; max-width: 60ch; color: var(--ig-text-dim); }

/* ---------- legal pages + disclaimer bands ---------- */
.ig-lead {margin: 0 0 1.8rem; padding: .9rem 1.1rem;
  font-size: 1.02rem; line-height: 1.65; color: var(--ig-text);
   border-left: 3px solid var(--ig-gold, #d4a843);
  border-radius: 10px; background: rgba(255,255,255,.03);}
.ig-legal h2 { margin: 2.4rem 0 .6rem; font-size: 1.22rem; line-height: 1.25; }
.ig-legal h2:first-of-type { margin-top: 1.4rem; }
.ig-legal p, .ig-legal li, .ig-legal address { max-width: none; }
.ig-legal address {font-style: normal; line-height: 1.75; margin: .4rem 0 1rem; padding: .85rem 1.05rem;
   border-radius: 10px; background: rgba(255,255,255,.03);}
.ig-legal code { font-size: .88em; padding: .12em .4em; border-radius: 5px; background: rgba(255,255,255,.06); }
.ig-stand {
  margin: 2.4rem 0 0; padding-top: .9rem; font-size: .875rem; letter-spacing: .02em; text-transform: none;
  color: var(--ig-text-dim); /* separation by space and tone, no rule above it */
}
.ig-legal-note {display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
  margin: 1.2rem 0 1.7rem; padding: .7rem 1rem;
  font-size: .875rem; line-height: 1.6; color: var(--ig-text-dim);
   border-left: 3px solid var(--ig-gold, #d4a843);
  border-radius: 10px; background: rgba(255,255,255,.025);}
.ig-legal-note strong { color: var(--ig-gold, #d4a843); letter-spacing: .06em; }
.ig-legal-note a { color: var(--ig-text-dim); text-decoration: underline; text-underline-offset: 2px; }
.ig-legal-note a:hover { color: var(--ig-text); }
@media (max-width: 560px) { .ig-legal-note { font-size: .875rem; padding: .65rem .8rem; } }

/* Mobile density. The ranked rows and the cards were built for a desktop column: stacked
   full-width artwork, three chip lines and a centred offer box made one entry ~600 px tall, so a
   four-item shortlist alone ate 2 400 px of a phone screen. Same content, half the height:
   thumb at the left, one title line, the two chips that decide the click, offer and button
   side by side. The full presentation stays on desktop and on the review page. */
@media (max-width: 640px) {
  .ig-ranked { gap: .75rem; margin: 1rem 0; }
  .ig-card-shell { border-radius: 14px; }
  .ig-rank-body { grid-template-columns: 104px minmax(0, 1fr); gap: .65rem .8rem; padding: 2rem .85rem .85rem; align-items: start; }
  .ig-rank-art { max-width: 104px; aspect-ratio: 16 / 9; }
  .ig-rank-main { gap: .25rem; }
  .ig-rank-main .ig-card-title { font-size: 1.12rem; }
  .ig-rank-main .ig-facts li:nth-child(3) { display: none; }   /* the payments chip is the longest, the review page lists them */
  .ig-rank-offer { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .55rem; }
  .ig-rank-offer .ig-bonus-box { flex: 1 1 auto; justify-items: start; text-align: left; padding: .5rem .6rem; gap: .15rem; }
  .ig-rank-offer .btn-cta { flex: 0 1 45%; font-size: .88rem; padding: .6rem .8rem; }
  .ig-rank-offer .ig-review-link { display: none; }             /* the title above already links */
  .ig-vcard-media img { aspect-ratio: 16 / 9; height: auto; max-height: 150px; object-fit: cover; }
  .ig-vslot-card .ig-vcard-media img { margin: .6rem .6rem 0; width: calc(100% - 1.2rem); max-height: 128px; }
  .ig-vcard-body { gap: .4rem; padding: .75rem .85rem .9rem; }
  .ig-vcard-body .ig-card-title { font-size: 1.05rem; }
  .ig-vcard-cta { padding-top: .5rem; }
  .ig-grid { gap: .8rem; }
  /* the rating sits on the artwork as a pill, so the star strip and the chip row are duplicates
     at this width — they cost two lines per card and say nothing new */
  .ig-rank-body .ig-stars, .ig-vcard-body .ig-stars, .ig-vcard-body .ig-facts { display: none; }
  .ig-rank-body { padding: 1.7rem .85rem .85rem; }
  .ig-rank-main .ig-card-excerpt, .ig-vcard-body .ig-card-excerpt {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .9rem; margin: .1rem 0 0;
  }
  .ig-vcard-body .ig-bonus-box { padding: .45rem .55rem; gap: .1rem; }
  .ig-vcard-body .ig-vcard-cta { padding-top: .45rem; }
  .ig-vcard-cta { padding-top: .45rem; }
}



/* ---------- review (detail page) ---------- */
.ig-review-head {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .75fr); gap: 1.4rem;
  align-items: stretch; background: var(--ig-card-grad);
   border-radius: 18px;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);  margin: 0 0 1.2rem;}
.ig-review-id { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.ig-review-art { flex: 0 0 clamp(120px, 24%, 210px); min-width: 0; }
.ig-review-art img { width: 100%; height: auto; border-radius: 14px; display: block; }
.ig-review-name { min-width: 0; }
.ig-review-brand { margin: 0 0 .3rem; font-size: .875rem; text-transform: none; letter-spacing: .14em; color: var(--ig-text-dim); }
.ig-review-score { display: flex; align-items: center; gap: .6rem; margin: .15rem 0 .45rem; color: var(--ig-text-dim); }
.ig-review-score strong { color: var(--ig-gold); font-size: 1.5rem; line-height: 1; }
.ig-tested { margin: .2rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }
.ig-review-offer {display: flex; flex-direction: column; gap: .45rem; align-items: flex-start;
  background: rgba(255,255,255,.045); 
  border-radius: 14px; padding: 1rem 1.1rem;}
.ig-review-offer .ig-bonus-line { display: flex; align-items: baseline; gap: .45rem; margin: .1rem 0; flex-wrap: wrap; }
.ig-review-cta { margin-top: .35rem; width: 100%; text-align: center; }
.ig-legal-inline { margin: .35rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }
.ig-code-line { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .875rem; letter-spacing: .09em; text-transform: none; color: var(--ig-text-dim); }
.ig-bonus-terms { margin: .1rem 0 .3rem; font-size: .9rem; color: var(--ig-text-dim); }

.ig-factstrip {display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
   border-radius: 14px; overflow: hidden; margin: 0 0 1.8rem;}
.ig-fact { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; background: var(--ig-surface); }
.ig-fact span { font-size: .875rem; letter-spacing: .09em; text-transform: none; color: var(--ig-text-dim); }
.ig-fact strong { font-size: .98rem; color: var(--ig-text); }

.ig-verdict, .ig-proscons, .ig-facts-table, .ig-related { margin: 0 0 2.1rem; }
.ig-verdict {background: rgba(255,255,255,.035); 
  border-left: 3px solid var(--ig-gold); border-radius: 14px; padding: clamp(1rem, 2.5vw, 1.5rem);}
.ig-verdict h2 { margin-top: 0; }
.ig-verdict-text { margin: .2rem 0 1rem; font-size: 1.02rem; line-height: 1.6; }
.ig-rating-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ig-rating { display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(5rem, 2fr) auto; gap: .7rem; align-items: center; }
.ig-rating-label { font-size: .9rem; color: var(--ig-text-dim); }
.ig-rating-bar { display: block; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.11); overflow: hidden; }
.ig-rating-bar i {display: block; height: 100%; border-radius: 999px; background: var(--ig-gold);}
.ig-rating-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--ig-gold); }
.ig-method { margin: 1rem 0 0; font-size: .9rem; }

.ig-proscons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.ig-pros, .ig-cons {background: rgba(255,255,255,.03);  border-radius: 14px; padding: 1rem 1.1rem;}
.ig-pros h3, .ig-cons h3 { margin: 0 0 .6rem; font-size: .875rem; letter-spacing: .1em; text-transform: none; }
.ig-pros h3 { color: var(--ig-accent); }
.ig-cons h3 { color: #ff9270; }
.ig-pros ul, .ig-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ig-pros li, .ig-cons li { position: relative; padding-left: 1.5rem; font-size: .94rem; line-height: 1.5; }
.ig-pros li::before { content: '\2713'; position: absolute; left: 0; color: var(--ig-accent); font-weight: 700; }
.ig-cons li::before { content: '\2013'; position: absolute; left: 0; color: #ff9270; font-weight: 700; }

.ig-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ig-table th, .ig-table td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.ig-table th { width: 38%; color: var(--ig-text-dim); font-weight: 600; }
.ig-table tr:last-child th, .ig-table tr:last-child td { border-bottom: 0; }
.ig-table-note { margin: .6rem 0 0; font-size: .875rem; color: var(--ig-text-dim); }

.ig-related-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.ig-related-list a {display: flex; gap: .9rem; align-items: center; text-decoration: none;
  background: rgba(255,255,255,.03); 
  border-radius: 14px; padding: .6rem .8rem; transition: border-color .2s, background .2s;}
.ig-related-list a:hover {background: rgba(255,255,255,.06);}
.ig-art-xs { flex: 0 0 86px; width: 86px; height: auto; border-radius: 10px; }
.ig-related-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ig-related-name { font-weight: 700; color: var(--ig-text); }
.ig-related-deal { font-size: .9rem; color: var(--ig-accent); }
.ig-related-score { font-size: .8rem; font-weight: 700; color: var(--ig-gold); }
.ig-all-link { margin: .5rem 0 0; font-size: .9rem; }

/* FAQ accordion — the schema.org FAQ data is read back out of these blocks, so keep the markup. */
.ig-faq details {background: rgba(255,255,255,.03);  border-radius: 12px; padding: .7rem 1rem; margin: 0 0 .6rem;}
.ig-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.ig-faq summary::-webkit-details-marker { display: none; }
.ig-faq summary::after { content: '+'; float: right; color: var(--ig-gold); font-weight: 700; }
.ig-faq details[open] summary::after { content: '\2013'; }
.ig-faq details p { margin: .6rem 0 0; color: var(--ig-text-dim); }

.ig-slot-head { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .6fr); }
.ig-review-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .5rem; }

@media (max-width: 860px) {
  .ig-review-head, .ig-slot-head { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ig-review-id { flex-direction: column; }
  .ig-review-art { flex: none; width: 100%; max-width: 240px; }
  .ig-rating { grid-template-columns: 1fr auto; }
  .ig-rating-bar { grid-column: 1 / -1; order: 3; }
  .ig-table th { width: 44%; }
  .ig-art-xs { flex-basis: 64px; width: 64px; }
}

/* Breadcrumb on detail pages — small, dim, never competes with the title. */
.ig-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .9rem; font-size: .8rem; color: var(--ig-text-dim); }
.ig-crumbs a { color: var(--ig-text-dim); text-decoration: none; }
.ig-crumbs a:hover { color: var(--ig-gold); }
.ig-crumbs span[aria-hidden] { opacity: .55; }

/* Legal pages: an unset owner detail shows as a field, never as an invented fact. */
.ig-needs-value { display: inline-block; padding: .05em .4em; background: rgba(212, 168, 67, .14); border-radius: 6px; color: var(--ig-gold); font-size: .92em; }
.ig-notice {background: rgba(212,168,67,.09);  border-radius: 12px; padding: .8rem 1rem; font-size: .9rem; color: var(--ig-text);}
.ig-notice code { font-size: .85em; }

/* nothing meant to be read below 14px — the inspector measures it, readers feel it */
.ig-wager, .ig-card-meta, .ig-review-link, .ig-vcard-cta .ig-review-link { font-size: .875rem; }