/* ============================================================
   style-stream1.css — dedicated design for the stream1betting
   stream. Loaded ONLY for that stream, after the base stream CSS
   (and also when "Do not load the default CSS" is on), so it can
   fully restyle the showcase, trust header, banners and popup.

   Sections are filled in as each feature is built:
     1. Trust header (year + Licensed + geo flag)
     2. Showcase cards (reviews_count, terms, top-1/2/3 labels)
     3. Banner after top-3
     4. 7-second popup banner
     5. Predictions
   ============================================================ */

/* ============================================================
   0. Theme injection wrapper — neutralize
   The theme wraps our shortcodes in .dynamic-injection-container and its
   styles override our layout. JS strips the class; this is a CSS fallback
   that resets the wrapper's own box before/if JS hasn't run.
   ============================================================ */
.dynamic-injection-container {
    all: unset !important;
    display: block !important;
    width: 100% !important;
}

/* ============================================================
   1. Trust header (stream1: Updated Month Year + Licensed + geo)
   ============================================================ */
/* Modern unified "trust strip": one rounded card, items split by thin
   dividers, icons tinted with the palette accent. Compact + adaptive. */
.tc-trust-header--s1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    /* width: fit-content; */
    max-width: 100%;
    margin: 6px auto 18px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--tc-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

/* Every item shares one clean look (overrides the older per-badge colours). */
.tc-trust-header--s1 .tc-trust-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 16px;
    background: transparent !important;
    border-radius: 0 !important;
    color: #1f2937 !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Thin divider between items (not after the last one). */
.tc-trust-header--s1 .tc-trust-badge:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--tc-border-color, rgba(0, 0, 0, 0.12));
}

/* Icons follow the palette accent; 18+ keeps its own red mark. */
.tc-trust-header--s1 .tc-trust-badge-icon {
    display: inline-flex;
    color: var(--s1-accent, #1f7a44) !important;
}

.tc-trust-header--s1 .tc-trust-badge-icon path,
.tc-trust-header--s1 .tc-trust-badge-icon circle,
.tc-trust-header--s1 .tc-trust-badge-icon polyline {
    color: var(--s1-accent, #1f7a44) !important;
}

.tc-trust-header--s1 .tc-trust-badge-icon svg {
    width: 18px;
    height: 18px;
}

.tc-trust-header--s1 .tc-trust-badge--age {
    color: #b91c1c !important;
}

.tc-trust-flag {
    display: block;
    width: 20px;
    height: 14px !important;
    border-radius: 3px;
    object-fit: cover;
    margin: auto !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tc-trust-geo-text {
    white-space: nowrap;
    color: inherit;
}

/* Compact + adaptive on mobile: smaller, wraps neatly, drop dividers on wrap */
@media (max-width: 640px) {
    .tc-trust-header--s1 {
        width: 100%;
        gap: 2px;
        padding: 4px;
        border-radius: 12px;
        margin-bottom: 12px;
        flex-direction: row;
    }

    .tc-trust-badge--license,
    .tc-trust-badge--geo,
    .tc-trust-badge--payouts,
    .tc-trust-badge--age {
        font-size: 0 !important;
    }

    .tc-trust-header--s1 .tc-trust-badge {
        font-size: 11px;
        padding: 5px 8px;
        /* gap: 5px; */
        gap: 0;
    }

    .tc-trust-header--s1 .tc-trust-badge:first-child {
        gap: 5px;
    }

    .tc-trust-header--s1 .tc-trust-badge-icon svg {
        width: 15px;
        height: 15px;
    }

    .tc-trust-header--s1 .tc-trust-badge:not(:last-child)::after {
        height: 13px;
    }

    .tc-trust-flag {
        width: 17px;
        height: 12px !important;
    }
}

@media (max-width: 380px) {

    /* very narrow: hide dividers so wrapped rows stay clean */
    .tc-trust-header--s1 .tc-trust-badge::after {
        display: none;
    }

    .tc-trust-header--s1 .tc-trust-badge {
        padding: 4px 8px;
    }
}

/* ============================================================
   2. Showcase card — stream1 (horizontal mockup layout)
   ============================================================ */
.matches.matches--cards {
    margin-bottom: 1.5rem;
}

.tc-s1-card {
    position: relative;
    background: #fff !important;
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--tc-shadow, rgba(0, 0, 0, 0.08));
    overflow: hidden;
    margin-bottom: 14px;
}

.tc-s1-card--gold {
    border: 2px solid rgba(245, 158, 11, 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.tc-s1-rank {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--s1-accent, #1f7a44);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 0px 6px 6px 6px;
}

.tc-s1-tags {
    position: absolute;
    top: 0;
    /* left: 48px; */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
    display: flex;
    align-items: stretch;
}

.tc-s1-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    white-space: nowrap;
    border-radius: 0px 0px 6px 6px;
}

.tc-s1-tag--1 {
    background: linear-gradient(135deg, #b8860b, #ffcf5c);
    color: #3a2c00;
}

.tc-s1-tag--2 {
    background: #2f6fed;
}

.tc-s1-tag--3 {
    background: var(--s1-accent-strong, #16a34a);
}

.tc-s1-card-main {
    display: flex;
    align-items: center;
    min-height: 130px;
    padding: 32px 24px 12px;
    gap: 8px;
}

.tc-s1-cols {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.tc-s1-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tc-s1-col-logo {
    position: relative;
    flex: 0 1 24%;
    align-self: stretch;
    min-height: 90px;
    padding: 12px;
    border-radius: 10px;
}

.tc-s1-col-logo img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    margin: auto !important;
}

.tc-s1-col-offer {
    flex: 0 0 24%;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #5c3a00 !important;
    line-height: 1.1;
    word-break: break-word;
}

.tc-s1-col-reviews {
    flex: 0 0 20%;
}

.tc-s1-rate {
    font-size: 12px;
    color: #333 !important;
    margin-bottom: 2px;
}

.tc-s1-stars {
    color: #facc15 !important;
    font-size: 19px;
    letter-spacing: 1px;
}

.tc-s1-col-score {
    flex: 0 0 12%;
    color: var(--s1-accent, #1f7a44) !important;
    line-height: 1;
}

.tc-s1-score-num {
    font-size: 48px;
    font-weight: 800;
    color: inherit;
}

.tc-s1-score-label {
    display: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--tc-text-secondary, #888) !important;
    margin-top: 2px;
}

.tc-s1-col-action {
    flex: 1 0 16%;
    gap: 4px;
}

.tc-s1-getbonus {
    width: 100%;
    max-width: 150px;
    border: 0;
    cursor: pointer;
    background: var(--s1-accent, #1f7a44) !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    padding: 11px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.tc-s1-getbonus:hover {
    background: var(--s1-accent-hover, #196235) !important;
}

.tc-s1-visit {
    font-size: 12px;
    color: #6b7280 !important;
    text-decoration: underline;
}

.tc-s1-card-main {
    cursor: pointer;
}

.tc-s1-card-terms {
    position: relative;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    font-size: 9px;
    line-height: 1.4;
    padding: 8px 34px 8px 24px;
    text-align: center;
}

.tc-s1-terms-text {
    color: #6b7280 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tc-s1-card-terms.is-open .tc-s1-terms-text {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.tc-s1-terms-toggle {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #6b7280 !important;
    line-height: 1;
}

.tc-s1-terms-toggle::before {
    content: '▾';
    font-size: 12px;
    display: inline-block;
    transition: transform 0.15s ease;
}

.tc-s1-card-terms.is-open .tc-s1-terms-toggle::before {
    transform: rotate(180deg);
}

/* Mobile: 2-column card grid (left = logo + reviews|score, right = offer + CTA) */
@media (max-width: 767px) {
    .tc-s1-card-main {
        padding: 26px 0 0;
    }

    .tc-s1-cols {
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-areas:
            "logo    logo    offer"
            "reviews score   offer"
            "reviews score   action";
        gap: 0;
        align-items: stretch;
    }

    .tc-s1-col {
        padding: 8px;
    }

    .tc-s1-col-logo {
        grid-area: logo;
        align-self: stretch;
        min-height: auto;
        padding: 12px 8px;
        margin: 8px;
    }

    .tc-s1-col-logo img {
        max-height: 60px;
        margin: auto !important;
    }

    .tc-s1-col-offer {
        grid-area: offer;
        font-size: 18px;
        justify-content: center;
    }

    .tc-s1-col-reviews {
        grid-area: reviews;
    }

    .tc-s1-col-score {
        grid-area: score;
    }

    .tc-s1-score-num {
        font-size: 30px;
    }

    .tc-s1-score-label {
        display: block;
    }

    .tc-s1-col-action {
        grid-area: action;
    }

    .tc-s1-getbonus {
        max-width: none;
        font-size: 12px;
        padding: 10px;
    }

    .tc-s1-visit {
        font-size: 11px;
    }

    /* smaller ribbon labels on mobile */
    .tc-s1-rank {
        font-size: 10px;
        padding: 2px 8px;
    }

    /* .tc-s1-tags { left: 34px; } */
    .tc-s1-tag {
        font-size: 10px;
        padding: 2px 8px;
    }
}

/* ============================================================
   3. Promo banner after top-3 (stream1) — composed, top-1 brand
   ============================================================ */
.tc-s1-banner {
    display: block;
    width: 100%;
    margin: 14px 0;
    text-decoration: none !important;
    color: #fff !important;
}

/* Footer banner: full-width strip before the theme footer, centered content. */
.tc-s1-footer-banner-wrap {
    max-width: 900px;
    width: 100%;
    margin: 24px auto;
    padding: 0 16px;
}

.tc-s1-end-banner {
    margin: 0;
}

/* Show the right version by breakpoint (only one at a time) */
.tc-s1-bn--mob {
    display: none !important;
}

.tc-s1-bn--hor {
    display: flex !important;
}

@media (max-width: 767px) {
    .tc-s1-bn--mob {
        display: block !important;
    }

    .tc-s1-bn--hor {
        display: none !important;
    }
}

.tc-s1-bn {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
}

.tc-s1-bn-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.tc-s1-bn-offer {
    font-weight: 800;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.tc-s1-bn-cta {
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg, #fde047, #eab308);
    color: #000;
    font-weight: 800;
    border-radius: 6px;
    padding: 10px 28px;
    white-space: nowrap;
}

.tc-s1-bn-cta:hover {
    background: linear-gradient(180deg, #fef08a, #facc15);
}

.tc-s1-bn-terms {
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    color: #fff !important;
}

/* --- mobile (vertical) --- */
.tc-s1-bn--mob {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(250, 204, 21, 0.85);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.tc-s1-bn--mob::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.6) 45%, rgba(0, 0, 0, 0.85));
}

.tc-s1-bn--mob>* {
    position: relative;
    z-index: 1;
}

.tc-s1-bn-label {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(250, 204, 21, 0.7);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-s1-bn--mob .tc-s1-bn-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.tc-s1-bn--mob .tc-s1-bn-offer {
    font-size: 17px;
}

.tc-s1-bn--mob .tc-s1-bn-terms {
    background: rgba(0, 0, 0, 0.72);
    border-top: 1px solid rgba(250, 204, 21, 0.55);
    padding: 10px 12px;
}

/* --- desktop (horizontal) --- */
.tc-s1-bn--hor {
    /* height: 225px; */
    height: auto;
    display: flex;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.tc-s1-bn--hor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.35);
}

.tc-s1-bn--hor>* {
    position: relative;
    z-index: 1;
}

.tc-s1-bn-side {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #183596, #4488f7);
    border-radius: 0 8px 8px 0;
    border: 1.5px dashed;
    border-radius: 14px 0px 0px 14px;
}

.tc-s1-bn-side span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tc-s1-bn--hor .tc-s1-bn-main {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 42px;
}

.tc-s1-bn--hor .tc-s1-bn-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin: 4px;
}

.tc-s1-bn--hor .tc-s1-bn-offer {
    font-size: 24px;
}

.tc-s1-bn--hor .tc-s1-bn-terms {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.92);
    border-top: 1px solid rgba(250, 204, 21, 0.6);
    padding: 8px 12px;
}

/* ============================================================
   4. "Editor's Pick" popup (stream1, once per session, 7s)
   ============================================================ */
.tc-s1-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 20, 14, 0.6);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.tc-s1-pop-overlay.tc-s1-pop-show {
    opacity: 1;
}

.tc-s1-pop {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-radius: 20px;
    background: #fff !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tc-s1-pop-show .tc-s1-pop {
    transform: translateY(0) scale(1);
}

.tc-s1-pop-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: #fff !important;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.tc-s1-pop-head {
    padding: 20px 22px 26px;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle at 50% 0%, var(--s1-accent, #1f7a44) 0%, #0f5130 70%, #0b3f26 100%);
}

.tc-s1-pop-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tc-s1-pop-rank {
    background: var(--s1-accent-strong, #16a34a);
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 8px;
}

.tc-s1-pop-editor {
    background: #f59e0b !important;
    color: #1a1e2e !important;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 8px;
}

.tc-s1-pop-sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.tc-s1-pop-title {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 16px;
}

.tc-s1-pop-logo {
    width: 100%;
    max-width: 200px;
    margin: auto;
    height: 80px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.tc-s1-pop-logo img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.tc-s1-pop-body {
    padding: 20px 22px 22px;
    text-align: center;
}

.tc-s1-pop-rating {
    font-size: 20px;
    font-weight: 800;
    color: var(--s1-accent, #1f7a44) !important;
    margin-bottom: 16px;
}

.tc-s1-pop-rating span {
    font-size: 14px;
    font-weight: 600;
    color: var(--tc-text-secondary, #888) !important;
}

.tc-s1-pop-offer {
    background: #f5f6f8 !important;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.tc-s1-pop-offer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tc-text-secondary, #888);
    margin-bottom: 4px;
}

.tc-s1-pop-offer-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--tc-text-dark, #111) !important;
}

.tc-s1-pop-cta {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: var(--s1-accent-strong, #16a34a) !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 16px;
    border-radius: 14px;
    transition: background 0.15s ease;
}

.tc-s1-pop-cta:hover {
    background: var(--s1-accent-hover, #13853d);
}

.tc-s1-pop-visit {
    display: inline-block;
    margin: 14px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--s1-accent, #1f7a44);
    text-decoration: underline;
}

.tc-s1-pop-terms {
    font-size: 9px;
    line-height: 1.5;
    color: var(--tc-text-secondary, #888) !important;
}

.tc-s1-pop-disclaimer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tc-border-color, rgba(0, 0, 0, 0.08));
    font-size: 11px;
    font-weight: 600;
    color: var(--tc-text-secondary, #888) !important;
}

@media (max-width: 480px) {
    .tc-s1-pop-title {
        font-size: 19px;
    }

    .tc-s1-pop-offer-val {
        font-size: 22px;
    }

    .tc-s1-pop-logo {
        height: 120px;
    }
}

/* ============================================================
   5. Predictions — running "Live Fixtures" ticker (stream1)
   ============================================================ */
.tc-ticker {
    display: flex;
    align-items: stretch;
    background: #fff !important;
    border: 1px solid var(--tc-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    overflow: hidden;
}

.tc-ticker-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--s1-accent, #1f7a44) !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 14px;
    white-space: nowrap;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
}

.tc-ticker-viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

.tc-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: tc-ticker-scroll 40s linear infinite;
}

.tc-ticker-viewport:hover .tc-ticker-track {
    animation-play-state: paused;
}

.tc-ticker-item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 28px;
    border-left: 1px solid var(--tc-border-color, rgba(0, 0, 0, 0.08));
    line-height: 1.3;
}

.tc-ticker-teams {
    font-weight: 700;
    font-size: 14px;
    color: var(--tc-text-dark, #111);
    white-space: nowrap;
}

.tc-ticker-teams em {
    font-style: normal;
    font-weight: 500;
    color: var(--tc-text-secondary, #888) !important;
    margin: 0 4px;
}

.tc-ticker-meta {
    font-size: 12px;
    color: var(--tc-text-secondary, #888) !important;
    white-space: nowrap;
}

@keyframes tc-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-ticker-track {
        animation: none;
    }
}

/* ============================================================
   6. Loading skeleton (stream1) — placeholder cards with shimmer
   ============================================================ */
.tc-s1-skel {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 90px;
    padding: 20px 24px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--tc-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
}

.tc-s1-skel-box,
.tc-s1-skel-line {
    background: linear-gradient(90deg, #eef0f3 25%, #e2e5ea 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: tc-s1-shimmer 1.4s ease infinite;
    border-radius: 8px;
}

.tc-s1-skel-logo {
    flex: 0 0 auto;
    width: 22%;
    height: 60px;
}

.tc-s1-skel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tc-s1-skel-line {
    height: 14px;
}

.tc-s1-skel-score {
    flex: 0 0 auto;
    width: 56px;
    height: 40px;
}

.tc-s1-skel-btn {
    flex: 0 0 auto;
    width: 120px;
    height: 40px;
}

@keyframes tc-s1-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@media (max-width: 767px) {
    .tc-s1-skel {
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    .tc-s1-skel-logo {
        width: 100%;
        height: 46px;
    }

    .tc-s1-skel-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tc-s1-skel-box,
    .tc-s1-skel-line {
        animation: none;
    }
}

/* ============================================================
   7. Floating gift (stream1) — stack + palette-tinted popup
   ============================================================ */
.tc-float-icons.tc-float--s1 {
    position: fixed;
    right: 30px;
    bottom: 90px;
    z-index: 999998;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-float--s1 .tc-float-icon {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tc-float--s1 .tc-float-icon:hover {
    transform: translateY(-3px) scale(1.05);
}

.tc-float--s1 .tc-float-gift {
    background: linear-gradient(135deg, var(--s1-accent, #1f7a44), var(--s1-accent-hover, #13853d));
    animation: tc-s1-gift-pulse 2.2s ease-in-out infinite;
}

@keyframes tc-s1-gift-pulse {

    0%,
    100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }

    50% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 8px rgba(31, 122, 68, 0.18);
    }
}

@media (max-width: 480px) {
    .tc-float-icons.tc-float--s1 {
        right: 18px;
        bottom: 100px;
    }

    .tc-float--s1 .tc-float-icon {
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-float--s1 .tc-float-gift {
        animation: none;
    }
}

/* Gift promo popup — repaint the accent greens with the palette.
   (This file only loads on stream1 pages, so it won't touch stream2.) */
.tc-gift-cta {
    background: var(--s1-accent-strong, #4ade80) !important;
    color: #fff !important;
}

.tc-gift-cta:hover {
    background: var(--s1-accent-hover, #86efac) !important;
}

.tc-gift-modal {
    background-image: url('https://fussballwettenexpert.com/wp-content/plugins/GEO/banner/gift-banner.webp');
    background-position: top left;
    background-size: auto;
    background-repeat: no-repeat;
}

.tc-gift-modal-icon {
    background: rgba(31, 122, 68, 0.18) !important;
    color: var(--s1-accent-strong, #4ade80) !important;
}

.tc-gift-code {
    border-color: var(--s1-accent-strong, #4ade80) !important;
    color: var(--s1-accent-strong, #4ade80) !important;
}

.tc-gift-terms li::before {
    color: var(--s1-accent-strong, #4ade80) !important;
}

.tc-s1-verfiy {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1759 0.802343C13.7891 0.185035 13.0539 -0.119541 12.3438 0.0434874L9.88278 0.608655C9.63091 0.6665 9.36918 0.6665 9.1173 0.608655L6.65617 0.0434874C5.94621 -0.119541 5.21088 0.185035 4.82415 0.802343L3.48353 2.9422C3.34632 3.16123 3.16125 3.3463 2.94222 3.48352L0.802338 4.82413C0.185029 5.21088 -0.119549 5.94619 0.0434936 6.65616L0.608649 9.11726C0.666508 9.36913 0.666508 9.63086 0.608663 9.88274L0.0434936 12.3439C-0.119549 13.0538 0.185029 13.7891 0.802338 14.1758L2.94222 15.5165C3.16125 15.6537 3.34632 15.8387 3.48353 16.0577L4.82415 18.1976C5.21088 18.8149 5.94621 19.1195 6.65617 18.9565L9.1173 18.3914C9.36918 18.3335 9.63091 18.3335 9.88278 18.3914L12.3438 18.9565C13.0539 19.1195 13.7891 18.8149 14.1759 18.1976L15.5165 16.0577C15.6538 15.8388 15.8387 15.6537 16.0578 15.5165L18.1977 14.1758C18.815 13.7891 19.1196 13.0538 18.9565 12.3439L18.3914 9.88274C18.3336 9.63086 18.3336 9.36913 18.3914 9.11726L18.9565 6.65616C19.1196 5.94619 18.815 5.21088 18.1977 4.82413L16.0578 3.48352C15.8387 3.3463 15.6538 3.16123 15.5165 2.9422L14.1759 0.802343ZM13.4881 6.44846C13.6802 6.12316 13.5723 5.7037 13.2469 5.51158C12.9216 5.31947 12.5021 5.42744 12.31 5.75276L8.73381 11.8083L6.57352 9.73949C6.30066 9.47817 5.86762 9.48748 5.60631 9.76029C5.345 10.0332 5.35438 10.4662 5.62724 10.7276L8.41093 13.3933C8.5617 13.5379 8.77034 13.6055 8.97734 13.577C9.18421 13.5484 9.36686 13.4271 9.47302 13.2471L13.4881 6.44846Z' fill='%2340A0EE'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: -9px;
    right: -9.5px;
    width: 19px;
    height: 19px;
}

.tc-floating-banner {
    max-width: 900px;
    border-radius: 14px;
    width: calc(100% - 16px);
    margin: 0.8rem auto;
    position: fixed;
    bottom: 8px;
    left: 8px;
    right: 8px;
    color: #ffffff;
    padding: 12px 16px;
    z-index: 9999;
    transform: translateY(calc(100% + 20px));
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

.tc-floating-banner.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.banner-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.tc-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.tc-banner-content img {
    width: 60px;
    height: 40px !important;
    border-radius: 10px;
    object-fit: contain;
    background: #222 !important;
    flex-shrink: 0;
    cursor: pointer;
    margin: auto;
}

.tc-banner-info {
    min-width: 0;
    flex: 1;
}

.tc-banner-info strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-banner-info span {
    display: inline-block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.932);
    background: rgba(37, 37, 37, 0.815);
    padding: 4px 12px;
    border-radius: 1rem;
    margin-top: 1px;
    max-width: max-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.tc-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tc-banner-actions .tc-btn.visit {
    background: var(--tc-primary);
    border-radius: var(--tc-border-radius-pill);
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tc-banner-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: var(--tc-border-radius-pill);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.tc-banner-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

@media (max-width: 600px) {
    :root {
        --tc-border-radius: 14px;
        --tc-padding: 14px;
    }

    /* Floating banner becomes full-width at bottom */
    .tc-floating-banner {
        border-radius: 12px 12px 0 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 12px;
    }

    .banner-container {
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .tc-banner-actions {
        width: 100%;
    }

    .tc-banner-content {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
    }

    .tc-banner-content img {
        width: 66px;
        height: 42px !important;
    }

    .tc-banner-info strong {
        font-size: 14px;
    }

    .tc-banner-info span {
        font-size: 11px;
        padding: 4px 10px;
    }

    .tc-banner-actions .tc-btn.visit {
        width: 100%;
        padding: 11px 12px;
        font-size: 12px;
    }

    .tc-banner-close {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 13px;
    }
}