@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&family=Heebo:wght@300;400;500;700&display=swap');

:root {
    /* Color Palette */
    /* Color Palette - Pastel Green Theme */
    --primary-color: #639C7D;
    /* Soft Green */
    --secondary-color: #1A4231;
    /* Dark Green Text */
    --accent-color: #8FD6A3;
    /* Lighter Pastel Green */
    --accent-hover: #52856A;
    --text-color: #2F3E35;
    /* Dark Green/Gray */
    --text-light: #6B7F75;
    /* Slate 500 */
    --bg-light: #F8FAFC;
    /* Slate 50 */
    --white: #ffffff;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Assistant', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-light);
    direction: rtl;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Heebo', sans-serif;
    color: var(--primary-color);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    /* Context for absolute positioning of icons */
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

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

/* Header */
.site-header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo span {
    color: var(--accent-color);
}

.main-nav ul {
    display: flex;
    gap: 30px;
}

.main-nav a {
    font-weight: 600;
    color: var(--secondary-color);
    position: relative;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-color);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Footer */
.site-footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px 0 20px;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a:hover {
    padding-right: 5px;
    color: var(--accent-color);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--white);
        padding: 40px;
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .main-nav.open {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .main-nav a {
        font-size: 1.2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Mobile Bottom Nav Styles */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    justify-content: space-around;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.75rem;
    gap: 4px;
    width: 25%;
}

.nav-item.active {
    color: var(--primary-color);
    font-weight: 700;
}

.nav-icon {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.icon-container {
    position: relative;
    display: inline-block;
}

.nav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--accent-color);
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    font-weight: bold;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    body {
        padding-bottom: 70px;
    }

    /* Optional: adjustments for existing FAB if needed
       For now, we might want to hide the FAB if the bottom nav has a cart button.
       However, the FAB in catalog.html is specific. 
       Let's keep FAB but maybe move it up? 
       Actually, standard is to replace FAB with bottom nav action. 
       We will hide FAB in style.css or here? 
       FAB is defined in style.css (catalog only). 
       We are editing site.css (global).
       Let's leave FAB alone for a moment, user can see duplicate, we can fix in next step.
    */
}

/* Quick View Styles */
.quick-view-content {
    max-width: 800px;
    width: 90%;
    padding: 0;
    overflow: hidden;
}

.quick-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.quick-view-image-container {
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.quick-view-image-container img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.quick-view-details {
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.btn-close-absolute {
    position: absolute;
    top: 15px;
    left: 15px;
    /* RTL */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    z-index: 10;
    line-height: 1;
}

.qv-category {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.qv-title {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-bottom: 5px;
    line-height: 1.2;
}

.qv-sku {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.qv-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.qv-description {
    color: var(--text-color);
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 1rem;
}

.qv-controls {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qty-control.large {
    height: 50px;
}

.qty-control.large .qty-btn,
.qty-control.large .qty-input {
    font-size: 1.2rem;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px;
}

@media (max-width: 768px) {
    .quick-view-grid {
        grid-template-columns: 1fr;
    }

    .quick-view-image-container {
        padding: 20px;
        height: 250px;
    }

    .quick-view-image-container img {
        max-height: 200px;
    }

    .quick-view-details {
        padding: 20px;
    }

    .qv-title {
        font-size: 1.5rem;
    }
}

/* Skeleton Loader */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.product-card.skeleton {
    cursor: default;
    pointer-events: none;
}

.skeleton-bg {
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton .card-img-container {
    background: #f0f0f0;
    /* Fallback */
    position: relative;
    overflow: hidden;
}

.skeleton .card-img-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton .product-cat-label {
    width: 50%;
    height: 15px;
    margin-bottom: 8px;
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton .product-title {
    width: 80%;
    height: 20px;
    margin-bottom: 15px;
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton .product-sku {
    width: 40%;
    height: 12px;
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton .card-footer {
    opacity: 0.5;
}

/* Favorites Button */
.fav-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    /* Opposite to Quick View */
    background: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    z-index: 5;
}

.fav-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.fav-btn.active {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
}

.fav-btn img,
.qv-btn-trigger img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* Product Card Position Fix */
.product-card {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}