/* ========================================
   XENTRA NETWORK - MOBILE RESPONSIVE CSS
   Universal Mobile Compatibility for ALL Devices
   ======================================== */

/* ===== RESET & BASE MOBILE OPTIMIZATIONS ===== */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ===== UNIVERSAL MOBILE (All phones 320px - 768px) ===== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
    }
    
    /* Container adjustments */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Navigation Bar */
    .navbar {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
    }
    
    .nav-brand, .nav-brand h2 {
        font-size: 1.2rem !important;
    }
    
    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 1rem;
    }
    
    .nav-menu.active {
        display: flex !important;
    }
    
    .nav-menu li {
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .nav-menu a, .btn-login, .btn-register {
        width: 100%;
        text-align: center;
        padding: 0.75rem !important;
    }
    
    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle {
        display: block !important;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        margin-left: auto;
    }
    
    /* Sidebar */
    .sidebar {
        width: 100% !important;
        max-width: 280px !important;
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Main Content */
    .main-content {
        margin-left: 0 !important;
        padding: 1rem !important;
        padding-top: 80px !important;
        width: 100% !important;
    }
    
    /* Hero Section */
    .hero {
        padding: 2rem 1rem !important;
        min-height: 70vh !important;
        height: auto !important;
    }
    
    .hero h1, .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .hero h2 {
        font-size: 1.5rem !important;
    }
    
    .hero p, .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    .hero-badge {
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
    }
    
    /* Cards & Service Cards */
    .service-card, .settings-card, .card {
        margin-bottom: 0 !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
    
    .service-card-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.875rem !important;
        padding: 1.25rem !important;
        margin-bottom: 0 !important;
        justify-content: flex-start !important;
    }
    
    .service-card-header > div[style*="display: flex"] {
        display: flex !important;
        align-items: center !important;
        gap: 0.875rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .service-card-header h3 {
        font-size: 1.1rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .service-card-title {
        font-size: 1.1rem !important;
    }
    
    .service-card-body {
        padding: 0 1.25rem 1.25rem 1.25rem !important;
    }
    
    .service-card-footer {
        flex-direction: row !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
        padding: 1.25rem !important;
    }
    
    .service-card-footer button,
    .service-card-footer .btn {
        flex: 1 !important;
        min-width: 120px !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: 48px !important;
    }
    
    /* Grid Layouts */
    .grid, .stats-grid, .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Keep services grid responsive but not too narrow on mobile */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 1.5rem !important;
    }
    
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .stat-card {
        padding: 1rem !important;
    }
    
    /* Pricing Cards */
    .pricing-card {
        margin-bottom: 1.5rem !important;
        padding: 1.5rem !important;
    }
    
    .pricing-card h3 {
        font-size: 1.3rem !important;
    }
    
    .price {
        font-size: 2rem !important;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Fix checkboxes and radio buttons on mobile */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin-right: 10px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transform: scale(1) !important;
    }
    
    /* Override any other checkbox styles */
    .checkbox-label input[type="checkbox"],
    .form-options input[type="checkbox"],
    label input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    /* Fix checkbox labels */
    .checkbox-label,
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        cursor: pointer !important;
    }
    
    .checkbox-label span,
    label:has(input[type="checkbox"]) span,
    label:has(input[type="radio"]) span {
        flex: 1 !important;
        line-height: 1.4 !important;
    }
    
    /* Form options wrapper */
    .form-options {
        margin: 1rem 0 !important;
    }
    
    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Buttons */
    .btn, button, .button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
        min-height: 48px;
        touch-action: manipulation;
    }
    
    .btn-full {
        width: 100% !important;
    }
    
    .button-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .button-group .btn {
        width: 100% !important;
    }
    
    /* Tables - Responsive */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    thead {
        display: none; /* Hide on mobile */
    }
    
    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 1rem;
    }
    
    td {
        display: block;
        text-align: right;
        padding: 0.5rem 0;
        border: none;
    }
    
    td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: var(--text-secondary);
    }
    
    /* Modals */
    .modal {
        padding: 0.5rem !important;
    }
    
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header h3 {
        font-size: 1.2rem !important;
    }
    
    /* Notifications & Toasts */
    .toast-container {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
    }
    
    .toast {
        min-width: auto !important;
        width: 100% !important;
        font-size: 0.9rem !important;
    }
    
    .notification {
        width: calc(100% - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Auth Pages */
    .auth-container {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
    }
    
    .auth-card {
        padding: 1.5rem !important;
    }
    
    .auth-info {
        display: none; /* Hide side info on mobile */
    }
    
    /* Footer */
    footer {
        padding: 2rem 1rem !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
    
    /* Hide desktop navigation buttons on mobile */
    .navbar .nav-menu,
    .navbar .user-menu,
    #logoutBtn,
    #dashboardBtn,
    #cartBtn,
    .btn-logout,
    #themeToggle,
    .theme-toggle,
    .user-icon,
    .logout-icon {
        display: none !important;
    }
    
    /* AGGRESSIVE: Hide ALL theme toggles and logout buttons on mobile */
    button#themeToggle,
    button[id="themeToggle"],
    button[onclick*="logout"],
    button[onclick*="toggleTheme"],
    a[onclick*="logout"],
    .top-bar button:not(#notificationBtn):not([id="notificationBtn"]),
    .top-bar a:not(.notification-icon),
    header button:not(.mobile-menu-btn):not(#notificationBtn):not([id="notificationBtn"]),
    nav button:not(.mobile-menu-btn):not(#notificationBtn):not([id="notificationBtn"]) {
        display: none !important;
    }
    
    /* KEEP notification bell visible on mobile */
    #notificationBtn,
    button#notificationBtn,
    .notification-icon,
    .bell-icon {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 15px !important;
        right: 75px !important; /* Move left of hamburger */
        z-index: 999998 !important; /* Below hamburger but above everything else */
    }
    
    /* Hide person/user icons everywhere except mobile menu and notifications */
    .fa-user:not(.mobile-menu-item *):not(.mobile-menu-user *),
    .fa-sign-out-alt:not(.mobile-menu-item *),
    .fa-sun:not(.mobile-menu-item *),
    .fa-moon:not(.mobile-menu-item *),
    i.fa-user:not(.mobile-menu-item i):not(.mobile-menu-user i),
    i.fa-sign-out-alt:not(.mobile-menu-item i),
    i.fas.fa-user:not(.mobile-menu-item *):not(.mobile-menu-user *),
    i.fas.fa-sign-out-alt:not(.mobile-menu-item *) {
        display: none !important;
    }
    
    /* KEEP notification bell icon visible */
    .fa-bell,
    i.fa-bell,
    i.fas.fa-bell,
    .notification-icon i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide dashboard links that aren't in mobile menu */
    a[href="/dashboard"]:not(.mobile-menu-item),
    a[href="dashboard"]:not(.mobile-menu-item),
    a[href="dashboard.html"]:not(.mobile-menu-item) {
        display: none !important;
    }
    
    /* Hide top navigation buttons in header/top-bar */
    .top-navbar button:not(.mobile-menu-btn),
    .header-actions button:not(.mobile-menu-btn),
    .nav-actions button:not(.mobile-menu-btn) {
        display: none !important;
    }
}

/* ===== SMALL PHONES - Service Card Refinements (480px) ===== */
@media (max-width: 480px) {
    .service-card-header {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    
    .service-card-header > div[style*="display: flex"] {
        gap: 0.75rem !important;
    }
    
    .service-card-header h3,
    .service-card-header h3.service-name {
        font-size: 1rem !important;
    }
    
    .service-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 1.3rem !important;
    }
    
    .service-status {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.85rem !important;
    }
    
    .service-name {
        font-size: 1rem !important;
    }
    
    .service-card-body {
        padding: 0 1rem 1rem 1rem !important;
    }
    
    .service-card-body p {
        font-size: 0.85rem !important;
    }
    
    .detail-item {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.375rem !important;
    }
    
    .detail-item i {
        width: 16px !important;
        font-size: 0.8rem !important;
    }
    
    .service-card-footer {
        padding: 1rem !important;
    }
    
    .service-card-footer button {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
        min-height: 46px !important;
    }
}

/* ===== EXTRA SMALL PHONES (iPhone SE, Galaxy S, 320px - 375px) ===== */
@media (max-width: 375px) {
    body {
        font-size: 14px !important;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
    }
    
    .hero p {
        font-size: 0.9rem !important;
    }
    
    .btn, button {
        padding: 0.65rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    .pricing-card {
        padding: 1rem !important;
    }
    
    .price {
        font-size: 1.8rem !important;
    }
    
    input, select, textarea {
        padding: 0.65rem !important;
        font-size: 15px !important;
    }
}

/* ===== SMALL PHONES (iPhone 12/13, Pixel, 376px - 414px) ===== */
@media (min-width: 376px) and (max-width: 414px) {
    .hero h1 {
        font-size: 1.7rem !important;
    }
    
    .pricing-card {
        padding: 1.25rem !important;
    }
}

/* ===== MEDIUM PHONES (iPhone Pro Max, Samsung Galaxy, 415px - 480px) ===== */
@media (min-width: 415px) and (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hero h1 {
        font-size: 1.9rem !important;
    }
}

/* ===== LARGE PHONES (481px - 767px) ===== */
@media (min-width: 481px) and (max-width: 767px) {
    .services-grid, .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .hero h1 {
        font-size: 2rem !important;
    }
}

/* ===== TABLETS (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 240px !important;
        transform: translateX(0) !important;
    }
    
    .main-content {
        margin-left: 240px !important;
        padding: 2rem !important;
    }
    
    .services-grid, .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .navbar {
        padding: 1rem 2rem !important;
    }
    
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh !important;
        padding: 1rem !important;
    }
    
    .sidebar {
        transform: translateX(-100%);
    }
    
    .modal-content {
        max-height: 80vh !important;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Larger tap targets (Apple HIG recommends 44x44px min) */
    a, button, .btn, input[type="checkbox"], input[type="radio"], select {
        min-height: 48px !important;
        min-width: 48px !important;
    }
    
    /* Touch feedback */
    button:active, .btn:active, a:active {
        opacity: 0.7;
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
    
    /* Prevent text selection on UI elements */
    button, .btn, .nav-menu {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better scrollbars */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* ===== CART MOBILE OPTIMIZATION ===== */
@media (max-width: 768px) {
    /* Order summary section */
    #cartSummary {
        display: block !important;
        width: 100% !important;
        padding: 1.25rem !important;
        margin-top: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
    
    #cartSummary .settings-card-header {
        margin-bottom: 1.25rem !important;
    }
    
    #cartSummary .settings-card-header h2 {
        font-size: 1.25rem !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .info-item {
        padding: 1rem 1.25rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: rgba(59, 130, 246, 0.05) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(59, 130, 246, 0.1) !important;
    }
    
    .info-item .info-label {
        font-size: 0.95rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .info-item .info-value {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
    }
    
    /* Button group in cart summary */
    #cartSummary .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    #cartSummary .button-group .btn-danger,
    #cartSummary .button-group .btn-success,
    #cartSummary .button-group button {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        border-radius: 10px !important;
        min-height: 50px !important;
        transition: all 0.2s !important;
    }
    
    #cartSummary .button-group button:active {
        transform: scale(0.98) !important;
    }
    
    /* Product recommendations section */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .service-card {
        padding: 0 !important;
    }
    
    .service-card-header > div[style*="display: flex"] {
        display: flex !important;
        align-items: center !important;
        gap: 0.875rem !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }
    
    .service-card-header h3.service-name {
        font-size: 1.1rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        flex: 1 !important;
        word-break: break-word !important;
        min-width: 0 !important;
    }
    
    .service-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        font-size: 1.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .service-status {
        flex: 1 1 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        margin-left: 0 !important;
    }
    
    .service-name {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    
    .service-card-body h3 {
        font-size: 1.1rem !important;
    }
    
    .service-card-body p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    .service-details {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem !important;
        margin-top: 1rem !important;
    }
    
    .detail-item {
        font-size: 0.875rem !important;
        padding: 0.625rem 0.5rem !important;
        background: rgba(59, 130, 246, 0.05) !important;
        border-radius: 8px !important;
        gap: 0.5rem !important;
    }
    
    .detail-item i {
        width: 18px !important;
        font-size: 0.875rem !important;
    }
    
    .service-card-footer button {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* Empty state */
    .empty-state {
        padding: 3rem 1.5rem !important;
    }
    
    .empty-icon {
        font-size: 4rem !important;
    }
    
    .empty-state h3 {
        font-size: 1.25rem !important;
    }
    
    .empty-state p {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .empty-state .btn-primary {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }
}

/* ===== CHECKOUT MOBILE ===== */
@media (max-width: 768px) {
    /* Hide payment methods section (for paid plans) */
    #paymentSection,
    .payment-method-card,
    #cardForm,
    .payment-form-section {
        display: none !important;
    }
    
    /* SUPER AGGRESSIVE: Force checkout to be single column */
    .settings-container > div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .checkout-container {
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .checkout-content {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
    }
    
    .payment-method-card {
        padding: 1rem !important;
        margin-bottom: 1rem;
    }
    
    /* NUCLEAR: Force EVERY settings-card in checkout to show */
    .settings-container .settings-card {
        position: static !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 1rem 0 !important;
    }
    
    /* Force all children to show */
    .settings-container .settings-card * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .settings-container .settings-card .settings-card-header * {
        display: block !important;
    }
    
    /* Force order items to show */
    #orderItems,
    #orderItems * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force info-grid items */
    .info-grid {
        display: block !important;
    }
    
    .info-item {
        display: flex !important;
        justify-content: space-between !important;
        margin: 0.5rem 0 !important;
    }
    
    .info-item * {
        display: inline-block !important;
    }
    
    /* Force alert to show */
    .alert,
    .alert * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .alert ul {
        display: block !important;
    }
    
    .alert li {
        display: list-item !important;
    }
}

/* ===== TICKET SYSTEM MOBILE ===== */
@media (max-width: 768px) {
    .ticket-card {
        padding: 1rem !important;
    }
    
    .ticket-header {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .ticket-actions {
        width: 100% !important;
    }
    
    .ticket-actions button {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
}

/* ===== ADMIN PANEL MOBILE ===== */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .admin-stats {
        grid-template-columns: 1fr !important;
    }
    
    .admin-table-container {
        overflow-x: auto;
    }
}

/* ===== BLOG MOBILE ===== */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
    
    .blog-card {
        margin-bottom: 1.5rem !important;
    }
}

/* ===== SERVICES PAGE MOBILE ===== */
@media (max-width: 768px) {
    .filter-buttons {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .filter-btn {
        flex: 1 1 calc(50% - 0.25rem) !important;
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }
    
    .service-details {
        padding: 1rem !important;
    }
}

/* ===== COOKIE NOTIFICATION MOBILE ===== */
@media (max-width: 768px) {
    .cookie-notification {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        padding: 1rem !important;
    }
    
    .cookie-content {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .cookie-actions {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    .cookie-btn {
        width: 100% !important;
    }
}

/* ===== iOS SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari safe area */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Fix iOS input zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* iOS momentum scrolling */
    .modal-content, .sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== ANDROID SPECIFIC FIXES ===== */
@media (max-width: 768px) {
    /* Fix Android keyboard issues */
    input:focus, textarea:focus {
        font-size: 16px !important;
    }
}

/* ===== HIGH DPI SCREENS (Retina, etc) ===== */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 768px) and (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===== PRINT STYLES (Bonus) ===== */
@media print {
    .sidebar, .navbar, .cookie-notification, .toast-container {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
}