/* --- TABLET VIEW (740px to 1023px) --- */
@media (min-width: 740px) and (max-width: 1023px) {
    #sidebar {
        width: 84px !important;
        transform: translateX(0) !important;
    }

    #main-content {
        margin-left: 84px !important;
        width: calc(100% - 84px) !important;
    }

    .sidebar-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 4px !important;
        gap: 4px !important;
    }

    .nav-text {
        font-size: 10px !important;
        text-align: center;
        display: block !important;
        opacity: 1 !important;
        width: 100% !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .icon-circle {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    .sidebar-section-title {
        text-align: center;
        padding-left: 0 !important;
        font-size: 9px !important;
        opacity: 1 !important;
        display: block !important;
    }

    .logo-box {
        height: 100px !important;
        padding-top: 20px;
    }

    .logo-box-img {
        padding: 0 !important;
        margin-top: 0 !important;
        flex-direction: column;
    }

    .logo-text {
        display: none !important;
    }

    .logo-box img {
        width: 30px !important;
        padding-right: 0 !important;
        margin-bottom: 5px;
    }

    .toggle-icon-btn {
        display: none !important;
    }

    #sidebar-overlay {
        display: none !important;
    }

    /* Tablet: Position AI Assistant to the right */
    .tablet-right-pos {
        left: auto !important;
        right: 32px !important;
        bottom: 32px !important;
        width: 450px !important;
        max-width: calc(100vw - 120px);
    }

    /* Hide hamburger in header */
    header button[onclick="toggleSidebar()"] {
        display: none !important;
    }

    /* Hide Mobile Nav Wrapper when Sidebar is visible */
    .mobile-nav-wrapper {
        display: none !important;
    }
}

/* --- DESKTOP VIEW (>= 1024px) --- */
@media (min-width: 1024px) {
    .sidebar-expanded {
        width: 260px;
    }

    .sidebar-collapsed {
        width: 92px;
    }

    #main-content.content-expanded {
        margin-left: 260px;
        width: calc(100% - 260px);
    }

    #main-content.content-collapsed {
        margin-left: 92px;
        width: calc(100% - 92px);
    }

    .sidebar-collapsed .nav-text,
    .sidebar-collapsed .logo-text,
    .sidebar-collapsed .sidebar-section-title {
        opacity: 0;
        pointer-events: none;
        width: 0;
        display: none;
    }

    /* Desktop: Remove toggle button */
    .toggle-icon-btn {
        display: none !important;
    }
}

/* --- FAQ RESPONSIVE --- */
#faq-1 { order: 1; }
#faq-2 { order: 2; }
#faq-3 { order: 3; }
#faq-4 { order: 4; }
#faq-5 { order: 5; }

@media (min-width: 1024px) {
    .faq-list {
        flex-direction: row;
        gap: 24px;
        align-items: flex-start;
    }
    .faq-column {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .faq-item {
        order: initial !important;
    }
}

@media (max-width: 768px) {
    .faq-container {
        padding: 0 10px 120px 10px;
    }
    
    .question-text {
        font-size: 15px;
    }
    
    .faq-item {
        padding: 20px;
        border-radius: 28px;
    }

    /* Mobile Filter Modal Optimizations */
    .modal-overlay, #info-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .filter-modal-content,
    .create-ticket-modal,
    .info-modal-content {
        border-radius: 40px 40px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-bottom: 100px !important; /* Reduced to avoid unnecessary scroll */
    }

    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* --- SPLASH RESPONSIVE --- */
@media (min-width: 768px) {
    .splash-body .circle-3 { width: 120vh; height: 120vh; }
    .splash-body .circle-2 { width: 85vh; height: 85vh; }
    .splash-body .circle-1 { width: 55vh; height: 55vh; }
}

/* --- ONBOARDING RESPONSIVE --- */
@media (max-width: 1023px) {
    #prev-arrow,
    #next-arrow {
        display: none !important;
    }
}
/* --- PRIVACY SWEEP RESPONSIVE --- */
@media (min-width: 1024px) {
    .sweep-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 150px);
    }
}

@media (max-width: 1023px) {
    .sweep-illustration {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .sweep-title {
        font-size: 26px;
    }
}
}
/* --- BUSINESS PROFILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .logo-container {
        width: 100px;
        height: 100px;
    }
    .logo-container i {
        font-size: 80px;
    }
}

/* --- USER PROFILE MOBILE VIEW OVERRIDES --- */
@media (max-width: 1023px) {
    .mobile-main-content-card {
        background: linear-gradient(135deg, rgba(60, 203, 255, 0.08) 0%, rgba(90, 28, 255, 0.08) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 40px !important;
        padding: 24px !important;
        box-shadow: 0 10px 30px rgba(90, 28, 255, 0.04) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}