/* ===================================================
   The Eye Optometry Center - Main Stylesheet
   =================================================== */

body {
    font-family: 'Cairo', sans-serif;
    background-color: #F8F9FA;
    overflow-x: hidden;
    color: #1A1A24;
}

.brand-font {
    font-family: 'Comfortaa', cursive, sans-serif;
}

.zain-font {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #6A1B9A;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4D148C;
}

/* Sidebar Accordions */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

.submenu.open {
    max-height: 450px;
    opacity: 1;
}

.rotate-arrow {
    transition: transform 0.3s ease;
}

.rotate-arrow.open {
    transform: rotate(180deg);
}

/* Off-canvas Drawers */
.sidebar-drawer {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-drawer.open {
    transform: translateX(0);
}

.cart-drawer {
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.open {
    transform: translateX(0);
}

/* Modals */
.modal-overlay {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    display: flex !important;
    opacity: 1;
}

.modal-content {
    animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Glassmorphism Navigation */
.glass-nav {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Store Navigation Dropdowns */
.store-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    z-index: 30;
    min-width: 220px;
}

.store-dropdown-menu.active {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Color Swatches Selection */
.color-swatch {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px #4D148C;
}

/* Smooth Transitions */
.transition-smooth {
    transition: all 0.25s ease-in-out;
}