/* =========================================
   1. LOCAL FONT AWESOME SETUP (GDPR Safe)
   ========================================= */

/* 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: Checkmark, Basket, Plus, Close) */
@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');
}

/* Regular (Optional backup) */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../../../assets/fonts/fa-regular-400.woff2') format('woff2');
}

/* Base Settings for Icons */
.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;
}

/* Class Mappings */
.fab {
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

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

.far, .fa-regular {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
}

/* Specific Icon Codes (Minimal set needed for your app) */
.fa-check:before { content: "\f00c"; }
.fa-utensils:before { content: "\f2e7"; }
.fa-times:before { content: "\f00d"; }
.fa-plus-circle:before { content: "\f055"; }
.fa-minus-circle:before { content: "\f056"; }
.fa-whatsapp:before { content: "\f232"; }

/* =========================================
   2. APP STYLES (WhaBeS Design)
   ========================================= */

/* Legal Safe Fonts (System Stack) */
body { 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; 
    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; overflow: hidden; }
.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); }

/* Parallax Header */
.parallax-bg { 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

/* 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; }

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

/* 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; }