/**
 * UNISAFE UI/CSS FIXES - PREMIUM EDITION
 * ========================================
 * Standardized fixes for spacing, positioning, and mobile-app experience.
 * Last Updated: 2026-01-22
 */

:root {
    /* Standardized z-index scale */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-mobile-menu: 20000;
    --z-mobile-toggle: 20001;
}

/* Apply standardized z-index */
.main-header {
    z-index: var(--z-sticky) !important;
}

/* ---------------------------------------------------------
   1. MOBILE MENU & OVERLAY SYSTEM (APP-LIKE)
   --------------------------------------------------------- */
@media (max-width: 991px) {

    /* Reset font size for mobile to ensure readability */
    html {
        font-size: 100% !important;
    }

    /* THE DRAWER: Clean, Left-aligned, No Shifting */
    .mobile-menu-container {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 310px !important;
        max-width: 85vw !important;
        z-index: var(--z-mobile-menu) !important;
        transform: translateX(-102%) !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        background: #FFFFFF !important;
        box-shadow: 15px 0 50px rgba(0, 0, 0, 0.2) !important;
        visibility: visible !important;
        display: block !important;
    }

    body.mmenu-active .mobile-menu-container {
        transform: translateX(0) !important;
    }

    /* THE OVERLAY: Blurred & Darkened */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(10, 31, 68, 0.6) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: calc(var(--z-mobile-menu) - 1) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.4s ease !important;
    }

    body.mmenu-active .mobile-menu-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* DISABLE PAGE SHIFTING: Prevents the "White Space" glitch */
    .mmenu-active .page-wrapper,
    body.mmenu-active .page-wrapper,
    .page-wrapper {
        transform: none !important;
        transition: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Prevent body scroll when menu is open */
    body.mmenu-active {
        overflow: hidden !important;
        touch-action: none !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* Hide legacy mobile toggle as we use the Bottom Menu */
    .mobile-toggle {
        display: none !important;
    }

    .header-container .brand-logo {
        margin-left: 0 !important;
    }
}

/* ---------------------------------------------------------
   2. BUTTON & INTERACTION REFINEMENTS
   --------------------------------------------------------- */
.btn,
button,
a.btn {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.btn-primary {
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------
   3. FORM & INPUT FIXES
   --------------------------------------------------------- */
@media (max-width: 768px) {

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents auto-zoom on iOS */
    }
}

/* ---------------------------------------------------------
   4. PRODUCT PAGE STICKY ACTION BAR
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .product-details-action-wrapper {
        position: fixed !important;
        bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: var(--z-fixed) !important;
        background: #FFFFFF !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
        padding: 12px 20px !important;
        display: flex !important;
        gap: 15px !important;
        border-top: 1px solid #f0f0f0 !important;
    }
}

/* ---------------------------------------------------------
   5. GLOBAL FONT & VISIBILITY CONSISTENCY
   --------------------------------------------------------- */
body, html {
    font-family: 'Montserrat', 'Poppins', 'Open Sans', sans-serif !important;
    font-weight: 500;
    color: #2C3E50 !important; /* Premium Charcoal for better visibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .serif-font {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 700 !important;
}

/* Ensure paragraph visibility */
p {
    line-height: 1.7 !important;
    font-size: 1.05rem !important;
    color: #2C3E50 !important;
}

/* Fix for dark backgrounds visibility */
.dark-bg-text, .stats-section p, .stats-section h2 {
    color: #FFFFFF !important;
}

body {
    overflow-x: hidden !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}