/* ================================================
   📱 Uonimedia - Global Mobile Responsiveness Fix
   Comprehensive horizontal overflow prevention
   ================================================ */

/* ----------------------------------------
   CRITICAL: Prevent horizontal scroll globally
   NOTE: We use 100% instead of 100vw because
   100vw includes scrollbar width and causes
   the exact issue we're trying to fix.
   ---------------------------------------- */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ----------------------------------------
   MOBILE TEXT ALIGNMENT POLISH
   Center-align hero, empty states, and CTAs
   on mobile for consistent visual hierarchy
   ---------------------------------------- */
@media (max-width: 768px) {
    /* Browse page heroes */
    .oasis-hero,
    .jewel-hero,
    .hero-premium,
    .hero-section,
    .page-hero {
        text-align: center !important;
    }

    .oasis-hero h1,
    .jewel-hero h1,
    .hero-premium h1,
    .hero-section h1,
    .page-hero h1 {
        text-align: center !important;
    }

    .oasis-hero p,
    .jewel-hero p,
    .hero-premium p,
    .hero-section p,
    .page-hero p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Empty states */
    .empty-state,
    .empty-state h3,
    .empty-state p {
        text-align: center !important;
    }

    /* CTA sections */
    .cta-content,
    .cta-content h2,
    .cta-content p,
    .footer-cta,
    .footer-cta h2,
    .footer-cta p {
        text-align: center !important;
    }

    /* Browse page section titles */
    .section-header-premium,
    .section-header-premium h1,
    .section-header-premium p {
        text-align: center !important;
    }
}

/* ----------------------------------------
   ROOT CAUSE FIX: Decorative orbs causing
   horizontal overflow. These are positioned
   absolutely/fixed with large sizes outside
   viewport bounds.
   ---------------------------------------- */

/* Clip orbs at their parent containers */
.galaxy-bg {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Constrain orbs to never exceed viewport */
.orb,
.orb-primary,
.orb-secondary,
.orb-tertiary,
.gradient-orb,
.gradient-orb-1,
.gradient-orb-2,
.gradient-orb-3,
[class*="orb-"],
[class*="gradient-orb"] {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Neural canvas must not overflow */
.neural-canvas-container {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* ==============================
   MOBILE (max 768px)
   ============================== */
@media (max-width: 768px) {

    /* ---------- Global Containers ---------- */
    .container, .container-fluid,
    .page-wrapper, .content-wrapper,
    .premium-page, .homepage-premium {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ---------- Fix elements wider than screen ---------- */
    img, video, iframe, table, canvas, svg {
        max-width: 100% !important;
    }

    /* Force tables to scroll rather than overflow */
    .table-wrapper, table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ---------- HEADER FIX ---------- */
    .header-nav {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    .header-wrapper, .toolbar-wrapper {
        padding: 0 12px !important;
        width: 100% !important;
    }

    .toolbar-container {
        padding: 0 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .header-brand h1, .header-brand .site-name {
        font-size: 1.1rem !important;
    }

    .header-brand .o-logo,
    .header-brand img[class*="logo"] {
        width: 30px !important;
        height: 30px !important;
    }

    /* Center logo on mobile */
    .center-logo img {
        height: 45px !important;
    }

    /* Limit notification dropdown & other dropdowns */
    .notifications-dropdown-menu,
    [id="notificationsDropdown"] {
        max-width: calc(100vw - 32px) !important;
        min-width: unset !important;
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        left: auto !important;
    }

    html[dir="rtl"] .notifications-dropdown-menu,
    html[dir="rtl"] [id="notificationsDropdown"] {
        left: 16px !important;
        right: auto !important;
    }

    /* User dropdown on mobile */
    .user-dropdown-menu {
        max-width: calc(100vw - 32px) !important;
        min-width: unset !important;
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        left: auto !important;
    }

    html[dir="rtl"] .user-dropdown-menu {
        left: 16px !important;
        right: auto !important;
    }

    /* ---------- GRID LAYOUTS: 1 Column ---------- */
    .grid, [class*="-grid"]:not(.explore-grid),
    .talents-grid, .projects-grid,
    .services-grid, .courses-grid,
    .equipment-grid, .studios-grid,
    .products-grid, .influencers-grid,
    .cards-grid, .browse-grid,
    .stats-grid-premium {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Explore grid: 2 columns on mobile */
    .explore-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    /* Features grid: 1 column */
    .features-grid-premium {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
    }

    /* ---------- HERO / BANNER SECTIONS ---------- */
    .hero-premium {
        padding: 80px 16px 60px !important;
        min-height: auto !important;
    }

    .hero-premium-content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    [class*="hero"] h1,
    [class*="hero"] .hero-title,
    .hero-title-premium {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle-premium {
        font-size: 0.95rem !important;
    }

    [class*="hero-buttons"], .cta-buttons,
    .hero-actions, .banner-actions,
    .hero-actions-premium {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    [class*="hero-buttons"] a,
    [class*="hero-buttons"] button,
    .cta-buttons a, .cta-buttons button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Hero CTA Sections */
    .hero-cta-sections {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .cta-section {
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset !important;
    }

    .provider-options {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }

    .provider-btn {
        min-width: 80px !important;
        flex: 1 !important;
        padding: 0.75rem 0.5rem !important;
    }

    /* VIP section */
    .hero-investor-vip {
        flex-direction: column !important;
        padding: 1rem !important;
        text-align: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .vip-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Roles bar */
    .hero-roles-bar {
        flex-wrap: wrap !important;
        padding: 0.75rem !important;
        border-radius: 16px !important;
        font-size: 0.8rem !important;
        justify-content: center !important;
    }

    /* Hide large decorative/background elements */
    .gradient-orb,
    .gradient-orb-1,
    .gradient-orb-2,
    .gradient-orb-3,
    [class*="orb-"],
    [class*="gradient-orb"],
    [class*="bg-shape"],
    [class*="bg-blob"],
    [class*="floating-"],
    [class*="particle-"],
    .floating-element, .bg-orb {
        display: none !important;
    }

    /* Keep galaxy-bg but constrain it */
    .galaxy-bg {
        display: block !important;
    }

    /* ---------- TYPOGRAPHY ---------- */
    h1, .h1 { font-size: 1.75rem !important; line-height: 1.3 !important; }
    h2, .h2 { font-size: 1.4rem !important;  line-height: 1.3 !important; }
    h3, .h3 { font-size: 1.2rem !important;  line-height: 1.3 !important; }

    /* ---------- CARDS ---------- */
    [class*="-card"], [class*="card-"],
    .talent-card, .project-card, .service-card,
    .product-card, .course-card, .studio-card,
    .glass-card, .galaxy-card, .stat-card-premium {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---------- FORMS & INPUTS ---------- */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevent iOS zoom on input focus */
    }

    .btn, button[type="submit"],
    [class*="btn-"] {
        min-width: unset !important;
    }

    /* Smart Search - prevent overflow */
    .smart-search {
        width: 100% !important;
        max-width: 100% !important;
    }

    .smart-search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Login / Auth boxes */
.login-box, .register-box,
[class*="login-card"] {
    width: 95% !important;
    max-width: 95% !important;
    padding: 1.5rem !important;
    margin: 1rem auto !important;
}

    /* ---------- FOOTER ---------- */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
    }

    .footer-cta {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        margin-bottom: 2rem !important;
    }

    .cta-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .stats-container {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .bottom-flex {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }

    .smart-footer {
        padding-top: 3rem !important;
        margin-top: 2rem !important;
    }

    [class*="footer"] [class*="col"],
    [class*="footer-col"] {
        width: 100% !important;
        text-align: center !important;
    }

    /* ---------- FILTER / SEARCH BARS ---------- */
    [class*="filter-bar"], [class*="search-bar"],
    [class*="browse-filters"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    [class*="filter-bar"] select,
    [class*="filter-bar"] input,
    [class*="browse-filters"] select,
    [class*="browse-filters"] input {
        width: 100% !important;
    }

    /* ---------- STAT ROWS ---------- */
    [class*="stats-"], [class*="-stats"],
    [class*="stat-row"], .platform-stats {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* ---------- PREMIUM HERO SECTIONS ---------- */
    .premium-hero {
        padding: 1rem 0.5rem !important;
    }

    .premium-hero-inner {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* ---------- SECTION PADDING ---------- */
    .stats-premium,
    .features-premium,
    .cta-premium {
        padding: 3rem 0 !important;
    }

    .cta-content-premium {
        padding: 0 1rem !important;
    }

    .cta-title-premium,
    .section-title-premium {
        font-size: 1.5rem !important;
    }

    .section-header-premium {
        margin-bottom: 2rem !important;
    }

    /* ---------- NOTIFICATION PANEL ---------- */
    .notifications-panel, .notif-dropdown {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        right: 10px !important;
        left: 10px !important;
    }

    /* ---------- FIX FIXED-WIDTH ELEMENTS ---------- */
    [style*="width: 500px"],
    [style*="width: 600px"],
    [style*="width: 400px"],
    [style*="min-width: 300px"],
    [style*="min-width: 320px"] {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* ---------- BROWSE PAGES ---------- */
    .projects-filter, .filter-form,
    .search-form, .browse-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure all flex rows wrap on mobile */
    .row, [class*="-row"],
    .flex-row, .d-flex {
        flex-wrap: wrap !important;
    }

    /* RTL: prevent overflow on arabic text direction */
    [dir="rtl"] body,
    body[dir="rtl"],
    html[dir="rtl"] body {
        overflow-x: hidden !important;
    }

    /* ---------- BUTTONS ---------- */
    .btn-neon {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .btn-neon-primary,
    .btn-neon-outline {
        width: 100% !important;
        text-align: center !important;
    }

    /* ---------- NEWSLETTER ---------- */
    .newsletter-input-wrap {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .newsletter-input-wrap input {
        width: 100% !important;
    }

    .newsletter-input-wrap button {
        width: 100% !important;
        height: 45px !important;
    }

    /* ---------- PREVENT AOS HORIZONTAL OVERFLOW ---------- */
    [data-aos] {
        overflow: hidden !important;
    }

    /* Disable any translateX animations that might cause overflow */
    [data-aos="fade-right"],
    [data-aos="fade-left"],
    [data-aos="slide-right"],
    [data-aos="slide-left"] {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==============================
   TABLET (769px - 1024px)
   ============================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .grid, [class*="-grid"]:not(.explore-grid),
    .talents-grid, .projects-grid,
    .services-grid, .courses-grid,
    .equipment-grid, .studios-grid,
    .products-grid, .influencers-grid,
    .cards-grid, .browse-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .container,
    .page-wrapper, .content-wrapper {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100% !important;
    }
}

/* ==============================
   SMALL PHONES (max 480px)
   ============================== */
@media (max-width: 480px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .explore-grid .glass-card {
        padding: 0.75rem !important;
    }

    .hero-premium {
        padding: 70px 12px 40px !important;
    }

    .hero-title-premium {
        font-size: 1.5rem !important;
    }

    .toolbar-container {
        padding: 0 8px !important;
    }

    .tool-btn {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ==============================
   GLOBAL OVERFLOW SAFETY
   All breakpoints
   ============================== */

/* The main page wrapper must clip overflow */
.homepage-premium {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Galaxy containers must clip */
.galaxy-container,
.hero-premium,
[class*="hero-section"],
[class*="page-hero"],
.homepage-hero, #hero, .main-hero,
[class*="bg-gradient"],
[class*="hero-bg"] {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Premium page wrapper */
.premium-page {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Sections must not overflow */
section {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==============================
   PHASE 2: UX ENHANCEMENTS
   Fluid Typography, Safe Areas, Touch Targets, Bottom Nav
   ============================== */

/* 1. Fluid Typography & Touch Targets */
@media (max-width: 768px) {
    /* Fluid Typography using clamp for smooth scaling */
    h1, .h1, .hero-title-premium, .section-title-premium {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    h2, .h2 { font-size: clamp(1.3rem, 5vw, 2rem) !important; }
    h3, .h3 { font-size: clamp(1.1rem, 4vw, 1.75rem) !important; }
    p, .glass-card-description, .cta-section-desc { font-size: clamp(0.9rem, 3vw, 1rem) !important; }

    /* Touch Targets Optimization (Min 44x44px for Apple/Google standards) */
    .btn, button, .tool-btn, .nav-pill, .nav-item, 
    .social-link, .footer-link, [class*="btn-"],
    .provider-btn {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

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

/* 2. Safe Area Insets (Notch & Home Indicator support) */
/* Apply to header */
.smart-header {
    padding-top: env(safe-area-inset-top, 0) !important;
}
/* Apply to bottom nav and body */
body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
}

/* 3. Horizontal Scrolling for Filters/Tabs */
@media (max-width: 768px) {
    .tabs-navigation, .filter-bar, .browse-filters, .nav-container,
    .hero-roles-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        padding-bottom: 5px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    
    .tabs-navigation::-webkit-scrollbar, 
    .filter-bar::-webkit-scrollbar, 
    .browse-filters::-webkit-scrollbar,
    .nav-container::-webkit-scrollbar,
    .hero-roles-bar::-webkit-scrollbar {
        display: none !important; /* Safari and Chrome */
    }

    .tab-btn, .filter-item, .nav-pill, .role-link {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        white-space: nowrap !important;
    }
}

/* 4. Bottom Navigation Bar */
.bottom-nav-bar {
    display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
    .bottom-nav-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(65px + env(safe-area-inset-bottom, 0));
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        text-decoration: none;
        flex: 1;
        height: 100%;
        gap: 4px;
        transition: all 0.2s ease;
    }

    .bottom-nav-item i {
        font-size: 1.3rem;
        transition: all 0.2s ease;
    }

    .bottom-nav-item span {
        font-size: 0.65rem;
        font-weight: 600;
    }

    .bottom-nav-item.active {
        color: #00d4ff;
    }

    .bottom-nav-item.active i {
        transform: translateY(-2px);
        filter: drop-shadow(0 2px 5px rgba(0, 212, 255, 0.5));
    }

    /* Hide standard header tools on mobile to prefer bottom nav */
    .header-toolbar .toolbar-start .search-hint,
    .header-toolbar .toolbar-end .tool-btn:not(.mobile-menu-toggle),
    .header-toolbar .toolbar-end .auth-btn,
    .header-toolbar .user-dropdown-wrapper {
        display: none !important;
    }

    /* Ensure mobile menu toggle is visible and positioned correctly on academy/store pages */
    .header-toolbar .toolbar-end .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 100 !important;
    }
}

/* ================================================
   📱 Browse Equipment - Mobile Filter Fix
   ================================================ */
@media (max-width: 768px) {
    .filter-deck {
        position: static !important;
        top: auto !important;
        padding: 0.75rem 0 !important;
    }

    .filter-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        overflow-x: visible !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        background: rgba(15, 23, 42, 0.8) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .filter-chip {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        gap: 0.4rem !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .filter-chip i {
        font-size: 0.75rem !important;
    }
}

/* ================================================
   📱 Small Phones (max 390px) - Extra Tight Fit
   ================================================ */
@media (max-width: 390px) {
    /* Auth pages */
    .auth-page {
        padding: 1rem !important;
    }
    
    .auth-card {
        border-radius: 16px !important;
    }
    
    .auth-header {
        padding: 1.5rem 1rem !important;
    }
    
    .auth-title {
        font-size: 1.4rem !important;
    }
    
    .onboarding-container {
        padding: 0 0.5rem !important;
    }
    
    .roles-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 0.5rem !important;
    }
    
    .role-card {
        padding: 1rem !important;
    }
    
    .role-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }
    
    /* Dashboard sidebar - hide on very small screens, rely on bottom nav */
    .jd-sidebar {
        transform: translateX(100%);
    }
    
    .jd-main {
        margin-right: 0 !important;
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Quick actions grid */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .quick-action-btn {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    .quick-action-btn i {
        font-size: 1.25rem !important;
    }
    
    /* Widgets */
    .widget {
        border-radius: 12px !important;
    }
    
    .widget-header {
        padding: 0.75rem 1rem !important;
    }
    
    .widget-body {
        padding: 1rem !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .stat-card {
        padding: 1rem !important;
    }
    
    /* Portfolio / Forms */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .form-input, .form-select, .form-textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
    
    /* Modals */
    .modal-content {
        margin: 0.5rem !important;
        max-height: 95vh !important;
        border-radius: 16px !important;
    }
    
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    /* Empty states */
    .empty-state {
        padding: 2rem 1rem !important;
    }
    
    .empty-state i {
        font-size: 2.5rem !important;
    }
    
    /* Tables */
    .transactions-table {
        font-size: 0.85rem !important;
    }
    
    .transactions-table th,
    .transactions-table td {
        padding: 0.5rem !important;
    }
    
    /* Buttons */
    .btn-primary-sm {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Bottom nav safety */
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Filter chips */
    .filter-chip {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Hero sections */
    .oasis-hero {
        padding: 4rem 1rem 2rem !important;
    }
    
    .oasis-title {
        font-size: 1.75rem !important;
    }
    
    .oasis-subtitle {
        font-size: 0.9rem !important;
    }
    
    /* Cards */
    .equip-card,
    .investment-card,
    .course-card,
    .service-card,
    .studio-card {
        border-radius: 16px !important;
    }
}