/* =========================================================
   H2HFACTS GLOBAL LAYOUT CORE
   File: public/css/h2h-layout-core.css

   This is the ONLY central CSS for:
   - header / top menu / dropdowns / live search
   - left sidebar + mobile hamburger menu
   - rightbar + Latest News widgets
   - dashboard columns
   Page CSS files should style page content only.
========================================================= */

/* Base variables used across global layout */
:root {
    --h2h-sidebar: 300px;
    --h2h-rightbar: 370px;
    --h2h-header: 86px;
}

.h2h-header,
.h2h-nav,
.h2h-nav-dropdown,
.h2h-nav-dropdown-menu,
.h2h-header-actions,
.h2h-live-search {
    overflow: visible !important;
}

.h2h-header {
    position: sticky;
    top: 0;
    z-index: 99999;
}

.h2h-main {
    min-width: 0;
}

.h2h-dashboard-layout {
    display: grid;
    grid-template-columns: var(--h2h-sidebar) minmax(0, 1fr) var(--h2h-rightbar);
    gap: 18px;
    align-items: start;
}

/* Desktop menus must scroll normally, not sticky/fixed */
@media (min-width: 1021px) {
    .h2h-sidebar,
    .h2h-dashboard-layout > .h2h-sidebar,
    .h2h-dashboard-layout > aside.h2h-sidebar,
    .h2h-rightbar,
    .h2h-rightbar-pro,
    .pp-right,
    .h2h-match-rightbar {
        position: static !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        align-self: start !important;
    }
}

/* Rightbar / Latest News central rules */
.h2h-rightbar,
.h2h-rightbar-pro,
.pp-right,
.h2h-match-rightbar {
    min-width: 0;
    max-width: 100%;
}

.h2h-rightbar .h2h-card,
.h2h-rightbar-pro .h2h-card,
.pp-right .h2h-card,
.h2h-match-rightbar .h2h-card,
.h2h-side-card,
.h2h-match-side-card {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.h2h-news-list {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.h2h-news-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-height: 68px;
    padding: 8px;
    border-radius: 13px;
    background: rgba(0,0,0,.14);
    overflow: hidden;
    box-sizing: border-box;
    text-decoration: none;
}

.h2h-news-img {
    width: 64px;
    height: 54px;
    min-width: 64px;
    max-width: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(23,255,52,.10);
    display: grid;
    place-items: center;
}

.h2h-news-img img,
.h2h-news-item > img,
.h2h-news-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.h2h-news-item > div:last-child {
    min-width: 0;
    overflow: hidden;
}

.h2h-news-item strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1.18;
    font-weight: 1000;
    margin: 0;
}

.h2h-news-item span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(230,255,232,.58);
    font-size: 10px;
    line-height: 1.24;
    font-weight: 800;
    margin-top: 3px;
}

.h2h-news-item small {
    display: block;
    color: #55f041;
    font-size: 10px;
    font-weight: 900;
    margin-top: 4px;
}

/* Tablet: rightbar goes under content */
@media (max-width: 1250px) and (min-width: 1021px) {
    .h2h-dashboard-layout {
        grid-template-columns: var(--h2h-sidebar) minmax(0, 1fr);
    }

    .h2h-rightbar,
    .h2h-rightbar-pro,
    .pp-right,
    .h2h-match-rightbar {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        position: static !important;
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile: sidebar under header, rightbar under content */
@media (max-width: 1020px) {
    .h2h-mobile-menu-btn {
        display: inline-flex;
    }

    .h2h-nav {
        display: none;
    }

    .h2h-dashboard-layout {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body.h2h-sidebar-open {
        overflow: hidden !important;
    }

    body.h2h-sidebar-open::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: var(--h2h-header);
        bottom: 0;
        z-index: 79;
        background: rgba(0,0,0,.62);
        backdrop-filter: blur(2px);
        pointer-events: none;
    }

    body.h2h-sidebar-open .h2h-header {
        z-index: 90;
    }

    .h2h-sidebar,
    .h2h-dashboard-layout > .h2h-sidebar,
    .h2h-dashboard-layout > aside.h2h-sidebar,
    .h2h-match-layout > .h2h-sidebar,
    .h2h-match-layout > aside:first-child {
        display: block !important;
        position: fixed !important;
        left: -310px !important;
        top: var(--h2h-header) !important;
        bottom: auto !important;
        z-index: 80 !important;
        width: 290px !important;
        max-width: 86vw !important;
        height: calc(100vh - var(--h2h-header)) !important;
        max-height: calc(100vh - var(--h2h-header)) !important;
        padding: 14px 14px 82px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        background:
            radial-gradient(circle at 25% 0%, rgba(23,255,52,.13), transparent 32%),
            linear-gradient(180deg, #04140a 0%, #020805 100%) !important;
        border-right: 1px solid rgba(23,255,52,.26) !important;
        box-shadow: 22px 0 45px rgba(0,0,0,.55) !important;
        transition: left .25s ease !important;
        box-sizing: border-box;
    }

    body.h2h-sidebar-open .h2h-sidebar,
    body.h2h-sidebar-open .h2h-dashboard-layout > .h2h-sidebar,
    body.h2h-sidebar-open .h2h-dashboard-layout > aside.h2h-sidebar,
    body.h2h-sidebar-open .h2h-match-layout > .h2h-sidebar,
    body.h2h-sidebar-open .h2h-match-layout > aside:first-child {
        left: 0 !important;
    }

    .h2h-sidebar .h2h-card,
    .h2h-sidebar .h2h-menu-card,
    .h2h-sidebar .h2h-menu-list,
    .h2h-sidebar .h2h-league-countries-list {
        max-height: none !important;
        overflow: visible !important;
    }

    .h2h-rightbar,
    .h2h-rightbar-pro,
    .pp-right,
    .h2h-match-rightbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: static !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .h2h-side-card,
    .h2h-match-side-card,
    .h2h-rightbar .h2h-card,
    .h2h-match-rightbar .h2h-card {
        width: 100%;
        max-width: 100%;
        padding: 13px;
        border-radius: 14px;
        overflow: hidden;
    }

    .h2h-news-item {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 9px;
        min-height: 64px;
        padding: 8px;
        border-radius: 12px;
    }

    .h2h-news-img {
        width: 58px;
        height: 48px;
        min-width: 58px;
        max-width: 58px;
        border-radius: 9px;
    }

    .h2h-news-item strong {
        font-size: 11px;
    }

    .h2h-news-item span,
    .h2h-news-item small {
        font-size: 9px;
    }
}

@media (max-width: 720px) {
    :root {
        --h2h-header: 74px;
    }
}

@media (max-width: 390px) {
    .h2h-news-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .h2h-news-img {
        width: 54px;
        height: 46px;
        min-width: 54px;
        max-width: 54px;
    }
}

/* =========================================================
   HEADER CSS MOVED FROM header.blade.php
========================================================= */
/* =========================================================
   H2H HEADER DROPDOWN - FIXED HOVER GAP
========================================================= */

.h2h-nav {
    position: relative;
    z-index: 9999;
    overflow: visible !important;
}

.h2h-nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 14px 0; /* important: creates safe hover area */
    margin: -14px 0;
}

.h2h-nav-dropbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.h2h-nav-dropbtn i {
    font-size: 10px;
    transition: transform .18s ease;
}

.h2h-nav-dropdown:hover .h2h-nav-dropbtn i {
    transform: rotate(180deg);
}

.h2h-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    min-width: 220px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 13px;
    background:
        radial-gradient(circle at top left, rgba(83,255,80,.10), transparent 34%),
        linear-gradient(180deg, rgba(5,19,10,.98), rgba(2,8,5,.99));
    border: 1px solid rgba(83,255,80,.20);
    box-shadow: 0 18px 45px rgba(0,0,0,.42);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Invisible bridge above dropdown */
.h2h-nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
}

/* Keep open on parent OR dropdown hover */
.h2h-nav-dropdown:hover .h2h-nav-dropdown-menu,
.h2h-nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.h2h-nav-dropdown-menu a {
    position: relative;
    z-index: 2;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: rgba(230,255,232,.78);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition: .16s ease;
}

.h2h-nav-dropdown-menu a:hover,
.h2h-nav-dropdown-menu a.active {
    background: rgba(83,255,80,.12);
    color: #55f041;
}

.h2h-nav-dropdown.active > .h2h-nav-dropbtn {
    color: #55f041 !important;
}

.h2h-nav-dropdown.active > .h2h-nav-dropbtn::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -10px;
    height: 2px;
    border-radius: 999px;
    background: #55f041;
    box-shadow: 0 0 12px rgba(83,255,80,.45);
}

/* Mobile */
@media (max-width: 900px) {
    .h2h-nav-dropdown {
        width: 100%;
        display: grid;
        padding: 0;
        margin: 0;
    }

    .h2h-nav-dropbtn {
        width: 100%;
    }

    .h2h-nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        margin-top: 6px;
        padding: 7px;
        box-shadow: none;
        background: rgba(0,0,0,.18);
        border-radius: 11px;
    }

    .h2h-nav-dropdown-menu::before {
        display: none;
    }

    .h2h-nav-dropdown.active > .h2h-nav-dropbtn::after {
        display: none;
    }
}

/* =========================================================
   HEADER CUSTOM ADMIN LOGO
========================================================= */

.h2h-logo.has-custom-logo {
    min-width: 176px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.h2h-logo-img {
    width: auto;
    max-width: 165px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 16px rgba(83,255,80,.18));
}

@media (max-width: 900px) {
    .h2h-logo.has-custom-logo {
        min-width: 0;
    }

    .h2h-logo-img {
        height: 38px;
        max-width: 150px;
    }
}


/* =========================================================
   H2H TOPBET STYLE LIVE SEARCH
========================================================= */
.h2h-live-search{position:relative;width:min(330px,30vw);z-index:100000}.h2h-live-search .h2h-search{width:100%}.h2h-live-search-form{position:relative}.h2h-live-search-input{padding-right:38px!important}.h2h-live-search-clear{position:absolute;right:10px;top:50%;width:24px;height:24px;display:none;place-items:center;transform:translateY(-50%);border:0;border-radius:999px;color:rgba(230,255,232,.55);background:rgba(255,255,255,.06);cursor:pointer}.h2h-live-search.has-value .h2h-live-search-clear{display:grid}.h2h-live-search-clear:hover{color:#55f041;background:rgba(83,255,80,.10)}.h2h-live-search-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(540px,92vw);max-height:72vh;overflow:auto;display:none;padding:10px;border-radius:16px;background:radial-gradient(circle at top left,rgba(83,255,80,.12),transparent 34%),linear-gradient(180deg,rgba(5,19,10,.99),rgba(1,7,4,.99));border:1px solid rgba(83,255,80,.22);box-shadow:0 24px 70px rgba(0,0,0,.55)}.h2h-live-search.is-open .h2h-live-search-panel{display:grid;gap:10px}.h2h-live-search-loading,.h2h-live-search-empty{min-height:58px;display:grid;place-items:center;padding:13px;border-radius:12px;color:rgba(230,255,232,.62);font-size:12px;font-weight:850;text-align:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.h2h-live-search-group{display:grid;gap:6px}.h2h-live-search-title{display:flex;align-items:center;gap:8px;padding:0 4px 2px;color:#55f041;font-size:10px;line-height:1;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.h2h-live-search-results{display:grid;gap:5px}.h2h-live-search-item{min-width:0;min-height:54px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border-radius:12px;color:rgba(245,255,246,.92);text-decoration:none;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);transition:.15s ease}.h2h-live-search-item:hover{color:#fff;background:rgba(83,255,80,.10);border-color:rgba(83,255,80,.24);transform:translateY(-1px)}.h2h-live-search-icon,.h2h-live-search-logo{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;object-fit:contain;background:rgba(83,255,80,.10);border:1px solid rgba(83,255,80,.18);color:#55f041;overflow:hidden}.h2h-live-search-logo img{width:100%;height:100%;object-fit:contain}.h2h-live-search-main{min-width:0;display:grid;gap:3px}.h2h-live-search-main strong{min-width:0;color:#fff;font-size:13px;line-height:1.08;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h2h-live-search-main span{min-width:0;color:rgba(230,255,232,.58);font-size:11px;line-height:1.1;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.h2h-live-search-badge{min-height:25px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;color:#55f041;background:rgba(83,255,80,.10);border:1px solid rgba(83,255,80,.17);font-size:9px;line-height:1;font-weight:1000;text-transform:uppercase;white-space:nowrap}.h2h-live-search-footer{min-height:36px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;color:#55f041;background:rgba(83,255,80,.08);border:1px solid rgba(83,255,80,.16);font-size:11px;font-weight:1000}@media(max-width:1180px){.h2h-live-search{width:min(270px,26vw)}}@media(max-width:900px){.h2h-live-search{order:20;width:100%}.h2h-live-search-panel{position:fixed;left:8px;right:8px;top:76px;width:auto;max-height:calc(100vh - 92px);border-radius:14px}.h2h-live-search-item{grid-template-columns:32px minmax(0,1fr)}.h2h-live-search-badge{grid-column:2;justify-self:start}}



/* Popular searches section */
.h2h-live-search-group:first-child .h2h-live-search-item {
    background: rgba(83,255,80,.07);
    border-color: rgba(83,255,80,.16);
}

.h2h-live-search-group:first-child .h2h-live-search-icon {
    background: linear-gradient(180deg, rgba(83,255,80,.20), rgba(12,143,34,.12));
}

/* =========================================================
   MOBILE SIDEBAR MENU CSS MOVED FROM sidebar.blade.php
========================================================= */
/* =========================================================
   MOBILE SIDEBAR MAIN MENU
   Adds desktop header navigation inside hamburger menu only.
========================================================= */

.h2h-mobile-main-menu {
    display: none;
}

@media (max-width: 900px) {
    .h2h-mobile-main-menu {
        display: grid !important;
        gap: 8px !important;
        margin-bottom: 13px !important;
        padding-bottom: 13px !important;
        border-bottom: 1px solid rgba(83,255,80,.16) !important;
    }

    .h2h-mobile-main-menu-list {
        display: grid !important;
        gap: 6px !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item {
        min-height: 39px !important;
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.035) !important;
        border: 1px solid rgba(255,255,255,.055) !important;
        color: rgba(235,255,238,.82) !important;
        text-decoration: none !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item i {
        width: 22px !important;
        text-align: center !important;
        color: #55f041 !important;
        font-size: 13px !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item span {
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        font-size: 12px !important;
        font-weight: 1000 !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item:hover,
    .h2h-mobile-main-menu .h2h-menu-item.h2h-menu-active {
        background: linear-gradient(180deg, rgba(52,255,67,.20), rgba(12,143,34,.13)) !important;
        border-color: rgba(83,255,80,.24) !important;
        color: #ffffff !important;
    }

    .h2h-mobile-menu-block {
        display: grid !important;
        gap: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.035) !important;
        border: 1px solid rgba(255,255,255,.055) !important;
    }

    .h2h-mobile-menu-toggle {
        width: 100% !important;
        min-height: 39px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 22px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 10px !important;
        border: 0 !important;
        background: transparent !important;
        color: rgba(235,255,238,.82) !important;
        cursor: pointer !important;
        font: inherit !important;
    }

    .h2h-mobile-menu-toggle > span {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        font-size: 12px !important;
        font-weight: 1000 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
    }

    .h2h-mobile-menu-toggle i {
        color: #55f041 !important;
        font-size: 13px !important;
    }

    .h2h-mobile-menu-toggle > i:last-child {
        justify-self: end !important;
        transition: transform .16s ease !important;
    }

    .h2h-mobile-menu-block.open .h2h-mobile-menu-toggle > i:last-child {
        transform: rotate(180deg) !important;
    }

    .h2h-mobile-submenu {
        display: none !important;
        gap: 4px !important;
        padding: 0 8px 8px 41px !important;
    }

    .h2h-mobile-menu-block.open .h2h-mobile-submenu {
        display: grid !important;
    }

    .h2h-mobile-submenu a {
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        color: rgba(230,255,232,.70) !important;
        background: rgba(0,0,0,.16) !important;
        border: 1px solid rgba(255,255,255,.045) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
    }

    .h2h-mobile-submenu a:hover,
    .h2h-mobile-submenu a.active {
        color: #55f041 !important;
        border-color: rgba(83,255,80,.18) !important;
        background: rgba(83,255,80,.08) !important;
    }

    /* important: menu can scroll when expanded */
    .h2h-sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 80px !important;
    }

    .h2h-sidebar .h2h-card,
    .h2h-sidebar .h2h-menu-card,
    .h2h-sidebar .h2h-menu-list {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   MOBILE MAIN MENU ICON REFINEMENT
   Better icon feel; Home icon stays the same.
========================================================= */
@media (max-width: 900px) {
    .h2h-mobile-main-menu .h2h-menu-item i,
    .h2h-mobile-menu-toggle span > i {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 8px !important;
        background: rgba(83,255,80,.10) !important;
        border: 1px solid rgba(83,255,80,.14) !important;
        color: #55f041 !important;
        font-size: 12px !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item.h2h-menu-active i,
    .h2h-mobile-main-menu .h2h-menu-item:hover i,
    .h2h-mobile-menu-block.open .h2h-mobile-menu-toggle span > i {
        background: linear-gradient(180deg, rgba(52,255,67,.22), rgba(12,143,34,.15)) !important;
        border-color: rgba(83,255,80,.28) !important;
        color: #ffffff !important;
    }

    .h2h-mobile-menu-toggle > i:last-child {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 11px !important;
    }

    .h2h-mobile-main-menu .h2h-menu-item {
        grid-template-columns: 24px minmax(0, 1fr) !important;
    }

    .h2h-mobile-menu-toggle > span {
        gap: 9px !important;
    }
}