/* CampSecure Theme - Dunkelgrün/Teal Farbschema */

/* Primary Colors - Dunkelgrün/Teal */
:root {
    --campsecure-primary: #032905; /* Sehr dunkles Grün */
    --campsecure-primary-dark: #08463a;
    --campsecure-primary-light: #F3FFEA; /* Helle Schrift in grüner Box */
    
    --campsecure-accent: #f97316; /* Orange für Security/Alarm */
    --campsecure-accent-light: #fb923c;
    
    --campsecure-dark: #0a4d3f;
    --campsecure-light: #a3e4d4;
    --campsecure-card: #0f5d4f;
    --campsecure-input: #1a9b85;
    --campsecure-border: rgba(163, 228, 212, 0.2);
    --campsecure-text-dark: #032905; /* Dunkelgrün für Texte */
}

/* Background Colors */
.bg-campsecure-primary {
    background-color: var(--campsecure-primary) !important;
}

.bg-campsecure-dark {
    background-color: var(--campsecure-dark) !important;
}

.bg-campsecure-light {
    background-color: #e6f7f3 !important;
}

.bg-campsecure-card {
    background-color: var(--campsecure-card) !important;
}

.campsecure-hero {
    background: linear-gradient(135deg, var(--campsecure-dark) 0%, var(--campsecure-primary) 100%);
}

/* Text Colors */
.text-campsecure-light {
    color: var(--campsecure-light) !important;
}

.text-campsecure-primary-light {
    color: var(--campsecure-primary-light) !important;
}

.text-campsecure-accent {
    color: var(--campsecure-accent) !important;
}

.text-white {
    color: #ffffff !important;
}

/* Buttons */
.btn-campsecure {
    background-color: var(--campsecure-primary);
    border-color: var(--campsecure-primary);
    color: white;
}

.btn-campsecure:hover {
    background-color: var(--campsecure-primary-dark);
    border-color: var(--campsecure-primary-dark);
    color: white;
}

.btn-outline-campsecure {
    border-color: var(--campsecure-primary);
    color: var(--campsecure-primary);
}

.btn-outline-campsecure:hover {
    background-color: var(--campsecure-primary);
    color: white;
}

/* Icon Styles */
.icon.text-campsecure-accent,
.text-campsecure-accent {
    color: var(--campsecure-accent) !important;
}

/* Form Controls */
.form-control.bg-campsecure-input {
    background-color: rgba(26, 155, 133, 0.2) !important;
    border-color: var(--campsecure-primary);
    color: white;
}

.form-control.bg-campsecure-input:focus {
    background-color: rgba(26, 155, 133, 0.3) !important;
    border-color: var(--campsecure-accent);
    color: white;
}

.form-control.bg-campsecure-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Labels */
label {
    color: var(--campsecure-light);
}

/* Border Colors */
.border-campsecure-border {
    border-color: var(--campsecure-border) !important;
}

/* Badge */
.badge.bg-campsecure-accent {
    background-color: var(--campsecure-accent) !important;
    color: white;
}

/* Hero - no overlay, just content on top */
.campsecure-hero {
    position: relative;
}

.campsecure-hero > .container {
    position: relative;
    z-index: 2;
}

/* Accordion in dark mode */
.accordion.dark .accordion-button {
    background-color: transparent;
    color: white;
}

.accordion.dark .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: white;
}

.accordion.dark .accordion-item {
    background-color: transparent;
}

.accordion.dark .accordion-body {
    color: var(--campsecure-light);
}

/* Price Box Highlight */
.price-box.border-campsecure-accent {
    border-color: var(--campsecure-accent) !important;
}

/* Testimonials */
.testimonial-card {
    background: transparent;
}

/* Cards */
.card.bg-transparent {
    background-color: transparent;
}

/* Store Buttons */
.store-button {
    transition: transform 0.2s;
}

.store-button:hover {
    transform: translateY(-2px);
}

/* Smooth Transitions */
.nav-link,
.btn,
.card {
    transition: all 0.3s ease;
}

/* Hide Purple Classes - prevent conflicts */
.purple-light {
    background: var(--campsecure-dark);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--campsecure-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--campsecure-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--campsecure-primary-light);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .campsecure-hero {
        padding-top: 100px !important;
    }
    
    .display-6 {
        font-size: 2rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
}

/* Icon Container Fix */
.icon.icon-xl {
    width: 64px;
    height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.icon.icon-xl i,
.icon.icon-xl .fa-solid,
.icon.icon-xl .fa {
    font-size: 2.5rem !important;
    color: white !important;
    display: block !important;
}

/* Icon SVG Path fix */
.icon svg {
    width: 100%;
    height: 100%;
}

/* Animation for Icons */
@keyframes pulse-alarm {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.icon-animate {
    animation: pulse-alarm 2s ease-in-out infinite;
}

/* Hover Effects */
.icon:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ============================================
   Globale Hamburger-Navigation (Desktop + Mobile)
   BOOTSTRAP-NEUTRALISIERT - Keine Breakpoints mehr!
   ============================================ */

/* Hamburger Icon - IMMER sichtbar, auch auf Desktop */
.hamburger,
.header .hamburger,
.navbar .hamburger {
    width: 32px !important;
    height: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    position: relative !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hamburger span,
.header .hamburger span,
.navbar .hamburger span {
    display: block !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin: 0 !important;
}

.hamburger.active span:nth-child(1),
.header .hamburger.active span:nth-child(1),
.navbar .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}

.hamburger.active span:nth-child(2),
.header .hamburger.active span:nth-child(2),
.navbar .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
}

.hamburger.active span:nth-child(3),
.header .hamburger.active span:nth-child(3),
.navbar .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}

/* Navigation Overlay - Slide-In von rechts */
.nav-overlay,
#navOverlay {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100% !important;
    max-width: 400px !important;
    height: 100vh !important;
    background: rgba(2, 30, 10, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 9000 !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
}

.nav-overlay.open,
#navOverlay.open {
    right: 0 !important;
    pointer-events: auto !important;
}

/* Navigation Menu */
.nav-menu {
    list-style: none !important;
    padding: 80px 32px 32px !important;
    margin: 0 !important;
}

.nav-menu li {
    margin-bottom: 8px !important;
}

.nav-menu a {
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--campsecure-light) !important;
    padding-left: 20px !important;
}

.nav-menu .nav-cta {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-menu .nav-cta button {
    margin: 0 !important;
}

/* Mobile: Fullscreen Overlay */
@media (max-width: 767px) {
    .nav-overlay,
    #navOverlay {
        max-width: 100% !important;
        background: rgba(2, 30, 10, 0.92) !important;
        right: -100% !important;
    }
    
    .nav-overlay.open,
    #navOverlay.open {
        right: 0 !important;
    }
    
    .nav-menu {
        padding: 100px 24px 32px !important;
    }
    
    .nav-menu a {
        font-size: 1.4rem !important;
        padding: 16px 20px !important;
        color: #fff !important;
    }
}

/* Body Scroll Lock wenn Menü offen */
body.menu-open {
    overflow: hidden !important;
}

/* ============================================
   BOOTSTRAP-ÜBERSCHREIBUNGEN
   Alle Media Queries die Hamburger verstecken werden neutralisiert
   ============================================ */

/* Überschreibe alle Bootstrap Media Queries für Hamburger */
@media (min-width: 992px) {
    /* Hamburger bleibt IMMER sichtbar */
    .hamburger,
    .header .hamburger,
    .navbar .hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Alte .main-menu Klassen komplett verstecken */
    .main-menu,
    .navbar-collapse,
    .collapse {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (min-width: 1200px) {
    .hamburger,
    .header .hamburger,
    .navbar .hamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}