/*
 * takwira365.com site overrides, loaded after the bundle's stylesheets from
 * resources/views/welcome.blade.php (cache-busted with nextjs.asset_version).
 * The bundle is clubx2.com's (skin betx2); nothing overridden yet.
 */

/* 2026-10-15: landing tiles edge to edge like tunibet365.com. The betx2 skin pads
   the thumbnails slider (24px/40px desktop, 20px/16px phone), which shrinks the
   five tiles; tunibet's skin uses no padding (tiles 182px desktop, 177px phone). */
body {
    --thumbs-slider-padding-x: 0 !important;
    --thumbs-slider-padding-y: 0 !important;
    --thumbs-slider-mobile-padding-x: 0 !important;
    --thumbs-slider-mobile-padding-y: 0 !important;
}

/* 2026-10-15: Top Winners strip directly under the banner (operator request).
   The bundle renders it as the first row inside .homeBodyContainer, below the
   tiles, category pills and search. Flatten that container and reorder the
   landing sections as flex items: banner, top winners, tiles, pills, search,
   then the remaining game rows. */
.casinoContainer {
    display: flex;
    flex-direction: column;
}
.casinoContainer > .homeBodyContainer {
    display: contents;
}
.casinoContainer > .fullWidthSliderContainer { order: 0; }
.casinoContainer > .homeBodyContainer > .casinoGamesRowContainer:first-child { order: 1; margin-top: 16px; }
.casinoContainer > .my-5 { order: 2; }
.casinoContainer > .casinoMenuContainer { order: 3; }
.casinoContainer > .homeSearch { order: 4; }
.casinoContainer > .homeBodyContainer > * { order: 5; }
.casinoContainer > .homeBodyContainer > .casinoGamesRowContainer:first-child { order: 1; }

/* 2026-10-16: six home-menu icons as a grid: 2 per row on phones (the bundle's
   own mobile layout), 3 per row on desktop instead of one row of six. */
@media (min-width: 1024px) {
    .thumbnailSliderContainer .homeSliderContainer {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .thumbnailSliderContainer .homeSliderContainer .homeSliderItem {
        width: 100% !important;
        flex: none !important;
    }
}

/* 2026-10-16: compact Top Winners strip on phones so the banner, the strip and
   the first four home-menu tiles share the first screen. */
@media (max-width: 767px) {
    body {
        --topWinners-image-width: 44px !important;
        --topWinners-image-height: 44px !important;
        --topWinners-card-padding: 4px !important;
        --topWinners-title-font-size-mobile: 15px !important;
        --topWinners-title-line-height: 20px !important;
        --topWinners-username-font-size-mobile: 10px !important;
        --topWinners-username-line-height-mobile: 13px !important;
        --topWinners-amount-font-size-mobile: 11px !important;
        --topWinners-amount-line-height-mobile: 14px !important;
        --topWinners-containerL4-margin-top-mobile: 0 !important;
        --topWinners-containerL4-margin-bottom-mobile: 0 !important;
        --topWinners-containerL4-padding-top-mobile: 0 !important;
        --topWinners-containerL4-padding-bottom-mobile: 0 !important;
    }
    .topWinnersContainerL4 .topWinnersItem { row-gap: 2px; }
    .topWinnersContainerL4 .topWinnersItem > * + * { margin-top: 2px !important; }
    .casinoContainer > .homeBodyContainer > .casinoGamesRowContainer:first-child { margin-top: 10px; }
}

/* 2026-10-17: larger header logo (skin: 36px desktop / 24px phone). The skin
   defines these on body{}, so match that and win with !important. */
body {
    --header-logo-height: 58px !important;
    --header-logo-mobile-height: 40px !important;
}