/* ================================================================
   bonusscommesse-redesign.css
   Site-wide redesign layer for bonusscommesse.co (Spacious theme).
   Loaded in addition to style.css/custom.css — does not replace them.
   Structure:
     1. Existing header/nav reskin (targets theme's own #masthead markup)
     2. Homepage redesign content, scoped under .bc-redesign
     3. Site-wide footer (injected via spacious_before_footer hook)
     4. Site-wide cookie consent banner (injected via wp_footer hook)
   ================================================================ */

/* ---------- 1. existing header/nav reskin (site-wide, all pages) ---------- */
#masthead.site-header { background: linear-gradient(150deg, #20234d 0%, #3a3f8c 60%, #4f5bc0 100%) !important; border-bottom: 3px solid #f2b01e; }
#masthead #header-text a#site-title-link, #masthead h1#site-title a { color: #ffffff !important; font-weight: 800; text-decoration: none; }
#masthead h2#site-description { color: #c9c6ff !important; font-size: 13px; }
#masthead #site-navigation ul li a { color: #d7e6de !important; font-weight: 600; }
#masthead #site-navigation ul li a:hover { color: #ffffff !important; }
#masthead .logo { background: none !important; display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; height: auto !important; }
#masthead .logo::before { content: ""; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #6d5cf6 0%, #4a7bff 100%); flex: none; }
#masthead .logo::after { content: attr(title); color: #ffffff; font-weight: 800; font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; }

/* ---------- 3. homepage redesign content (scoped) ---------- */
/* body-level overflow guard: the hero's 100vw full-bleed breakout below can overshoot by the
   scrollbar's width in some browsers, leaking a sliver of its glow past the page edge. */
body { overflow-x: hidden; }
.bc-redesign { max-width: 1140px; margin: 0 auto; padding: 0 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: #1b1f3b; }
.bc-redesign p { text-align: left; }
.bc-redesign img { max-width: 100%; height: auto; margin: 0; }

/* hero (full-bleed breakout from the theme's constrained content column) */
/* Full-bleed within .bc-redesign's own column only (NOT 100vw): the theme's #page
   wrapper is itself a centered, max-width column, so 100vw math measures against
   the wrong reference frame on wide screens and overshoots past the page edge.
   Cancelling .bc-redesign's own 20px padding is reference-frame-safe at any width. */
.bc-redesign .hero { position: relative; overflow: hidden; background: linear-gradient(150deg, #20234d 0%, #3a3f8c 60%, #4f5bc0 100%); color: #ffffff; padding: 40px 20px; margin: 0 0 30px; margin-left: -20px; margin-right: -20px; box-sizing: border-box; }
.bc-redesign .hero .hero-inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; }
.bc-redesign .hero .hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.bc-redesign .hero .hero-glow-a { top: -140px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(124,108,255,0.55), rgba(124,108,255,0) 70%); }
.bc-redesign .hero .hero-glow-b { bottom: -180px; left: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(74,123,255,0.40), rgba(74,123,255,0) 70%); }
.bc-redesign .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #c9c6ff; margin: 0 0 14px; }
.bc-redesign .hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8ce0c0; }
.bc-redesign .hero-heading { font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; margin: 0 0 14px; color: #ffffff; }
.bc-redesign .hero-text { font-size: 16px; color: #cfd3f5; margin: 0 0 22px; max-width: 60ch; }
.bc-redesign .trust-row { display: flex; flex-wrap: wrap; gap: 9px; }
.bc-redesign .trust-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); padding: 7px 13px; border-radius: 999px; color: #ffffff; }
.bc-redesign .trust-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8ce0c0; }
@media (min-width: 768px) { .bc-redesign .hero-heading { font-size: 44px; } .bc-redesign .hero-text { font-size: 18px; } }

/* comparison / toplist */
.bc-redesign .comparison-head { margin: 0 0 18px; }
.bc-redesign .comparison-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
.bc-redesign .comparison-note { font-size: 12.5px; color: #737aa0; margin: 8px 0 0; }
.bc-redesign .placeholder-flag { display: inline-block; background: #eef0fe; color: #4a45c4; border: 1px solid #d5d8fb; border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 11px; text-transform: uppercase; margin-right: 4px; }
.bc-redesign .author-byline { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; padding: 11px 16px; background: #ffffff; border: 1px solid #e7eaf6; border-radius: 12px; }
.bc-redesign .author-mark { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #6d5cf6, #4a7bff); color: #ffffff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.bc-redesign .author-text { font-size: 12.5px; color: #737aa0; margin: 0; }
.bc-redesign .author-name { color: #2b2f78; font-weight: 800; }
.bc-redesign .author-label { color: #8a90b2; }
.bc-redesign .author-sep { margin: 0 4px; color: #c3c8e4; }

.bc-redesign .toplist { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.bc-redesign .toplist-row { position: relative; background: #ffffff; border: 1px solid #e7eaf6; border-radius: 16px; padding: 18px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "rank operator" "bonus bonus" "terms terms" "rating rating" "cta cta"; gap: 13px 15px; box-shadow: 0 1px 2px rgba(38,43,90,0.05), 0 8px 20px rgba(38,43,90,0.06); }
.bc-redesign .toplist-row.is-top { border-color: #b9adff; background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 55%); box-shadow: 0 2px 6px rgba(109,92,246,0.20), 0 20px 44px rgba(109,92,246,0.26); }
.bc-redesign .rank-ribbon { position: absolute; top: -11px; left: 18px; background: linear-gradient(135deg, #6d5cf6, #4a7bff); color: #ffffff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 11px; border-radius: 7px; }
.bc-redesign .row-rank { grid-area: rank; align-self: center; width: 36px; height: 36px; border-radius: 11px; background: #eef0fe; color: #4a45c4; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.bc-redesign .is-top .row-rank { background: linear-gradient(135deg, #6d5cf6, #4a7bff); color: #ffffff; }
.bc-redesign .row-operator { grid-area: operator; align-self: center; display: flex; align-items: center; gap: 11px; }
.bc-redesign .operator-logo { width: 64px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #ffffff; flex: none; }
.bc-redesign .operator-name { font-weight: 700; font-size: 15px; }
.bc-redesign .operator-sub { display: block; font-weight: 500; font-size: 11.5px; color: #8a90b2; }
.bc-redesign .row-bonus { grid-area: bonus; }
.bc-redesign .bonus-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #8a90b2; margin: 0 0 3px; }
.bc-redesign .bonus-value { font-size: 19px; font-weight: 800; color: #2b2f78; }
.bc-redesign .row-terms { grid-area: terms; display: flex; flex-wrap: wrap; gap: 6px; }
.bc-redesign .term-chip { font-size: 12px; font-weight: 600; color: #4a4f70; background: #f0f2fb; border: 1px solid #e7eaf6; border-radius: 7px; padding: 4px 10px; }
.bc-redesign .row-rating { grid-area: rating; display: flex; align-items: center; gap: 11px; }
.bc-redesign .rating-score { display: inline-flex; align-items: baseline; font-size: 15px; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, #5b5bf0, #4a7bff); padding: 6px 11px; border-radius: 9px; }
.bc-redesign .rating-num { font-size: 18px; }
.bc-redesign .rating-stars { position: relative; font-size: 14px; letter-spacing: 2px; color: #d9ddf0; }
.bc-redesign .rating-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #7c6cf6; }
.bc-redesign .row-cta { grid-area: cta; display: flex; flex-direction: column; gap: 7px; }
.bc-redesign .cta-button { display: block; text-align: center; text-decoration: none; background: linear-gradient(135deg, #6d5cf6 0%, #4a7bff 100%); color: #ffffff !important; font-weight: 800; font-size: 15px; padding: 13px 18px; border-radius: 11px; }
.bc-redesign .cta-fineprint { font-size: 11px; color: #9aa0c0; text-align: center; }
.bc-redesign .cta-fineprint a { color: #737aa0; }
.bc-redesign .trust-badges-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; padding: 14px 16px; background: #ffffff; border: 1px solid #e7eaf6; border-radius: 12px; }
.bc-redesign .trust-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #4a4f70; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: #f0f2fb; border: 1px solid #e7eaf6; }
@media (min-width: 768px) {
  .bc-redesign .comparison-title { font-size: 27px; }
  .bc-redesign .toplist-row { grid-template-columns: 46px 200px 1fr auto; grid-template-areas: "rank operator bonus rating" "rank operator terms cta"; align-items: center; gap: 11px 22px; padding: 20px 22px; }
  .bc-redesign .row-cta { align-self: center; min-width: 196px; }
}
@media (min-width: 1024px) {
  .bc-redesign .toplist-row { grid-template-columns: 46px 216px 1.1fr 158px 200px; grid-template-areas: "rank operator bonus rating cta"; }
  .bc-redesign .row-terms { grid-area: bonus; margin-top: 7px; }
  .bc-redesign .row-bonus { align-self: end; }
}

/* content sections */
.bc-redesign .section-block { padding: 6px 0 10px; }
.bc-redesign .block-title { font-size: 24px; font-weight: 800; margin: 30px 0 10px; }
.bc-redesign .block-sub { font-size: 18px; font-weight: 800; color: #2b2f78; margin: 24px 0 12px; }
.bc-redesign .section-block p { color: #4a4f70; margin: 0 0 14px; max-width: 72ch; }
.bc-redesign .lead { font-size: 17px; color: #3a3f66; }
.bc-redesign .feature-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 10px 0; }
.bc-redesign .feature-card { background: #ffffff; border: 1px solid #e7eaf6; border-radius: 14px; padding: 18px; }
.bc-redesign .feature-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg,#eef0fe,#e4e9ff); display: flex; align-items: center; justify-content: center; margin: 0 0 12px; font-size: 19px; }
.bc-redesign .feature-name { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.bc-redesign .feature-text { font-size: 13.5px; color: #5a6088; margin: 0; }
.bc-redesign .steps { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 14px; padding: 0; list-style: none; counter-reset: step; }
.bc-redesign .step { position: relative; padding-left: 50px; }
.bc-redesign .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg,#6d5cf6,#4a7bff); color: #ffffff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bc-redesign .step-name { font-weight: 700; display: block; margin-bottom: 2px; }
.bc-redesign .step-text { color: #5a6088; font-size: 14px; }
.bc-redesign .method { background: linear-gradient(150deg,#f6f5ff 0%,#eaf0ff 100%); border: 1px solid #e0e4fb; border-radius: 16px; padding: 24px; margin: 26px 0; }
.bc-redesign .method-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.bc-redesign .criteria { display: grid; grid-template-columns: 1fr; gap: 11px; margin: 16px 0; padding: 0; list-style: none; }
.bc-redesign .criteria li { display: flex; gap: 11px; font-size: 14px; color: #3a3f66; align-items: flex-start; }
.bc-redesign .criteria li::before { content: "\2713"; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg,#6d5cf6,#4a7bff); color: #ffffff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.bc-redesign .byline { font-size: 12.5px; color: #737aa0; margin: 0; padding-top: 12px; border-top: 1px solid #dfe3fa; }
@media (min-width: 768px) { .bc-redesign .feature-grid { grid-template-columns: repeat(3, 1fr); } .bc-redesign .criteria { grid-template-columns: 1fr 1fr; } }

/* FAQ */
.bc-redesign .faq-item { background: #ffffff; border: 1px solid #e7eaf6; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.bc-redesign .faq-item summary { cursor: pointer; list-style: none; padding: 15px 18px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.bc-redesign .faq-item summary::-webkit-details-marker { display: none; }
.bc-redesign .faq-item summary::after { content: "+"; color: #6d5cf6; font-weight: 800; font-size: 22px; }
.bc-redesign .faq-item[open] summary::after { content: "\2013"; }
.bc-redesign .faq-body { padding: 0 18px 16px; color: #5a6088; font-size: 14px; }

/* pull-quote — used in place of a stock photo of banknotes (prohibited: no money/banknotes/winnings imagery per Italy Compliance policy) */
.bc-redesign .pull-quote { float: right; width: 220px; margin: 4px 0 16px 26px; background: #ffffff; border: 1px solid #e7eaf6; border-radius: 14px; padding: 20px 18px 18px; }
.bc-redesign .pull-quote .quote-mark { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 42px; line-height: 1; font-weight: 700; background: linear-gradient(135deg, #6d5cf6, #4a7bff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 4px; }
.bc-redesign .pull-quote p { font-size: 14.5px; font-style: italic; line-height: 1.5; color: #2b2f78; margin: 0; }
.bc-redesign .pull-quote cite { display: block; margin-top: 12px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #8a90b2; }
@media (max-width: 480px) { .bc-redesign .pull-quote { float: none; width: auto; margin: 18px 0; } }

/* ---------- 4. site-wide footer (injected via spacious_before_footer hook) ---------- */
.bc-footer { background: #131530; color: #c7cbe8; margin-top: 30px; }
.bc-footer .bc-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.bc-footer .rg-banner { background: rgba(255,255,255,0.04); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.bc-footer .rg-inner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; max-width: 1140px; margin: 0 auto; }
.bc-footer .rg-age { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #7c6cf6; color: #b9b2ff; font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex: none; }
.bc-footer .rg-text { font-size: 13px; color: #b0b5da; margin: 0; }
.bc-footer .footer-ad-disclosure { border-top: 1px solid rgba(255,255,255,0.08); }
.bc-footer .footer-ad-disclosure p { max-width: 1140px; margin: 0 auto; padding: 14px 20px; font-size: 11px; line-height: 1.5; color: #757bab; }
.bc-footer .footer-cols { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 36px 0 28px; }
.bc-footer .footer-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: #ffffff; margin: 0 0 12px; }
.bc-footer .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #6d5cf6 0%, #4a7bff 100%); flex: none; }
.bc-footer .footer-about { font-size: 13px; color: #9aa0c8; margin: 0; max-width: 44ch; }
.bc-footer .footer-col-title { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #8f95c4; margin: 0 0 13px; }
.bc-footer .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bc-footer .footer-links a { color: #c7cbe8; text-decoration: none; font-size: 14px; }
.bc-footer .footer-links a:hover { color: #ffffff; }
.bc-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 20px 30px; max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.bc-footer .footer-legal { font-size: 12px; color: #8f95c4; margin: 0; }
.bc-footer .footer-logos { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 0 0; }
.bc-footer .footer-logo-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; text-decoration: none; font-size: 11px; font-weight: 700; color: #c7cbe8; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 16px; min-width: 130px; max-width: 190px; overflow-wrap: break-word; }
.bc-footer .footer-logo-badge:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
.bc-footer .footer-logo-badge img { height: 20px; width: auto; }
.bc-footer .footer-tag { font-size: 11px; color: #757bab; margin: 0; }
@media (min-width: 768px) { .bc-footer .footer-cols { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 32px; padding: 36px 20px 28px; } }

/* ---------- 5. cookie consent banner (site-wide, injected via wp_footer hook) ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #131530; color: #c7cbe8; border-top: 1px solid rgba(255,255,255,0.12); padding: 16px 20px; box-shadow: 0 -8px 24px rgba(0,0,0,0.18); display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-banner-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cookie-banner-text { flex: 1 1 420px; font-size: 12.5px; line-height: 1.55; color: #c7cbe8; margin: 0; }
.cookie-banner-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn { border: none; cursor: pointer; font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: 9px; }
.cookie-btn-accept { background: linear-gradient(135deg, #6d5cf6 0%, #4a7bff 100%); color: #ffffff; }
.cookie-btn-decline { background: transparent; color: #c7cbe8; border: 1px solid rgba(255,255,255,0.24); }