/* ==========================================================================
   EL DARDERY PHARMACIES — Premium Customer Web Storefront CSS
   Design Identity: Cherry Cola & Vanilla Cream
   ========================================================================== */

:root {
    /* Primary Palette: Cherry Cola */
    --color-primary: #8B2433;
    --color-primary-dark: #6F1726;
    --color-primary-light: #B83A4B;
    --color-primary-subtle: rgba(139, 36, 51, 0.08);

    /* Secondary Palette: Vanilla Cream */
    --color-cream: #F7EBDD;
    --color-cream-soft: #FFF8EE;
    --color-cream-dark: #EADCC8;

    /* Neutrals & Surfaces (Light Mode) */
    --color-background: #FDFBF7;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #FFFDF9;
    --color-text: #2A0B12;
    --color-muted: #7A656B;
    --color-border: #E8D8CD;

    /* Functional Colors */
    --color-success: #2E7D32;
    --color-success-bg: #E8F5E9;
    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-danger: #C62828;
    --color-danger-bg: #FFEBEE;
    --color-info: #0284C7;

    /* Spacing System */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius System */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Elevation & Shadows */
    --shadow-sm: 0 2px 4px rgba(42, 11, 18, 0.04);
    --shadow-md: 0 6px 15px rgba(42, 11, 18, 0.06);
    --shadow-lg: 0 12px 30px rgba(42, 11, 18, 0.1);
    
    /* Typography */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   Dark Mode Theme Overrides
   ========================================================================== */
[data-theme="dark"], @media (prefers-color-scheme: dark) {
    :root {
        --color-background: #16090D;
        --color-surface: #211016;
        --color-surface-elevated: #2A171C;
        --color-text: #FFF4E8;
        --color-muted: #D7C5B8;
        --color-border: rgba(255, 255, 255, 0.1);

        --color-primary: #A52E42;
        --color-primary-dark: #8B2433;
        --color-primary-light: #C45465;
        --color-primary-subtle: rgba(165, 46, 66, 0.15);

        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 6px 15px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.4);
    }
}

/* ==========================================================================
   Base Elements & Reset
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    text-decoration: none;
    color: inherit;
}

button, input, select, textarea {
    font-family: var(--font-main);
}

/* ==========================================================================
   Navbar & Navigation
   ========================================================================== */
.navbar {
    background-color: var(--color-primary);
    color: white;
    padding-block: var(--space-md);
    padding-inline: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.nav-brand {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: white;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover, .nav-links a.active {
    color: #ffffff;
}

.nav-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    color: white;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: white;
    color: var(--color-primary);
    border-color: white;
}

.cart-icon {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -8px;
    inset-inline-end: -10px;
    background: var(--color-warning);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: white;
    padding: var(--space-2xl) 5%;
    position: relative;
    overflow: hidden;
}

.hero h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: var(--space-md);
    font-weight: 700;
    color: white;
}

.hero p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    max-width: 700px;
    margin-block-end: var(--space-xl);
    color: rgba(255, 255, 255, 0.9);
}

.hero .btn-primary {
    background: var(--color-cream);
    color: var(--color-primary-dark);
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: bold;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, background 0.2s;
    border: none;
    cursor: pointer;
}

.hero .btn-primary:hover {
    background: #ffffff;
    transform: translateY(-2px);
}

/* ==========================================================================
   Categories & Cards Grid
   ========================================================================== */
.categories {
    padding: var(--space-2xl) 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.category-card {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.category-card i {
    font-size: 38px;
    color: var(--color-primary);
    margin-block-end: var(--space-md);
}

.category-card h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-text);
}

/* ==========================================================================
   Shop & Product Cards
   ========================================================================== */
.shop-container {
    padding: var(--space-xl) 5%;
}

.filters-bar {
    background: var(--color-surface);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
    flex-wrap: wrap;
}

.filters-bar input, .filters-bar select {
    padding: 12px var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-text);
    outline: none;
    font-size: 15px;
    transition: border-color 0.2s;
}

.filters-bar input { flex: 2; min-width: 240px; }
.filters-bar select { flex: 1; min-width: 160px; }

.filters-bar input:focus, .filters-bar select:focus {
    border-color: var(--color-primary);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.product-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.rx-badge {
    position: absolute;
    top: var(--space-sm);
    inset-inline-end: var(--space-sm);
    background: var(--color-warning);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    z-index: 10;
}

.product-img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    margin-block-end: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-background);
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text);
    margin-block-end: var(--space-xs);
}

.product-en-title {
    font-size: 12px;
    color: var(--color-muted);
    margin-block-end: var(--space-md);
    direction: ltr;
    text-align: left;
}

.product-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-success);
    margin-block-start: auto;
    margin-block-end: var(--space-md);
}

.btn-add-cart {
    width: 100%;
    padding: 10px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
}

.btn-add-cart:hover {
    background: var(--color-primary-dark);
}

/* ==========================================================================
   Cart & Checkout Layouts
   ========================================================================== */
.cart-container {
    padding: var(--space-2xl) 5%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}

.cart-items-section, .checkout-section {
    background: var(--color-surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.item-info { flex: 1; }
.item-title { font-weight: 600; font-size: 15px; margin-block-end: var(--space-xs); color: var(--color-text); }
.item-price { color: var(--color-success); font-weight: bold; }

.item-controls { display: flex; align-items: center; gap: var(--space-md); }
.qty-controls { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-background); }
.qty-btn { background: transparent; border: none; padding: 6px 12px; cursor: pointer; color: var(--color-text); font-size: 15px; }
.qty-btn:hover { background: var(--color-primary-subtle); }
.qty-input { width: 35px; text-align: center; border: none; outline: none; font-weight: bold; background: transparent; color: var(--color-text); }

.remove-btn { color: var(--color-danger); background: none; border: none; cursor: pointer; font-size: 16px; transition: opacity 0.2s; }
.remove-btn:hover { opacity: 0.7; }

.summary-row { display: flex; justify-content: space-between; margin-block-end: var(--space-md); font-size: 15px; color: var(--color-muted); }
.summary-total { display: flex; justify-content: space-between; margin-block-start: var(--space-lg); padding-block-start: var(--space-lg); border-top: 1px solid var(--color-border); font-size: 18px; font-weight: bold; color: var(--color-text); }

.checkout-form .form-group { margin-block-end: var(--space-md); }
.checkout-form label { display: block; margin-block-end: var(--space-xs); font-size: 13px; font-weight: bold; color: var(--color-muted); }
.checkout-form input, .checkout-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-text);
    outline: none;
    box-sizing: border-box;
}
.checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--color-primary); }

.btn-checkout {
    width: 100%;
    padding: 14px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin-block-start: var(--space-md);
}
.btn-checkout:hover { background: var(--color-primary-dark); }
.btn-checkout:disabled { background: var(--color-muted); cursor: not-allowed; }

.rx-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-lg);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(217, 119, 6, 0.2);
    display: none;
}

/* ==========================================================================
   Auth & Rx Upload Containers
   ========================================================================== */
.auth-wrapper, .upload-container {
    max-width: 500px;
    margin: var(--space-2xl) auto;
    background: var(--color-surface);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

.file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    background: var(--color-background);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-block-end: var(--space-lg);
}
.file-upload-wrapper:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.file-upload-wrapper input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 40px; color: var(--color-muted); margin-block-end: var(--space-sm); }

/* ==========================================================================
   Footer & Toasts
   ========================================================================== */
.footer {
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-2xl) 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    border-top: 1px solid var(--color-border);
    margin-block-start: var(--space-2xl);
}
.footer h3 { color: var(--color-primary); margin-block-start: 0; }
.footer p { color: var(--color-muted); font-size: 14px; }

.toast {
    position: fixed;
    bottom: var(--space-lg);
    inset-inline-end: var(--space-lg);
    background: var(--color-success);
    color: white;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    z-index: 1000;
    font-weight: bold;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .cart-container { grid-template-columns: 1fr; }
    .navbar { flex-direction: column; align-items: flex-start; }
    .nav-links { width: 100%; justify-content: space-between; }
}