/* =================================================================
   MAIN CSS - SMOUQ
   Modern, Clean, Professional Design
   
   NOTE: All CSS files are now loaded via <link> tags in header.php
   with per-file cache-busting. @imports removed to prevent conflicts.
   This file only contains global overrides below.
   ================================================================= */


/* =================================================================
   GLOBAL OVERRIDES & ADDITIONAL STYLES
   ================================================================= */

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.page-loader--hidden {
    opacity: 0;
    visibility: hidden;
}

.page-loader__spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    -webkit-animation: page-loader-spin 0.7s linear infinite;
    animation: page-loader-spin 0.7s linear infinite;
}

@-webkit-keyframes page-loader-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 48px;
    height: 48px;
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-fixed);
    text-decoration: none;
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* RTL */
html[dir="rtl"] .back-to-top {
    right: auto;
    left: var(--space-8);
}

/* WhatsApp Float Button */
.whatsapp-float {
    position: fixed;
    bottom: calc(var(--space-8) + 60px);
    /* Above back-to-top */
    right: var(--space-8);
    width: 56px;
    height: 56px;
    background-color: #25D366;
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: var(--z-fixed);
    text-decoration: none;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
    animation: none;
}

/* RTL */
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: var(--space-8);
}

/* Print Styles */
@media print {

    .header,
    .back-to-top,
    .whatsapp-float,
    .page-loader {
        display: none !important;
    }

    .section {
        page-break-inside: avoid;
    }
}