/*
 * Online-Poker.rs - Complete Mobile-First Redesign
 * Version: 7.2
 * Modern Black & White Professional Design
 */

/* ============================================
   CSS VARIABLES - Design System
   ============================================ */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-accent: #c9a227;
    --color-success: #198754;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --transition: all 0.2s ease;
}

/* ============================================
   BASE RESET FOR MOBILE
   ============================================ */
@media screen and (max-width: 768px) {
    /* CRITICAL: Simple scroll fix - avoid complex overrides */
    html, body {
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }

    * {
        box-sizing: border-box !important;
    }

    /* Override fixed heights that break mobile scrolling */
    #wrap,
    #content,
    #contentWrap,
    #tabs-recenzija {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body {
        font-family: var(--font-sans) !important;
        background: var(--color-gray-100) !important;
        color: var(--color-gray-900) !important;
        line-height: 1.6 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ============================================
       GRID SYSTEM OVERRIDE
       ============================================ */
    .panel-content,
    [class*="grid_"],
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_51, .grid_6, .grid_7, .grid_8,
    .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16,
    .container_12 .grid_5, .container_16 .grid_5,
    #tabs .grid_5, #sajtovi .grid_5 {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container_12, .container_16 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ============================================
       HAMBURGER MENU
       ============================================ */
    .hamburger-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
        background: var(--color-black) !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        box-shadow: var(--shadow-lg) !important;
        transition: var(--transition) !important;
    }

    .hamburger-menu:active {
        transform: scale(0.95) !important;
    }

    .hamburger-menu span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--color-white) !important;
        margin: 3px 0 !important;
        border-radius: 2px !important;
        transition: var(--transition) !important;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0 !important;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }

    /* ============================================
       MOBILE LOGO HEADER
       ============================================ */
    .mobile-logo {
        display: block !important;
        background: var(--color-black) !important;
        padding: 24px 16px !important;
        text-align: center !important;
    }

    .mobile-logo h1 {
        font-size: 26px !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
        margin: 0 !important;
    }

    .mobile-logo h1 a {
        color: var(--color-white) !important;
        text-decoration: none !important;
    }

    .mobile-logo p {
        font-size: 12px !important;
        color: var(--color-gray-500) !important;
        margin: 8px 0 0 0 !important;
        font-weight: 400 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    /* ============================================
       HIDE DESKTOP ELEMENTS
       ============================================ */
    #logo,
    #header,
    #button,
    .grid_7.alpha,
    .grid_7,
    body > div[style*="position: absolute"],
    .the_champ_vertical_sharing {
        display: none !important;
    }

    /* ============================================
       MOBILE NAVIGATION
       ============================================ */
    #nav_wrapper {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.98) !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        padding: 80px 24px 40px !important;
    }

    #nav_wrapper.active {
        display: block !important;
    }

    #nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #nav > li {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    #nav > li:last-child {
        border-bottom: none !important;
    }

    #nav > li > a {
        display: block !important;
        padding: 18px 0 !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        color: var(--color-white) !important;
        text-decoration: none !important;
        transition: var(--transition) !important;
    }

    #nav > li > a:hover,
    #nav > li > a:active {
        color: var(--color-gray-400) !important;
    }

    #nav ul,
    #nav .sub-menu,
    #nav ul.sub-menu,
    #nav li ul,
    .menu-item ul,
    .menu-item .sub-menu {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ============================================
       MAIN CONTENT WRAPPER
       ============================================ */
    #wrap {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #content,
    #contentWrap {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #top {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    #top > div {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ============================================
       FEATURED CONTENT CONTAINERS - HIGH SPECIFICITY
       ============================================ */
    body #top,
    body #top > .grid_12,
    body #top #featured,
    body #featured,
    body #mygallery,
    body #mygallery.stepcarousel,
    body div.stepcarousel,
    body .stepcarousel,
    body .stepcarousel .belt,
    body .belt,
    body .stepcarousel .panel,
    body .panel,
    body .panel-content,
    body .container_16,
    body .container_12,
    #top #featured #mygallery.stepcarousel,
    #top #featured #mygallery.stepcarousel .belt,
    #top #featured #mygallery.stepcarousel .belt .panel,
    #top #featured #mygallery.stepcarousel .belt .panel .panel-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        clip: auto !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    /* Force body and html to allow scrolling - simplified */
    html, body {
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }

    /* Override any inline styles on stepcarousel elements */
    #mygallery[style],
    .stepcarousel[style],
    .belt[style],
    .panel[style] {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        left: 0 !important;
    }

    /* ============================================
       TABS SECTION
       ============================================ */
    #tabs-mobile,
    #tabs {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 16px 16px !important;
        overflow: visible !important;
        background: var(--color-gray-100) !important;
    }

    /* Hide the tab button completely */
    .wooTabs.tabs {
        display: none !important;
    }

    .fix {
        display: none !important;
    }

    #tabs .inside,
    #tabs-mobile .inside,
    #sajtovi,
    #sajtovi > div,
    #sajtovi .grid_5,
    #sajtovi .grid_5.omega,
    .featured_text,
    #bonusi,
    #texas {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        float: none !important;
    }

    /* ============================================
       POKER SITES TABLE - PREMIUM CARD DESIGN
       ============================================ */
    .poker-sajtovi,
    table.wp-table-reloaded {
        display: block !important;
        width: 100% !important;
        border-collapse: collapse !important;
        background: transparent !important;
    }

    .poker-sajtovi thead {
        display: none !important;
    }

    .poker-sajtovi tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .poker-sajtovi tbody tr {
        display: grid !important;
        grid-template-columns: 44px 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 4px 12px !important;
        background: var(--color-white) !important;
        border-radius: var(--radius-lg) !important;
        padding: 16px 16px 20px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        border: 1px solid var(--color-gray-200) !important;
        align-items: center !important;
    }

    .poker-sajtovi td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Column 1: Ranking Number */
    .poker-sajtovi td.column-1 {
        grid-row: 1 !important;
        grid-column: 1 !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--color-black) !important;
        color: var(--color-white) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        border-radius: 50% !important;
    }

    /* Column 2: Site Name */
    .poker-sajtovi td.column-2 {
        grid-row: 1 !important;
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        height: 44px !important;
    }

    .poker-sajtovi td.column-2 a {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--color-black) !important;
        text-decoration: none !important;
        letter-spacing: -0.3px !important;
        line-height: 1 !important;
    }

    .poker-sajtovi .icon-logo {
        background: none !important;
        padding-left: 0 !important;
    }

    /* Column 3: Bonus Label + Amount */
    .poker-sajtovi td.column-3 {
        grid-row: 1 !important;
        grid-column: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        height: 44px !important;
        text-align: right !important;
    }

    .poker-sajtovi td.column-3::before {
        content: "Bonusi" !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--color-gray-500) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
    }

    .poker-sajtovi td.column-3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--color-success) !important;
    }

    /* Column 4: CTA Button */
    .poker-sajtovi td.column-4 {
        grid-row: 2 !important;
        grid-column: 1 / 4 !important;
        margin-top: 12px !important;
    }

    .poker-sajtovi td.column-4 a {
        display: block !important;
        width: 100% !important;
        padding: 14px 24px !important;
        background: var(--color-black) !important;
        color: var(--color-white) !important;
        text-align: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border-radius: var(--radius-md) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        transition: var(--transition) !important;
    }

    .poker-sajtovi td.column-4 a:active {
        background: var(--color-gray-800) !important;
        transform: scale(0.98) !important;
    }

    /* ============================================
       ABOUT SECTION
       ============================================ */
    #about {
        margin: 20px 16px !important;
        padding: 24px !important;
        background: var(--color-white) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        border: 1px solid var(--color-gray-200) !important;
    }

    #about h1 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--color-black) !important;
        margin: 0 0 16px 0 !important;
    }

    #about p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: var(--color-gray-700) !important;
        margin: 0 0 12px 0 !important;
    }

    #about p:last-child {
        margin-bottom: 0 !important;
    }

    /* ============================================
       HIDDEN SECTIONS ON MOBILE
       ============================================ */
    #slider_nav,
    #nav_wrapper1,
    #albums,
    #searchform {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ============================================
       MOBILE NAV SEARCH
       ============================================ */
    .mobile-nav-search {
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        margin-bottom: 10px !important;
    }

    .mobile-nav-search input[type="text"] {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
        background: var(--color-gray-800) !important;
        color: var(--color-white) !important;
        -webkit-appearance: none !important;
    }

    .mobile-nav-search input[type="text"]::placeholder {
        color: var(--color-gray-500) !important;
    }

    .mobile-nav-search input[type="text"]:focus {
        outline: none !important;
        background: var(--color-gray-700) !important;
    }

    .mobile-nav-search input[type="submit"] {
        display: none !important;
    }

    /* ============================================
       SEARCH SECTION
       ============================================ */
    #searchform {
        padding: 20px 16px !important;
        background: var(--color-white) !important;
        margin: 20px 16px !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    #searchform > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #searchform input[type="text"] {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
        border: 2px solid var(--color-gray-300) !important;
        border-radius: var(--radius-md) !important;
        background: var(--color-white) !important;
        transition: var(--transition) !important;
        -webkit-appearance: none !important;
    }

    #searchform input[type="text"]:focus {
        border-color: var(--color-black) !important;
        outline: none !important;
    }

    #searchform input[type="submit"] {
        width: 100% !important;
        padding: 16px !important;
        background: var(--color-black) !important;
        color: var(--color-white) !important;
        border: none !important;
        border-radius: var(--radius-md) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        -webkit-appearance: none !important;
    }

    #searchform input[type="submit"]:active {
        background: var(--color-gray-800) !important;
    }

    /* ============================================
       BLOG SECTION
       ============================================ */
    #blog {
        padding: 20px 16px !important;
    }

    #blog h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--color-black) !important;
        border-bottom: 3px solid var(--color-black) !important;
        padding-bottom: 12px !important;
        margin: 0 0 20px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .grid_41 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        height: auto !important;
        background: var(--color-white) !important;
        border-radius: var(--radius-lg) !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        border: 1px solid var(--color-gray-200) !important;
    }

    .grid_41 .box {
        display: flex !important;
        gap: 16px !important;
        padding: 16px !important;
        height: auto !important;
        align-items: flex-start !important;
    }

    .grid_41 .box > div[style] {
        width: 90px !important;
        min-width: 90px !important;
        height: auto !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .grid_41 img.thumbnail {
        width: 90px !important;
        height: 65px !important;
        object-fit: cover !important;
        border-radius: var(--radius-sm) !important;
    }

    .grid_41 h4 {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        margin: 0 0 6px 0 !important;
    }

    .grid_41 h4 a {
        color: var(--color-black) !important;
        text-decoration: none !important;
    }

    .grid_41 .post_meta {
        font-size: 11px !important;
        color: var(--color-gray-500) !important;
    }

    .grid_41 > .box > p:last-of-type {
        display: none !important;
    }

    /* ============================================
       FOOTER
       ============================================ */
    #footer {
        background: var(--color-black) !important;
        padding: 32px 16px !important;
        margin-top: 20px !important;
    }

    #footerWrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    #footerWrap > div {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    #footer h3 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--color-white) !important;
        margin: 0 0 12px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    #footer p,
    #footer li,
    #footer a {
        font-size: 13px !important;
        color: var(--color-gray-500) !important;
        line-height: 1.6 !important;
    }

    #footer a:hover {
        color: var(--color-white) !important;
    }

    #footer ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer li {
        margin-bottom: 8px !important;
    }
}

/* ============================================
   VERY SMALL SCREENS (< 380px)
   ============================================ */
@media screen and (max-width: 380px) {
    .mobile-logo h1 {
        font-size: 22px !important;
    }

    #albums .container_16 {
        grid-template-columns: 1fr !important;
    }

    #nav1 {
        grid-template-columns: 1fr !important;
    }

    .grid_41 .box {
        flex-direction: column !important;
    }

    .grid_41 .box > div[style] {
        width: 100% !important;
    }

    .grid_41 img.thumbnail {
        width: 100% !important;
        height: auto !important;
    }

    .poker-sajtovi tbody tr {
        grid-template-columns: 36px 1fr auto !important;
        gap: 4px 10px !important;
        padding: 14px 12px 18px !important;
    }

    .poker-sajtovi td.column-1 {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .poker-sajtovi td.column-2 {
        height: 36px !important;
    }

    .poker-sajtovi td.column-2 a {
        font-size: 17px !important;
    }

    .poker-sajtovi td.column-3 {
        height: 36px !important;
        font-size: 15px !important;
    }

    .poker-sajtovi td.column-3::before {
        font-size: 9px !important;
    }

    .poker-sajtovi td.column-4 {
        grid-column: 1 / 4 !important;
    }
}

/* ============================================
   DESKTOP STYLES (unchanged)
   ============================================ */
.panel-content {
    float: left;
    width: 780px;
}

.hamburger-menu {
    display: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10000;
}

.hamburger-menu span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #c9a227;
    margin: 6px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.mobile-logo {
    display: none;
}