/* ================================================================
DARK MODE THEME - Astro Poulet
Applied when .dark-mode class is added to body
================================================================ */

/* Root Colors - Light Mode (Default) */
:root {
    --ap-bg-primary: #ffffff;
    --ap-bg-secondary: #f8f7f5;
    --ap-text-primary: #000000;
    --ap-text-secondary: #000000;
    --ap-text-muted: #000000;
    --ap-border-color: #000000;
    --ap-border-light: #000000;
    --ap-primary-color: #f98c1f;
    --ap-primary-hover: #e07a10;
}

/* Root Colors - Dark Mode + Global Styling */
body.dark-mode {
    /* CSS Variables */
    --ap-bg-primary: #000000 !important;
    --ap-bg-secondary: #000000 !important;
    --ap-text-primary: #ffffff !important;
    --ap-text-secondary: #ffffff !important;
    --ap-text-muted: #ffffff !important;
    --ap-border-color: #000000 !important;
    --ap-border-light: #000000 !important;
    --ap-primary-color: #f98c1f !important;
    --ap-primary-hover: #ff9d33 !important;

    /* Global Background & Text */
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.dark-mode * {
    color: inherit;
}

body.dark-mode a {
    color: #ffffff !important;
}

body.dark-mode a:hover {
    color: #f98c1f !important;
}

/* ================================================================
CORE / REUSABLE COMPONENT STYLES
(Used across all pages - single source of truth)
================================================================ */

/* ================================================================
HEADER & NAVIGATION
================================================================ */

body.dark-mode .ap-header {
    background: #000000 !important;
    border-bottom-color: #000000 !important;
}

body.dark-mode .ap-logo,
body.dark-mode .ap-logo-text {
    color: #ffffff !important;
}

body.dark-mode .ap-logo-orange {
    color: #f98c1f !important;
}

body.dark-mode .ap-nav {
    background: transparent !important;
}

body.dark-mode .ap-nav-link {
    color: #ffffff !important;
    background: transparent !important;
}

body.dark-mode .ap-nav-link:hover,
body.dark-mode .ap-nav-link.active {
    color: #f98c1f !important;
    background: transparent !important;
}

body.dark-mode .ap-hamburger span {
    background: #ffffff !important;
}

body.dark-mode .ap-mobile-nav {
    background: #000000 !important;
    border-top-color: #000000 !important;
}

body.dark-mode .ap-mobile-nav a {
    color: #ffffff !important;
    border-bottom-color: #000000 !important;
}

body.dark-mode .ap-mobile-nav a:hover {
    color: #f98c1f !important;
}

/* ================================================================
BUTTONS
================================================================ */

body.dark-mode .ap-btn-commander {
    background: #f98c1f !important;
    color: #fff !important;
}

body.dark-mode .ap-btn-commander:hover {
    color: red !important;
}

body.dark-mode .theme-btn {
    background: #f98c1f !important;
    color: #fff !important;
}

body.dark-mode .theme-btn:hover {
    background: #ff9d33 !important;
}

body.dark-mode button {
    color: #f1f5f9 !important;
}

body.dark-mode .ap-footer-btn:hover {
    background: #f98c1f/90 !important;
    color: red !important;
}
/* ================================================================
FORMS & INPUTS
================================================================ */

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode textarea,
body.dark-mode select {
    background: #ffffff !important; /* Fond changé en blanc */
    color: #000000 !important; /* Texte changé en noir pour la lisibilité */
    border-color: #cccccc !important; /* Bordure grise pour bien délimiter les champs */
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #666666 !important; /* Placeholder en gris foncé */
}

/* ================================================================
CARDS & BOXES
================================================================ */

body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .section {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* ================================================================
TEXT & HEADINGS
================================================================ */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode p {
    color: #ffffff !important;
}

body.dark-mode .text-muted,
body.dark-mode .text-secondary {
    color: #ffffff !important;
}

/* Protect orange text from being overridden */

/* --About-- */
body.dark-mode .text-\[\#f98c1f\] {
    color: #f98c1f !important;

/* --Hero Homepage-- */

body.dark-mode .ap-hero-tagline,
body.dark-mode .ap-hero-tagline span {
    color: #f98c1f !important;
}

body.dark-mode .ap-hero-t2 { 
    color: #f98c1f !important; 
}

}

/* ================================================================
BORDERS & DIVIDERS
================================================================ */

body.dark-mode hr,
body.dark-mode .divider {
    border-color: #000000 !important;
}

body.dark-mode [class*="border"] {
    border-color: #000000 !important;
}

/* ================================================================
NAVBAR
================================================================ */

body.dark-mode nav {
    background: #000000 !important;
    border-color: #000000 !important;
}

body.dark-mode nav a {
    color: #ffffff !important;
}

body.dark-mode nav a:hover {
    color: #f98c1f !important;
}

body.dark-mode .navbar {
    background: #000000 !important;
}

body.dark-mode .navbar-brand {
    color: #ffffff !important;
}

body.dark-mode .ap-header-inner {
    background: #000000 !important;
}

body.dark-mode .ap-language-switcher {
    background: #000000 !important;
    color:  #000000 !important;
}

/* ================================================================
MODALS & OVERLAYS
================================================================ */

body.dark-mode .modal,
body.dark-mode .modal-content {
    background: #000000 !important;
    color: #ffffff !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #000000 !important;
}

body.dark-mode .overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ================================================================
TABLES
================================================================ */

body.dark-mode table {
    color: #ffffff !important;
}

body.dark-mode thead {
    background: #000000 !important;
}

body.dark-mode tbody tr {
    border-bottom-color: #000000 !important;
}

body.dark-mode tbody tr:hover {
    background: rgba(249, 140, 31, 0.05) !important;
}

body.dark-mode td,
body.dark-mode th {
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* ================================================================
BREADCRUMBS
================================================================ */

body.dark-mode .breadcrumb {
    background: #000000 !important;
}

body.dark-mode .breadcrumb-item {
    color: #ffffff !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #f98c1f !important;
}

/* ================================================================
ALERTS & NOTIFICATIONS
================================================================ */

body.dark-mode .alert {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

body.dark-mode .alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
    color: #86efac !important;
}

body.dark-mode .alert-error,
body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

body.dark-mode .alert-warning {
    background: rgba(249, 140, 31, 0.1) !important;
    border-color: #f98c1f !important;
    color: #fed7aa !important;
}

/* ================================================================
CODE & SNIPPETS
================================================================ */

body.dark-mode code,
body.dark-mode pre {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ================================================================
FOOTER
================================================================ */

body.dark-mode footer {
    background: #000000 !important;
    color: #ffffff !important;
    border-top-color: #000000 !important;
}

body.dark-mode footer h4,
body.dark-mode footer h5 {
    color: #ffffff !important;
}

body.dark-mode footer a {
    color: #ffffff !important;
}

body.dark-mode footer a:hover {
    color: #f98c1f !important;
}

/* ================================================================
OFFCANVAS MENU
================================================================ */

body.dark-mode .offcanvas__info {
    background: #000000 !important;
}

body.dark-mode .offcanvas__wrapper,
body.dark-mode .offcanvas__content {
    background: #000000 !important;
    color: #ffffff !important;
}

body.dark-mode .offcanvas__contact h4 {
    color: #ffffff !important;
}

body.dark-mode .offcanvas__contact-text a,
body.dark-mode .mobile-menu a {
    color: #ffffff !important;
}

body.dark-mode .mobile-menu a:hover {
    color: #f98c1f !important;
}

/* ================================================================
SCROLLBAR
================================================================ */

body.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #000000 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #000000 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #f98c1f !important;
}

/* ================================================================
UTILITY CLASSES
================================================================ */

body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background: #000000 !important;
}

body.dark-mode .text-dark {
    color: #ffffff !important;
}

body.dark-mode .text-light {
    color: #ffffff !important;
}

/* ================================================================
PRELOADER & DECORATIVE
================================================================ */

body.dark-mode .preloader {
    background: #000000 !important;
}

body.dark-mode .back-to-top {
    background: #f98c1f !important;
    color: #fff !important;
}

body.dark-mode .back-to-top:hover {
    background: #ff9d33 !important;
}

/* ================================================================
TRANSITIONS
================================================================ */

html,
body,
body.dark-mode {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================================================================
BACKGROUND IMAGES & SECTIONS
================================================================ */

body.dark-mode section {
    background-color: #000000 !important;
}

body.dark-mode .section {
    background-color: #000000 !important;
}

body.dark-mode .banner,
body.dark-mode .hero {
    background-color: #000000 !important;
}

body.dark-mode .blog-content,
body.dark-mode .page-content {
    background: #000000 !important;
}

/* ================================================================
SPECIFIC ELEMENT FIXES
================================================================ */

body.dark-mode [class*="bg-color"],
body.dark-mode [class*="bg-light"] {
    background-color: #000000 !important;
}

body.dark-mode .nav-item,
body.dark-mode .navbar-item {
    background: transparent !important;
}

/* ================================================================
GALLERY & IMAGE BOXES
================================================================ */

body.dark-mode .gallery-item,
body.dark-mode .image-box {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* ================================================================
SIDEBAR & WIDGETS
================================================================ */

body.dark-mode .sidebar,
body.dark-mode .widget,
body.dark-mode .sidebar-widget {
    background: #000000 !important;
    border-color: #000000 !important;
}

body.dark-mode .widget-title {
    color: #ffffff !important;
}

/* ================================================================
PAGE-SPECIFIC OVERRIDES
(Unique styling for specific pages - organized by page)
================================================================ */

/* ================================================================
FRONT PAGE
================================================================ */

/* --Hero-- */

body.dark-mode .ap-hero-tagline,
body.dark-mode .ap-hero-tagline span {
    color: #f98c1f !important;
}

body.dark-mode .ap-hero-t2 { color: #f98c1f !important; }

body.dark-mode .ap-hero-btns a:hover {
    color: red !important;
}

/* --Bouncing Arrow-- */

body.dark-mode .ap-hero-arrow  {
    color: #f98c1f !important;
}

/* --Brand Story-- */

body.dark-mode .ap-hero-btns span {
    color: #f1f5f9 !important;
}

/* --Best Sellers-- */

body.dark-mode .ap-card {
    background: #000000 !important;
}

body.dark-mode .ap-card-img {
    background-color: #ff9113cf !important;
}

/* --Brand Category-- */

body.dark-mode .ap-brand {
    background: #000000 !important;
    color: #ffffff !important;
}
body.dark-mode .ap-cat-tile  {
    background: #000000 !important;
    border-color: #000000 !important;
}

body.dark-mode .ap-cat-tile:hover {
    border-color: #f98c1f !important;
}

/* --Brand Location-- */

body.dark-mode .ap-loc-hours-row span {
    color: #ffffff !important;
}

/* ================================================================
MENU PAGE
================================================================ */

/* --Category Navigation-- */
body.dark-mode .category-nav {
    background: #000000 !important;
    border-color: #000000 !important;
}

body.dark-mode .category-nav a {
    color: #ffffff !important;
    background: transparent !important;
}

body.dark-mode .category-nav a:hover,
body.dark-mode .category-nav a.active {
    color: #f98c1f !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    body.dark-mode .category-nav-toggle {
        color: #ffffff !important;
        background: rgba(249,140,31,0.12) !important;
        border-color: rgba(249,140,31,0.28) !important;
    }

    body.dark-mode .category-nav-inner {
        background: #050505 !important;
        border-color: rgba(249,140,31,0.16) !important;
    }

    body.dark-mode .category-nav a {
        color: #ffffff !important;
        background: rgba(249,140,31,0.12) !important;
        border: 1px solid rgba(249,140,31,0.28) !important;
    }

    body.dark-mode .category-nav a:hover,
    body.dark-mode .category-nav a.active {
        color: #111111 !important;
        background: #f98c1f !important;
        border-color: #f98c1f !important;
    }
}

/* ================================================================
ABOUT PAGE 
================================================================ */

/* --Buttons-- */

body.dark-mode .ap-btn-outline {
    color: #fff !important;
    border-color: rgba(255,255,255,0.2) !important;
}

body.dark-mode .ap-btn-outline:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

body.dark-mode .bg-\[\#f98c1f\]:hover {
    background: #f98c1f/90 !important;
    color: red !important;
}

body.dark-mode .border.border-white\/20:hover {
    color: red !important;
}

/* --Piliers / Values Section-- */
body.dark-mode .bg-slate-100 {
    background: #000000 !important;
}

body.dark-mode .bg-white {
    background: #000000 !important;
}

body.dark-mode .border-orange-100 {
    border-color: #000000 !important;
}

body.dark-mode .border-orange-200 {
    border-color: #000000 !important;
}

body.dark-mode .text-slate-600 {
    color: #ffffff !important;
}

/* --Piliers / Icon customization / Preserve hover in dark mode-- */

body.dark-mode .bg-orange-100 {
    background: #000000 !important;
}

body.dark-mode .material-symbols-outlined {
    color: #ff9d33 !important;
}

body.dark-mode .group:hover .bg-orange-100 {
    background: #f98c1f !important;
}

body.dark-mode .group:hover .material-symbols-outlined {
    color: #120d08 !important;
}

/* ================================================================
FRANCHISE PAGE 
================================================================ */


/* --Location / Teaser Section-- */

body.dark-mode .bg-white\/90 {
    background: rgba(0, 0, 0, 0.95) !important;
}

body.dark-mode .dark\:bg-slate-900\/90 {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* ================================================================
DETAIL ITEM MENU PAGE 
================================================================ */

body.dark-mode .ap-detail-content {
    background: #000000 !important;
    color: #ffffff !important;
}

body.dark-mode .ap-ingredients p {
    color: #ffffff !important;
}

/* ================================================================
CONTACT PAGE 
================================================================ */

/* -- Success Alert Message -- */
body.dark-mode .ap-alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid #22c55e !important;
    color: #86efac !important;
}

/* -- Map Overlay Card -- */
body.dark-mode .ap-map-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .ap-map-card h4,
body.dark-mode .ap-map-card p {
    color: #f1f5f9 !important;
}

/* Fix for the car icon inside the map card to ensure it stays visible */
body.dark-mode .ap-map-card-icon .material-symbols-outlined {
    color: #f98c1f !important;
}