/* =========================================
   1. SHARED FONT ASSETS (Agntio Central)
   ========================================= */

/* Brands (For WhatsApp Icon) */
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../../../assets/fonts/fa-brands-400.woff2') format('woff2');
}

/* Solid (For UI: Moon, Check, Calendar, etc.) */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../../../assets/fonts/fa-solid-900.woff2') format('woff2');
}

/* Base Icon Settings */
.fa, .fas, .far, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fab { font-family: 'Font Awesome 6 Brands'; font-weight: 400; }
.fas, .fa-solid { font-family: 'Font Awesome 6 Free'; font-weight: 900; }

/* Icon Mappings (Add others if needed) */
.fa-check:before { content: "\f00c"; }
.fa-moon:before { content: "\f186"; }
.fa-times:before { content: "\f00d"; }
.fa-plus-circle:before { content: "\f055"; }
.fa-minus-circle:before { content: "\f056"; }
.fa-whatsapp:before { content: "\f232"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-calendar-check:before { content: "\f274"; }
.fa-trash-alt:before { content: "\f2ed"; }

/* =========================================
   2. SALON APP STYLES
   ========================================= */

/* Legal Safe Fonts */
body { 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #fafaf9; 
}

h1, h2, h3 { 
    font-family: "Times New Roman", Times, serif; 
    font-weight: bold;
}

/* Layout Helpers */
.max-app-width { max-width: 1200px; margin: 0 auto; }

/* Navigation Tabs */
.tab-active { color: #1c1917; position: relative; }
.tab-active::after { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    left: 25%; 
    width: 50%; 
    height: 3px; 
    background: #c2a371; 
    border-radius: 10px; 
}

/* Service Cards */
.service-card { transition: all 0.3s ease; border: 1px solid #e7e5e4; }
.service-card.selected { 
    border-color: #c2a371; 
    background-color: #fff; 
    box-shadow: 0 10px 30px rgba(194, 163, 113, 0.1); 
}

.plus-btn { color: #c2a371; transition: all 0.4s ease; }
.service-card.selected .plus-btn { transform: rotate(45deg); color: #1c1917; }

/* Glass Effect */
.glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); }

/* Scrollbar Styling */
.modal-scroll::-webkit-scrollbar { width: 4px; }
.modal-scroll::-webkit-scrollbar-track { background: #f5f5f4; }
.modal-scroll::-webkit-scrollbar-thumb { background: #e7e5e4; border-radius: 10px; }

/* Header Logo */
.logo-header {
    background: #fff; 
    padding: 20px; 
    height: 210px; 
    width: 210px; 
    border-radius: 50%;
}

/* Notification Animation */
#notification { 
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    transform: translateY(-150%); 
    opacity: 0; 
}
#notification.show { transform: translateY(0); opacity: 1; }