/**
 * CTA Table Section
 *
 * Mobile-first stylesheet for the [cta_table] shortcode and
 * associated tab/variant components.
 *
 * ── Breakpoints ────────────────────────────────────────────
 *   --breakpoint-mobile : max-width: 991px   (Bootstrap < lg)
 *   --breakpoint-desktop: min-width: 992px   (Bootstrap lg+)
 * ───────────────────────────────────────────────────────────
 *
 * Structure
 *   1. Animations
 *   2. Section wrapper
 *   3. Table layout — rows & rank
 *   4. Logo column
 *   5. Info block (name, stars, bonus, checkmarks)
 *   6. Action button (Play Now)
 *   7. T&Cs
 *   8. Best-Overall badge
 *   9. Rating stars
 *  10. Tabs (casino / sport / poker)
 *  11. Bonus offer element (legacy)
 *  12. Desktop overrides  ≥ 992px
 *
 * @package gambleonline
 */


/* ============================================================================
   1. ANIMATIONS
   ============================================================================ */

@keyframes buttonShine {
    0%   { transform: translate(-140%, -60%) rotate(-45deg); opacity: 0; }
    13%  { opacity: 1; }
    25%  { transform: translate(30%, 30%) rotate(-45deg); }
    to   { transform: translate(30%, 30%) rotate(-45deg); opacity: 1; }
}

@keyframes bonus-animated {
    to { margin-top: -11em; top: 11em; }
}


/* ============================================================================
   2. SECTION WRAPPER
   ============================================================================ */

section.cta-table-section,
section.legacy-content-section {
    padding: 2rem 0 0;
}

#main section.cta-table-section > .main-wrapper {
    margin: 0;
    max-width: none;
    padding: 0.5rem 0 0;
}

section.cta-table-section[data-variants*="teamA"] .main-wrapper.tight,
section.cta-table-section[data-variants*="teamB"] .main-wrapper.tight {
    margin: 0 auto;
}

section.cta-table-section[data-variants*="dark"] .main-wrapper,
section.cta-table-section[data-variants*="darkGradient"] .main-wrapper,
section.cta-table-section[data-variants*="deepBlue"] .main-wrapper,
section.cta-table-section[data-variants*="headingBlue"] .main-wrapper,
section.cta-table-section[data-variants*="light"] .main-wrapper,
section.cta-table-section[data-variants*="lightBlue"] .main-wrapper,
section.cta-table-section[data-variants*="mediumDark"] .main-wrapper {
    margin: 0;
    max-width: none;
    padding: 2rem 0 0;
}

section.cta-table-section .section__title,
section.legacy-content-section .section__title {
    text-align: center;
}

section.cta-table-section .gamblingads-table-heading,
section.legacy-content-section .gamblingads-table-heading {
    font-weight: 400;
}

section.cta-table-section .cta-table-section__content,
section.legacy-content-section .cta-table-section__content {
    margin: 0 auto 2rem;
    padding: 0 1.25rem;
    text-align: center;
    max-width: 68rem;
}

section.cta-table-section .cta-table-section__content h1,
section.cta-table-section .cta-table-section__content h2,
section.cta-table-section .cta-table-section__content h3,
section.cta-table-section .cta-table-section__content h4,
section.cta-table-section .cta-table-section__content h5,
section.cta-table-section .cta-table-section__content h6,
section.legacy-content-section .cta-table-section__content h1,
section.legacy-content-section .cta-table-section__content h2,
section.legacy-content-section .cta-table-section__content h3,
section.legacy-content-section .cta-table-section__content h4,
section.legacy-content-section .cta-table-section__content h5,
section.legacy-content-section .cta-table-section__content h6 {
    font-weight: 400;
    padding: 1.25rem;
}

section.cta-table-section .cta-table-section__table,
section.legacy-content-section .cta-table-section__table {
    text-align: center;
}

section.cta-table-section .cta-table-section__table-wrapper,
section.legacy-content-section .cta-table-section__table-wrapper {
    padding: 0 1rem 2rem;
}

section.cta-table-section .cta-table-section__see-all-link,
section.legacy-content-section .cta-table-section__see-all-link {
    font-family: Barlow Semi Condensed, Trebuchet MS, sans-serif;
    font-size: 1.125rem;
    text-align: center;
    text-transform: uppercase;
}

section.cta-table-section .cta-table-section__see-all-link:hover,
section.legacy-content-section .cta-table-section__see-all-link:hover {
    color: #32b951;
}

section.cta-table-section .cta-table-see-more-casinos,
section.legacy-content-section .cta-table-see-more-casinos {
    margin-top: 2rem;
    position: relative;
}

section.cta-table-section .cta-table-see-more-casinos.hide,
section.legacy-content-section .cta-table-see-more-casinos.hide {
    display: none;
}

section.cta-table-section .cta-table__no-results-found,
section.legacy-content-section .cta-table__no-results-found {
    padding: 1rem 0 1.5rem;
    position: relative;
    z-index: 1;
}

section.cta-table-section.next-section-skewed,
section.legacy-content-section.next-section-skewed {
    padding-bottom: 5rem;
}

.cta-table-section__table {
    margin: auto;
    max-width: 56rem;
    width: 100%;
}

.single-blog section.cta-table-section .gator-tabs-header > li .tab__link {
    color: #001039;
}

.single-blog section.cta-table-section[data-variants*="dark"] div[class^="cta-table-section"] .gator-tabs-header > li .tab__link,
.single-blog section.cta-table-section[data-variants*="darkGradient"] div[class^="cta-table-section"] .gator-tabs-header > li .tab__link,
.single-blog section.cta-table-section[data-variants*="deepBlue"] div[class^="cta-table-section"] .gator-tabs-header > li .tab__link,
.single-blog section.cta-table-section[data-variants*="headingBlue"] div[class^="cta-table-section"] .gator-tabs-header > li .tab__link,
.single-blog section.cta-table-section[data-variants*="mediumDark"] div[class^="cta-table-section"] .gator-tabs-header > li .tab__link {
    color: #fff;
}

section.cta-table-section.button-shine-enabled .cta-table--top-rated a.play-now-button,
section.legacy-content-section.button-shine-enabled .cta-table--top-rated a.play-now-button {
    overflow: hidden;
    position: relative;
}

section.cta-table-section.button-shine-enabled .cta-table--top-rated a.play-now-button::after,
section.legacy-content-section.button-shine-enabled .cta-table--top-rated a.play-now-button::after {
    animation-delay: 4s;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;
    animation-name: buttonShine;
    animation-timing-function: ease;
    background: hsla(0, 0%, 100%, 0.13);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.13) 0, hsla(0, 0%, 100%, 0.13) 77%, hsla(0, 0%, 100%, 0.5) 92%, hsla(0, 0%, 100%, 0));
    content: "";
    height: 200%;
    opacity: 0;
    position: absolute;
    transform: rotate(-45deg);
    width: 100%;
}

section.cta-table-section[data-variants*="lightBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab .tab__link,
section.legacy-content-section[data-variants*="lightBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab .tab__link {
    color: #103167;
}


/* ============================================================================
   3. TABLE LAYOUT — ROWS & RANK
   ============================================================================ */

/* CSS variable for rating stars */
.main-table {
    --rating-stars-size: 55px;
}

/* Row base */
[class*="table-row"],
.cta-tabs [class*="tab-"] {
    font-family: Barlow Semi Condensed, Trebuchet MS, sans-serif;
    font-size: 1.25rem;
    border: 2px solid #E1E8F1;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.10);
    position: relative; /* Anchor for .cta-best-badge absolute on desktop */
    border-radius: 10px;
}

.table-row-1 {
    border: 2px solid #00C94E;
}

.table-title {
    background: var(--cta-casino-color);
    color: var(--main-light-color);
    position: relative;
    text-transform: uppercase;
    border-radius: 8px 8px 0 0;
}

/* Bootstrap spacing overrides */
.main-table .my-3 {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   MOBILE CARD — CSS Grid layout  (< 992px)
   Grid areas:
     badge   badge
     rank    logo
     info    info
     actions actions
   ============================================================ */

.cta-rank-mobile {
    display: none; /* hidden by default; shown via grid on mobile (--breakpoint-mobile) */
    background: #072458;
    color: #fff;
    font-size: 1.5rem;
    font-family: Barlow Semi Condensed, Trebuchet MS, sans-serif;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    border-radius: 8px 0 0 0;
}

.table-row-1 .cta-rank-mobile {
    background: #00C94E;
    border-radius: 0;
}

/* ── CSS Grid on the Bootstrap .row ── */
.main-table [class*="table-row"] {
    display: grid !important;
    grid-template-columns: 2.5rem 1fr;
    grid-template-areas:
        "rank    logo"
        "rank    info"
        "actions actions";
    padding: 0 !important;
    /* Defeat Bootstrap flex/row gutters */
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* Badge stays position:absolute; rank-1 row gets padding-top to clear it */
.main-table .table-row-1 {
    padding-top: 24px !important;
}

/* Desktop rank column — off on mobile */
.main-table .cta-rank-col {
    display: none !important;
}

/* Mobile rank strip */
.main-table .cta-rank-mobile {
    grid-area: rank;
    display: flex !important;
}

/* Logo */
.main-table .rating-logo {
    grid-area: logo;
    text-align: center;
    align-self: center;
    margin: 0;
    padding: 1rem 0.75rem;
}

.main-table .table-row-1 .rating-logo {
    padding-top: 32px;
}

/* Info block */
.main-table .info-block {
    grid-area: info;
    padding: 0.75rem 1rem;
    margin: 0 !important;
    text-align: center;
    color: #072458;
    border-top: 1px solid #E1E8F1 !important;
    border-left: none !important;
    border-right: none !important;
}

.main-table .info-block .d-none.d-lg-block { display: block !important; }
.main-table .info-block .rating            { justify-content: center; }

/* Operator name */
.main-table .cta-operator-name {
    max-width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: 0;
    text-align: center;
}

/* Bonus amount */
.main-table .payout.fw-bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 19px;
    letter-spacing: 0;
    text-align: center;
}

/* Bonus subtitle */
.main-table .cta-bonus-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
}

/* Actions */
.main-table .actions {
    grid-area: actions;
    text-align: center;
    padding: 18px 1rem !important;
    margin: 0 !important;
    border-top: 1px solid #E1E8F1;
}

.rank {
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #0071e7, #001039);
    font-size: 1.5rem;
    border-radius: 0;
}

/* Row #1 rank — green */
.table-row-1 .rank {
    position: relative;
    clip-path: none;
    width: 100%;
    height: 100%;
    left: auto;
    background: #00C94E;
    background-image: none;
    border-radius: 0;
    z-index: 0;
}

[class*="table-row"] .go-custom-list li {
    font-size: 1rem;
}

.columns-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5px;
    padding: 0;
    list-style-type: none;
}

.show-more {
    text-decoration: underline;
}

.show-more:hover {
    color: #006ce0;
    cursor: pointer;
}

.hidden {
    display: none;
}

.main-table .review-link {
    color: var(--text-dark-color) !important;
    text-decoration: underline;
}

.company-150-70 {
    background: #000000;
    padding: 10px;
    border-radius: 5px;
}


/* ============================================================================
   4. LOGO COLUMN
   ============================================================================ */

/* Mobile: center logo */
.main-table .rating-logo {
    text-align: center;
}


/* ============================================================================
   5. INFO BLOCK — name, stars, bonus, checkmarks
   ============================================================================ */

/* Force name + stars block visible on mobile */
.main-table .info-block .d-none.d-lg-block {
    display: block !important;
}

.main-table .info-block .rating {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.cta-operator-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.1875rem;
    color: #0D334D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Bonus amount */
.payout {
    font-size: 2rem;
}

[class*="tab-"] .payout {
    font-size: 1.5rem;
}

.up-to {
    font-size: 1rem;
    text-transform: uppercase;
}

.main-table .payout.fw-bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

/* Bonus subtitle */
.cta-bonus-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: #43566B;
    margin-top: 2px;
    text-align: center;
}

/* Checkmark features */
.cta-features {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
}

.cta-feature-item {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: #43566B;
}

.cta-feature-item::before {
    content: "\2713";
    color: #43566B;
    font-weight: 700;
    margin-right: 5px;
}

.rating {
    width: fit-content;
}


/* ============================================================================
   6. ACTION BUTTON — Play Now
   ============================================================================ */

/* Mobile: full-width button with top separator */
.main-table .actions {
    text-align: center;
    padding: 18px 1rem;
    border-top: 1px solid #E1E8F1;
}

.visit-button {
    width: auto;
    border: none;
    text-decoration: none !important;
    font-size: 1.5rem;
    padding: 12px 30px;
}


.visit-button:hover {
    background: linear-gradient(180deg, #28b2f0 0, #0071e7);
}

.visit-button.blue {
    background-color: #006ce0;
}

.visit-button.green {
    background: #00C94E;
}

.visit-button.green:hover {
    background: linear-gradient(180deg, #28b2f0 0, #0071e7);
}

[class*="tab-"] .actions {
    width: 80%;
    border-bottom: 1px solid #dce0ed;
}

[class*="tab-"] .visit-button {
    border-radius: 32px;
    font-size: 24px;
    transition: ease-in-out 0.25s;
}

[class*="tab-"] .visit-button:hover {
    transform: scale(1.05);
    transition: ease-in-out 0.25s;
}

.tab-casino .visit-button { background-color: var(--cta-casino-color); }
.tab-sport  .visit-button { background-color: var(--cta-sport-color); }
.tab-poker  .visit-button { background-color: var(--cta-poker-color); }

.tab-sport .visit-button:hover {
    background: linear-gradient(180deg, #f7cd23 0, #f78d23);
}

.tab-poker .visit-button:hover {
    background: linear-gradient(180deg, #26d18a 0, #21bc8b);
}


/* ============================================================================
   7. T&CS
   ============================================================================ */

.cta-tcapply {
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: #43566B;
    margin-top: 0.625rem;
}


/* ============================================================================
   8. BEST OVERALL BADGE
   ============================================================================ */

/* Mobile: full-width top bar */
.cta-best-badge {
    display: flex !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background: #008234;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
    padding: 5px 14px;
    border-radius: 10px 10px 0 0;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


/* ============================================================================
   9. RATING STARS
   ============================================================================ */

.rating-stars {
    width: var(--rating-stars-size);
    height: calc(var(--rating-stars-size) / var(--rating-stars-num));
}

.rating-stars::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: calc(var(--rating-stars-size) / var(--rating-stars-num));
    width: var(--rating-stars-size);
    background-image: var(--rating-star);
    background-repeat: repeat-x;
    background-size: calc(var(--rating-stars-size) / var(--rating-stars-num));
    filter: invert(91%) sepia(1%) saturate(0%) hue-rotate(102deg) brightness(92%) contrast(87%) opacity(0.7);
    -webkit-filter: invert(91%) sepia(1%) saturate(0%) hue-rotate(102deg) brightness(92%) contrast(87%) opacity(0.7);
}

.rating-stars span {
    display: block;
    width: 0;
    background-size: calc(var(--rating-stars-size) / var(--rating-stars-num));
    position: absolute;
    transition: var(--transition);
}

.rating-stars span::before {
    content: "";
    background-image: var(--rating-star);
    background-repeat: repeat-x;
    background-size: calc(var(--rating-stars-size) / var(--rating-stars-num));
    height: calc(var(--rating-stars-size) / var(--rating-stars-num));
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: invert(89%) sepia(6%) saturate(2568%) hue-rotate(345deg) brightness(94%) contrast(94%);
}

/* Star rating widget (legacy) */
.cta-table-section__table .star-rating {
    height: 16px;
    position: relative;
    width: 85px;
}

.cta-table-section__table .star-rating__overlay,
.cta-table-section__table .star-rating__underlay {
    background-image: url(/wp-content/themes/gambleonline-standard-theme/img/star-little-full.svg);
    background-size: 17px;
    height: 100%;
}

.cta-table-section__table .star-rating__overlay {
    position: absolute;
    z-index: 1;
}

.cta-table-section__table .star-rating__underlay {
    filter: grayscale(1);
    width: 100%;
    z-index: 0;
}

.cta-table-section__table .star-rating--medium {
    height: 23px;
    position: relative;
    width: 120px;
}

.cta-table-section__table .star-rating--medium .star-rating__overlay,
.cta-table-section__table .star-rating--medium .star-rating__underlay {
    background-size: 24px;
}

.cta-table-section__table .star-rating--big {
    height: 34px;
    position: relative;
    width: 180px;
}

.cta-table-section__table .star-rating--big .star-rating__overlay,
.cta-table-section__table .star-rating--big .star-rating__underlay {
    background-size: 36px;
}

.cta-table-section__table .star-rating__wrapper > * {
    display: inline-block;
    vertical-align: middle;
}

.cta-table-section__table .star-rating__label {
    font-family: Barlow Semi Condensed, Trebuchet MS, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-left: 0.2rem;
    min-width: 45px;
    text-align: right;
}


/* ============================================================================
   10. TABS
   ============================================================================ */

.cta-tabs [class*="tab-"] {
    border: 3px solid;
}

.cta-tabs .tab-casino { border-color: var(--cta-casino-color); }
.cta-tabs .tab-sport  { border-color: var(--cta-sport-color); }
.cta-tabs .tab-poker  { border-color: var(--cta-poker-color); }

[class*="tab-"] .heading {
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 22px;
}

[class*="tab-"] .heading::after {
    content: "";
    background: url(https://www.gambleonline.co/wp-content/themes/gambleonline-standard-theme/img/icon-star-trophy.svg) no-repeat;
    height: 56px;
    width: 56px;
    position: absolute;
    top: 0.5rem;
}

.tab-casino .heading { background-color: var(--cta-casino-color); }
.tab-sport  .heading { background-color: var(--cta-sport-color); }
.tab-poker  .heading { background-color: var(--cta-poker-color); }

[class*="tab-"] .bonus-label {
    font-size: 1.5rem;
    color: #28b2f0;
    text-transform: uppercase;
}

.gator-tabs-container {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.gator-tabs-container ul.gator-tabs-header {
    border-bottom: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0.625rem;
    padding-left: 0;
}

.gator-tabs-container .gator-tabs-header > li {
    align-items: center;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 1;
    font-family: Barlow Semi Condensed, Trebuchet MS, sans-serif;
    font-size: 1.125rem;
    justify-content: center;
    margin: 0 0.1rem;
    padding: 0.375rem;
}

.gator-tabs-container .gator-tabs-header > li.tab--active .tab__link {
    border-bottom: 5px solid #2dd782;
    font-weight: 700;
}

.gator-tabs-container .gator-tabs-header > li .tab__link {
    border-bottom: 5px solid transparent;
    color: #fff;
    font-size: 1rem;
    padding-bottom: 0.375rem;
}

.gator-tabs-container .gator-tabs-header > li:first-of-type { margin-left: 0; }
.gator-tabs-container .gator-tabs-header > li:last-of-type  { margin-right: 0; }

.gator-tabs-container .gator-tabs {
    display: flex;
    height: 100%;
    list-style: none;
}

.gator-tabs-container .gator-tab {
    color: #fff;
    display: none;
    width: 100%;
}

.gator-tabs-container .gator-tab:first-child {
    display: block;
}


/* ============================================================================
   11. BONUS OFFER ELEMENT (legacy)
   ============================================================================ */

.brand-info {
    font-size: 1.5rem;
}

.main-table .brand-info {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
}

.specific-offer-card-element .accent {
    color: #28b2f0;
    text-transform: uppercase;
}

section.cta-table-section .bonus-text-animated,
section.legacy-content-section .bonus-text-animated {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

section.cta-table-section .bonus-animation-container,
section.legacy-content-section .bonus-animation-container {
    display: flex;
    align-items: flex-end;
    font-weight: 700;
    height: 1em;
    overflow: hidden;
    padding-right: 0.25rem;
}

section.cta-table-section .bonus-digits,
section.legacy-content-section .bonus-digits {
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    float: left;
    font-size: 1em;
    line-height: 1em;
    list-style-type: none;
    margin-top: 0;
    top: 0;
    position: relative;
}

section.cta-table-section .bonus-animation:nth-child(odd),
section.legacy-content-section .bonus-animation:nth-child(odd) {
    animation-duration: 2s;
}

section.cta-table-section .bonus-animation:nth-child(2n),
section.legacy-content-section .bonus-animation:nth-child(2n) {
    animation-duration: 2.5s;
}

section.cta-table-section .bonus-animated,
section.legacy-content-section .bonus-animated {
    animation-name: bonus-animated;
}


/* ============================================================================
   12. DESKTOP OVERRIDES  ≥ 992px
   ============================================================================ */

@media (min-width: 992px) {

    /* Section */
    section.cta-table-section,
    section.legacy-content-section {
        padding: 2.25rem 0 0;
    }

    section.cta-table-section.next-section-skewed,
    section.legacy-content-section.next-section-skewed {
        padding-bottom: 12rem;
    }

    .cta-table-section__table {
        max-width: 65rem;
    }

    section.cta-table-section .cta-table-section__table-wrapper,
    section.legacy-content-section .cta-table-section__table-wrapper {
        padding: 0 1.25rem 2rem;
    }

    /* Rank strip — desktop only */
    .rank {
        border-radius: 14px 0 0 14px;
    }

    /* Row #1 rank — desktop badge style */
    .table-row-1 .rank {
        border-radius: 10px 0 0 10px;
        width: 54.3px;
        position: absolute;
        z-index: 1;
        background: #00C94E;
        left: -1px;
    }

    /* Table row — reset CSS Grid back to Bootstrap flex on desktop */
    .main-table [class*="table-row"] {
        display: flex !important;
        grid-template-columns: unset;
        grid-template-areas: unset;
        padding-left: 0;
        padding-top: 0 !important;
    }

    /* Hide mobile rank strip on desktop */
    .main-table .cta-rank-mobile {
        display: none !important;
    }

    /* Show desktop rank column */
    .main-table .cta-rank-col {
        display: block !important;
    }

    /* Reset grid-area assignments on desktop */
    .main-table .rating-logo,
    .main-table .info-block,
    .main-table .actions {
        grid-area: unset;
        margin: unset;
    }

    /* Logo — vertical padding on desktop (my-3 removed from PHP) */
    .main-table .rating-logo {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Actions — vertical padding on desktop */
    .main-table .actions {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Badge — corner style on desktop */
    .cta-best-badge {
        width: 25%;
        border-radius: 12px 0 10px 0;
    }

    /* Info block — left-aligned with side borders on desktop */
    .main-table .info-block {
        padding-left: 2.5rem;
        padding-right: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        text-align: left !important;
        border-top: none !important;
        border-left: 1px solid #E1E8F1 !important;
        border-right: 1px solid #E1E8F1 !important;
    }

    .main-table .info-block .d-none.d-lg-block {
        display: block !important;
    }

    .main-table .info-block .rating {
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
    }

    /* Bonus amount — desktop: 20px (mobile base: 18px) */
    .main-table .payout.fw-bold {
        font-size: 20px;
        text-align: left !important;
    }

    .main-table .cta-operator-name {
        text-align: left !important;
        font-size: 0.9375rem;
    }

    /* Bonus subtitle — desktop: line-height 100% (mobile base: 24px) */
    .main-table .cta-bonus-subtitle {
        line-height: 100%;
        text-align: left !important;
    }

    .main-table .cta-features,
    .main-table .cta-feature-item {
        text-align: left !important;
    }

    /* Button — desktop sizing */
    .main-table .actions {
        padding: 1rem;
        border-top: none;
    }

    .main-table .visit-button {
        width: 90%;
        font-size: 1.5rem;
        padding: 12px 30px;
    }

    /* Star rating label */
    .cta-table-section__table .star-rating__label {
        margin-left: 0.8rem;
    }

    /* Tabs */
    .gator-tabs-container ul.gator-tabs-header {
        border-bottom: 16px solid #0071e7;
        border-radius: 0 0 10px 10px;
    }

    .gator-tabs-container .gator-tabs-header > li {
        border-radius: 10px 10px 0 0;
        font-weight: 700;
        padding: 0.875rem;
    }

    .gator-tabs-container .gator-tabs-header > li.tab--active {
        background: #0071e7;
        border-bottom: 0;
    }

    .gator-tabs-container .gator-tabs-header > li.tab--active .tab__link {
        border-bottom: 0;
    }

    .gator-tabs-container .gator-tabs-header > li .tab__link {
        border-bottom: 0;
        font-size: 1.25rem;
        padding-bottom: 0;
    }

    .gator-tabs-container .gator-tabs-header > li:not(.tab--active) {
        background: #dce0ed;
    }

    .gator-tabs-container .gator-tabs-header > li:not(.tab--active):hover {
        background: #b5bdd5;
    }

    .gator-tabs-container .gator-tabs-header > li:not(.tab--active) .tab__link {
        color: #103167;
    }

    /* Variants */
    section.cta-table-section[data-variants*="lightBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active .tab__link,
    section.legacy-content-section[data-variants*="lightBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active .tab__link {
        color: #fff;
    }

    section.cta-table-section[data-variants*="deepBlue"] .gator-tabs-container .gator-tabs-header,
    section.cta-table-section[data-variants*="headingBlue"] .gator-tabs-container .gator-tabs-header,
    section.legacy-content-section[data-variants*="deepBlue"] .gator-tabs-container .gator-tabs-header,
    section.legacy-content-section[data-variants*="headingBlue"] .gator-tabs-container .gator-tabs-header {
        border-bottom: 16px solid #103167;
    }

    section.cta-table-section[data-variants*="deepBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active,
    section.cta-table-section[data-variants*="headingBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active,
    section.legacy-content-section[data-variants*="deepBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active,
    section.legacy-content-section[data-variants*="headingBlue"] .gator-tabs-container .gator-tabs-header > .gator-tabs__tab.tab--active {
        background: #103167;
    }
}

@media (min-width: 1024px) {
    .cta-table-section__table {
        max-width: 74rem;
    }
}