/* ========================================
   DARKMODE STYLES - YR Apartment
   ======================================== */

/* Darkmode Toggle Button */
.darkmode-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #BBAAA4, #9a8a84);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: all 0.3s ease;
    overflow: hidden;
}

.darkmode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.darkmode-toggle i {
    font-size: 1.25rem;
    color: white;
    transition: all 0.3s ease;
}

.darkmode-toggle .fa-sun {
    display: none;
}

.darkmode-toggle .fa-moon {
    display: block;
}

/* Dark mode active state for toggle */
body.dark-mode .darkmode-toggle {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

body.dark-mode .darkmode-toggle .fa-sun {
    display: block;
}

body.dark-mode .darkmode-toggle .fa-moon {
    display: none;
}

/* ========================================
   DARK MODE STYLES
   ======================================== */

body.dark-mode {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
}

/* Headers & Text */
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,
body.dark-mode span,
body.dark-mode li,
body.dark-mode a {
    color: #d1d5db;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-500 {
    color: #6b7280 !important;
}

/* Main Header */
body.dark-mode #header,
body.dark-mode header {
    background: rgba(26, 26, 26, 0.98) !important;
    border-bottom: 1px solid #333;
}

body.dark-mode #header a,
body.dark-mode header a,
body.dark-mode header span {
    color: #e5e5e5 !important;
}

body.dark-mode #header a:hover,
body.dark-mode header a:hover {
    color: #BBAAA4 !important;
}

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

/* Cards & Boxes */
body.dark-mode .bg-white,
body.dark-mode .info-card,
body.dark-mode .rule-card,
body.dark-mode .contact-card,
body.dark-mode .faq-item,
body.dark-mode .privacy-section,
body.dark-mode .legal-section,
body.dark-mode .time-card,
body.dark-mode .service-card {
    background: #252525 !important;
    border-color: #333 !important;
}

body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background: #1f1f1f !important;
}

/* Value Cards (Über uns Seite) - müssen sich vom Hintergrund abheben */
body.dark-mode .value-card,
body.dark-mode .value-card.bg-gray-50 {
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
}

body.dark-mode .bg-champagne {
    background: rgba(187, 170, 164, 0.15) !important;
}

/* Borders */
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-100,
body.dark-mode .divide-gray-200 > * {
    border-color: #333 !important;
}

body.dark-mode .border-b {
    border-color: #333 !important;
}

/* Shadows */
body.dark-mode .shadow-lg,
body.dark-mode .shadow-md,
body.dark-mode .shadow-sm {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Form Elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-input {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e5e5e5 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #666 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #BBAAA4 !important;
    box-shadow: 0 0 0 3px rgba(187, 170, 164, 0.2) !important;
}

/* FAQ Specific */
body.dark-mode .faq-question {
    background: #2a2a2a !important;
}

body.dark-mode .faq-question:hover {
    background: #333 !important;
}

body.dark-mode .faq-answer p {
    color: #9ca3af !important;
}

/* Category Links / TOC */
body.dark-mode .category-link,
body.dark-mode .toc-link {
    color: #9ca3af !important;
}

body.dark-mode .category-link:hover,
body.dark-mode .category-link.active,
body.dark-mode .toc-link:hover,
body.dark-mode .toc-link.active {
    background: rgba(187, 170, 164, 0.15) !important;
    color: #BBAAA4 !important;
}

/* Sidebar */
body.dark-mode .sticky {
    background: #252525 !important;
}

/* Highlight Boxes */
body.dark-mode .highlight-box {
    background: linear-gradient(135deg, rgba(187, 170, 164, 0.15), rgba(187, 170, 164, 0.08)) !important;
}

body.dark-mode .notice-box {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08)) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Lists */
body.dark-mode .do-list li,
body.dark-mode .dont-list li,
body.dark-mode .feature-list li,
body.dark-mode .privacy-section ul li {
    border-color: #333 !important;
    color: #9ca3af !important;
}

/* Footer */
body.dark-mode footer,
body.dark-mode #footer,
body.dark-mode .bg-footerbg {
    background: #111111 !important;
}

body.dark-mode footer a,
body.dark-mode #footer a {
    color: #9ca3af !important;
}

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

/* Mobile Menu */
body.dark-mode .mobile-menu {
    background: #1a1a1a !important;
}

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

body.dark-mode .mobile-menu-nav a:hover,
body.dark-mode .mobile-menu-nav a.active {
    background: rgba(187, 170, 164, 0.25) !important;
    color: #BBAAA4 !important;
}

body.dark-mode .mobile-menu-nav a i {
    color: #BBAAA4 !important;
}

body.dark-mode .mobile-menu-contact-item a,
body.dark-mode .mobile-menu-contact-item {
    color: #d1d5db !important;
}

body.dark-mode .mobile-menu-cta {
    background: #222 !important;
}

body.dark-mode .mobile-menu-cta a {
    background: #25D366 !important;
    color: #ffffff !important;
}

body.dark-mode .mobile-menu-cta a:hover {
    background: #128C7E !important;
}

body.dark-mode .mobile-menu-divider {
    background: #333 !important;
}

/* Buttons */
body.dark-mode .btn,
body.dark-mode .button {
    background: #252525 !important;
    border-color: #BBAAA4 !important;
    color: #BBAAA4 !important;
}

body.dark-mode .btn:hover,
body.dark-mode .button:hover {
    background: #BBAAA4 !important;
    color: #1a1a1a !important;
}

/* CTA Sections - keep gradient but adjust */
body.dark-mode .bg-gradient-to-r {
    opacity: 0.95;
}

/* Hero sections - keep as is, they have overlays */

/* Specific color overrides */
body.dark-mode .text-gold,
body.dark-mode .text-accent {
    color: #BBAAA4 !important;
}

/* Green/Red status boxes */
body.dark-mode .bg-green-50 {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

body.dark-mode .bg-green-50 p,
body.dark-mode .bg-green-50 h4 {
    color: #6ee7b7 !important;
}

/* Image captions */
body.dark-mode .image-caption {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Section backgrounds */
body.dark-mode .section-light,
body.dark-mode .section-white {
    background: #1a1a1a !important;
}

body.dark-mode section.bg-white {
    background: #1f1f1f !important;
}

body.dark-mode section.bg-gray-50 {
    background: #1a1a1a !important;
}

/* Language badges */
body.dark-mode .flex-wrap span {
    background: #2a2a2a !important;
    color: #e5e5e5 !important;
}

/* Scrollbar for dark mode (if visible) */
body.dark-mode::-webkit-scrollbar {
    background: #1a1a1a;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #444;
}

/* Transition for smooth theme switch */
body,
body *,
body *::before,
body *::after {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Exclude certain animations from transition */
body .darkmode-toggle,
body [data-aos],
body .faq-answer,
body .faq-icon {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.4s ease,
                max-height 0.4s ease;
}

/* ========================================
   DARK MODE FIXES - März 2026
   ======================================== */

/* --- Hero sections without images (AGB, FAQ, Datenschutz, Impressum, Hausregeln) --- */
body.dark-mode .pt-32.pb-12.bg-gradient-to-br,
body.dark-mode section.pt-32.pb-12 {
    background: linear-gradient(to bottom right, #252525, #1a1a1a) !important;
}

body.dark-mode .pt-32.pb-12 h1,
body.dark-mode .pt-32.pb-12 p {
    color: #ffffff !important;
}

body.dark-mode .pt-32.pb-12 .text-gray-600,
body.dark-mode .pt-32.pb-12 .text-gray-500 {
    color: #9ca3af !important;
}

/* Icon boxes in hero sections */
body.dark-mode .pt-32.pb-12 .bg-gradient-to-br.from-gold {
    background: linear-gradient(to bottom right, #BBAAA4, #7c726a) !important;
}

/* --- Apartment page: Badge readability --- */
body.dark-mode .badge-family {
    background: rgba(187, 170, 164, 0.25) !important;
    color: #BBAAA4 !important;
}

body.dark-mode .badge-business {
    background: #0d47a1 !important;
    color: #90caf9 !important;
}

/* --- Apartment page: Booking section --- */
body.dark-mode .apartment-option {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e5e5e5 !important;
}

body.dark-mode .apartment-option.selected,
body.dark-mode .apartment-option:hover {
    border-color: #BBAAA4 !important;
    background: #333 !important;
}

body.dark-mode .apartment-option .option-title,
body.dark-mode .apartment-option .option-subtitle {
    color: #e5e5e5 !important;
}

body.dark-mode .apartment-option .option-icon {
    color: #BBAAA4 !important;
}

/* Calendar dark mode */
body.dark-mode .calendar-container {
    background: #252525 !important;
}

body.dark-mode .calendar-container .available {
    background-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

body.dark-mode .calendar-container .available:hover {
    background-color: #BBAAA4 !important;
    color: #fff !important;
}

body.dark-mode .calendar-container .unavailable {
    background-color: #1f1f1f !important;
    color: #555 !important;
}

body.dark-mode .calendar-container .selected {
    background-color: #BBAAA4 !important;
    color: #fff !important;
}

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

/* Booking summary */
body.dark-mode .booking-summary {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
}

body.dark-mode .booking-summary h3 {
    color: #ffffff !important;
}

body.dark-mode .booking-summary span {
    color: #d1d5db !important;
}

body.dark-mode .booking-summary .font-medium,
body.dark-mode .booking-summary .font-bold {
    color: #ffffff !important;
}

body.dark-mode .booking-summary .text-gold {
    color: #BBAAA4 !important;
}

body.dark-mode .booking-summary .bg-gray-50 {
    background: #333 !important;
}

/* Apartment info box */
body.dark-mode #apartment-info {
    background: rgba(187, 170, 164, 0.15) !important;
    color: #d1d5db !important;
}

body.dark-mode #apartment-info strong {
    color: #ffffff !important;
}

/* --- AGB page: Section cards --- */
body.dark-mode .agb-section,
body.dark-mode .privacy-section,
body.dark-mode .legal-section {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .agb-section h2,
body.dark-mode .agb-section h3,
body.dark-mode .privacy-section h2,
body.dark-mode .privacy-section h3,
body.dark-mode .legal-section h2,
body.dark-mode .legal-section h3 {
    color: #ffffff !important;
}

body.dark-mode .agb-section p,
body.dark-mode .privacy-section p,
body.dark-mode .legal-section p {
    color: #9ca3af !important;
}

body.dark-mode .agb-section strong,
body.dark-mode .privacy-section strong,
body.dark-mode .legal-section strong {
    color: #d1d5db !important;
}

/* TOC sidebar dark mode */
body.dark-mode .sticky .bg-footerbg {
    background: #333 !important;
}

/* --- Service page: Feature items text --- */
body.dark-mode .feature-item {
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
}

body.dark-mode .feature-item span {
    color: #d1d5db !important;
}

body.dark-mode .feature-item i {
    color: #BBAAA4 !important;
}

/* Service page: Co-hosting/Einrichtung boxes */
body.dark-mode .bg-champagne\/20,
body.dark-mode [class*="bg-champagne"] {
    background: rgba(187, 170, 164, 0.1) !important;
}

body.dark-mode .bg-gold\/10 {
    background: rgba(187, 170, 164, 0.15) !important;
}

/* --- FAQ: Question & Answer readability --- */
body.dark-mode .faq-item {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .faq-question h3 {
    color: #e5e5e5 !important;
}

body.dark-mode .faq-icon i {
    color: #BBAAA4 !important;
}

/* --- Impressum: Info cards --- */
body.dark-mode .info-card {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .info-card h3 {
    color: #ffffff !important;
}

body.dark-mode .info-card .font-medium.text-gray-800 {
    color: #BBAAA4 !important;
}

body.dark-mode .info-card p,
body.dark-mode .info-card span,
body.dark-mode .info-card a {
    color: #d1d5db !important;
}

body.dark-mode .info-card-icon {
    background: rgba(187, 170, 164, 0.2) !important;
}

/* --- Rules page: time cards, rule cards --- */
body.dark-mode .time-card {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .time-badge {
    color: #BBAAA4 !important;
}

body.dark-mode .notice-box {
    background: rgba(187, 170, 164, 0.1) !important;
    border-color: rgba(187, 170, 164, 0.3) !important;
}

body.dark-mode .notice-box h4,
body.dark-mode .notice-box p {
    color: #d1d5db !important;
}

/* --- Kontakt page: Contact cards --- */
body.dark-mode .contact-card {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .contact-card h3 {
    color: #ffffff !important;
}

body.dark-mode .contact-card p {
    color: #9ca3af !important;
}

/* --- Generic: Gradient text sections in dark mode --- */
body.dark-mode .bg-gradient-to-br.from-gray-50.to-white {
    background: linear-gradient(to bottom right, #252525, #1a1a1a) !important;
}

/* --- Apartment page: Review cards --- */
body.dark-mode .bg-gray-50 p.italic {
    color: #d1d5db !important;
}

body.dark-mode .bg-gray-50 .font-semibold {
    color: #e5e5e5 !important;
}

/* --- Privacy page: bg-gray-50 info boxes --- */
body.dark-mode .privacy-section .bg-gray-50 {
    background: #1f1f1f !important;
}

body.dark-mode .privacy-section .bg-gray-50 p {
    color: #d1d5db !important;
}

body.dark-mode .privacy-section .bg-gray-50 strong {
    color: #ffffff !important;
}

/* --- Checkout checklist items (rules page) --- */
body.dark-mode .flex.items-start.p-6.bg-gray-50 h4 {
    color: #e5e5e5 !important;
}

body.dark-mode .flex.items-start.p-6.bg-gray-50 p {
    color: #9ca3af !important;
}

/* --- CTA gradient sections - ensure text stays visible --- */
body.dark-mode .bg-gradient-to-r.from-gray-800.to-gray-900 {
    background: linear-gradient(to right, #111, #1a1a1a) !important;
}

/* --- Contact form labels --- */
body.dark-mode label {
    color: #d1d5db !important;
}

body.dark-mode .text-sm.text-gray-600 label,
body.dark-mode label.text-sm {
    color: #9ca3af !important;
}

/* --- Review Slider Dark Mode --- */
body.dark-mode .review-slide .bg-gray-50 {
    background: #252525 !important;
    border: 1px solid #333 !important;
}

body.dark-mode .review-slide p.italic {
    color: #d1d5db !important;
}

body.dark-mode .review-slide .font-semibold {
    color: #e5e5e5 !important;
}

body.dark-mode .review-slide .text-gray-500,
body.dark-mode .review-slide .text-gray-400 {
    color: #6b7280 !important;
}

body.dark-mode .review-nav {
    background: #2a2a2a !important;
    border-color: #BBAAA4 !important;
    color: #BBAAA4 !important;
}

body.dark-mode .review-nav:hover {
    background: #BBAAA4 !important;
    color: #1a1a1a !important;
}

body.dark-mode .review-dot {
    background: #444 !important;
}

body.dark-mode .review-dot.active {
    background: #BBAAA4 !important;
}