/* =========================================
   1. SHARED FONT ASSETS
   ========================================= */
@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');
}

@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');
}

.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 */
.fa-check:before { content: "\f00c"; }
.fa-truck-moving:before { content: "\f4df"; }
.fa-clipboard-check:before { content: "\f46c"; }
.fa-times:before { content: "\f00d"; }
.fa-check-square:before { content: "\f14a"; }
.fa-plus-square:before { content: "\f0fe"; }
.fa-trash:before { content: "\f1f8"; }
.fa-whatsapp:before { content: "\f232"; }

/* =========================================
   2. TRANSPORT & LOGISTICS STYLES
   ========================================= */

:root {
    --primary: #eab308; /* Yellow-500 */
    --dark: #0f172a;    /* Slate-900 */
}

body { 
    font-family: system-ui, -apple-system, sans-serif; 
    background-color: #f1f5f9; /* Slate-100 */
}

h1, h2, h3, .brand-font { 
    font-family: "Impact", "Arial Black", sans-serif; /* Industrial Look */
    text-transform: uppercase; 
}

.max-app-width { max-width: 1200px; margin: 0 auto; }

/* Navigation Tabs */
.tab-active { color: var(--dark); position: relative; font-weight: 900; }
.tab-active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 4px; background: var(--primary); }

/* Service Cards */
.service-card { transition: all 0.3s ease; border: 2px solid #e2e8f0; background: #fff; }
.service-card.selected { border-color: var(--primary); background-color: #fffbeb; /* Yellow-50 */ }

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

/* FIX: Ensure button has a backup background color and high visibility */
.industrial-btn { 
    background-color: var(--dark); 
    color: white; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.industrial-btn:active {
    transform: scale(0.98);
}

/* FIX: Footer Darker Background */
.footer-dark {
    background-color: #020617; /* Slate-950 (Almost Black) */
    border-top: 4px solid var(--primary);
    color: #94a3b8; /* Slate-400 */
}

/* Notification Toast */
#notification { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateX(150%); }
#notification.show { transform: translateX(0); }

/* Scrollbar Hide */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Overlays */
#successScreen, #welcomeScreen { transition: opacity 0.5s; }
.invisible { visibility: hidden; }