/**
 * BSW Casino Comparison — front-end design tokens
 *
 * Matched to bestcasinodealz.com's actual Flatsome theme styles
 * (pulled from the site's own custom CSS), not an invented palette:
 *
 *   --bsw-surface        #162334   dark navy card/row background — this IS
 *                                  the site's existing .casinorow /
 *                                  .casinorow_calc background, reused as-is
 *                                  so the plugin's table/cards look like
 *                                  they were always part of the site
 *   --bsw-surface-alt    #1A2635   slightly darker navy — table head, the
 *                                  site's own .back-to-top background
 *   --bsw-primary        #36436f   site's stated primary brand color
 *   --bsw-primary-light  #3D65A2  lighter blue — the site's own
 *                                  .output_currency color, used for hovers
 *   --bsw-accent         #0EA47A   teal-green — the site's own .ribbon
 *                                  badge color (used there for bonus/offer
 *                                  highlights), reused here for CTAs and
 *                                  the rating-chip rim so it reads as the
 *                                  site's existing "highlight" color
 *   --bsw-text           #FFFFFF   the site's own .casinolist text color
 *   --bsw-text-muted     rgba(255,255,255,.6)
 *   --bsw-border         rgba(255,255,255,.1)  hairlines on the dark cards
 *   --bsw-cons           #E15B64   soft red for the "Cons" column — the one
 *                                  color not already defined on the site;
 *                                  chosen to sit quietly against navy
 *                                  rather than clash with the teal accent
 *
 * The page canvas around these components stays whatever Flatsome
 * already renders (light) — only the table/card/review components
 * themselves are dark, exactly matching how .casinorow already behaves
 * on the site today.
 *
 * Type stays the site's own — no extra font files loaded (no added
 * requests, nothing to clash with Flatsome's typography settings).
 */

.bsw-container,
.bsw-table-wrap,
.bsw-card,
.bsw-review,
.bsw-hero,
.bsw-offer-strip,
.bsw-details,
.bsw-faq {
    --bsw-surface: #162334;
    --bsw-surface-alt: #1A2635;
    --bsw-primary: #36436f;
    --bsw-primary-light: #3D65A2;
    --bsw-accent: #0EA47A;
    --bsw-text: #FFFFFF;
    --bsw-text-muted: rgba(255, 255, 255, .6);
    --bsw-border: rgba(255, 255, 255, .1);
    --bsw-cons: #E15B64;
    font-family: inherit;
}

.bsw-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- Signature element: the star rating ----------------
   Two stacked rows of Unicode stars (no icon font/SVG to load): a
   muted "track" row behind a colored "fill" row clipped to
   value/10*100% width, so the fill is continuous — a 7.6/10 score
   fills 76% across the 5 stars, not just the nearest half-star. */

.bsw-stars {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.bsw-stars--sm { font-size: 0.9rem; }
.bsw-stars--md { font-size: 1.3rem; }
.bsw-stars--lg { font-size: 1.75rem; }

.bsw-stars__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bsw-text-muted);
}

.bsw-stars__row {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 0.12em;
}

.bsw-stars__track,
.bsw-stars__fill {
    display: block;
    white-space: nowrap;
}

.bsw-stars__track {
    color: rgba(255, 255, 255, .18);
}

.bsw-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--bsw-accent);
}

.bsw-stars__value {
    font-size: 0.68em;
    font-weight: 700;
    color: var(--bsw-text);
}

/* ---------------- Table (the homepage hero) ---------------- */

.bsw-table-wrap {
    background: var(--bsw-surface);
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.bsw-table {
    width: 100%;
    border-collapse: collapse;
    /* Fixed layout + explicit column widths below: with the browser
       default (auto layout), each column is sized from its own
       row's content, so a longer casino name or bonus string on one
       row can shift that column's width relative to its header and
       relative to other rows — which is exactly what made the
       Review/Play buttons drift out of line with their header labels
       and with each other. Fixed widths make every row share the
       same column boundaries, always. */
    table-layout: fixed;
    color: var(--bsw-text);
    font-size: 0.95rem;
}

.bsw-table thead th {
    background: var(--bsw-surface-alt);
    color: var(--bsw-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 16px 20px;
}

.bsw-table thead th:first-child { padding-left: 28px; }
.bsw-table thead th:last-child { padding-right: 28px; }

.bsw-table tbody tr {
    transition: background-color .15s ease;
}

.bsw-table tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

.bsw-table td {
    padding: 18px 20px;
    vertical-align: middle;
    color: var(--bsw-text);
    /* Border lives on the cell, not the <tr> — border-collapse
       resolves per-row borders inconsistently across browsers once
       cells in the same row have different heights (the round rating
       chip is taller than a plain text cell), which is what produced
       the broken/partial line. Every cell carrying the same border
       always collapses into one clean full-width rule. */
    border-bottom: 1px solid var(--bsw-border);
}

.bsw-table tbody tr:last-child td {
    border-bottom: none;
}

.bsw-table td:first-child { padding-left: 28px; }
.bsw-table td:last-child { padding-right: 28px; }

/* Column widths AND alignment are defined together, once, and always
   apply identically to the header cell and every body cell in that
   column (.bsw-table th.bsw-col-x, .bsw-table td.bsw-col-x — same
   selector weight on both) — a header and its column's content can
   no longer land on different alignments, which is what caused the
   header labels to sit at the left edge while the centered content
   underneath (stars, buttons) drifted away from them. */
.bsw-table th.bsw-col-casino, .bsw-table td.bsw-col-casino { width: 34%;   text-align: left; }
.bsw-table th.bsw-col-rating, .bsw-table td.bsw-col-rating { width: 14%;   text-align: left; padding-left: 6px; }
.bsw-table th.bsw-col-bonus,  .bsw-table td.bsw-col-bonus  { width: 21%;   text-align: left; padding-left: 6px; }
.bsw-table th.bsw-col-review, .bsw-table td.bsw-col-review { width: 15.5%; text-align: center; }
.bsw-table th.bsw-col-play,   .bsw-table td.bsw-col-play   { width: 15.5%; text-align: center; }

/* Intentional exceptions to the header/body pairing above — deliberate,
   higher-specificity overrides for the header text position only, not
   the left/center mismatch bug the shared rule guards against:

   1. "CASINO" lines up with the start of the Logo+Name group — not
      the rank number, and not the name text specifically (a casino
      name's width varies row to row, so there's no single fixed point
      that would sit "centered over the name" consistently across
      every row; the logo's position is fixed, so that's the stable
      anchor to align to). The offset below is the rank's fixed width
      plus one flex gap (22px + 14px = 36px), on top of the column's
      normal 28px left padding. If the rank width or gap ever change,
      this number needs updating alongside them. */
.bsw-table thead th.bsw-col-casino {
    text-align: left;
    padding-left: 64px;
}

/* 2. Rating moved to the column's left edge (closer to Casino)
      instead of centered in the middle of its own column — freeing
      up the space that was sitting empty on the right of the small
      star widget, reassigned above to widen Bonus instead, which is
      the column most likely to wrap onto two lines. (Both header and
      content already share text-align: left via the shared rule
      above, so "RATING" and the stars stay aligned with each other.) */

.bsw-casino-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bsw-rank {
    color: var(--bsw-text-muted);
    font-weight: 700;
    font-size: 0.8rem;
    width: 1.4rem;
    flex-shrink: 0;
    text-align: center;
}

.bsw-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 5px;
    flex-shrink: 0;
}

.bsw-logo--lg { width: 76px; height: 76px; }
.bsw-logo--xl { width: 112px; height: 112px; }

.bsw-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bsw-text);
}

.bsw-col-bonus {
    color: var(--bsw-text-muted);
}

/* ---------------- Buttons ---------------- */

.bsw-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.bsw-btn--cta {
    background: var(--bsw-accent);
    color: #ffffff;
}

.bsw-btn--cta:hover { background: #0c8f69; color: #ffffff; }

.bsw-btn--ghost {
    background: transparent;
    color: var(--bsw-text);
    border: 1.5px solid var(--bsw-primary-light);
}

.bsw-btn--ghost:hover { background: var(--bsw-primary-light); color: #ffffff; }

.bsw-btn--lg { padding: 13px 26px; font-size: 1rem; }

/* ---------------- Card ---------------- */

.bsw-card {
    background: var(--bsw-surface);
    border-radius: 10px;
    padding: 20px;
    margin: 1.5em 0;
    color: var(--bsw-text);
}

.bsw-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.bsw-card__name {
    margin: 0 0 6px;
    color: var(--bsw-text);
}

.bsw-card__facts {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    color: var(--bsw-text);
}

.bsw-card__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------- Hero / single casino page ---------------- */

.bsw-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: var(--bsw-surface);
    border-radius: 10px;
    color: var(--bsw-text);
    margin-bottom: 20px;
}

.bsw-hero__name {
    font-size: 2rem;
    margin: 0 0 10px;
    color: var(--bsw-text);
}

.bsw-hero__actions { margin-top: 14px; }

.bsw-offer-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    background: var(--bsw-surface-alt);
    color: var(--bsw-text);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 28px;
}

.bsw-offer-strip span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bsw-accent);
    margin-bottom: 4px;
}

.bsw-offer-strip strong { color: var(--bsw-text); }

/* ---------------- Review article ---------------- */

.bsw-review {
    background: var(--bsw-surface);
    border-radius: 10px;
    padding: 24px;
    color: var(--bsw-text);
}

.bsw-review__header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.bsw-review__title {
    margin: 0 0 8px;
    color: var(--bsw-text);
}

.bsw-review__summary {
    font-size: 1.1rem;
    border-left: 3px solid var(--bsw-accent);
    padding-left: 14px;
    margin: 0 0 24px;
    color: var(--bsw-text);
}

.bsw-review__ratings-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.bsw-review__body { line-height: 1.7; margin-bottom: 24px; color: var(--bsw-text); }
.bsw-review__body a { color: var(--bsw-primary-light); }

.bsw-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.bsw-pros h4 { color: var(--bsw-accent); }
.bsw-cons h4 { color: var(--bsw-cons); }
.bsw-pros ul, .bsw-cons ul { margin: 0; padding-left: 1.2em; color: var(--bsw-text); }

.bsw-verdict {
    background: var(--bsw-surface-alt);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 28px;
    color: var(--bsw-text);
}

.bsw-verdict h3 { color: var(--bsw-text); margin-top: 0; }

.bsw-review__cta { text-align: center; margin: 32px 0; }

/* ---------------- FAQ ---------------- */

.bsw-faq__item {
    border-bottom: 1px solid var(--bsw-border);
    padding: 12px 0;
    color: var(--bsw-text);
}

.bsw-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--bsw-text);
}

.bsw-faq h3 { color: var(--bsw-text); }

/* ---------------- Details grid ---------------- */

.bsw-details {
    background: var(--bsw-surface);
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 20px;
    color: var(--bsw-text);
}

.bsw-details h3 { color: var(--bsw-text); margin-top: 0; }

.bsw-details__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 0;
}

.bsw-details__grid dt { font-weight: 600; color: var(--bsw-accent); }
.bsw-details__grid dd { margin: 0; color: var(--bsw-text); }

@media (max-width: 640px) {
    .bsw-pros-cons,
    .bsw-card__facts { grid-template-columns: 1fr; }
    .bsw-hero { flex-direction: column; text-align: center; }
}

/* ---------------- Table → stacked cards on small screens ----------------
   Below 700px a 5-column table forces horizontal scrolling, which reads
   as unfinished on mobile. Each row becomes its own card instead, with
   data-label (set in class-casino-render.php) supplying the row labels
   that the now-hidden <thead> would otherwise have provided. */

@media (max-width: 700px) {
    .bsw-table-wrap { overflow-x: visible; }

    .bsw-table { min-width: 0; }

    /* `display: none` on <thead>/<tr> is unreliable across browsers —
       <thead> carries a special internal "table-header-group" box
       type, and some engines (notably WebKit/Safari) leave a ghost
       box behind that still paints its background and interrupts
       whatever renders beneath it, instead of fully removing it from
       layout. Pulling it out of flow with clip+position sidesteps
       that table-specific quirk entirely rather than fighting it. */
    .bsw-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
    }

    .bsw-table, .bsw-table tbody, .bsw-table tr, .bsw-table td {
        display: block;
        width: 100%;
    }

    .bsw-table tbody tr {
        border-bottom: none;
        border-top: 1px solid var(--bsw-border);
        padding: 16px 0;
    }

    .bsw-table tbody tr:first-child { border-top: none; }

    .bsw-table td {
        /* Cancel the desktop per-cell border-collapse rule — in the
           stacked mobile layout each <td> is a normal block box, so
           that border would otherwise draw a line under every single
           field instead of once per card. */
        border-bottom: none;
        padding: 6px 20px;
        text-align: right;
    }

    .bsw-table td:first-child,
    .bsw-table td:last-child {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bsw-col-casino {
        text-align: left;
        padding-bottom: 10px !important;
        width: 100% !important;
    }

    .bsw-casino-cell {
        justify-content: flex-start;
    }

    .bsw-col-rating,
    .bsw-col-bonus,
    .bsw-col-review,
    .bsw-col-play {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
        /* The always-on desktop column rule (.bsw-table td.bsw-col-x)
           sets a percentage width and is more specific than the plain
           .bsw-table td selector above that resets cells to 100% for
           the stacked mobile layout — without !important here, that
           higher-specificity desktop rule would win even inside this
           mobile media query and leave columns squeezed to their
           desktop percentage instead of stacking full-width. */
        width: 100% !important;
    }

    .bsw-col-rating::before,
    .bsw-col-bonus::before,
    .bsw-col-review::before,
    .bsw-col-play::before {
        content: attr(data-label);
        color: var(--bsw-text-muted);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 600;
    }

    .bsw-col-review .bsw-btn,
    .bsw-col-play .bsw-btn {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}