/* =========================================================
   KARTOOSH HOME  - geometry measured live from the real runtime DOM
   at 1600x900 via CDP (see new_index.php header table).

   holder        : 1594w, padding 0 10px  ->  1574w content
   row gap       : uniform 32px
   section head  : 32px tall, title 18px/600 rgba(255,255,255,.9),
                   see-more 47x14 12px rgba(255,255,255,.5)
   casino row    : 261px = head 32 + gap 16 + tiles 302x213
                   5 tiles across at 16px gap
   products row  : 134px, 5 tiles 307x134, 10px gap, no title
   featured strip: 198px, horizontal, 45 tiles
   trending      : 197px, 10 tiles
   slider        : 394px tall, authored 2000x500, arrows + dots + count,
                   autoplay 5000ms
   radius        : 4px everywhere (real --border-radius)
   palette       : --kt-gold #f8c524 hero, --kt-navy #18232d chrome,
                   --kt-brand #027b5b menu, content bg #414a53
   ========================================================= */

.kt-page {
    flex: 1;
    width: 100%;
    margin: 0;
    /* real holder padding is 0 10px */
    padding: 0 10px 28px;
    font-family: Roboto, 'Cairo', Arial, Helvetica, sans-serif;
}
.kt-wrap { width: 100%; max-width: 1600px; margin: 0 auto; }

/* ---------- HERO SLIDER ----------
   Banners are authored 2000x1000 = 2:1, the same ratio the real site uses at
   every breakpoint (desktop box 1586x793, phone box 376x188). The viewport is
   therefore 2:1 too, so object-fit:cover never crops and never zooms. */
.kt-hero { position: relative; width: 100%; }
.kt-hero__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 2000 / 1000;
    border-radius: var(--kt-radius, 4px);
    overflow: hidden;
    background: var(--kt-navy-deep, #0f1720);
}
.kt-hero__track { position: absolute; inset: 0; }
.kt-hero__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
}
.kt-hero__slide.is-active { opacity: 1; visibility: visible; }
.kt-hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #0f1720;
}
.kt-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(24, 35, 45, 0.78);
    backdrop-filter: saturate(120%) blur(4px);
}
.kt-hero__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.kt-hero__dot.is-active { background: var(--kt-gold); transform: scale(1.25); }

/* real Slider settings: arrows:true, showCount:true */
.kt-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(24, 35, 45, 0.72);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.kt-hero__arrow:hover { background: var(--kt-gold); border-color: var(--kt-gold); color: #1d1600; }
.kt-hero__arrow--prev { left: 12px; }
.kt-hero__arrow--next { right: 12px; }
.kt-hero__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(24, 35, 45, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- PRODUCT TILES : real PromotedProductsWidget ----------
   measured: display grid, gap 10px, 5 tiles at 307x134, no title */
.kt-products {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.kt-products__tile {
    display: block;
    aspect-ratio: 307 / 134;
    border-radius: var(--kt-radius, 4px);
    overflow: hidden;
    background: var(--kt-navy-deep, #0f1720);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.kt-products__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kt-products__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

/* ---------- SECTIONS : measured head 32px, row gap 32px ---------- */
.kt-section { margin-top: 32px; }
.kt-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
    margin-bottom: 16px;
}
.kt-section__head h2 {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}
.kt-plus {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 47px;
    height: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
}
.kt-plus:hover { color: var(--kt-gold); }

/* ---------- GAME TILES ----------
   real casino row: 5 tiles of 302x213 at 16px gap, image only (440x310
   natural, so 302/213 = 1.418 matches exactly).  The real tile shows the
   artwork only -- 261 = head 32 + gap 16 + 213 leaves no room for a name
   strip, so the label is kept for assistive tech, not visually. */
.kt-games {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.kt-games .kt-game { height: 213px; }
.kt-games .kt-game__img { height: 213px; aspect-ratio: auto; }
.kt-games .kt-game__name {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* real bbAiRecBets: horizontal strip, row 332 = head 32 + gap 16 + 284 */
.kt-games--wide {
    display: flex;
    gap: 16px;
    height: 284px;
    overflow: hidden;
}
.kt-games--wide .kt-game { flex: 0 0 403px; width: 403px; height: 284px; }
.kt-games--wide .kt-game__img { height: 284px; aspect-ratio: auto; }

/* real casinoHorizontalGamesList "Tendance": row 197 = 32 + 16 + 149 */
.kt-section--trending .kt-games { height: 149px; }
.kt-section--trending .kt-game { height: 149px; }
.kt-section--trending .kt-game__img { height: 149px; aspect-ratio: auto; }

/* real featuredGamesVersion1: horizontal flex strip.
   measured real row is 198px total = 32px head + 16px gap + 150px strip */
.kt-strip {
    display: flex;
    gap: 16px;
    height: 150px;
    overflow: hidden;
}
.kt-strip .kt-game {
    flex: 0 0 213px;
    width: 213px;
    height: 150px;
}
.kt-strip .kt-game__img { height: 150px; aspect-ratio: auto; }

.kt-game {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--kt-radius, 4px);
    background: linear-gradient(180deg, var(--kt-navy-2, #24303a), var(--kt-navy, #18232d));
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}
.kt-game:hover { transform: translateY(-3px); border-color: var(--kt-gold); }
.kt-game__img {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 310;
    overflow: hidden;
}
.kt-game__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.kt-game:hover .kt-game__img img { transform: scale(1.05); }
.kt-game__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 35, 45, 0.62);
    color: var(--kt-gold);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.kt-game:hover .kt-game__play { opacity: 1; }
.kt-game__name {
    display: block;
    padding: 7px 9px 8px;
    color: var(--text, #f4f7fb);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- COMBI CARDS : kartoosh .combi-card ---------- */
.kt-combi, .kt-matches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}
.kt-combi__sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text, #f4f7fb);
    font-size: 13.5px;
    font-weight: 500;
}
.kt-combi__selTeam { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kt-combi__selTag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid var(--kt-gold);
    border-radius: var(--kt-radius, 4px);
    color: var(--kt-gold);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.kt-combi__card {
    position: relative;
    padding: 12px 14px 14px;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.04), transparent 42%),
        linear-gradient(180deg, var(--kt-navy-2, #24303a), var(--kt-navy, #18232d));
    border: 1px solid rgba(185, 198, 210, 0.22);
    border-radius: var(--kt-radius-middle, 8px);
    overflow: hidden;
}
.kt-combi__card::before {
    content: '';
    position: absolute;
    inset: auto -10% -30% auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 18px solid rgba(255, 255, 255, 0.035);
    pointer-events: none;
}
.kt-combi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.kt-combi__league {
    color: var(--kt-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.kt-combi__time {
    color: var(--muted, #9aa8b6);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.kt-combi__teams {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text, #f4f7fb);
    font-size: 13.5px;
    font-weight: 500;
}
.kt-combi__team { flex: 1 1 auto; }
.kt-combi__vs { color: var(--muted, #9aa8b6); font-size: 11px; }

/* ---------- ODDS : kartoosh .odds / .odd ---------- */
.kt-odds {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.kt-odd {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: var(--kt-navy-2, #24303a);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--kt-radius, 4px);
    color: var(--kt-gold);
    font-family: Roboto, 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.kt-odd:hover { background: var(--kt-navy-2, #24303a); border-color: var(--kt-gold); }
.kt-odd.is-on { background: var(--kt-gold); color: #1d1600; border-color: var(--kt-gold); }

/* ---------- ROW HEIGHTS : measured 1600x900 ---------- */
.kt-section--combi .kt-combi { height: 466px; }
.kt-matches { height: 300px; }

/* ---------- MOBILE-ONLY ROW : casinoTopWinnersWidget ----------
   The real m.kartoosh.bet homepage has this row only in the mobile row set;
   www.kartoosh.bet has no equivalent.  The markup is always emitted (data is
   driven by GameCatalog), so it is hidden for every viewport width here and
   switched on inside the @media (max-width:768px) block below.  Keeping the
   off-switch here (outside the media query) means it can never leak above
   768px even if the media query is ever reordered. */
.kt-section--winners { display: none; }

/* ---------- RESPONSIVE : kartoosh perViewRules
             1440->7  1100->5  820->4  576->3  0->2  (games)
             1440->3  992->2   0->1                        (combi) ---------- */
@media screen and (max-width: 1440px) {
    .kt-games { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .kt-games--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media screen and (max-width: 1100px) {
    .kt-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kt-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kt-games--wide .kt-game { flex-basis: 300px; width: 300px; height: 212px; }
    .kt-games--wide .kt-game__img { height: 212px; }
    .kt-section--combi .kt-combi { height: auto; }
    .kt-matches { height: auto; }
}
@media screen and (max-width: 992px) {
    .kt-combi, .kt-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 820px) {
    .kt-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kt-games--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   MOBILE  (measured live from the real runtime DOM at 390x844,
   m.kartoosh.bet/fr -- see real_home_rows.txt / real_home_deep.txt)

   real holder        : padding 0 10px -> 370w content
   real row gap       : margin-top 24px (slider row 5px), rows are
                        grid children, so nothing collapses
   real row heights   : 188 178 636 449 416 96 134 134 134 247
   real section title : 20px band, title 14px/500 rgba(255,255,255,.9)
   On mobile the game rows become horizontal carousels, not grids, and the
   real site shows a DIFFERENT row set/order than www.kartoosh.bet, so every
   rule below is mobile-only: nothing here can move at 769px and up.
   ========================================================= */
@media screen and (max-width: 768px) {
    .kt-page { padding: 0 10px 28px; }

    /* the real holder stacks its rows as flex children so `order` can put
       them in the mobile order while desktop keeps the block/auto order */
    .kt-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* ---------- ROW ORDER : real m.kartoosh mobile ---------- */
    /* (the former order:2 slot was the removed Classement/power-bank block) */
    .kt-hero                 { order: 0; }
    .kt-section--strip       { order: 1; }
    .kt-section--combi       { order: 2; }
    .kt-section--matches     { order: 3; }
    .kt-section--winners     { order: 4; }
    .kt-section--cat         { order: 5; }
    .kt-section--cat-65      { order: 6; }

    /* rows the real mobile homepage simply does not have. cat-28 (Casino en
       ligne) and cat-36 (Jeux) are listed too: those rows were removed along
       with the originals, so the rules are kept as a guard in case the markup
       ever returns. */
    .kt-products,
    .kt-section--wide,
    .kt-section--trending,
    .kt-section--cat-28,
    .kt-section--cat-36,
    .kt-section--cat-95,
    .kt-section--cat-247,
    .kt-section--cat-240 { display: none; }

    /* real row gap is 24px on mobile, not the desktop 32px */
    .kt-section { margin-top: 24px; }

    /* ---------- shared mobile title band : real .sectionTitle is 20px ---------- */
    .kt-section__head { height: 20px; margin-bottom: 8px; padding: 0 8px; }
    .kt-section__head h2 {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
    .kt-plus { width: auto; height: 14px; font-size: 11px; }

    /* ---------- ROW0  slider : 188 tall, 7px inset slide, radius 4, fraction badge ----
       Real m.kartoosh: hero is full bleed 390, the slide itself is inset 7px per side
       (376 wide) and 188 tall = exactly 2:1, matching the 2000x1000 artwork, so
       object-fit:cover has nothing to crop and the banner is never zoomed. */
    .kt-hero { margin: 5px -10px 0; width: calc(100% + 20px); padding: 0 7px; }
    .kt-hero__viewport {
        aspect-ratio: auto;
        height: 188px;
        max-height: 188px;
        border-radius: 4px;
    }
    .kt-hero__slide { border-radius: 4px; }
    .kt-hero__slide img { object-fit: cover; object-position: 50% 50%; }
    .kt-hero__arrow { display: none; }
    .kt-hero__dots  { display: none; }
    /* real badge sits 16px from the slide's right edge, 6px from its top */
    .kt-hero__count {
        top: 6px;
        right: 16px;
        bottom: auto;
        padding: 4px 6px;
        border-radius: 4px;
        background: rgba(248, 197, 36, 0.7);
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
        line-height: 14px;
        font-weight: 400;
        font-variant-numeric: normal;
    }

    /* ---------- ROW1  featured : 178 = title 20 + gap 8 + carousel 150 ------- */
    .kt-strip {
        display: flex;
        gap: 8px;
        height: 150px;
        padding: 0 7px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .kt-strip::-webkit-scrollbar { display: none; }
    .kt-strip .kt-game {
        flex: 0 0 auto;
        width: 127px;
        height: 150px;
        border-radius: 4px;
        scroll-snap-align: start;
    }
    .kt-strip .kt-game__img { width: 127px; height: 150px; aspect-ratio: auto; }

    /* ---------- ROW2  Combi du Jour : 449 = head 17 + gap 24 + carousel 408 - */
    .kt-section--combi .kt-section__head { height: 17px; margin-bottom: 24px; }
    .kt-section--combi .kt-section__head h2 {
        font-weight: 700;
        line-height: 17px;
    }
    .kt-section--combi .kt-combi {
        display: flex;
        gap: 10px;
        height: 408px;
        padding-left: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .kt-section--combi .kt-combi::-webkit-scrollbar { display: none; }
    .kt-section--combi .kt-combi__card {
        flex: 0 0 308px;
        width: 308px;
        height: 408px;
        border-radius: 4px;
        scroll-snap-align: start;
    }

    /* ---------- ROW4  Matchs a venir : 416 = head 17 + gap 8 + list 391 ----- */
    .kt-section--matches .kt-section__head { height: 17px; margin-bottom: 8px; }
    .kt-section--matches .kt-section__head h2 {
        font-weight: 700;
        line-height: 17px;
    }
    .kt-section--matches .kt-matches {
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 391px;
    }
    .kt-section--matches .kt-matches .kt-combi__card {
        flex: 1 1 0;
        min-height: 0;
    }

    /* ---------- ROW5  Top des vainqueurs au Casino : 96 = head 24 + 12 + 60 */
    .kt-section--winners { display: block; }
    .kt-winners__head {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 24px;
        margin-bottom: 12px;
        padding-right: 8px;
    }
    .kt-winners__head h2 {
        flex: 0 0 auto;
        margin: 0;
        padding: 0 8px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }
    .kt-winners__periods {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
    }
    .kt-winners__chip {
        flex: 0 0 auto;
        padding: 4px 6px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
        font-family: inherit;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        white-space: nowrap;
        cursor: pointer;
    }
    .kt-winners__chip.is-on { background: rgba(255, 255, 255, 0.9); color: rgba(0, 2, 5, 0.9); }
    .kt-winners__line {
        display: flex;
        gap: 8px;
        height: 60px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .kt-winners__line::-webkit-scrollbar { display: none; }
    .kt-winner {
        flex: 0 0 168px;
        width: 168px;
        height: 60px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        text-decoration: none;
    }
    .kt-winner__img {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 6px;
        overflow: hidden;
    }
    .kt-winner__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .kt-winner__meta {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .kt-winner__user {
        color: var(--text, #f4f7fb);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kt-winner__amount {
        color: var(--kt-gold, #f8c524);
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* ---------- ROW6-9  casino horizontal rows
       real: 134 = title 20 + gap 8 + scroll 106, tiles 150x106 radius 8.
       The last real row is the tall one: 247 = title 20 + gap 8 + scroll 219,
       its 150-wide tiles wrap into two stacked 106px rows. ----------------- */
    .kt-section--cat .kt-games {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        height: 106px;
        padding: 0 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .kt-section--cat .kt-games::-webkit-scrollbar { display: none; }
    .kt-section--cat .kt-game {
        flex: 0 0 150px;
        width: 150px;
        height: 106px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        scroll-snap-align: start;
    }
    .kt-section--cat .kt-game__img {
        width: 150px;
        height: 106px;
        aspect-ratio: auto;
        border-radius: 8px;
    }
    .kt-section--cat .kt-game:hover {
        transform: none;
        border-color: transparent;
    }

    /* Every casino row (including "Nouveaux jeux", cat-65) now uses the same
       horizontal 150x106 rail. The old cat-65 override turned it into a tall
       wrapping 2-per-row grid (219px), which made it the only casino row that
       did not scroll. */
}

@media screen and (max-width: 576px) {
    /* the 390x844 measurement is inside this range: every mobile geometry
       value above must survive untouched down to the smallest phone */
    .kt-winners__head h2 { padding: 0; }
}