/* ==================== VARIABLES & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Default/Male Theme Variables - Dark & Gold */
:root {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-card: #2a2a2a;
    --bg-input: #333333;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #666666;
    --accent-primary: #d4a853;
    --accent-primary-light: #e8c87a;
    --accent-secondary: #7ed321;
    --accent-orange: #f5a623;
    --accent-red: #d0021b;
    --border-color: #3a3a3a;
    --gradient-start: #2a2a2a;
    --gradient-end: #1a1a1a;
    --hero-overlay: rgba(0,0,0,0.5);
    --theme-name: 'male';
}

/* Female Theme Variables - Light & Pink/Purple */
body.female-theme {
    --bg-primary: #faf5f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f5e6eb;
    --text-primary: #4a2c3a;
    --text-secondary: #8b6b7d;
    --text-muted: #b8a0ad;
    --accent-primary: #d478a8;
    --accent-primary-light: #e8a0c8;
    --accent-secondary: #7bc8a0;
    --accent-orange: #f5a623;
    --accent-red: #e85d75;
    --border-color: #f0d5e0;
    --gradient-start: #fff5f8;
    --gradient-end: #fae6f0;
    --hero-overlay: rgba(212, 120, 168, 0.3);
    --theme-name: 'female';
}

html {
    font-size: 16px;
}

body {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.wait-time-circle.pulse {
    animation: pulse 2s infinite;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.barbershop-card,
.barber-card {
    animation: slideIn 0.3s ease;
}