/* =====================================================================
   V40: header/modal stacking, longer search, giveaway reroll UI.
   Loaded last. Does not change pages outside requested fixes.
   ===================================================================== */

/* Header must never cover opened modals/comments/profile/feed post dialogs. */
.header,
body .header {
    z-index: 120 !important;
}

.header .header-center,
.header-center,
.header .header-right,
.header-right {
    z-index: 130 !important;
}

.modal,
.modal.active,
#profileModal,
#commentsModal,
#feedPostModal,
#giveawayDrawModal,
#giveawayCommentsModal,
#giveawayParticipantsModal,
#giveawayCreateModal,
#adminModal,
#communityToolsModal,
#publicProfileModal,
#confirmModal {
    z-index: 20000 !important;
}

.modal .modal-content,
.modal-content {
    position: relative !important;
    z-index: 20010 !important;
}

/* Search longer and aligned over the page buttons, matching the screenshot. */
.header .header-inner,
.header-inner {
    grid-template-columns: minmax(300px, 350px) minmax(680px, 760px) minmax(300px, auto) !important;
    grid-template-rows: 40px 31px !important;
    min-height: 88px !important;
    gap: 3px 16px !important;
    padding-top: 7px !important;
    padding-bottom: 6px !important;
    align-items: center !important;
}

.header .header-center,
.header-center,
.header .header-nav,
.header-inner > .header-nav,
.header #mainNavigation,
#mainNavigation {
    width: 100% !important;
    max-width: 760px !important;
    min-width: 680px !important;
    justify-self: stretch !important;
}

.header .search-section,
.header-center .search-section,
.search-section {
    width: 100% !important;
    max-width: none !important;
    height: 37px !important;
}

.header .header-nav,
.header-inner > .header-nav,
.header #mainNavigation,
#mainNavigation {
    height: 31px !important;
}

.header .nav-tab,
.nav-tab {
    height: 31px !important;
    min-height: 31px !important;
}

/* Keep search dropdown under search, but below real modals. */
.header #globalSearchResults.global-search-results,
#globalSearchResults.global-search-results {
    z-index: 15000 !important;
}
body.modal-open .header #globalSearchResults.global-search-results,
body.modal-open #globalSearchResults.global-search-results,
.modal.active ~ .header #globalSearchResults.global-search-results {
    display: none !important;
}

/* Giveaway case opening: smoother old-style horizontal reel. */
.giveaway-case-modal,
#giveawayDrawModalContent {
    max-width: min(1040px, calc(100vw - 24px)) !important;
}

.giveaway-case-stage {
    padding: 22px 0 !important;
    overflow: hidden !important;
}

.giveaway-case-viewport {
    overflow: hidden !important;
    width: 100% !important;
    contain: content !important;
}

.giveaway-case-reel {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: max-content !important;
    padding-inline: calc(50% - 72px) !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

.giveaway-case-reel.is-drawing .giveaway-case-card {
    pointer-events: none !important;
}

.giveaway-case-card {
    flex: 0 0 144px !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
    transform: translateZ(0) !important;
}

.giveaway-case-result.is-final {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.giveaway-reroll-btn {
    min-height: 38px !important;
    padding-inline: 14px !important;
    white-space: nowrap !important;
}

.giveaway-reroll-btn[disabled] {
    opacity: .65 !important;
    cursor: wait !important;
}

@media (max-width: 1180px) {
    .header .header-inner,
    .header-inner {
        grid-template-columns: minmax(260px, 320px) minmax(560px, 1fr) minmax(220px, auto) !important;
    }

    .header .header-center,
    .header-center,
    .header .header-nav,
    .header-inner > .header-nav,
    .header #mainNavigation,
    #mainNavigation {
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 820px) {
    .header .header-inner,
    .header-inner {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "brand"
            "search"
            "nav" !important;
        min-height: 0 !important;
    }

    .header .header-right,
    .header-right {
        grid-area: brand !important;
        justify-self: end !important;
    }

    .giveaway-case-result.is-final {
        grid-template-columns: auto 1fr !important;
    }

    .giveaway-case-result.is-final .giveaway-reroll-btn,
    .giveaway-case-result.is-final [data-close-giveaway-draw] {
        grid-column: span 2 !important;
        width: 100% !important;
    }
}