/**
 * Day / night appearance — token remap + component visibility.
 * Loaded after brand CSS so night overrides win over hardcoded day surfaces.
 */

/* —— Shared token remap —— */
html.appearance-night {
    color-scheme: dark;
}

html.appearance-night,
html.appearance-night body,
html.appearance-night .app-shell,
html.appearance-night .guide-page,
html.appearance-night .seo-page,
html.appearance-night .privacy-page,
html.appearance-night .public-site {
    /* Keep admin brand colors (--primary, --accent, etc.) — only remap chrome surfaces */
    --bg: color-mix(in srgb, var(--primary-dark, #0f2f22) 82%, #050806);
    --surface: color-mix(in srgb, var(--primary, #154b34) 22%, #121a16);
    --text: #eef3f0;
    --text-muted: color-mix(in srgb, #eef3f0 55%, var(--accent, #3d9b6e));
    --border: color-mix(in srgb, var(--primary, #154b34) 35%, #1a2420);
    --primary-mint: color-mix(in srgb, var(--primary, #154b34) 28%, #0c1210);
    --primary-light: color-mix(in srgb, var(--primary, #154b34) 32%, #16201c);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.42);
    background-color: var(--bg);
    color: var(--text);
}

html.appearance-day {
    color-scheme: light;
}

/* —— Chrome —— */
html.appearance-night .app-header,
html.appearance-night .site-navbar,
html.appearance-night .bottom-nav {
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
}
html.appearance-night .app-profile-btn,
html.appearance-night .site-navbar .app-icon-btn,
html.appearance-night .site-translate-btn,
html.appearance-night .bottom-more-fab {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .site-prefs-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
html.appearance-night .site-prefs-btn:hover,
html.appearance-night .site-prefs-btn[aria-expanded="true"] {
    background: var(--surface) !important;
    color: var(--primary) !important;
    border-color: var(--border) !important;
}
html.appearance-night .site-navbar .nav-link {
    color: var(--text-muted) !important;
}
html.appearance-night .site-navbar .nav-link:hover,
html.appearance-night .site-navbar .nav-link.active {
    color: var(--primary-dark) !important;
    background: var(--primary-light) !important;
}
html.appearance-night .header-profile-initial {
    background: var(--primary-mint);
    color: var(--primary-dark);
}
html.appearance-night .app-header-title,
html.appearance-night .loading-title,
html.appearance-night .loading-auth-title,
html.appearance-night .category-title,
html.appearance-night .service-price,
html.appearance-night .bottom-nav-item.active,
html.appearance-night .bottom-nav-book .nav-label {
    color: var(--primary-dark) !important;
}

/* —— Surfaces / sections —— */
html.appearance-night .section-alt,
html.appearance-night .profile-section,
html.appearance-night .loading-screen {
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(61, 155, 110, 0.12), transparent 55%),
        var(--bg) !important;
}
html.appearance-night .loading-gradient-overlay {
    background: linear-gradient(
        165deg,
        rgba(21, 75, 52, 0.45) 0%,
        rgba(14, 20, 17, 0.72) 55%,
        rgba(15, 47, 34, 0.5) 100%
    ) !important;
}
html.appearance-night .app-card,
html.appearance-night .service-card,
html.appearance-night .contact-item,
html.appearance-night .h-card-service,
html.appearance-night .filter-chips.minimal .filter-chip,
html.appearance-night .service-search-input,
html.appearance-night .account-menu,
html.appearance-night .dropdown-menu {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .account-profile-menu-list {
    background: transparent !important;
    border-color: transparent !important;
}
html.appearance-night .account-profile-menu-item {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .account-profile-menu-item:hover,
html.appearance-night .account-profile-menu-item:focus-visible {
    background: var(--primary-light) !important;
}
html.appearance-night .account-profile-footer {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html.appearance-night .account-profile-footer-guest-label {
    color: var(--text-muted) !important;
}
html.appearance-night .account-profile-guest-cta {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .account-profile-guest-cta > i {
    color: var(--primary) !important;
}
html.appearance-night .account-profile-guest-cta:hover,
html.appearance-night .account-profile-guest-cta:focus-visible {
    background: var(--primary-light) !important;
}
html.appearance-night .account-profile-guest-cta--signin {
    border-color: var(--text) !important;
}
html.appearance-night .account-profile-guest-cta--signin > i {
    color: var(--text) !important;
}
html.appearance-night .account-profile-guest-cta--signup {
    background: linear-gradient(105deg, var(--primary), var(--accent)) !important;
    color: #fff !important;
    border: none !important;
}
html.appearance-night .account-profile-guest-cta--signup > i {
    color: #fff !important;
}
html.appearance-night .account-profile-footer-btn--call {
    background: #0f766e !important;
    color: #fff !important;
}
html.appearance-night .account-profile-footer-btn--wa {
    background: #128c7e !important;
    color: #fff !important;
}
html.appearance-night .account-profile-footer-btn--email {
    background: var(--primary) !important;
    color: #fff !important;
}
html.appearance-night .account-profile-footer-btn--danger {
    background: #b91c1c !important;
    color: #fff !important;
}
html.appearance-night .filter-chips.minimal .filter-chip:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border-color: var(--border) !important;
}
html.appearance-night .filter-chips.minimal .filter-chip.active {
    color: #fff !important;
    background: linear-gradient(145deg, var(--primary-soft), var(--primary)) !important;
}
html.appearance-night .service-search-input {
    color: var(--text) !important;
}
html.appearance-night .service-search-input::placeholder {
    color: var(--text-muted) !important;
}
html.appearance-night .bottom-nav-item.active {
    background: var(--primary-light) !important;
}
html.appearance-night .account-menu-head {
    background: var(--primary-mint) !important;
    color: var(--text) !important;
}
html.appearance-night .account-avatar-btn,
html.appearance-night .account-avatar-initial {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night .account-contact-btn,
html.appearance-night .account-loyalty-copy {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html.appearance-night .account-loyalty-code {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night .account-profile-brand-ref {
    background: color-mix(in srgb, var(--surface, #1a2420) 88%, var(--primary-mint, #d8f3e7)) !important;
    border-color: color-mix(in srgb, var(--border, #33403a) 80%, var(--primary, #154b34)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    color: var(--text, #e8f0ec) !important;
}
html.appearance-night .account-profile-brand-ref .account-loyalty-code {
    background: transparent !important;
    color: var(--text, #e8f0ec) !important;
}
html.appearance-night .account-profile-brand-ref .account-loyalty-copy,
html.appearance-night .account-profile-brand-ref .account-loyalty-refer-btn {
    background: color-mix(in srgb, var(--primary-light, #24332c) 80%, #fff) !important;
    color: var(--primary-dark, #d8f3e7) !important;
    border-color: color-mix(in srgb, var(--border, #33403a) 70%, transparent) !important;
}
html.appearance-night .account-online-badge {
    border-color: var(--surface) !important;
}
html.appearance-night .dropdown-item {
    color: var(--text) !important;
}
html.appearance-night .dropdown-item:hover,
html.appearance-night .dropdown-item:focus {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night .text-muted,
html.appearance-night .small.text-muted {
    color: var(--text-muted) !important;
}

/* —— Forms / inputs —— */
html.appearance-night .form-control,
html.appearance-night .form-select,
html.appearance-night input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.appearance-night textarea,
html.appearance-night select,
html.appearance-night .auth-wave-field,
html.appearance-night .phone-cc-field,
html.appearance-night .auth-wave-secondary-btn {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    -webkit-text-fill-color: var(--text) !important;
}
html.appearance-night .illness-suggest-list {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html.appearance-night .illness-suggest-item {
    color: var(--text) !important;
}
html.appearance-night .illness-suggest-item:hover,
html.appearance-night .illness-suggest-item.is-active {
    background: var(--bg) !important;
}
html.appearance-night .form-control::placeholder,
html.appearance-night textarea::placeholder,
html.appearance-night input::placeholder {
    color: var(--text-muted) !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    opacity: 1;
}
html.appearance-night .auth-wave-sheet,
html.appearance-night .auth-welcome-fs-sheet,
html.appearance-night .auth-forms-card,
html.appearance-night .app-modal,
html.appearance-night .modal-content {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .auth-forms-screen,
html.appearance-night .account-profile-screen,
html.appearance-night .auth-welcome-fs {
    background: transparent !important;
}
html.appearance-night .auth-welcome-fs-bg,
html.appearance-night .auth-forms-bg {
    background: color-mix(in srgb, var(--primary-dark, #0f2f22) 78%, #050806) !important;
}
html.appearance-night .auth-welcome-fs-gradient,
html.appearance-night .auth-forms-gradient {
    background:
        radial-gradient(ellipse 90% 70% at 12% 8%, color-mix(in srgb, var(--primary, #154b34) 45%, transparent) 0%, transparent 58%),
        radial-gradient(ellipse 80% 60% at 92% 18%, color-mix(in srgb, var(--accent, #3d9b6e) 28%, transparent) 0%, transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, var(--primary-dark) 88%, #000) 0%, var(--bg) 55%, color-mix(in srgb, var(--primary) 35%, #0a100e) 100%) !important;
}
html.appearance-night .auth-welcome-fs-brand,
html.appearance-night .auth-forms-brand,
html.appearance-night .auth-forms-back,
html.appearance-night .auth-welcome-fs .auth-wave-brand-name,
html.appearance-night .auth-forms-brand .auth-forms-brand-name {
    color: var(--text) !important;
}
html.appearance-night .auth-welcome-fs-tag,
html.appearance-night .auth-forms-tag {
    color: var(--text-muted) !important;
}
html.appearance-night .auth-welcome-fs .auth-wave-logo,
html.appearance-night .auth-forms-brand .auth-forms-logo,
html.appearance-night .auth-illu-figure {
    background: color-mix(in srgb, var(--surface) 70%, var(--primary)) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .auth-wave-outline-btn {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .auth-wave-outline-btn:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night .auth-wave-title,
html.appearance-night .auth-wave-modal.is-forms .auth-wave-title,
html.appearance-night .auth-forms-screen,
html.appearance-night .auth-check-email-title {
    color: var(--text) !important;
}
html.appearance-night .auth-wave-secondary-btn:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border-color: var(--border) !important;
}
html.appearance-night .btn-outline-dark {
    color: var(--primary-dark) !important;
    border-color: var(--border) !important;
}
html.appearance-night .btn-outline-dark:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

/* —— FAQ / why —— */
html.appearance-night #faq .accordion-item,
html.appearance-night .faq-accordion .accordion-item,
html.appearance-night #faq .accordion-button,
html.appearance-night .seo-why-home li,
html.appearance-night .why-us-card,
html.appearance-night .h-card-why {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night #faq .accordion-button:not(.collapsed) {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night #faq .accordion-body {
    background: var(--surface);
    color: var(--text-muted);
}

/* —— Profile cards —— */
html.appearance-night .profile-card,
html.appearance-night .profile-card--staff,
html.appearance-night .profile-photo-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .profile-card-name,
html.appearance-night .profile-card-heading {
    color: var(--text) !important;
}
html.appearance-night .profile-card-bio {
    color: var(--text-muted) !important;
}
html.appearance-night .profile-card-cta {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .profile-card--owner .profile-card-panel,
html.appearance-night .profile-card.is-owner .profile-card-panel {
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--surface) 88%, transparent) 38%, var(--surface) 72%) !important;
}
html.appearance-night .profile-card--owner,
html.appearance-night .profile-card.is-owner {
    border-color: color-mix(in srgb, var(--border) 80%, #fff) !important;
    background: var(--surface) !important;
}
html.appearance-night .team-avatar-fallback,
html.appearance-night .owner-avatar-fallback,
html.appearance-night .gallery-item,
html.appearance-night .ig-feed-empty {
    background: var(--primary-mint) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* —— Chat / notifications / appointments —— */
html.appearance-night .notif-panel,
html.appearance-night .notif-item,
html.appearance-night .appt-panel,
html.appearance-night .appt-card,
html.appearance-night .appt-dock-tab,
html.appearance-night .chat-panel,
html.appearance-night .admin-chat-dock,
html.appearance-night #chatPanel,
html.appearance-night .chat-inbox,
html.appearance-night .chat-recent {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .notif-item:hover,
html.appearance-night .appt-card:hover {
    background: var(--primary-light) !important;
}
html.appearance-night .notif-toolbar button,
html.appearance-night .appt-panel button,
html.appearance-night .msg-action-btn {
    color: var(--text-muted) !important;
}
html.appearance-night .msg-admin {
    background: var(--primary-mint) !important;
    color: var(--text) !important;
}
html.appearance-night .msg-user {
    color: #fff;
}
html.appearance-night .chat-input-bar,
html.appearance-night .chat-compose,
html.appearance-night .mic-btn,
html.appearance-night .chat-mic-btn {
    background: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* —— Social / gallery embeds —— */
html.appearance-night .social-handles,
html.appearance-night .social-card,
html.appearance-night .ig-card,
html.appearance-night .fb-card,
html.appearance-night .social-embed-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* —— Offer summary —— */
html.appearance-night .offer-summary-card,
html.appearance-night .offer-card,
html.appearance-night .offer-summary {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* —— Blog / guide —— */
html.appearance-night .guide-page {
    background:
        radial-gradient(ellipse 90% 55% at 10% -10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%),
        var(--bg) !important;
}
html.appearance-night .guide-search input,
html.appearance-night .guide-filter-btn,
html.appearance-night .guide-cat-chip,
html.appearance-night .guide-post-card,
html.appearance-night .guide-modal,
html.appearance-night .guide-modal-pane--side,
html.appearance-night .guide-share a,
html.appearance-night .guide-share button {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .guide-filter-btn.is-active,
html.appearance-night .guide-cat-chip.is-active {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}
html.appearance-night .guide-post-title,
html.appearance-night .guide-modal h2,
html.appearance-night .guide-hero h1 {
    color: var(--text) !important;
}
html.appearance-night .guide-post-excerpt,
html.appearance-night .guide-post-meta,
html.appearance-night .guide-modal-date,
html.appearance-night .guide-hero-lead {
    color: var(--text-muted) !important;
}

/* —— SEO / privacy —— */
html.appearance-night .seo-page,
html.appearance-night .privacy-page {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(61, 155, 110, 0.12), transparent 55%),
        var(--bg) !important;
    color: var(--text) !important;
}
html.appearance-night .seo-fact,
html.appearance-night .seo-related a,
html.appearance-night .seo-why-list li,
html.appearance-night .privacy-wrap,
html.appearance-night .seo-wrap {
    color: var(--text);
}
html.appearance-night .seo-fact,
html.appearance-night .seo-related a,
html.appearance-night .seo-why-list li {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* —— Booking slots / contact map —— */
html.appearance-night .slot-btn,
html.appearance-night .book-slot,
html.appearance-night .time-slot,
html.appearance-night .contact-map-link,
html.appearance-night .contact-action-icon,
html.appearance-night .contact-modal-footer-social .contact-action-icon,
html.appearance-night .contact-modal-footer-social .footer-social-link {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html.appearance-night .slot-btn.is-selected,
html.appearance-night .slot-btn.active,
html.appearance-night .time-slot.selected {
    background: var(--primary) !important;
    color: #fff !important;
}

/* —— Prefs card —— */
html.appearance-night .site-prefs-card {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    color: var(--text);
    border-color: var(--border);
}
html.appearance-night .site-prefs-choice {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}
html.appearance-night .site-prefs-choice.is-active {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    border-color: var(--primary);
}

/* —— Translate panel —— */
html.appearance-night .site-translate-panel {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html.appearance-night .site-translate-search-wrap,
html.appearance-night .site-translate-close {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}
html.appearance-night .site-translate-option.is-active,
html.appearance-night .site-translate-option:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* —— Bootstrap helpers that fight night —— */
html.appearance-night .bg-white,
html.appearance-night .bg-light {
    background-color: var(--surface) !important;
    color: var(--text) !important;
}
html.appearance-night .text-dark {
    color: var(--text) !important;
}
html.appearance-night .border,
html.appearance-night .border-bottom,
html.appearance-night .border-top {
    border-color: var(--border) !important;
}
html.appearance-night .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    color: var(--text);
}
html.appearance-night hr,
html.appearance-night .dropdown-divider {
    border-color: var(--border) !important;
    opacity: 1;
}

/* Images stay vivid; reduce harsh white flashes behind broken media */
html.appearance-night img[data-default],
html.appearance-night .hero-lcp-img {
    background: var(--primary-mint);
}