/* ═══════════════════════════════════════════════════════════ DARK MODE — RoomSarthi (Night Mode) UNIVERSAL: covers ALL pages automatically Activated by class "dark" on ═══════════════════════════════════════════════════════════ */ html.dark { --primary: #6B9BFF; --primary-hover: #5A8AF0; --primary-light: rgba(107, 155, 255, 0.12); --bg: #111318; --bg-alt: #1C1F28; --text: #ECF0F6; --text-muted: #9BA4B5; --border: #2D3140; --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --shadow-sm: 0 1px 4px rgba(0,0,0,0.25); --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 10px 40px rgba(0,0,0,0.45); color-scheme: dark; } /* ══════════════════════════════════════════════════════════ UNIVERSAL DARK OVERRIDES — catches ALL white backgrounds on every page automatically ══════════════════════════════════════════════════════════ */ html.dark body { background: var(--bg) !important; color: var(--text) !important; } /* Any element with inline or class-based white/light backgrounds */ html.dark [style*="background:#fff"], html.dark [style*="background: #fff"], html.dark [style*="background:#FFF"], html.dark [style*="background: #FFF"], html.dark [style*="background:white"], html.dark [style*="background: white"], html.dark [style*="background-color:#fff"], html.dark [style*="background-color: #fff"], html.dark [style*="background-color:white"], html.dark [style*="background:#F8FAFC"], html.dark [style*="background: #F8FAFC"], html.dark [style*="background:#F1F5F9"], html.dark [style*="background: #F1F5F9"], html.dark [style*="background:#F8FAFF"], html.dark [style*="background:#F0FDF4"], html.dark [style*="background:#FFF7ED"] { background: var(--bg-alt) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Section backgrounds */ .section-white { background: #fff; } html.dark .section-white, html.dark .section:not(.rs-hero), html.dark section:not(.rs-hero) { background: var(--bg) !important; } /* ── Headings: white in dark sections (hero uses rs-* classes) ── */ html.dark h1:not(.hero-title-ref):not(.rs-hero-title), html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: #fff !important; } /* ── ALL Text ──────────────────────────────────────────── */ html.dark p, html.dark span, html.dark div, html.dark label, html.dark li, html.dark td, html.dark th { color: inherit; } html.dark a { color: inherit; } html.dark a:hover { color: var(--primary); } /* ══════════════════════════════════════════════════════════ NAVBAR (standard + map topbar) ══════════════════════════════════════════════════════════ */ html.dark .navbar { background: #161820 !important; border-bottom-color: var(--border) !important; } html.dark .navbar-logo { color: var(--primary) !important; } html.dark .hamburger span { background: var(--text, #ECF0F6) !important; } html.dark .navbar-links a { color: var(--text-muted) !important; } html.dark .navbar-links a:hover, html.dark .navbar-links a.active { color: var(--primary) !important; } /* ══════════════════════════════════════════════════════════ ALL CARDS — catches every card pattern ══════════════════════════════════════════════════════════ */ html.dark .card, html.dark .result-card, html.dark .owner-card, html.dark .booking-card, html.dark .review-card, html.dark .testimonial-card, html.dark .stat-card, html.dark .step-card, html.dark .dash-section, html.dark .admin-section, html.dark .preview-card, html.dark [class*="-card"] { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .card:hover, html.dark .result-card:hover, html.dark [class*="-card"]:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } html.dark .card-title, html.dark .result-card-title, html.dark [class*="-title"] { color: #fff !important; } html.dark .card-text, html.dark .card-price span, html.dark .result-card-loc, html.dark .result-card-price span { color: var(--text-muted) !important; } html.dark .card-price, html.dark .result-card-price, html.dark .booking-price { color: var(--text) !important; } html.dark .card-tag, html.dark .result-card-tag, html.dark [class*="-tag"]:not(.filter-tag) { background: #252833 !important; color: #C5CDD8 !important; } html.dark .card-footer, html.dark .result-card-footer { border-top-color: var(--border) !important; } html.dark .heart-btn { background: rgba(28,31,40,0.9) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html.dark .card-rating, html.dark .result-card-rating { color: var(--warning) !important; } html.dark .result-card-badge { background: rgba(74,222,128,0.15) !important; color: var(--success) !important; } html.dark .result-card-badge.featured { background: rgba(251,191,36,0.15) !important; color: var(--warning) !important; } /* ══════════════════════════════════════════════════════════ ALL BUTTONS ══════════════════════════════════════════════════════════ */ html.dark .btn-outline { border-color: var(--border) !important; color: var(--text) !important; background: transparent !important; } html.dark .btn-outline:hover { border-color: var(--primary) !important; color: var(--primary) !important; background: rgba(107,155,255,0.1) !important; } html.dark .btn-white { background: var(--bg-alt) !important; color: var(--primary) !important; } html.dark .filter-btn, html.dark .sort-btn-sm { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .sort-btn { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } html.dark .sort-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; } html.dark .sort-btn.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } html.dark .filter-tag { background: rgba(107,155,255,0.12) !important; color: var(--primary) !important; border-color: rgba(107,155,255,0.25) !important; } /* ══════════════════════════════════════════════════════════ ALL INPUTS, FORMS, SELECTS ══════════════════════════════════════════════════════════ */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.search-btn):not(.maplibregl-ctrl-icon):not(.rs-search-input):not(.rs-search-select), html.dark select:not(.rs-search-select), html.dark textarea, html.dark .form-input { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .form-input:focus, html.dark input:not(.rs-search-input):focus, html.dark select:not(.rs-search-select):focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(107,155,255,0.15) !important; } html.dark ::placeholder { color: #5A6478 !important; } html.dark input[type="range"] { accent-color: var(--primary); } html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: var(--primary); } html.dark .form-label { color: var(--text) !important; } html.dark .otp-input-wrap svg { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════ SEARCH BARS (Hero + Compact) ══════════════════════════════════════════════════════════ */ html.dark .search-bar, html.dark .compact-search { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .search-field { border-right-color: var(--border) !important; } html.dark .search-field label, html.dark .compact-search label { color: var(--text-muted) !important; } html.dark .search-field input, html.dark .search-field select, html.dark .compact-search input, html.dark .compact-search select { color: var(--text) !important; background: transparent !important; } /* Search Bar V2 (Homepage) */ html.dark .search-bar-v2 { background: var(--bg-alt) !important; border-color: var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important; } html.dark .search-bar-v2:focus-within { border-color: var(--primary) !important; box-shadow: 0 8px 32px rgba(107,155,255,0.15) !important; } html.dark .search-v2-divider { background: var(--border) !important; } html.dark .search-v2-icon { background: rgba(107,155,255,0.12) !important; color: var(--primary) !important; } html.dark .search-v2-field:hover { background: #252833 !important; } html.dark .search-v2-input-wrap label { color: var(--text-muted) !important; } html.dark .search-v2-input-wrap input, html.dark .search-v2-input-wrap select { color: var(--text) !important; background: transparent !important; } html.dark .search-v2-select option { background-color: var(--bg-alt) !important; color: var(--text) !important; } html.dark .hero-action-btn-outline { background-color: var(--bg-alt) !important; color: var(--primary) !important; border-color: var(--primary) !important; } html.dark .hero-action-btn-outline:hover { background-color: rgba(107, 155, 255, 0.15) !important; } /* Category strip + tabs */ html.dark .category-strip { border-bottom-color: var(--border) !important; } html.dark .category-strip-view-all { color: var(--primary) !important; } html.dark .cat-tab { background: transparent !important; border-bottom: 2px solid transparent !important; color: var(--text-muted) !important; box-shadow: none !important; } html.dark .cat-tab:hover { color: var(--primary) !important; background: transparent !important; border-bottom-color: transparent !important; } html.dark .cat-tab.active { color: var(--primary) !important; background: transparent !important; border-bottom-color: var(--primary) !important; box-shadow: none !important; } html.dark .cat-tab-icon { color: #94A3B8 !important; background: #1E2230 !important; } html.dark .cat-tab:hover .cat-tab-icon, html.dark .cat-tab.active .cat-tab-icon { color: var(--primary) !important; background: rgba(37, 99, 235, 0.15) !important; } html.dark .cat-tab-icon svg { color: #94A3B8 !important; } html.dark .cat-tab.active .cat-tab-icon svg, html.dark .cat-tab:hover .cat-tab-icon svg { color: var(--primary, #2563EB) !important; } /* ══════════════════════════════════════════════════════════ HERO — legacy + RS hero (smooth dark homepage hero) ══════════════════════════════════════════════════════════ */ html.dark .hero { background: linear-gradient(180deg, #111318 0%, #1C1F28 100%) !important; } html.dark .hero-ref { background: linear-gradient(180deg, #161820 0%, #1C2230 100%) !important; } html.dark .hero-title-ref, html.dark .hero-ref .hero-title-ref { color: var(--primary) !important; } html.dark .hero-sub-ref { color: var(--text-muted) !important; } html.dark .search-bar-ref { background: #ffffff !important; border-color: #D1DCF0 !important; } html.dark .search-ref-input { background: transparent !important; color: #1E293B !important; box-shadow: none !important; } html.dark .search-ref-input::placeholder { color: #94A3B8 !important; } html.dark .search-ref-select { background: transparent !important; color: #334155 !important; box-shadow: none !important; } html.dark .search-ref-divider { background: #D1DCF0 !important; } /* RS hero — dark gradient + readable text; search bar stays light pill */ html.dark .rs-hero { background: linear-gradient(180deg, #161820 0%, #1a2030 55%, #111318 100%) !important; } html.dark .rs-hero .rs-hero-title, html.dark h1.rs-hero-title { color: #6B9BFF !important; } html.dark .rs-hero .rs-hero-sub { color: var(--text-muted) !important; } html.dark .rs-search { background: #ffffff !important; border-color: #D8E4F4 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important; } html.dark .rs-search .rs-search-input, html.dark .rs-search input.rs-search-input, html.dark .rs-search .rs-search-select, html.dark .rs-search select.rs-search-select { background: transparent !important; background-color: transparent !important; border: 0 !important; border-color: transparent !important; color: #1E293B !important; box-shadow: none !important; -webkit-box-shadow: none !important; } html.dark .rs-search .rs-search-input:focus, html.dark .rs-search .rs-search-select:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; } html.dark .rs-search .rs-search-input::placeholder { color: #94A3B8 !important; } html.dark .rs-search .rs-search-select option { background: #fff !important; color: #1E293B !important; } html.dark .rs-search-sep { background: #CBD5E1 !important; } /* Browser autofill must not paint a dark box inside the white pill */ html.dark .rs-search input.rs-search-input:-webkit-autofill, html.dark .rs-search input.rs-search-input:-webkit-autofill:hover, html.dark .rs-search input.rs-search-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #1E293B !important; caret-color: #1E293B; } html.dark .rs-btn-primary { color: #fff !important; } html.dark .rs-btn-outline { color: var(--primary) !important; border-color: var(--primary) !important; background: transparent !important; } html.dark .rs-btn-outline:hover { background: rgba(107, 155, 255, 0.12) !important; } /* ══════════════════════════════════════════════════════════ FEATURED, TRUST, SECTIONS ══════════════════════════════════════════════════════════ */ html.dark .featured-header h2 { color: #fff !important; } html.dark .featured-header a { color: var(--primary) !important; } html.dark .section-title { color: #fff !important; } html.dark .section-subtitle { color: var(--text-muted) !important; } html.dark .trust-item { background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-radius: 12px; } html.dark .trust-icon { background: rgba(107,155,255,0.12) !important; } html.dark .trust-icon svg { color: var(--primary) !important; } /* ══════════════════════════════════════════════════════════ LOGIN / REGISTER / COMPLETE PROFILE ══════════════════════════════════════════════════════════ */ html.dark .login-page { background: var(--bg) !important; } html.dark .login-form-panel { background: var(--bg) !important; } html.dark .login-brand { background: linear-gradient(135deg, #1B3A6B 0%, #162447 100%) !important; } html.dark .login-form-container h2 { color: var(--text) !important; } html.dark .login-form-container .subtitle { color: var(--text-muted) !important; } html.dark .auth-tab { background: var(--bg-alt) !important; color: var(--text-muted) !important; } html.dark .auth-tab.active { background: var(--bg) !important; color: var(--text) !important; } html.dark .social-login .btn { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .skip-login-link { color: var(--text-muted) !important; border-color: var(--border) !important; } html.dark .skip-login-link:hover { color: var(--primary) !important; border-color: var(--primary) !important; } html.dark .login-help { color: var(--text-muted) !important; } html.dark .login-footer { color: var(--text-muted) !important; } html.dark .divider span { color: var(--text-muted) !important; } html.dark .divider::before, html.dark .divider::after { background: var(--border) !important; } /* Complete Profile page specific */ html.dark .profile-card, html.dark .complete-profile-card { background: var(--bg-alt) !important; border-color: var(--border) !important; } /* ══════════════════════════════════════════════════════════ LIST PROPERTY PAGE ══════════════════════════════════════════════════════════ */ html.dark .step-indicator, html.dark .step-num { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } html.dark .step-num.active, html.dark .step-indicator.active { background: var(--primary) !important; color: #fff !important; } html.dark .upload-slot { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } html.dark .amenity-chip { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .amenity-chip.active, html.dark .amenity-chip.selected { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════ PROPERTY DETAILS ══════════════════════════════════════════════════════════ */ html.dark .room-option { border-color: var(--border) !important; color: var(--text) !important; } html.dark .room-option:hover, html.dark .room-option.active { border-color: var(--primary) !important; } html.dark .breadcrumb { color: var(--text-muted) !important; } html.dark .breadcrumb a:hover { color: var(--primary) !important; } html.dark .detail-header h1 { color: #fff !important; } html.dark .about-section p { color: var(--text-muted) !important; } html.dark .amenity-item { color: var(--text) !important; } html.dark .amenity-item svg { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════ OWNERS PAGE ══════════════════════════════════════════════════════════ */ html.dark .area-sidebar { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .area-item { color: var(--text) !important; background: transparent !important; } html.dark .area-item:hover { background: #252833 !important; } html.dark .area-item.active { background: var(--primary) !important; color: #fff !important; } html.dark .owner-search { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .owner-search input { color: var(--text) !important; } html.dark .owner-avatar { color: var(--primary) !important; } /* ══════════════════════════════════════════════════════════ DASHBOARD ══════════════════════════════════════════════════════════ */ html.dark .sidebar { background: #161820 !important; border-right-color: var(--border) !important; } html.dark .sidebar-link { color: var(--text-muted) !important; } html.dark .sidebar-link:hover, html.dark .sidebar-link.active { background: rgba(107,155,255,0.12) !important; color: var(--primary) !important; } html.dark .dashboard-main { background: var(--bg) !important; } html.dark .dash-section { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .stat-label { color: var(--text-muted) !important; } html.dark .stat-value { color: var(--text) !important; } /* ══════════════════════════════════════════════════════════ ADMIN PANEL ══════════════════════════════════════════════════════════ */ html.dark .admin-section { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .data-table { background: var(--bg-alt) !important; border-color: var(--border) !important; } html.dark .data-table th { background: #161820 !important; color: var(--text-muted) !important; border-color: var(--border) !important; } html.dark .data-table td { border-color: var(--border) !important; color: var(--text) !important; } html.dark .data-table tr:hover td { background: #252833 !important; } /* ══════════════════════════════════════════════════════════ PROFILE DROPDOWN ══════════════════════════════════════════════════════════ */ html.dark .profile-dropdown { background: var(--bg-alt) !important; border-color: var(--border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } html.dark .profile-dropdown-header { border-bottom-color: var(--border) !important; } html.dark .profile-dropdown-list li a:hover { background: #252833 !important; } html.dark .profile-btn:hover { background: var(--bg-alt) !important; } html.dark .profile-btn-text strong { color: var(--text) !important; } html.dark .profile-btn-text small { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════ BADGES ══════════════════════════════════════════════════════════ */ html.dark .badge-primary { background: rgba(107,155,255,0.15) !important; color: var(--primary) !important; } html.dark .badge-success { background: rgba(74,222,128,0.15) !important; color: var(--success) !important; } html.dark .badge-warning { background: rgba(251,191,36,0.15) !important; color: var(--warning) !important; } /* ══════════════════════════════════════════════════════════ MAP POPUPS ══════════════════════════════════════════════════════════ */ html.dark .maplibregl-popup-content { background: var(--bg-alt) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } html.dark .maplibregl-popup-tip { border-top-color: var(--bg-alt) !important; } html.dark .map-popup-card { background: var(--bg-alt) !important; } html.dark .map-popup-card h4 { color: #fff !important; } html.dark .map-popup-card .popup-loc { color: var(--text-muted) !important; } html.dark .map-popup-card .ptag { background: rgba(107,155,255,0.15) !important; color: var(--primary) !important; } html.dark .map-popup-card .popup-price { color: var(--primary) !important; } html.dark .popup-footer-map { border-top-color: var(--border) !important; } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ html.dark .footer { background: #0B0D12 !important; } html.dark .footer-bottom { border-top-color: #1E293B !important; } /* ══════════════════════════════════════════════════════════ OWNER CTA ══════════════════════════════════════════════════════════ */ html.dark .owner-cta { background: linear-gradient(135deg, #1B3A6B, #162447) !important; } html.dark .owner-cta h2 { color: #fff !important; } html.dark .owner-cta p { color: rgba(255, 255, 255, 0.9) !important; } html.dark .owner-cta .owner-cta-btn, html.dark .owner-cta .btn-white { background: #fff !important; color: #2563EB !important; border: none !important; } html.dark .owner-cta .owner-cta-btn:hover, html.dark .owner-cta .btn-white:hover { background: #F0F4FF !important; color: #1D4ED8 !important; } /* ══════════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════════ */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--bg); } html.dark ::-webkit-scrollbar-thumb { background: #2D3140; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #3D4250; } /* ══════════════════════════════════════════════════════════ NAV BACK BUTTON ══════════════════════════════════════════════════════════ */ html.dark .nav-back-btn { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ══════════════════════════════════════════════════════════ */ .dark-mode-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1.5px solid var(--border); cursor: pointer; transition: all 0.3s ease; color: var(--text-muted); flex-shrink: 0; } .dark-mode-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); transform: rotate(15deg); } .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: block; } html.dark .dark-mode-toggle .icon-sun { display: block; } html.dark .dark-mode-toggle .icon-moon { display: none; } html.dark .dark-mode-toggle { color: #FBBF24; border-color: rgba(251,191,36,0.3); } /* ── Smooth transitions ────────────────────────────────── */ html:not(.no-transition) *:not(img):not(canvas):not(video):not(.maplibregl-canvas) { transition: background-color 0.35s ease, border-color 0.3s ease, color 0.25s ease, box-shadow 0.3s ease; } html.no-transition * { transition: none !important; } /* ══════════════════════════════════════════════════════════ DARK MODE TOGGLE — HIDDEN ON ALL PAGES EXCEPT HOME Safety net: even if JS accidentally creates the button, CSS ensures it is invisible on every non-home page. ══════════════════════════════════════════════════════════ */ /* Step 1: Hide the toggle on every page by default */ .dark-mode-toggle { display: none !important; } /* Step 2: Show ONLY when body has data-page="home" (set by index.html) */ body[data-page="home"] .dark-mode-toggle { display: flex !important; }