/* ========================================
   FMCGIOUS - Global Styles
   ======================================== */

/* Light/Dark Mode Variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --border-color: #e2e8f0;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --accent: #fcad03;
    --accent-hover: #e09c02;
}

[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #6e6e73;
    --border-color: #38383a;
    --card-bg: #1c1c1e;
    --card-border: #38383a;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --accent: #fcad03;
    --accent-hover: #e09c02;
}

/* Base Styles */
body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

h1.text-white, h2.text-white, h3.text-white, h4.text-white, h5.text-white, h6.text-white {
    color: #ffffff !important;
}

/* Form Elements */
input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=2000');
    background-size: cover;
    background-position: center;
}

/* Page Animations */
.page-view { 
    display: none; 
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}
.page-view.active { display: block; }

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

/* Brand Slider */
.brand-slider {
    width: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    padding: 30px 0;
    position: relative;
}

.brand-track {
    display: flex;
    width: calc(250px * 16);
    animation: scroll-brands 40s linear infinite;
}

.brand-item {
    width: 250px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    flex-shrink: 0;
}

.brand-item img {
    max-height: 55px;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.4s ease;
}

.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Large Brand Slider */
.brand-slider-large {
    width: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    padding: 50px 0;
    position: relative;
}

.brand-slider-large .brand-track {
    display: flex;
    width: calc(320px * 16);
    animation: scroll-brands-large 45s linear infinite;
}

.brand-slider-large .brand-item {
    width: 320px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    flex-shrink: 0;
}

.brand-slider-large .brand-item img {
    max-height: 85px;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.4s ease;
}

.brand-slider-large .brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll-brands {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 8)); }
}

@keyframes scroll-brands-large {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-320px * 8)); }
}

/* Navigation */
.nav-link.active {
    color: #fcad03;
    font-weight: 700;
}

/* Product Cards */
.product-card-hover:hover .details-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Theme Classes */
.bg-primary { background-color: #fcad03; }
.text-primary { color: #fcad03; }
.hover\:bg-primary:hover { background-color: #fcad03; }
.hover\:text-primary:hover { color: #fcad03; }
.ring-primary { --tw-ring-color: #fcad03; }
.focus\:ring-primary:focus { --tw-ring-color: #fcad03; }

/* Theme Background/Text Classes */
.theme-bg { background-color: var(--bg-primary); }
.theme-bg-secondary { background-color: var(--bg-secondary); }
.theme-bg-tertiary { background-color: var(--bg-tertiary); }
.theme-text { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-tertiary { color: var(--text-tertiary); }
.theme-border { border-color: var(--border-color); }
.theme-card { background-color: var(--card-bg); border-color: var(--card-border); }

/* Theme Toggle Button */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.theme-toggle:hover {
    background-color: var(--accent);
}

.theme-toggle:hover svg {
    color: #000;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

/* Icon Visibility by Theme */
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
:root .icon-sun { display: none; }
:root .icon-moon { display: block; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Page Hero Banners */
.page-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fcad03' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.breadcrumb a {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb span {
    color: var(--accent);
}

/* Contact Form */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}

/* Map Container */
.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* Filter Buttons */
.filter-btn {
    transition: all 0.3s ease;
}

.filter-btn:hover {
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-hero {
        min-height: 200px;
        padding: 40px 20px;
    }
    
    .brand-slider {
        padding: 20px 0;
    }
    
    .brand-item {
        width: 150px;
        height: 60px;
        padding: 0 15px;
    }
    
    .brand-item img {
        max-height: 40px;
    }
}