/* mobile.css - Application Layout & Overrides */

body {
    margin: 0; padding: 0;
    overflow: hidden; /* App feels native, content scrolls internally */
    background: #F4F7FA;
    -webkit-tap-highlight-color: transparent;
}

/* TOP BAR */
.app-topbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 60px;
    background: #ffffff;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    padding-top: env(safe-area-inset-top); /* iPhone Notch support */
}
.app-topbar .topbar-logo {
    display: flex; align-items: center; gap: 10px;
}
.app-topbar .site-logo {
    width: 32px; height: 32px; object-fit: contain; border-radius: 50%;
}
.app-topbar .logo-title {
    font-weight: 800; font-size: 1.2rem; color: var(--color-primary); font-family: 'Outfit', sans-serif;
}
.app-topbar .cart-btn {
    border: none; background: transparent; color: var(--color-primary); position: relative; padding: 8px; border-radius: 50%; cursor: pointer;
}
.app-topbar .cart-count {
    position: absolute; top: 0; right: 0; background: var(--color-accent); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; font-weight: bold; display: flex; align-items: center; justify-content: center;
}

/* BOTTOM NAVIGATION */
.app-bottombar {
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    height: 70px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #E2E8F0;
    display: flex; justify-content: space-around; align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom); /* iOS Home indicator */
}
.bottombar-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--color-text-light); text-decoration: none; padding: 8px 16px; transition: 0.2s; cursor: pointer;
}
.bottombar-item i { width: 22px; height: 22px; }
.bottombar-item span { font-size: 0.7rem; font-weight: 600; font-family: 'Inter', sans-serif;}
.bottombar-item.active { color: var(--color-secondary); }

/* MAIN SCROLLABLE C O N T E N T */
.app-content {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    overflow-y: auto; overflow-x: hidden;
    background: #F4F7FA;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* VIEWS LOGIC */
.app-view {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
    width: 100%; min-height: 100%;
    background: #F4F7FA;
}
.app-view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* SPECIFIC VIEWS COMPONENTS */

/* Home View */
.hero-mobile {
    background: linear-gradient(135deg, #F0F8FF 0%, #E0F2F1 100%);
    padding: 32px 24px;
    border-radius: 0 0 24px 24px;
    margin-bottom: 24px;
}
.hero-mobile h1 { font-size: 2.2rem; line-height: 1.2; margin-bottom: 12px; }
.hero-mobile h1 span { color: var(--color-secondary); }

.step-card {
    display: flex; align-items: center; gap: 16px; background: white; padding: 16px; border-radius: 12px; margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.step-icon {
    width: 40px; height: 40px; border-radius: 50%; background: #E0F2F1; color: var(--color-secondary); display: flex; align-items: center; justify-content: center;
}

/* Pharmacies View */
.view-header-simple {
    padding: 24px; background: white; margin-bottom: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.view-header-simple h2 { font-size: 1.5rem; margin-bottom: 8px; }

.pharmacy-mobile-list .pharmacy-tab-circle {
    display: flex; align-items: center; background: white; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); flex-direction: row; gap: 16px; text-align: left;
}
.pharma-img-container {
    width: 60px; height: 60px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid #E2E8F0; flex-shrink: 0;
}
.pharma-info-container {
    flex: 1;
}
.pharma-info-container h3 { font-size: 1.1rem; margin-bottom: 4px; }
.pharma-info-container span { color: var(--color-text-light); font-size: 0.85rem; }
.pharma-chevron { color: #CBD5E1; }

.pharmacy-tab-circle:active { transform: scale(0.98); }

/* Pharmacy Details View */
.btn-back {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 16px 24px; color: var(--color-primary); font-weight: 600; cursor: pointer;
}
.pharma-header-mobile {
    padding: 0 24px 24px 24px; display: flex; align-items: center; gap: 20px;
}
.pharma-header-mobile img {
    width: 80px; height: 80px; border-radius: 50%; object-fit: contain; border: 1px solid #E2E8F0; background: white;
}
.dyn-info h2 { font-size: 1.4rem; margin-bottom: 4px; }
.dyn-info span { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 4px; }
.dyn-info span i { width: 14px; }

/* Prescription View */
.mobile-form .form-group { margin-bottom: 16px; }
.mobile-form label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 500;}
.mobile-form input { width: 100%; padding: 14px; border: 1px solid #CBD5E1; border-radius: 12px; font-family: 'Inter'; font-size: 16px; /* Prevents iOS Zoom */ }
.upload-zone {
    border: 2px dashed #CBD5E1; border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 16px; position: relative; background: white;
}
.upload-zone i { color: var(--color-secondary); margin-bottom: 8px; }
.upload-zone span { display: block; font-size: 0.9rem; font-weight: 500; }
.upload-zone input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Modals Override for Mobile */
.mobile-modal-wrapper {
    display: flex; flex-direction: column; height: 100%; position: fixed; bottom: 0; border-radius: 24px 24px 0 0;
    max-height: 85vh; width: 100%; margin: 0; padding: 0; max-width: none; overflow-y: auto;
}
.modal-img-container {
    position: relative; height: 250px; background: #F1F5F9; width: 100%;
}
.modal-close-round {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
}
.modal-info-container { padding: 24px; }
.mobile-price { font-size: 1.8rem; font-weight: 800; color: var(--color-primary); }

/* =========================================
   STYLE ENFANTIN & ANIMÉ (Vue Ordonnance)
   ========================================= */
.enfantin-view {
    background: #ffffff url('assets/official_logo.jpg') no-repeat center center;
    background-size: 200%;
    background-blend-mode: overlay; /* Soft logo watermark if available */
    /* Alternative pure white in case logo image too dark */
}

/* Club View Optimizations */
.club-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
}

/* Back Button Native Positioning */
.btn-back-rounded {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Active Bottom Bar Item Enhancement */
.bottombar-item.active {
    color: var(--color-primary);
    transform: translateY(-2px);
}
.bottombar-item.active i {
    filter: drop-shadow(0 2px 4px rgba(30, 146, 155, 0.3));
}

/* Ensure views fill the container correctly */
.app-view {
    padding-top: 20px;
    padding-bottom: 20px;
}

#view-home.active { display: block; }
#view-pharmacies.active { display: block; }
#view-pharmacy-details.active { display: block; }
#view-club.active { display: block; }
#view-ordonnance.active { display: block; }