/* ===================================
   Golden Vet - Cache Control CSS
   ملف التحكم في cache للـ CSS
   =================================== */

/* Cache Control Headers */
/* This file helps prevent frequent CSS reloading */

/* Prevent FOUC (Flash of Unstyled Content) */
html {
    visibility: hidden;
    opacity: 0;
}

html.loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Stable styles that don't change frequently */
body {
    font-family: 'Cairo', sans-serif !important;
    line-height: 1.6 !important;
    color: var(--text-dark) !important;
    background: var(--bg-light) !important;
}

/* Ensure consistent button styling */
.btn-primary-product {
    background: var(--primary-color) !important;
    color: var(--white) !important;
    border: 2px solid var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

.btn-primary-product:hover {
    background: var(--secondary-color) !important;
    color: var(--white) !important;
    border-color: var(--secondary-color) !important;
    transform: translateY(-2px) !important;
}

/* Prevent layout shifts */
.products-grid {
    min-height: 400px;
}

.product-card {
    min-height: 350px;
}

/* Loading state for smoother transitions */
.products-loading {
    opacity: 0.7;
    pointer-events: none;
}

.products-loaded {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}