/* Dark theme for sale-bulgaria.ru
   Two triggers: data-theme="dark" on <html> OR system prefers-color-scheme:dark */

/* --- Variables --- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --d-bg: #0a1929;
    --d-surface: #132f4c;
    --d-navbar: #0d2137;
    --d-text: #e2e8f0;
    --d-muted: #94a3b8;
    --d-border: rgba(255, 255, 255, 0.12);
    --d-card: #1a3a5c;
    --d-link: #60a5fa;
    --d-link-hover: #93c5fd;
    --d-heading: #ffffff;
    --d-accent-green: #34d399;
  }
}
html[data-theme="dark"] {
  --d-bg: #0a1929;
  --d-surface: #132f4c;
  --d-navbar: #0d2137;
  --d-text: #e2e8f0;
  --d-muted: #94a3b8;
  --d-border: rgba(255, 255, 255, 0.12);
  --d-card: #1a3a5c;
  --d-link: #60a5fa;
  --d-link-hover: #93c5fd;
  --d-heading: #ffffff;
  --d-accent-green: #34d399;
}

/* --- Base --- */
html[data-theme="dark"] body { background-color: var(--d-bg); color: var(--d-text); }
html[data-theme="dark"] a { color: var(--d-link); }
html[data-theme="dark"] a:hover { color: var(--d-link-hover); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body { background-color: var(--d-bg); color: var(--d-text); }
  html:not([data-theme="light"]) a { color: var(--d-link); }
  html:not([data-theme="light"]) a:hover { color: var(--d-link-hover); }
}

/* --- Headings --- */
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"] .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: var(--d-heading);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) h1, html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3, html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) h5, html:not([data-theme="light"]) h6,
  html:not([data-theme="light"]) .h1, html:not([data-theme="light"]) .h2,
  html:not([data-theme="light"]) .h3, html:not([data-theme="light"]) .h4,
  html:not([data-theme="light"]) .h5, html:not([data-theme="light"]) .h6 {
    color: var(--d-heading);
  }
}

/* --- Text utilities --- */
html[data-theme="dark"] .text-primary { color: var(--d-link-hover) !important; }
html[data-theme="dark"] .text-blue { color: var(--d-link); }
html[data-theme="dark"] .text-green { color: var(--d-accent-green); }
html[data-theme="dark"] .text-lightblue { color: var(--d-link-hover); }
html[data-theme="dark"] .text-muted { color: var(--d-muted) !important; }
html[data-theme="dark"] small { color: var(--d-muted); }
html[data-theme="dark"] .border-b { border-bottom-color: rgba(255,255,255,0.3); }
html[data-theme="dark"] .text-dark { color: var(--d-text) !important; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .text-primary { color: var(--d-link-hover) !important; }
  html:not([data-theme="light"]) .text-blue { color: var(--d-link); }
  html:not([data-theme="light"]) .text-green { color: var(--d-accent-green); }
  html:not([data-theme="light"]) .text-lightblue { color: var(--d-link-hover); }
  html:not([data-theme="light"]) .text-muted { color: var(--d-muted) !important; }
  html:not([data-theme="light"]) small { color: var(--d-muted); }
  html:not([data-theme="light"]) .text-dark { color: var(--d-text) !important; }
}

/* --- Backgrounds --- */
html[data-theme="dark"] .bg-light { background-color: var(--d-surface) !important; }
html[data-theme="dark"] .bg-secondary { background-color: #0d2844 !important; }
html[data-theme="dark"] .bg-white { background-color: var(--d-card) !important; }
html[data-theme="dark"] .bg-1 { background-color: #0d2b1a; }
html[data-theme="dark"] .bg-2 { background-color: #2b2b0d; }
html[data-theme="dark"] .bg-3 { background-color: #2b1a0d; }
html[data-theme="dark"] .bg-4 { background-color: #1a0d0d; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-light { background-color: var(--d-surface) !important; }
  html:not([data-theme="light"]) .bg-secondary { background-color: #0d2844 !important; }
  html:not([data-theme="light"]) .bg-white { background-color: var(--d-card) !important; }
}

/* --- Navbar --- */
html[data-theme="dark"] .navbar { background-color: var(--d-navbar) !important; }
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar p { color: var(--d-text) !important; }
html[data-theme="dark"] .navbar .nav-link:hover { color: #fff !important; }
html[data-theme="dark"] .navbar-toggler { border-color: var(--d-border); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .navbar { background-color: var(--d-navbar) !important; }
  html:not([data-theme="light"]) .navbar .nav-link,
  html:not([data-theme="light"]) .navbar .navbar-brand,
  html:not([data-theme="light"]) .navbar p { color: var(--d-text) !important; }
}

/* --- Cards --- */
html[data-theme="dark"] .card {
  background-color: var(--d-card); color: var(--d-text);
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .card h3 { color: var(--d-link-hover); }
html[data-theme="dark"] .cards-light li { background-color: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] .steps.cards-light li { background-color: var(--d-surface); color: var(--d-text); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .card {
    background-color: var(--d-card); color: var(--d-text);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
  }
  html:not([data-theme="light"]) .cards-light li { background-color: var(--d-surface); color: var(--d-text); }
}

/* --- Buttons --- */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #fc5a54, #b70600);
  border-color: #871814; color: #fff;
}
html[data-theme="dark"] .btn-green {
  background-image: linear-gradient(#34d399, #10b981);
  color: #0a1929;
}
html[data-theme="dark"] .btn-green:hover {
  background-image: linear-gradient(#2dd48d, #059669);
  color: #0a1929;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .btn-primary {
    background: linear-gradient(180deg, #fc5a54, #b70600);
    border-color: #871814; color: #fff;
  }
  html:not([data-theme="light"]) .btn-green {
    background-image: linear-gradient(#34d399, #10b981);
    color: #0a1929;
  }
}

/* --- Forms --- */
html[data-theme="dark"] .control-group input,
html[data-theme="dark"] .control-group textarea {
  background-color: var(--d-surface); color: var(--d-text);
  border-bottom-color: rgba(255,255,255,0.2);
}
html[data-theme="dark"] .control-group input::placeholder,
html[data-theme="dark"] .control-group textarea::placeholder { color: var(--d-muted); }
html[data-theme="dark"] .form-control { background-color: var(--d-surface); color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .form-control::placeholder { color: var(--d-muted); }
html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--d-link); border-color: var(--d-link);
}
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] label { color: var(--d-text); }

/* --- Float button --- */
html[data-theme="dark"] .floatbutton { background: rgba(255,255,255,0.15); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .floatbutton { background: rgba(255,255,255,0.15); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .control-group input,
  html:not([data-theme="light"]) .control-group textarea {
    background-color: var(--d-surface); color: var(--d-text);
    border-bottom-color: rgba(255,255,255,0.2);
  }
  html:not([data-theme="light"]) .control-group input::placeholder,
  html:not([data-theme="light"]) .control-group textarea::placeholder { color: var(--d-muted); }
  html:not([data-theme="light"]) .form-control { background-color: var(--d-surface); color: var(--d-text); border-color: var(--d-border); }
  html:not([data-theme="light"]) .form-control::placeholder { color: var(--d-muted); }
  html:not([data-theme="light"]) .form-check-label,
  html:not([data-theme="light"]) label { color: var(--d-text); }
}

/* --- Popups & notifications --- */
html[data-theme="dark"] #cookie_notification { background-color: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] #popup-form { background-color: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] .modal-content { background-color: var(--d-surface); color: var(--d-text); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #cookie_notification { background-color: var(--d-surface); color: var(--d-text); }
  html:not([data-theme="light"]) #popup-form { background-color: var(--d-surface); color: var(--d-text); }
  html:not([data-theme="light"]) .modal-content { background-color: var(--d-surface); color: var(--d-text); }
}

/* --- Misc --- */
html[data-theme="dark"] .coment { background-color: var(--d-surface); border-color: var(--d-border); box-shadow: 1px 1px rgba(0,0,0,0.3); }
html[data-theme="dark"] .plashka { background: linear-gradient(180deg, #bf0012, #530008); }
html[data-theme="dark"] ol.steps li:before { color: rgba(255,255,255,0.15); text-shadow: none; }
html[data-theme="dark"] .shadow { box-shadow: 0 0 8px rgba(0,0,0,0.4) !important; }
html[data-theme="dark"] .rounded { border: 1px solid var(--d-border); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .coment { background-color: var(--d-surface); border-color: var(--d-border); }
  html:not([data-theme="light"]) ol.steps li:before { color: rgba(255,255,255,0.15); text-shadow: none; }
  html:not([data-theme="light"]) .shadow { box-shadow: 0 0 8px rgba(0,0,0,0.4) !important; }
}

/* --- Dropdown --- */
html[data-theme="dark"] .dropdown-menu { background-color: var(--d-surface); border-color: var(--d-border); }
html[data-theme="dark"] .dropdown-item { color: var(--d-text); }
html[data-theme="dark"] .dropdown-item:hover { background-color: rgba(255,255,255,0.08); color: #fff; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dropdown-menu { background-color: var(--d-surface); border-color: var(--d-border); }
  html:not([data-theme="light"]) .dropdown-item { color: var(--d-text); }
}

/* --- Accordion (FAQ) --- */
html[data-theme="dark"] .accordion-item { background-color: var(--d-surface); border-color: var(--d-border); }
html[data-theme="dark"] .accordion-button { background-color: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--d-card); color: #fff; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1); }
html[data-theme="dark"] .accordion-body { background-color: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] .accordion-collapse { border-color: var(--d-border); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .accordion-item { background-color: var(--d-surface); border-color: var(--d-border); }
  html:not([data-theme="light"]) .accordion-button { background-color: var(--d-surface); color: var(--d-text); }
  html:not([data-theme="light"]) .accordion-button:not(.collapsed) { background-color: var(--d-card); color: #fff; }
  html:not([data-theme="light"]) .accordion-button::after { filter: invert(1); }
  html:not([data-theme="light"]) .accordion-body { background-color: var(--d-surface); color: var(--d-text); }
}

/* --- Theme toggle button --- */
.theme-toggle { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 1.3rem; line-height: 1; color: #333; opacity: 0.8; transition: opacity 0.2s; }
html[data-theme="dark"] .theme-toggle { color: #fff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle { color: #fff; }
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: inline; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-sun { display: inline; }
  html:not([data-theme]) .theme-toggle .icon-moon { display: none; }
  html:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; }
  html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}