/* =========================================================================
   Blade Template - Mobile Responsive Styles
   Layered on top of existing desktop CSS. Activates only below breakpoints.
   Desktop view (>=1025px) is completely untouched.
   ========================================================================= */

/* === TABLET / SMALL DESKTOP (<=1024px) === */
@media (max-width: 1024px) {
    /* Wrapper + container - full width, drop fixed widths */
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
    .top-panel,
    .top-panel .top-panel-container {
        width: 100% !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    .container,
    .container.public-page,
    .container.guides-fullwidth {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    /* Stop decorative side icons from forcing horizontal space */
    .container::before,
    .container::after {
        display: none !important;
    }
    /* Sidebars + content stack and fill width */
    aside.left-sidebar,
    aside.right-sidebar,
    main.content,
    .left-sidebar,
    .right-sidebar,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .content::before,
    .content::after {
        display: none !important;
    }
    .content img,
    .content video {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Top desktop nav - hide; hamburger in header.php (lg:hidden / mobile-nav) takes over */
    .top-panel .menu {
        display: none !important;
    }
    /* Footer reflows */
    .footer {
        padding: 12px 8px !important;
    }
    .footer * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Header height + logo scaling */
    .header {
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 0 !important;
    }
    .site-logo {
        max-width: 70% !important;
        height: auto !important;
    }
    /* Guides full-width */
    .guides-fullwidth .content {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Public pages width override (was 1075px / 1175px) */
    .container.public-page .content {
        width: 100% !important;
    }
    .container.public-page .content img {
        max-width: 100% !important;
    }
    .container.public-page .content::after {
        width: 100% !important;
    }
    /* Slider/carousel safe */
    .slider,
    .carousel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .slider .slides .slide,
    .slider .slides .slide img {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Tables that overflow horizontally - wrap them */
    table {
        max-width: 100% !important;
    }
    .market-table,
    .ranking-table,
    .guild-table,
    .character-table,
    .news-table,
    .table-wrapper,
    .scroll-x {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    /* News / panels */
    .p-block,
    .news-box,
    .sidebar-title,
    .admincp-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Forms responsive */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .form-input {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* SweetAlert / modals */
    .swal2-popup,
    .modal,
    .ui-dialog {
        max-width: 95vw !important;
        width: 95vw !important;
        box-sizing: border-box !important;
    }
    /* Discord fixed button (often inline-styled) - shrink so it doesn't overlap */
    a[href*="discord.gg"][style*="position: fixed"],
    .discord-fixed,
    .floating-discord {
        right: 8px !important;
        bottom: 8px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    /* Home top-bar: wrap server status + discord */
    .oc-status,
    .top-panel-container > * {
        font-size: 12px !important;
    }
}

/* === LARGE PHONE (<=768px) === */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    .wrapper {
        padding: 0 8px !important;
    }
    /* Hero header + back-link wraps */
    .sidebar-title,
    .news-box .px-4 {
        padding: 10px 12px !important;
    }
    .sidebar-title .title-t {
        font-size: 14px !important;
    }
    .site-logo {
        max-width: 85% !important;
    }
    .header {
        padding: 8px 0 !important;
    }
    /* Stat grids -> single column */
    .grid,
    [class*="grid-cols-"],
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 10px !important;
    }
    /* Vote / Buy Credits package cards: stack */
    .package-card,
    .vote-site-card,
    .stat-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Heading sizes */
    h1, .text-3xl, .text-2xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
    h2, .text-xl {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }
    h3 {
        font-size: 1.05rem !important;
    }
    /* Buttons: touch-friendly */
    button,
    .button,
    .green-button,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 40px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    /* Forms: full width */
    form {
        max-width: 100% !important;
    }
    form input,
    form select,
    form textarea {
        width: 100% !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }
    /* Footer: stack columns */
    .footer .flex,
    .footer [style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    /* Buy Credits / Vote / Dashboard / Generic content padding inside content */
    .content > *,
    main.content > * {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
    /* Padding inside news-box already 4 by tailwind - reduce */
    .p-4 {
        padding: 12px !important;
    }
    /* Vote site card buttons - keep on a new row if needed */
    .vote-site-row,
    .package-row,
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    /* Tables become block-stacked rows */
    .stack-on-mobile,
    table.stack-on-mobile thead {
        display: none !important;
    }
    /* Admincp / forms */
    .admincp-form-row,
    .form-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* === SMALL PHONE (<=480px) === */
@media (max-width: 480px) {
    .wrapper {
        padding: 0 6px !important;
    }
    .top-panel,
    .top-panel .top-panel-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 11px !important;
    }
    .site-logo {
        max-width: 95% !important;
    }
    h1, .text-3xl {
        font-size: 1.25rem !important;
    }
    h2, .text-xl {
        font-size: 1.05rem !important;
    }
    .p-4 {
        padding: 8px !important;
    }
    button,
    .button,
    .green-button {
        font-size: 13px !important;
        padding: 9px 12px !important;
    }
    /* Stack everything inside cards */
    .news-box,
    .p-block,
    .admincp-card {
        padding: 8px !important;
    }
    .swal2-popup,
    .modal {
        font-size: 13px !important;
    }
    /* Hide niceties that crowd small screens */
    .oc-status .oc-label,
    .top-panel .fab.fa-discord + span {
        display: none !important;
    }
}

/* =========================================================================
   MOBILE NAVIGATION: hamburger + slide-in drawer + backdrop
   Hidden on desktop (>=1025px). Shown <=1024px.
   ========================================================================= */

/* Default (desktop): hide everything mobile */
.mb-topbar,
.mb-drawer,
.mb-drawer-backdrop {
    display: none !important;
}

@media (max-width: 1024px) {
    /* Hide original desktop top-panel + Discord absolute button + desktop header logo block */
    .top-panel {
        display: none !important;
    }
    #discord-fixed-btn {
        display: none !important;
    }
    .header {
        display: none !important;
    }
    /* Remove the body padding that the absolute Server Time block used (top: 170px etc.) — replaced by mobile topbar */
    body {
        padding-top: 56px !important; /* room for fixed mobile top bar */
    }
    /* === MOBILE TOP BAR === */
    .mb-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        padding: 0 12px !important;
        background: linear-gradient(180deg, rgba(10, 14, 26, 0.98), rgba(5, 6, 16, 0.98)) !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.35) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
        z-index: 9000 !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
    .mb-topbar-logo {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        justify-content: center !important;
        text-decoration: none !important;
    }
    .mb-topbar-logo img {
        height: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        max-width: 60vw !important;
        object-fit: contain !important;
    }
    .mb-topbar-action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        background: rgba(0, 212, 255, 0.08) !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
        color: #00d4ff !important;
        text-decoration: none !important;
        font-size: 18px !important;
    }
    .mb-topbar-action:hover {
        background: rgba(0, 212, 255, 0.18) !important;
    }
    /* === HAMBURGER BUTTON === */
    .mb-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 40px !important;
        height: 40px !important;
        padding: 10px 8px !important;
        background: rgba(0, 212, 255, 0.08) !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        z-index: 9100 !important;
    }
    .mb-hamburger span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background: #00d4ff !important;
        border-radius: 2px !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }
    /* Animated cross when open */
    body.mb-drawer-open .mb-hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    body.mb-drawer-open .mb-hamburger span:nth-child(2) {
        opacity: 0 !important;
    }
    body.mb-drawer-open .mb-hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    /* === BACKDROP === */
    .mb-drawer-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 9500 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }
    body.mb-drawer-open .mb-drawer-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* === SLIDE-IN DRAWER === */
    .mb-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 84vw !important;
        max-width: 320px !important;
        background: linear-gradient(180deg, #0a0e1a 0%, #050610 100%) !important;
        border-right: 1px solid rgba(0, 212, 255, 0.35) !important;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.7) !important;
        z-index: 9600 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body.mb-drawer-open .mb-drawer {
        transform: translateX(0) !important;
    }
    body.mb-drawer-open {
        overflow: hidden !important;
    }
    .mb-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 18px 18px 14px !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
    }
    .mb-drawer-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: #00d4ff !important;
        text-shadow: 0 0 12px rgba(0, 212, 255, 0.45) !important;
    }
    .mb-drawer-close {
        background: transparent !important;
        border: none !important;
        color: #c0d0e0 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }
    .mb-drawer-close:hover {
        background: rgba(255, 71, 87, 0.15) !important;
        color: #ff4757 !important;
    }
    .mb-drawer-section {
        padding: 14px 18px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.3px !important;
        color: rgba(0, 212, 255, 0.7) !important;
        background: rgba(0, 212, 255, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .mb-drawer-user {
        font-size: 11px !important;
        color: #e0f0ff !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        max-width: 60% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .mb-drawer-nav {
        list-style: none !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    .mb-drawer-nav li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .mb-drawer-nav li a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 13px 20px !important;
        color: #c0d0e0 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border-left: 3px solid transparent !important;
        transition: background 0.18s, color 0.18s, border-color 0.18s !important;
    }
    .mb-drawer-nav li a i {
        width: 20px !important;
        text-align: center !important;
        color: #00d4ff !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    .mb-drawer-nav li a:hover,
    .mb-drawer-nav li a:active {
        background: rgba(0, 212, 255, 0.08) !important;
        color: #e0f0ff !important;
        border-left-color: #00d4ff !important;
    }
    .mb-drawer-nav li a.mb-drawer-logout {
        color: #ff8a95 !important;
        margin-top: 4px !important;
    }
    .mb-drawer-nav li a.mb-drawer-logout i {
        color: #ff4757 !important;
    }
    .mb-drawer-footer {
        margin-top: auto !important;
        padding: 16px 18px 22px !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
    }
    .mb-drawer-discord {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4) !important;
    }
    .mb-drawer-discord:hover {
        background: linear-gradient(135deg, #4752c4 0%, #3641a8 100%) !important;
    }

    /* Adjust .wrapper top spacing now that .header is hidden and topbar is fixed */
    .wrapper {
        padding-top: 8px !important;
    }
    /* Server time / status bar (the absolute block above) - tuck below mobile topbar */
    body > div[style*="position: absolute"][style*="top: 90px"],
    body > div[style*="position: absolute"][style*="top: 30px"] {
        display: none !important;
    }
}

/* === Universal anti-overflow safety net (all sizes) === */
@media (max-width: 1024px) {
    img,
    iframe,
    embed,
    object,
    video {
        max-width: 100% !important;
        height: auto !important;
    }
    pre,
    code {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
    /* Stripe iframe embeds - cover any width spillover */
    iframe[src*="stripe"],
    iframe[name*="stripe"] {
        width: 100% !important;
    }
}