/* Vamostra Mobile Responsive Styles - FIXED */

/* --- Helper Classes --- */
@media (max-width: 767px) {
    .d-mobile-none {
        display: none !important;
    }

    .d-mobile-block {
        display: block !important;
    }

    .pt-150 {
        padding-top: 100px !important;
    }

    .pb-150 {
        padding-bottom: 100px !important;
    }
}

@media (max-width: 991px) {

    /* --- General Typography --- */
    h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 24px !important;
    }

    p {
        font-size: 15px !important;
    }

    /* --- Header & Navigation --- */
    .header-top-bar {
        display: none !important;
    }

    /* Hide heavy top bar details on mobile */

    .header-navigation {
        padding: 5px 0 !important;
        background: #1c1c1c;
        /* Dark background for Vamostra style */
    }

    .primary-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 5px 0;
    }

    .site-branding img {
        max-width: 120px;
        /* Smaller Logo */
        height: auto;
    }

    /* Hamburger Menu Icon */
    .navbar-toggler {
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
    }

    .navbar-toggler span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        /* White bars */
        border-radius: 2px;
        transition: all 0.3s;
    }

    .main-menu {
        display: none;
        /* Hidden by default */
    }

    /* Mobile Menu Drawer (When active) */
    .mobile-menu-visible .main-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        /* Sidebar width */
        height: 100vh;
        background: #fff;
        z-index: 9999;
        padding: 30px 20px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    /* Overlay for mobile menu */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        display: none;
    }

    .mobile-menu-visible .nav-overlay {
        display: block;
    }

    /* --- Tables --- */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table td,
    .table th {
        white-space: nowrap;
        /* Prevent wrapping in tight spaces */
    }

    /* --- Modals --- */
    .modal-dialog {
        margin: 10px;
    }

    .modal-content {
        border-radius: 15px !important;
    }
}

@media (max-width: 575px) {

    /* --- Profile Page --- */
    .profile-section {
        padding-top: 100px;
    }

    .member-card img {
        width: 80px !important;
        height: 80px !important;
    }

    /* Stack flex containers on very small screens */
    .d-flex.gap-2 {
        flex-direction: column;
    }

    /* --- Admin/Dashboard --- */
    .stats-card {
        margin-bottom: 20px;
    }

    /* --- Cards --- */
    .card-body {
        padding: 1.25rem;
    }

    /* --- Forms --- */
    .form-group {
        margin-bottom: 15px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

    /* --- Footer --- */
    .footer-widget {
        margin-bottom: 30px;
        text-align: center;
    }
}

/* Force Table text wrap on mobile for Descriptions if explicit class used */
.text-wrap-mobile {
    white-space: normal !important;
}

/* Fix Login/Register Modal on Mobile */
#loginModal .modal-dialog,
#registerModal .modal-dialog {
    max-width: 95%;
    margin: 20px auto;
}