:root {
  --theme-toggle-bg: rgba(255, 255, 255, 0.72);
  --theme-toggle-text: #0f172a;
  --theme-toggle-border: rgba(148, 163, 184, 0.32);
  --theme-toggle-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
  --light-panel-bg: #eef2f7;
  --light-panel-soft-bg: #e7edf5;
  --light-panel-border: rgba(148, 163, 184, 0.22);
  --light-input-bg: #f2f5fa;
}

.theme-toggle-btn {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  z-index: 1600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--theme-toggle-border);
  border-radius: 999px;
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-text);
  backdrop-filter: blur(18px);
  box-shadow: var(--theme-toggle-shadow);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(15, 23, 42, 0.2);
}

.theme-toggle-icon {
  font-size: 1.1rem;
  line-height: 1;
}

html:not([data-theme="dark"]) .filters,
html:not([data-theme="dark"]) .map-box,
html:not([data-theme="dark"]) .property-card,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .section-block,
html:not([data-theme="dark"]) .summary-card,
html:not([data-theme="dark"]) .summary-side,
html:not([data-theme="dark"]) .seller-card,
html:not([data-theme="dark"]) .tour-card,
html:not([data-theme="dark"]) .room-card,
html:not([data-theme="dark"]) .map-card,
html:not([data-theme="dark"]) .payment-summary,
html:not([data-theme="dark"]) .payment-form,
html:not([data-theme="dark"]) .contact-modal-card,
html:not([data-theme="dark"]) .favorites-grid article,
html:not([data-theme="dark"]) .compare-grid article,
html:not([data-theme="dark"]) .admin-card,
html:not([data-theme="dark"]) table,
html:not([data-theme="dark"]) .hero-content,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .value-card,
html:not([data-theme="dark"]) .feature-card {
  background: var(--light-panel-bg) !important;
  border-color: var(--light-panel-border) !important;
}

html:not([data-theme="dark"]) .quick-fact-item,
html:not([data-theme="dark"]) .fact-column,
html:not([data-theme="dark"]) .map-info-box,
html:not([data-theme="dark"]) .card-body,
html:not([data-theme="dark"]) .room-card-body,
html:not([data-theme="dark"]) .payment-summary,
html:not([data-theme="dark"]) .payment-form,
html:not([data-theme="dark"]) .contact-form input,
html:not([data-theme="dark"]) .contact-form textarea,
html:not([data-theme="dark"]) .filter-grid input,
html:not([data-theme="dark"]) .filter-grid select,
html:not([data-theme="dark"]) .search-input,
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select {
  background: var(--light-input-bg) !important;
  border-color: var(--light-panel-border) !important;
}

html:not([data-theme="dark"]) .details-header,
html:not([data-theme="dark"]) .navbar,
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .side-menu,
html:not([data-theme="dark"]) .profile-menu,
html:not([data-theme="dark"]) .side-profile-dropdown {
  background: rgba(236, 241, 247, 0.86) !important;
  border-color: var(--light-panel-border) !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-toggle-bg: rgba(15, 23, 42, 0.72);
  --theme-toggle-text: #e2e8f0;
  --theme-toggle-border: rgba(255, 255, 255, 0.12);
  --theme-toggle-shadow: 0 20px 40px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at top, rgba(30, 41, 59, 0.92), #020617 64%) !important;
  color: #e5eef9 !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
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,
html[data-theme="dark"] strong,
html[data-theme="dark"] a,
html[data-theme="dark"] button {
  color: #e5eef9;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .details-header,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .map-box,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section-block,
html[data-theme="dark"] .side-menu,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .contact-modal-card,
html[data-theme="dark"] .payment-summary,
html[data-theme="dark"] .payment-form,
html[data-theme="dark"] .room-card,
html[data-theme="dark"] .map-card,
html[data-theme="dark"] .fact-group,
html[data-theme="dark"] .seller-card,
html[data-theme="dark"] .tour-card,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .side-profile-dropdown,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .favorites-grid article,
html[data-theme="dark"] .compare-grid article,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] table,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .hero-content,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .feature-card {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.32) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .card-body,
html[data-theme="dark"] .room-card-body,
html[data-theme="dark"] .fact-column,
html[data-theme="dark"] .summary-side,
html[data-theme="dark"] .map-info-box,
html[data-theme="dark"] .quick-fact-item,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .filter-grid input,
html[data-theme="dark"] .filter-grid select,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: rgba(15, 23, 42, 0.62) !important;
  color: #e5eef9 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .media-pill,
html[data-theme="dark"] .side-profile-toggle,
html[data-theme="dark"] .side-profile-link,
html[data-theme="dark"] .side-profile-signout {
  background: rgba(30, 41, 59, 0.58) !important;
  color: #e5eef9 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.22);
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .ghost-btn:hover,
html[data-theme="dark"] .primary-btn:hover,
html[data-theme="dark"] .page-btn:hover,
html[data-theme="dark"] .media-pill:hover,
html[data-theme="dark"] .side-profile-toggle:hover,
html[data-theme="dark"] .side-profile-link:hover,
html[data-theme="dark"] .side-profile-signout:hover {
  background: rgba(51, 65, 85, 0.8) !important;
}

html[data-theme="dark"] .media-badge,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .seller-type-chip,
html[data-theme="dark"] .active-filters span,
html[data-theme="dark"] .special-tags span {
  background: rgba(51, 65, 85, 0.82) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] .bg-grid,
html[data-theme="dark"] .bg-orb,
html[data-theme="dark"] .overlay.show {
  opacity: 0.4;
}

html[data-theme="dark"] .listing-name,
html[data-theme="dark"] .card-specs,
html[data-theme="dark"] .card-address,
html[data-theme="dark"] .meta-muted,
html[data-theme="dark"] .contact-note,
html[data-theme="dark"] .payment-summary p,
html[data-theme="dark"] .payment-form p {
  color: #a8b7ca !important;
}

html[data-theme="dark"] .logo,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .side-links a,
html[data-theme="dark"] .dropdown-menu a {
  color: #f8fafc !important;
}

html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .leaflet-container,
html[data-theme="dark"] #map {
  filter: none !important;
}

@media (max-width: 760px) {
  .theme-toggle-btn {
    inset-inline-end: 12px;
    bottom: 12px;
    padding: 10px 13px;
  }
}