/* ==========================================================================
   SocialPulse Mobile Responsive Overrides
   ========================================================================== */

/* Hide mobile-specific top bar by default on desktop */
.mobile-top-bar {
    display: none;
}

.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
}

@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        height: 100% !important;
    }
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100% !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        background-color: #0c0a15 !important;
        background-image: 
            radial-gradient(circle at 80% 10%, rgba(168, 85, 247, 0.16) 0%, transparent 60%),
            radial-gradient(circle at 10% 90%, rgba(6, 182, 212, 0.1) 0%, transparent 60%) !important;
        background-attachment: scroll !important;
    }

    /* Mobile Top Bar Navigation */
    .mobile-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 480px !important;
        height: 60px;
        background: rgba(12, 14, 20, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0 1rem;
        z-index: 998;
    }

    .mobile-menu-btn {
        background: transparent;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .mobile-menu-btn:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-logo-icon {
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(157, 78, 221, 0.3);
    }

    .mobile-logo-icon i {
        width: 15px;
        height: 15px;
        color: white;
    }

    .mobile-logo-text {
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.3px;
        background: linear-gradient(to right, #ffffff, #e2e8f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .mobile-right-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-balance-badge {
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(6, 214, 160, 0.08);
        border: 1px solid rgba(6, 214, 160, 0.15);
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--accent-cyan);
    }

    /* Sidebar Navigation - Responsive Slide-out */
    .sidebar,
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        margin-left: 0 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.6) !important;
        background-color: var(--bg-sidebar) !important;
        border-right: 1px solid var(--border-color) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.sidebar-open .sidebar,
    body.sidebar-open .admin-sidebar {
        left: 0 !important;
    }

    body.sidebar-open .mobile-sidebar-overlay {
        display: block;
    }

    body.sidebar-open .bottom-nav {
        display: none !important;
    }

    /* Main Content Adjustments */
    .main-content,
    .admin-main,
    .main-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 95px !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
    }

    .admin-layout {
        grid-template-columns: 1fr !important;
        min-height: 100vh !important;
    }

    .top-bar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(65px + env(safe-area-inset-top, 0px)) !important;
        background: rgba(12, 14, 20, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 0 12px !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 998 !important;
        box-sizing: border-box !important;
    }

    .top-bar .page-title-section h2 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }

    .top-bar .page-title-section p {
        display: none !important;
    }

    .top-bar .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .top-bar .header-actions > button,
    .top-bar .header-actions .btn-icon {
        display: inline-flex !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .top-bar #open-topup-btn {
        display: inline-flex !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #a855f7, #9333ea) !important;
        border: none !important;
        color: #ffffff !important;
    }
    .top-bar #open-topup-btn i, 
    .top-bar #open-withdraw-btn i {
        width: 12px !important;
        height: 12px !important;
    }

    /* Layout Grids & Panels */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
        gap: 0.75rem !important;
    }

    .analytics-layout,
    .panel-split-layout,
    .support-layout,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Country Select Grid Responsiveness (One-Time SMS & Rent Numbers) */
    .country-grid-scroll-container {
        height: 340px !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .country-select-grid,
    .country-grid,
    #one-time-countries-grid,
    #rental-countries-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .country-card,
    .country-item,
    .country-option {
        padding: 8px 6px !important;
        min-height: 54px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .country-card h4,
    .country-card .country-name,
    .country-item span,
    .country-option h4 {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .country-card p,
    .country-card .country-price,
    .country-item small {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
    }

    /* Universal Mobile Responsive Cards & Panels (Swap Crypto Style) */
    .view-panel,
    .overview-step-card,
    .boost-step-card,
    .rent-step-card,
    .one-time-step-card,
    .sell-step-card,
    .gift-step-card,
    .settings-section-container,
    .wizard-step-panel,
    .dashboard-card,
    .pricing-summary-card,
    .active-sim-details-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 14px !important;
    }



    /* Sell Gift Card Layout Spacing & Clustering Fix */
    .gift-lounge-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .gift-lounge-stats {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .sell-wizard-layout,
    .gift-split-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px !important;
    }

    /* Form Fields and Containers */
    .form-group, .form-row, .grid-2, .grid-3, .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .form-input, .form-select, textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .form-group-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Mobile Settings Container Layout Adjustments */
    .settings-section-container div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .settings-section-container input[type="text"],
    .settings-section-container input[type="tel"],
    .settings-section-container input[type="email"],
    .settings-section-container input[type="password"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* SMS / Rental Panel Layouts */
    .sms-layout,
    .rent-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .table-container,
    .table-responsive,
    .history-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-top: 0.5rem;
        border-radius: var(--border-radius-sm);
        border: 1px solid var(--border-color);
        background: rgba(0, 0, 0, 0.15);
    }

    .table-container table,
    .table-responsive table,
    .history-table-wrapper table {
        min-width: 600px !important; /* Force width so it scrolls */
        width: 600px !important;
        table-layout: auto !important;
    }

    .table th,
    .table td {
        white-space: nowrap !important;
        padding: 10px 12px !important;
    }

    .table td.text-secondary {
        white-space: normal !important;
        min-width: 180px !important;
    }

    /* Cards lists and denoms */
    .active-leases-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .denom-pills-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .platform-grid,
    .country-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .platform-card,
    .country-card {
        min-width: 0 !important;
    }
    
    .platform-card span,
    .country-card span {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-service-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .service-card {
        min-width: 0 !important;
        padding: 8px 4px !important;
    }

    .service-card span {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gift-lounge-panel .vault-shelf {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Styling of card details */
    .dashboard-card,
    .panel-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    /* Hero wallet balance chart overrides */
    #view-overview .dashboard-card {
        padding: 15px 10px !important;
        margin-bottom: 15px !important;
        border-radius: 16px !important;
    }
    
    .balance-chart-wrapper,
    .balance-svg-ring {
        width: 160px !important;
        height: 160px !important;
    }
    
    .balance-text-center h2 {
        font-size: 26px !important;
        letter-spacing: -1px !important;
    }
    
    .balance-text-center h3 {
        font-size: 13px !important;
    }

    /* Form and general compact spacings */
    .form-group {
        margin-bottom: 0.85rem !important;
    }
    
    .form-row, .grid-2, .grid-3, .grid-4 {
        gap: 8px !important;
    }
    
    .form-input {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Align items and flex elements */
    .wallet-card-header,
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .header-actions-group {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* Adjust page-level padding/headings */
    .section-title {
        font-size: 1.1rem !important;
    }

    /* Custom scrollbars inside country selector list */
    .country-grid-scroll-container,
    .platform-grid-scroll-container {
        height: 250px !important;
    }

    /* Auth panel responsiveness */
    .auth-container {
        width: 95% !important;
        max-width: 420px !important;
        margin: 1rem auto !important;
        padding: 1.5rem !important;
    }

    .auth-card {
        padding: 1.5rem !important;
    }

    .auth-header h2 {
        font-size: 1.5rem !important;
    }

    /* Topup overlay grids */
    .topup-amount-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* Hide hamburger menu button on mobile/simulator layout */
    .menu-btn,
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Show mobile menu button and keep sidebar enabled on mobile/simulator layouts */
    .sidebar {
        display: flex !important;
    }
    
    .hexagon-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(157, 78, 221, 0.1) !important;
        border: 1px solid rgba(157, 78, 221, 0.2) !important;
        border-radius: 50% !important;
        color: var(--accent-purple) !important;
        cursor: pointer;
        width: 38px;
        height: 38px;
    }
    
    .hexagon-menu-btn:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 2px 12px rgba(171, 71, 188, 0.6));
    }
    
    .hex-logo-svg {
        width: 100%;
        height: 100%;
    }
    
    .hex-outer-polygon {
        fill: var(--accent-purple);
        stroke: rgba(255, 255, 255, 0.1);
        stroke-width: 3;
    }
    
    .hex-inner-path {
        fill: none;
        stroke: #ffffff;
        stroke-width: 6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Floating Pill Bottom Navigation */
    .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        height: 64px;
        background: linear-gradient(135deg, rgba(22, 19, 39, 0.96), rgba(15, 12, 28, 0.98)) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(168, 85, 247, 0.2) !important;
        border-radius: 32px;
        z-index: 999;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(171, 71, 188, 0.15);
    }
    
    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 60px;
        height: 100%;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .bottom-nav-item span {
        display: none !important; /* Hide text label for Exodus-style clean layout */
    }
    
    .bottom-nav-item i {
        width: 22px;
        height: 22px;
        color: var(--text-secondary);
        transition: transform 0.2s, color 0.2s;
    }
    
    .bottom-nav-item.active i {
        color: var(--accent-purple) !important;
        filter: drop-shadow(0 0 6px var(--accent-purple-glow));
        transform: scale(1.1);
    }
    
    .main-content {
        padding-bottom: 95px !important; /* Space for floating bottom nav bar */
    }

    /* Landscape Rotation Mode CSS Simulation */
    body.force-landscape {
        overflow: hidden !important;
    }

    body.force-landscape .bottom-nav {
        display: none !important;
    }

    body.force-landscape #btn-services-drawer-open {
        display: none !important;
    }

    body.force-landscape #btn-back-to-portrait {
        display: flex !important;
    }

    @media (orientation: portrait) {
        body.force-landscape {
            position: fixed !important;
            width: 100vw !important;
            height: 100vh !important;
        }

        body.force-landscape .main-content {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            width: 100vh !important; /* Mobile height as landscape width */
            height: 100vw !important; /* Mobile width as landscape height */
            transform: translate(-50%, -50%) rotate(90deg) !important;
            transform-origin: center center !important;
            z-index: 9999 !important;
            overflow-y: auto !important;
        margin-bottom: 30px;
        width: 100%;
    }
    
    .mobile-service-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0 4px;
        margin-bottom: 2px;
    }
    
    .mobile-service-header h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.2px;
    }
    
    .mobile-service-header span {
        font-size: 11px;
        color: var(--text-muted);
    }
    
    .mobile-service-row {
        background: linear-gradient(135deg, rgba(22, 19, 39, 0.65) 0%, rgba(13, 11, 23, 0.65) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 12px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    
    .mobile-service-row:active {
        transform: scale(0.98);
        border-color: rgba(171, 71, 188, 0.3);
        box-shadow: 0 0 12px rgba(171, 71, 188, 0.15);
    }
    
    .service-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .service-icon-pill {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .service-icon-pill i {
        width: 18px;
        height: 18px;
        color: #fff;
    }
    
    /* Specific service color glow backdrops matching Exodus assets style */
    .sms-pill {
        background: linear-gradient(135deg, #2ec4b6, #0f9d90);
        box-shadow: 0 4px 10px rgba(46, 196, 182, 0.3);
    }
    .rental-pill {
        background: linear-gradient(135deg, #ffd166, #e0a91f);
        box-shadow: 0 4px 10px rgba(255, 209, 102, 0.3);
    }
    .booster-pill {
        background: linear-gradient(135deg, #9d4edd, #6a1b9a);
        box-shadow: 0 4px 10px rgba(157, 78, 221, 0.3);
    }
    .gift-pill {
        background: linear-gradient(135deg, #ff007f, #c2005f);
        box-shadow: 0 4px 10px rgba(255, 0, 127, 0.3);
    }
    .sell-pill {
        background: linear-gradient(135deg, #06d6a0, #04926c);
        box-shadow: 0 4px 10px rgba(6, 214, 160, 0.3);
    }
    .swap-pill {
        background: linear-gradient(135deg, #ec407a, #ad1457);
        box-shadow: 0 4px 10px rgba(236, 64, 122, 0.3);
    }
    .history-pill {
        background: linear-gradient(135deg, #1f93fd, #0056b3);
        box-shadow: 0 4px 10px rgba(31, 147, 253, 0.3);
    }
    .settings-pill {
        background: linear-gradient(135deg, #ab47bc, #4a148c);
        box-shadow: 0 4px 10px rgba(171, 71, 188, 0.3);
    }
    
    .service-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .service-name {
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
    }
    
    .service-desc {
        font-size: 10px;
        color: var(--text-muted);
    }
    
    .service-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    
    .service-action-badge {
        font-size: 9px;
        font-weight: 700;
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.05);
        padding: 2px 6px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .service-price {
        font-size: 12px;
        font-weight: 700;
        color: #ffd166; /* Exodus-style gold highlight color */
    }
    
    /* Style overrides for stats grid and analytics components to fit beautifully on mobile */
    .stats-grid {
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .stat-card {
        padding: 10px !important;
        gap: 8px !important;
    }
    .stat-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
    .stat-icon-wrapper i {
        width: 16px !important;
        height: 16px !important;
    }
    .stat-label {
        font-size: 10px !important;
    }
    .stat-val {
        font-size: 14px !important;
    }
    
    .analytics-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .quick-actions-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .quick-action-btn {
        padding: 10px !important;
    }
    
    .quick-action-btn .action-icon {
        width: 30px !important;
        height: 30px !important;
        margin-right: 10px !important;
    }

    .quick-action-btn .action-icon i {
        width: 15px !important;
        height: 15px !important;
    }

    .quick-action-btn .action-text h4 {
        font-size: 0.8rem !important;
    }

    .quick-action-btn .action-text p {
        font-size: 10px !important;
    }
}
}

/* Also apply these same rules when the desktop simulator is active */
body.simulator-active .mobile-services-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 30px;
    width: 100%;
}

body.simulator-active .mobile-service-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 4px;
    margin-bottom: 2px;
}

body.simulator-active .mobile-service-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

body.simulator-active .mobile-service-header span {
    font-size: 11px;
    color: var(--text-muted);
}

body.simulator-active .mobile-service-row {
    background: linear-gradient(135deg, rgba(22, 19, 39, 0.65) 0%, rgba(13, 11, 23, 0.65) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

body.simulator-active .mobile-service-row:active {
    transform: scale(0.98);
    border-color: rgba(171, 71, 188, 0.3);
    box-shadow: 0 0 12px rgba(171, 71, 188, 0.15);
}

body.simulator-active .service-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.simulator-active .service-icon-pill {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body.simulator-active .service-icon-pill i {
    width: 18px;
    height: 18px;
    color: #fff;
}

body.simulator-active .sms-pill {
    background: linear-gradient(135deg, #2ec4b6, #0f9d90);
    box-shadow: 0 4px 10px rgba(46, 196, 182, 0.3);
}
body.simulator-active .rental-pill {
    background: linear-gradient(135deg, #ffd166, #e0a91f);
    box-shadow: 0 4px 10px rgba(255, 209, 102, 0.3);
}
body.simulator-active .booster-pill {
    background: linear-gradient(135deg, #9d4edd, #6a1b9a);
    box-shadow: 0 4px 10px rgba(157, 78, 221, 0.3);
}
body.simulator-active .gift-pill {
    background: linear-gradient(135deg, #ff007f, #c2005f);
    box-shadow: 0 4px 10px rgba(255, 0, 127, 0.3);
}
body.simulator-active .sell-pill {
    background: linear-gradient(135deg, #06d6a0, #04926c);
    box-shadow: 0 4px 10px rgba(6, 214, 160, 0.3);
}
body.simulator-active .swap-pill {
    background: linear-gradient(135deg, #ec407a, #ad1457);
    box-shadow: 0 4px 10px rgba(236, 64, 122, 0.3);
}
body.simulator-active .history-pill {
    background: linear-gradient(135deg, #1f93fd, #0056b3);
    box-shadow: 0 4px 10px rgba(31, 147, 253, 0.3);
}
body.simulator-active .settings-pill {
    background: linear-gradient(135deg, #ab47bc, #4a148c);
    box-shadow: 0 4px 10px rgba(171, 71, 188, 0.3);
}

body.simulator-active .service-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.simulator-active .service-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

body.simulator-active .service-desc {
    font-size: 10px;
    color: var(--text-muted);
}

body.simulator-active .service-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

body.simulator-active .service-action-badge {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.simulator-active .service-price {
    font-size: 12px;
    font-weight: 700;
    color: #ffd166;
}

body.simulator-active .stats-grid {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
}
body.simulator-active .stat-card {
    padding: 10px !important;
    gap: 8px !important;
}
body.simulator-active .stat-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
}
body.simulator-active .stat-icon-wrapper i {
    width: 16px !important;
    height: 16px !important;
}
body.simulator-active .stat-label {
    font-size: 10px !important;
}
body.simulator-active .stat-val {
    font-size: 14px !important;
}

body.simulator-active .analytics-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

body.simulator-active .quick-actions-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body.simulator-active .quick-action-btn {
    padding: 10px !important;
}

body.simulator-active .quick-action-btn .action-icon {
    width: 30px !important;
    height: 30px !important;
    margin-right: 10px !important;
}

body.simulator-active .quick-action-btn .action-icon i {
    width: 15px !important;
    height: 15px !important;
}

body.simulator-active .quick-action-btn .action-text h4 {
    font-size: 0.8rem !important;
}

body.simulator-active .quick-action-btn .action-text p {
    font-size: 10px !important;
}

/* Simulator specific card and balance chart shrinking overrides */
body.simulator-active .dashboard-card,
body.simulator-active .panel-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

body.simulator-active #view-overview .dashboard-card {
    padding: 15px 10px !important;
    margin-bottom: 15px !important;
    border-radius: 16px !important;
}

body.simulator-active .balance-chart-wrapper,
body.simulator-active .balance-svg-ring {
    width: 160px !important;
    height: 160px !important;
}

body.simulator-active .balance-text-center h2 {
    font-size: 26px !important;
    letter-spacing: -1px !important;
}

body.simulator-active .balance-text-center h3 {
    font-size: 13px !important;
}

body.simulator-active .form-group {
    margin-bottom: 0.85rem !important;
}

body.simulator-active .form-row, 
body.simulator-active .grid-2, 
body.simulator-active .grid-3, 
body.simulator-active .grid-4 {
    gap: 8px !important;
}

body.simulator-active .form-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

body.simulator-active .mobile-services-list {
    margin-top: 10px !important;
}

body.simulator-active .mobile-service-row {
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 0.5rem !important;
    }
}

body.simulator-active .content-wrapper {
    padding: 0.5rem !important;
}

/* Landscape and horizontal styling tweaks */
@media (max-width: 992px) and (orientation: landscape), (max-height: 480px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    .analytics-layout {
        display: grid !important;
        grid-template-columns: 1.2fr 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }
}

body.force-landscape .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}

body.force-landscape .analytics-layout {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
}

/* Disable wizard step pagination for Overview on mobile and simulator viewports */
.overview-wizard-layout[data-current-step] .overview-step-card:not([data-step]),
.overview-wizard-layout[data-current-step="1"] .overview-step-card:not([data-step="01"]),
.overview-wizard-layout[data-current-step="2"] .overview-step-card:not([data-step="02"]),
.overview-wizard-layout[data-current-step="3"] .overview-step-card:not([data-step="03"]),
.overview-wizard-layout[data-current-step="4"] .overview-step-card:not([data-step="04"]),
body.simulator-active .overview-wizard-layout[data-current-step="1"] .overview-step-card:not([data-step="01"]),
body.simulator-active .overview-wizard-layout[data-current-step="2"] .overview-step-card:not([data-step="02"]),
body.simulator-active .overview-wizard-layout[data-current-step="3"] .overview-step-card:not([data-step="03"]),
body.simulator-active .overview-wizard-layout[data-current-step="4"] .overview-step-card:not([data-step="04"]),
.overview-wizard-layout .overview-step-card,
body.simulator-active .overview-wizard-layout .overview-step-card {
    display: block !important;
    margin-bottom: 1.25rem !important;
}

@media (max-width: 768px) {
    .overview-wizard-layout .wizard-mobile-nav {
        display: none !important;
    }
}

body.simulator-active .overview-wizard-layout .wizard-mobile-nav {
    display: none !important;
}

/* Style overrides to force two-column layout for Gift Cards on mobile viewports */
@media (max-width: 768px) {
    .gift-cards-deck {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .gift-card-item {
        padding: 0.5rem 0.5rem 0.75rem !important;
        border-radius: 10px !important;
    }
    .card-plastic-chip {
        width: 22px !important;
        height: 16px !important;
        border-radius: 3px !important;
    }
    .card-brand-logo span {
        font-size: 0.75rem !important;
    }
    .card-brand-logo i {
        width: 14px !important;
        height: 14px !important;
    }
    .card-network-icon {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
    .card-network-icon i {
        width: 12px !important;
        height: 12px !important;
    }
    .card-denom-badge {
        font-size: 0.85rem !important;
    }
    .card-serial {
        font-size: 0.45rem !important;
        letter-spacing: 0.2px !important;
    }
}

body.simulator-active .gift-cards-deck {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
}
body.simulator-active .gift-card-item {
    padding: 0.5rem 0.5rem 0.75rem !important;
    border-radius: 10px !important;
}
body.simulator-active .card-plastic-chip {
    width: 22px !important;
    height: 16px !important;
    border-radius: 3px !important;
}
body.simulator-active .card-brand-logo span {
    font-size: 0.75rem !important;
}
body.simulator-active .card-brand-logo i {
    width: 14px !important;
    height: 14px !important;
}
body.simulator-active .card-network-icon {
    top: 0.5rem !important;
    right: 0.5rem !important;
}
body.simulator-active .card-network-icon i {
    width: 12px !important;
    height: 12px !important;
}
body.simulator-active .card-denom-badge {
    font-size: 0.85rem !important;
}
body.simulator-active .card-serial {
    font-size: 0.45rem !important;
    letter-spacing: 0.2px !important;
}

@media (max-width: 992px) {
    .services-drawer {
        padding-top: calc(30px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* Keyboard Resizing & Interaction Fixes for Mobile Viewports */
@media (max-width: 768px) {
    /* Prevent virtual keyboard from squishing/clipping Login/Register pages */
    .auth-wrapper:not(.hidden) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        background-color: #030712 !important;
    }

    .auth-wrapper.hidden,
    #auth-wrapper.hidden {
        display: none !important;
    }

    #downloads-top-bar {
        display: none !important;
    }

    .auth-card {
        margin-top: 15px !important;
        padding: 24px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 17, 26, 0.98) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
        border-radius: 12px !important;
    }

    .auth-brand-header {
        margin-bottom: 1.25rem !important;
    }

    .auth-brand-logo {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 8px !important;
    }

    .auth-brand-title {
        font-size: 1.5rem !important;
    }

    .auth-form-title {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .auth-card .form-group {
        margin-bottom: 10px !important;
    }
}

/* Hide floating bottom navigation bar when user is actively typing to prevent layout blocking */
body:has(input:focus, textarea:focus, select:focus) .bottom-nav {
    display: none !important;
}

/* Force 2-Column Grid on Mobile for Country Selectors & Stacking for Global eSIM Data */
@media (max-width: 768px) {
    #one-time-countries-grid,
    #rental-countries-grid,
    .country-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .country-grid-scroll-container {
        display: block !important;
        height: 320px !important;
        max-height: 320px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }



    /* Prevent bottom navigation bar from covering the bottom of settings, gift-cards, and sell-cards panels */
    .gift-lounge-panel {
        padding-bottom: 110px !important;
    }
}

/* Force vertical portrait stacking and suppress overflows for eSIM on all mobile/tablet viewports */
#esim-country-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 8px !important;
}

#esim-country-chips button {
    flex-shrink: 0 !important;
}