/**
 * Dark Mode Styles
 * Only changes colors, design remains the same
 */

/* Dark Mode Variables - Uses CSS variables from :root (set in base.blade.php) */
html[data-theme="dark"] {
    /* Background Colors - Use customizable variables */
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --bg-surface: var(--dark-bg-secondary);
    --bg-card: var(--dark-bg-secondary);
    --bg-input: var(--dark-bg-tertiary);

    /* Text Colors - Use customizable variables */
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: #b0b0b0;
    --text-muted: #888888;

    /* Border Colors - Use customizable variables */
    --border-color: var(--dark-border-color);
    --border-light: #333333;

    /* Header Colors - Use customizable variables */
    --top-header-background-color: var(--dark-top-header-bg);
    --top-header-text-color: var(--dark-top-header-text);
    --main-header-background-color: var(--dark-header-bg);
    --main-header-text-color: var(--dark-header-text);
    --main-header-border-color: var(--dark-border-color);
    --top-header-scrolled-background-color: var(--dark-top-header-scrolled-bg);
    --top-header-scrolled-text-color: var(--dark-top-header-scrolled-text);
    --main-header-scrolled-background-color: var(--dark-main-header-scrolled-bg);
    --main-header-scrolled-text-color: var(--dark-main-header-scrolled-text);

    /* Transparent Header Colors (Homepage) - Dark Mode */
    --transparent-header-top-bg: var(--dark-transparent-header-top-bg);
    --transparent-header-top-text: var(--dark-transparent-header-top-text);
    --transparent-header-main-bg: var(--dark-transparent-header-main-bg);
    --transparent-header-main-text: var(--dark-transparent-header-main-text);
    --transparent-header-main-border: var(--dark-transparent-header-main-border);
    --transparent-header-top-scrolled-bg: var(--dark-transparent-header-top-scrolled-bg);
    --transparent-header-top-scrolled-text: var(--dark-transparent-header-top-scrolled-text);
    --transparent-header-main-scrolled-bg: var(--dark-transparent-header-main-scrolled-bg);
    --transparent-header-main-scrolled-text: var(--dark-transparent-header-main-scrolled-text);

    /* Footer Colors - Use customizable variables */
    --footer-background-color: var(--dark-footer-bg);
    --footer-text-color: var(--dark-footer-text);

    /* Breadcrumb Colors */
    --breadcrumb-background-color: var(--dark-bg-secondary);
    --breadcrumb-text-color: var(--dark-text-primary);

    /* Card/Box Colors */
    --card-background: var(--dark-bg-secondary);
    --card-border: var(--dark-border-color);

    /* Form Colors */
    --input-background: var(--dark-bg-tertiary);
    --input-border: var(--dark-border-color);
    --input-text: var(--dark-text-primary);
    --input-placeholder: #888888;

    /* Link Colors */
    --link-color: var(--dark-text-primary);
    --link-hover-color: var(--primary-color);

    /* Shadow */
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* Bootstrap Modal */
    --bs-modal-bg: #000000;
}

/* Apply Dark Mode to Body and HTML - High specificity */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] #wrapper {
    background-color: var(--bg-primary) !important;
}

/* Headers - High specificity */
html[data-theme="dark"] .top-header {
    background-color: var(--top-header-background-color) !important;
    color: var(--top-header-text-color) !important;
}

html[data-theme="dark"] .top-header a,
html[data-theme="dark"] .top-header .top-header-item {
    color: var(--top-header-text-color) !important;
}

html[data-theme="dark"] .main-header {
    background-color: var(--main-header-background-color) !important;
    color: var(--main-header-text-color) !important;
    border-bottom-color: var(--main-header-border-color) !important;
}

html[data-theme="dark"] .main-header .navigation>li>a,
html[data-theme="dark"] .main-header .header-account a {
    color: var(--main-header-text-color) !important;
}

/* Sections */
html[data-theme="dark"] section {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .flat-section {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Cards and Boxes */
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .boxright,
html[data-theme="dark"] .bg-surface {
    background-color: var(--card-background) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
}

/* Override for box-contact-v2 */
html[data-theme="dark"] .box-contact-v2,
html[data-theme="dark"] body .box-contact-v2 {
    background-color: #2d2d2d !important;
}

/* Text Colors */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #b88f34 !important;
}


html[data-theme="dark"] .text-variant-1 {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .text-variant-2 {
    color: var(--text-tertiary) !important;
}

/* Links */
html[data-theme="dark"] a {
    color: #000000;
}

html[data-theme="dark"] a:hover {
    color: var(--link-hover-color);
}

/* Forms */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--input-background) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--input-placeholder) !important;
}

/* Intl Tel Input - Dark Mode */
html[data-theme="dark"] .iti--separate-dial-code .iti__selected-flag {
    background-color: rgb(45, 45, 45) !important;
}

/* Breadcrumb */
html[data-theme="dark"] .flat-title-page {
    background-color: var(--breadcrumb-background-color) !important;
    color: var(--breadcrumb-text-color) !important;
}

html[data-theme="dark"] .breadcrumb {
    color: var(--breadcrumb-text-color) !important;
}

html[data-theme="dark"] .breadcrumb a {
    color: var(--breadcrumb-text-color) !important;
}

html[data-theme="dark"] .page-title {
    color: var(--primary-color) !important;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
    background-color: var(--footer-background-color) !important;
    color: var(--footer-text-color) !important;
}

html[data-theme="dark"] footer a,
html[data-theme="dark"] .footer a {
    color: var(--footer-text-color) !important;
}

/* Tables */
html[data-theme="dark"] table {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-theme="dark"] table th,
html[data-theme="dark"] table td {
    border-color: var(--border-color);
}

/* Buttons - Keep primary colors */
html[data-theme="dark"] .tf-btn.primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .tf-btn.primary:hover {
    background-color: var(--hover-color) !important;
}

/* Property/Project Cards */
html[data-theme="dark"] .property-item,
html[data-theme="dark"] .project-item,
html[data-theme="dark"] .item-grid {
    background-color: var(--card-background) !important;
    border-color: var(--card-border) !important;
}

html[data-theme="dark"] .property-item .content,
html[data-theme="dark"] .project-item .content {
    color: var(--text-primary) !important;
}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dropdown-menu a {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .dropdown-menu a:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Modals */
html[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
}

/* Navigation */
html[data-theme="dark"] .navigation>li>a {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .navigation>li:hover>a,
html[data-theme="dark"] .navigation>li.current>a {
    color: var(--primary-color) !important;
}

/* Mobile Menu */
html[data-theme="dark"] .mobile-menu {
    background-color: var(--bg-secondary) !important;
}

html[data-theme="dark"] .mobile-menu .navigation>li>a {
    color: var(--text-primary) !important;
}

/* Search Box */
html[data-theme="dark"] .form-search-form,
html[data-theme="dark"] .wd-find-select,
html[data-theme="dark"] .form-sl {
    background-color: var(--bg-secondary) !important;
}

/* Widgets */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .widget-sidebar {
    background-color: var(--card-background) !important;
    color: var(--text-primary) !important;
}

/* Badges */
html[data-theme="dark"] .badge {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Keep primary color for badges with bg-primary */
html[data-theme="dark"] .badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Lists */
html[data-theme="dark"] ul,
html[data-theme="dark"] ol {
    color: var(--text-primary);
}

/* Blockquotes */
html[data-theme="dark"] blockquote {
    background-color: var(--bg-secondary);
    border-left-color: var(--primary-color);
    color: var(--text-primary);
}

/* Code Blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Separators */
html[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Images - Add slight opacity for better integration */
html[data-theme="dark"] img {
    opacity: 0.95;
}

/* Icons */
html[data-theme="dark"] .icon,
html[data-theme="dark"] svg {
    color: var(--text-primary);
}

/* Overlay and Backdrop */
html[data-theme="dark"] .backdrop,
html[data-theme="dark"] .overlay,
html[data-theme="dark"] .menu-backdrop {
}

/* Pagination */
html[data-theme="dark"] .pagination .page-numbers,
html[data-theme="dark"] .pagination a {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .pagination .page-numbers.current,
html[data-theme="dark"] .pagination .page-numbers:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* Tabs */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary);
    border-color: var(--border-color) var(--border-color) var(--bg-secondary);
    color: var(--text-primary);
}

/* Accordion */
html[data-theme="dark"] .accordion-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-theme="dark"] .accordion-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

html[data-theme="dark"] .accordion-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Alerts */
html[data-theme="dark"] .alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Tooltips */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Popovers */
html[data-theme="dark"] .popover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .popover-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Contact Info */
html[data-theme="dark"] .contact-info {
    background-color: #000000 !important;
}

html[data-theme="dark"] .contact-info .box .box-social .item {
    background-color: #b88f34 !important;
    border: none !important;
}

/* Transitions */
html[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}



/* Form Labels */
html[data-theme="dark"] label.form-label,
html[data-theme="dark"] label.form-label.required,
html[data-theme="dark"] label.form-check-label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .box-contact-v2 label,
html[data-theme="dark"] .contact-form-group label,
html[data-theme="dark"] form label {
    color: var(--text-primary) !important;
}

/* Contact Form Box - Must be at the end to override all other rules */
html[data-theme="dark"] .box-contact-v2,
html[data-theme="dark"] body .box-contact-v2,
html[data-theme="dark"] .flat-section .box-contact-v2,
html[data-theme="dark"] .container .box-contact-v2 {
    background-color: #2d2d2d !important;
}

/* Flat Section Partner - Override white background */
html[data-theme="dark"] .flat-section-v4.flat-partner.shortcode-lazy-loading-loaded,
html[data-theme="dark"] .flat-section-v4.flat-partner {
    background-color: var(--bg-primary) !important;
}

/* Newsletter Popup */
html[data-theme="dark"] .newsletter-popup .modal-dialog {
    background: #000000 !important;
}

/* Newsletter Popup Close Button */
html[data-theme="dark"] .newsletter-popup .btn-close,
html[data-theme="dark"] .modal .btn-close {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
}

/* Single Detail CK Content - Paragraphs */
html[data-theme="dark"] .single-detail.ck-content p:not([class]) {
    font-size: 16px !important;
    line-height: 32px !important;
    margin-bottom: 1rem !important;
    color: #ffffff !important;
}

/* Single Detail CK Content - All Elements */
html[data-theme="dark"] .single-detail.ck-content i:not([class]),
html[data-theme="dark"] .single-detail.ck-content ol li:not([class]),
html[data-theme="dark"] .single-detail.ck-content table td:not([class]),
html[data-theme="dark"] .single-detail.ck-content table th:not([class]),
html[data-theme="dark"] .single-detail.ck-content ul li:not([class]) {
    color: #ffffff !important;
}

/* Button View Text */
html[data-theme="dark"] .btn-view .text {
    color: #ffffff !important;
    font-family: var(--heading-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
}

/* Box Testimonial Item */
html[data-theme="dark"] .box-tes-item {
    background: #2d2d2d !important;
}

/* FAQ Body */
html[data-theme="dark"] .faq-body {
    color: white !important;
}

/* ===== FLAT BANNER ABOUT - DARK MODE ===== */
/* About Section - Image */
html[data-theme="dark"] .flat-banner-about .main-image {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .flat-banner-about .main-image:hover {
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

/* About Section - Image Decoration */
html[data-theme="dark"] .flat-banner-about .image-decoration {
    opacity: 0.2 !important;
}

html[data-theme="dark"] .flat-banner-about .main-image:hover .image-decoration {
    opacity: 0.3 !important;
}

/* About Section - Video Button */
html[data-theme="dark"] .flat-banner-about .btn-video {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 8px rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] .flat-banner-about .btn-video .icon {
    color: var(--primary-color) !important;
}

html[data-theme="dark"] .flat-banner-about .btn-video:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%) !important;
    box-shadow:
        0 12px 48px rgba(var(--primary-color-rgb), 0.5),
        0 0 0 12px rgba(var(--primary-color-rgb), 0.15) !important;
}

html[data-theme="dark"] .flat-banner-about .btn-video:hover .icon {
    color: #ffffff !important;
}

/* About Section - Subtitle Badge */
html[data-theme="dark"] .flat-banner-about .subtitle-badge {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(var(--primary-color-rgb), 0.08) 100%) !important;
    border-color: rgba(var(--primary-color-rgb), 0.25) !important;
}

html[data-theme="dark"] .flat-banner-about .subtitle-badge:hover {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0.12) 100%) !important;
    border-color: rgba(var(--primary-color-rgb), 0.35) !important;
}

/* About Section - Title */
html[data-theme="dark"] .flat-banner-about .about-title {
    color: var(--text-primary) !important;
}

/* About Section - Description */
html[data-theme="dark"] .flat-banner-about .about-description {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .flat-banner-about .about-description p {
    color: var(--text-secondary) !important;
}

/* About Section - Premium Button */
html[data-theme="dark"] .flat-banner-about .btn-view-premium {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%) !important;
    box-shadow:
        0 4px 16px rgba(var(--primary-color-rgb), 0.4),
        0 8px 32px rgba(var(--primary-color-rgb), 0.2) !important;
}

html[data-theme="dark"] .flat-banner-about .btn-view-premium:hover {
    box-shadow:
        0 8px 24px rgba(var(--primary-color-rgb), 0.5),
        0 16px 48px rgba(var(--primary-color-rgb), 0.3) !important;
}

/* Flat Section Padding */
html[data-theme="dark"] .flat-section {
    padding: 20px 0px 20px !important;
}

/* Pagination Dark Mode */
html[data-theme="dark"] .flat-pagination .page-numbers {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .flat-pagination .page-numbers.current,
html[data-theme="dark"] .flat-pagination .page-numbers:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}
html[data-theme="dark"] .tab-content { background-color: #000000 !important; }

html[data-theme="dark"] .widget-box-header-single {
    background-color: #2d2d2d;
}
html[data-theme="dark"] .info-box {
    background-color: #2d2d2d;
}
html[data-theme="dark"] .widget-box-single {
    background-color: #2d2d2d;
}

html[data-theme="dark"] .header-property-detail {
    background-color: #2d2d2d;
}

html[data-theme="dark"] .bg-white {
    background-color: rgb(45, 45, 45) !important;
}

html[data-theme="dark"] .cate-single-item {
    color: #ffffff !important;
}

html[data-theme="dark"] .header-property-detail .content-bottom .info-box .meta-item {
    color: #ffffff !important;
}

html[data-theme="dark"] .single-property-contact .box-avatar .info-item {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-1.name a {
    color: #b88f34 !important;
}

html[data-theme="dark"] .text-muted {
    --bs-text-opacity: 1;
    color: rgb(197, 197, 197, 0.75) !important;
}

html[data-theme="dark"] .form-search-form,
html[data-theme="dark"] .wd-find-select,
html[data-theme="dark"] .form-sl {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="dark"] .icon,
html[data-theme="dark"] svg {
    color: #b88f34 !important;
    fill: #b88f34 !important;
}

html[data-theme="dark"] .box-service.style-2 {
    background: #2d2d2d !important;
}

html[data-theme="dark"] .box-service .content .description {
    color: #ffffff !important;
}

html[data-theme="dark"] .wrap-counter .counter-box .title-count {
    color: #ffffff !important;
}

html[data-theme="dark"] .flat-section-v4.flat-partner.shortcode-lazy-loading-loaded,
html[data-theme="dark"] .flat-section-v4.flat-partner {
    background-color: var(--bg-primary);
}

html[data-theme="dark"] .box-service.style-1 {
    background-color: #2d2d2d !important;
}

html[data-theme="dark"] label.form-label,
html[data-theme="dark"] label.form-label.required,
html[data-theme="dark"] label.form-check-label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .box-contact-v2 label,
html[data-theme="dark"] .contact-form-group label,
html[data-theme="dark"] form label {
    color: #000000 !important;
}

html[data-theme="dark"] .homeya-box {
    background: #2d2d2d !important;
    border: none !important;
}

html[data-theme="dark"] label.form-label,
html[data-theme="dark"] label.form-label.required,
html[data-theme="dark"] label.form-check-label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .box-contact-v2 label,
html[data-theme="dark"] .contact-form-group label,
html[data-theme="dark"] form label {
    color: #ffffff !important;
}