/* 
+ * Premium Mobile App Theme - Unisafe
+ * Transforms the web interface into a native-like mobile app experience.
+ */

:root {
    --app-nav-height: 75px;
    --app-header-height: 60px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --primary-gradient: linear-gradient(135deg, #FF007F 0%, #0047AB 100%);
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* 1. Global App Aesthetics */
@media (max-width: 991px) {
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        background-color: #F7FAFC;
        /* Light App-like background */
        font-family: 'Montserrat', sans-serif !important;
        -webkit-font-smoothing: antialiased;
        padding-bottom: calc(var(--app-nav-height) + var(--safe-area-bottom)) !important;
    }

    /* Page Fade-in Animation */
    main.main {
        animation: appPageFadeIn 0.5s ease-out;
    }

    @keyframes appPageFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 2. Premium App Header */
    .main-header {
        height: var(--app-header-height);
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .header-container {
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        position: static !important;
    }

    .brand-logo {
        margin: 0 auto !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
    }

    .brand-logo img {
        height: 35px !important;
        width: auto !important;
    }

    .mobile-toggle {
        position: absolute !important;
        left: 15px !important;
        display: block !important;
        z-index: 10 !important;
    }

    .header-actions {
        position: absolute !important;
        right: 15px !important;
        display: flex !important;
        gap: 12px !important;
        z-index: 10 !important;
    }

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

    .top-announcement {
        font-size: 11px !important;
        padding: 8px 0 !important;
        background: var(--primary-gradient) !important;
    }

    /* 3. Modern Card Layouts */
    .product-item,
    .entry-grid,
    .form-box,
    .newsletter-box {
        background: #fff !important;
        border-radius: 20px !important;
        border: 1px solid rgba(0, 0, 0, 0.03) !important;
        box-shadow: var(--card-shadow) !important;
        overflow: hidden;
        margin-bottom: 20px !important;
    }

    /* Section Spacing */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 4. Touch-Friendly Buttons */
    .btn,
    button {
        border-radius: 12px !important;
        height: 50px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s active !important;
    }

    .btn:active {
        transform: scale(0.96);
    }

    /* 5. Mobile Search Improvements */
    .mobile-search-wrapper {
        border-radius: 0 0 25px 25px !important;
        padding: 20px !important;
    }

    .header-search-form input {
        border-radius: 50px !important;
        height: 45px !important;
        background: #f1f5f9 !important;
        border: none !important;
        padding-left: 20px !important;
    }

    /* 6. Product Detail App Feel */
    .product-gallery {
        margin-bottom: 20px !important;
    }

    .product-main-image {
        border-radius: 25px !important;
        overflow: hidden;
    }

    .product-details-action-wrapper {
        position: fixed !important;
        bottom: var(--app-nav-height) !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 12px 20px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
        z-index: 9998 !important;
        display: flex !important;
        gap: 15px !important;
    }

    .btn-product.add-to-cart {
        background: var(--primary-gradient) !important;
        color: #fff !important;
        border: none !important;
        flex: 2 !important;
        margin: 0 !important;
    }

    /* 7. Hide Desktop leftovers */
    .footer {
        background: #fff !important;
        border-radius: 30px 30px 0 0 !important;
        margin-top: 40px !important;
    }
}