/**
 * JTL Messeshop - Farbdefinitionen
 * Diese Datei überschreibt die Standard-Cartzilla-Farben
 * Basierend auf dem JTL-Software.com Brand Design
 * 
 * Nach Änderungen: Template-Cache leeren!
 */

:root,
[data-bs-theme=light] {
    /* ===========================
       HAUPTFARBEN
       =========================== */
    
    /* Primärfarbe (Blaugrau - JTL Brand) */
    --cz-primary: #435a6b;
    --cz-primary-rgb: 67, 90, 107;
    
    /* Sekundärfarbe (Orange - JTL Akzent) */
    --cz-secondary: #FF9A26;
    --cz-secondary-rgb: 255, 154, 38;
    --cz-secondary-color: #FF9A26;
    --cz-secondary-color-rgb: 255, 154, 38;
    
    /* Success-Farbe (Grün) */
    --cz-success: #28a745;
    --cz-success-rgb: 40, 167, 69;
    
    /* Info-Farbe (Blaugrau) */
    --cz-info: #435a6b;
    --cz-info-rgb: 67, 90, 107;
    
    /* Text-Farben */
    --cz-body-color: #333333;
    --cz-body-color-rgb: 51, 51, 51;
    
    
    /* ===========================
       HEADER FARBEN
       =========================== */
    
    /* Primäre Hintergrundfarbe Header */
    --jtl-header-bg-primary: #ffffff;
    
    /* Primäre Schriftfarbe Header */
    --jtl-header-color-primary: #333333;
    
    /* Sekundäre Hintergrundfarbe Header (Topbar) */
    --jtl-header-bg-secondary: #f8f9fa;
    
    /* Sekundäre Schriftfarbe Header */
    --jtl-header-color-secondary: #6c757d;
    
    
    /* ===========================
       FOOTER FARBEN
       =========================== */
    
    /* Footer Hintergrundfarbe (Dunkelgrau) */
    --jtl-footer-bg: #364856;
    
    /* Footer Schriftfarbe */
    --jtl-footer-color: #ffffff;
    
    /* Copyright-Hintergrundfarbe */
    --jtl-footer-copyright-bg: #25323b;
    
    /* Copyright-Schriftfarbe */
    --jtl-footer-copyright-color: #ffffff;
    
    
    /* ===========================
       LINK FARBEN
       =========================== */
    
    --cz-link-color: #435a6b;
    --cz-link-color-rgb: 67, 90, 107;
    --cz-link-hover-color: #FF9A26;
    --cz-link-hover-color-rgb: 255, 154, 38;
    
    
    /* ===========================
       BUTTON FARBEN & GRADIENTS
       =========================== */
    
    /* Primary Button Gradient */
    --jtl-btn-gradient-start: #FFC935;
    --jtl-btn-gradient-end: #FF9A26;
    
    /* Primary Button Hover Gradient (umgekehrt) */
    --jtl-btn-gradient-hover-start: #FF9A26;
    --jtl-btn-gradient-hover-end: #FFC935;
    
    /* Navigation Hover */
    --jtl-nav-hover-color: #FF9A26;
    --jtl-nav-hover-underline: #FF9A26;
    
    
    /* ===========================
       FORMULAR VALIDIERUNG
       =========================== */
    
    --cz-form-valid-color: #28a745;
    --cz-form-valid-border-color: #28a745;
}


/* ===========================
   DARK MODE ANPASSUNGEN
   =========================== */

[data-bs-theme=dark] {
    /* Bei Bedarf Dark Mode Farben hier anpassen */
    --cz-primary: #435a6b;
    --cz-secondary: #FF9A26;
}


/* ===========================
   ANWENDUNG AUF COMPONENTS
   =========================== */

/* Navigation Links */
.navbar .navbar-nav .nav-link,
.general-menu .nav-link {
    color: var(--jtl-header-color-primary) !important;
    transition: color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

.navbar .navbar-nav .nav-link:hover,
.general-menu .nav-item:hover,
.general-menu .nav-link:hover {
    box-shadow: inset 0 -3px 0 0 var(--jtl-nav-hover-underline);
    color: var(--jtl-nav-hover-color) !important;
}

/* Topbar */
.topbar {
    background-color: var(--jtl-header-bg-secondary) !important;
    color: var(--jtl-header-color-secondary) !important;
}

/* Primary Buttons mit Gradient */
.btn-primary {
    position: relative;
    background: linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%);
    border: none;
    color: #ffffff;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(64deg, var(--jtl-btn-gradient-hover-start) 0%, var(--jtl-btn-gradient-hover-end) 100%);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    z-index: -1;
    border-radius: inherit;
}

.btn-primary:hover::before,
.btn-primary:focus::before {
    opacity: 1;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
}

/* Outline Primary Buttons mit Gradient Border & Icon */
.btn-outline-primary {
    position: relative;
    border: 2px solid transparent;
    background: 
        transparent padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%) border-box;
    transition: all 300ms ease-in-out;
}

.btn-outline-primary i,
.btn-outline-primary .ci-heart,
.btn-outline-primary [class*="ci-"] {
    background: linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 300ms ease-in-out;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: 
        transparent padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-hover-start) 0%, var(--jtl-btn-gradient-hover-end) 100%) border-box;
}

.btn-outline-primary:hover i,
.btn-outline-primary:focus i,
.btn-outline-primary:hover [class*="ci-"],
.btn-outline-primary:focus [class*="ci-"] {
    background: linear-gradient(64deg, var(--jtl-btn-gradient-hover-start) 0%, var(--jtl-btn-gradient-hover-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Badge on outline-primary buttons keeps solid gradient background */
.btn-outline-primary .badge.text-bg-primary {
    background: linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%) !important;
    color: #ffffff !important;
}

/* Search Field with Gradient Border */
.navbar .form-control[type="search"] {
    position: relative;
    border: 2px solid transparent;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%) border-box;
    transition: all 300ms ease-in-out;
}

.navbar .form-control[type="search"]:focus {
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-hover-start) 0%, var(--jtl-btn-gradient-hover-end) 100%) border-box;
    box-shadow: 0 0 20px rgba(255, 154, 38, 0.15);
}

/* Mobile search field */
#searchBar .form-control[type="search"] {
    position: relative;
    border: 2px solid transparent;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-start) 0%, var(--jtl-btn-gradient-end) 100%) border-box;
    transition: all 300ms ease-in-out;
}

#searchBar .form-control[type="search"]:focus {
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(64deg, var(--jtl-btn-gradient-hover-start) 0%, var(--jtl-btn-gradient-hover-end) 100%) border-box;
    box-shadow: 0 0 20px rgba(255, 154, 38, 0.15);
}

/* Footer Styling */
.footer {
    background-color: var(--jtl-footer-bg) !important;
    color: var(--jtl-footer-color) !important;
}

.footer a {
    color: var(--jtl-footer-color) !important;
}

.footer a:hover {
    color: var(--cz-secondary) !important;
}

/* Copyright Section */
.footer .copyright,
.footer-copyright {
    background-color: var(--jtl-footer-copyright-bg) !important;
    color: var(--jtl-footer-copyright-color) !important;
}


/* ===========================
   HINWEISE FÜR ENTWICKLER
   =========================== */

/*
 * VERWENDUNG:
 * -----------
 * 1. Diese Datei in template.xml unter <Minify><CSS> einbinden
 * 2. Nach Änderungen Template-Cache im Backend leeren
 * 3. Farben können hier zentral angepasst werden
 * 
 * JTL BRAND FARBSCHEMA:
 * ---------------------
 * Primärfarbe        → --cz-primary (#435a6b) - Blaugrau
 * Sekundärfarbe      → --cz-secondary (#FF9A26) - Orange
 * Textfarbe          → --cz-body-color (#333333)
 * Header BG          → --jtl-header-bg-primary (#ffffff)
 * Footer BG          → --jtl-footer-bg (#364856)
 * Footer Copyright   → --jtl-footer-copyright-bg (#25323b)
 * 
 * BUTTON GRADIENT:
 * ----------------
 * Normal:  linear-gradient(64deg, #FFC935 0%, #FF9A26 100%)
 * Hover:   linear-gradient(64deg, #FF9A26 0%, #FFC935 100%)
 * 
 * NAVIGATION:
 * -----------
 * Hover: box-shadow inset 0 -3px 0 0 #FF9A26
 * Color: #FF9A26
 */