/*
 * dark-customer.css - dark mode of the customer website and app (Deepak, 31 Oct 2026).
 *
 * BUILT FILE: the top part comes from dev/tools/dark_customer_base.css, the rest is generated by
 * dev/tools/build_dark_css.py from every colour the customer side uses. Edit those two, then run the script.
 *
 * On when the customer picks Dark (Account > Theme). The head helper sfThemeHeadHtml() adds class "sf-dark" to <html>
 * before the page paints, so there is no white flash. Only the customer side loads this file; the admin and
 * technician panels keep assets/dark-mode.css.
 *
 * Every colour comes from the tokens below. The main colour (--color-primary) gets its own dark version per business,
 * worked out in PHP (sfThemeDarkPrimaryCss): a black or very dark main colour becomes near-white with dark text, a
 * mid colour is lightened just enough to read on the dark cards.
 */

html.sf-dark {
    color-scheme: dark;
    /* surfaces, darkest to lightest */
    --dk-bg: #0E0E10;        /* the page */
    --dk-surface: #18181B;   /* cards, header, bottom bar, sheets */
    --dk-raised: #222226;    /* inputs, chips, a card inside a card */
    --dk-hi: #2C2C31;        /* pressed rows, selected chips */
    --dk-line: #2A2A2F;      /* hairlines and card borders */
    --dk-line-2: #3F3F46;    /* stronger dividers, input borders */
    /* text, strongest to faintest */
    --dk-ink: #F4F4F5;
    --dk-ink-2: #D4D4D8;
    --dk-ink-3: #A1A1AA;
    --dk-ink-4: #8B8B94;

    /* status colours: same meaning, dark backgrounds */
    --color-success-tint: #12271D;
    --color-success-soft: #1C3A2B;
    --color-success-dark: #16A34A;   /* used as text AND as a button colour: readable both ways */
    --color-warning-tint: #2A2112;
    --color-warning-soft: #3D3018;
    --color-warning-dark: #D97706;
    --color-danger-tint: #2C1416;
    --color-danger-soft: #45201F;
    --color-danger-dark: #EF4444;
    --color-info-tint: #1E1B33;
    --color-info-soft: #2E2950;
    --color-info-dark: #A5B4FC;
    --color-secondary: #1F1F23;
    --color-secondary-soft: rgba(255,255,255,.78);   /* faint text on a main-colour banner */
}

html.sf-dark body {
    background-color: var(--dk-bg) !important;
    color: var(--dk-ink) !important;
}

/* The main surfaces of the app shell */
html.sf-dark body header,
html.sf-dark body header.sticky,
html.sf-dark body #main-bottom-nav,
html.sf-dark body nav.fixed,
html.sf-dark body .fixed.bottom-0.border-t { background-color: var(--dk-surface) !important; border-color: var(--dk-line) !important; }

html.sf-dark body h1, html.sf-dark body h2, html.sf-dark body h3, html.sf-dark body h4 { color: var(--dk-ink); }

/* Fields */
html.sf-dark body input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.sf-dark body select,
html.sf-dark body textarea {
    background-color: var(--dk-raised) !important;
    color: var(--dk-ink) !important;
    border-color: var(--dk-line-2) !important;
}
html.sf-dark body input::placeholder, html.sf-dark body textarea::placeholder { color: var(--dk-ink-4) !important; opacity: 1; }
html.sf-dark body input:disabled, html.sf-dark body input[readonly], html.sf-dark body select:disabled {
    background-color: var(--dk-surface) !important;
    color: var(--dk-ink-3) !important;
}
html.sf-dark body input[type=radio], html.sf-dark body input[type=checkbox] { accent-color: var(--color-primary); }
html.sf-dark body input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--dk-raised) inset !important;
    -webkit-text-fill-color: var(--dk-ink) !important;
}

/* Shadows: a light shadow is invisible on dark; a soft black one gives depth instead. */
html.sf-dark body .shadow-sm, html.sf-dark body .shadow, html.sf-dark body .shadow-md,
html.sf-dark body .shadow-lg, html.sf-dark body .shadow-xl, html.sf-dark body .shadow-2xl {
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.45) !important;
}

/* The business logo: a logo with a see-through background turns white (Deepak: "Logo ko apne aap safed kar do").
   sfThemeHeadHtml's script marks such logos with data-sf-logo-t="1"; a logo on a solid box is left as it is. */
html.sf-dark img[data-sf-logo-t="1"] { filter: brightness(0) invert(1) !important; }

/* Main colour on dark: text in the main colour uses the readable version. */
html.sf-dark body .text-\[var\(--color-primary\)\],
html.sf-dark body .text-\[var\(--color-primary-dark\)\] { color: var(--color-primary-text, var(--color-primary)) !important; }
html.sf-dark body .border-\[var\(--color-primary\)\] { border-color: var(--color-primary) !important; }

/* Popups */
html.sf-dark body .sf-modal-box { background-color: var(--dk-surface) !important; color: var(--dk-ink) !important; }
html.sf-dark body .sf-modal-msg { color: var(--dk-ink) !important; }
html.sf-dark body .sf-modal-btn-secondary { background-color: var(--dk-raised) !important; color: var(--dk-ink) !important; }

/* Hairlines drawn with Tailwind's divide-* and the copyright line */
html.sf-dark body .divide-y > * + *, html.sf-dark body .divide-gray-100 > * + *, html.sf-dark body .divide-gray-50 > * + * { border-color: var(--dk-line) !important; }
html.sf-dark body .sf-copy-line { background: var(--dk-line) !important; box-shadow: 0 0 0 100vmax var(--dk-line) !important; }

/* Scrollbars and selection */
html.sf-dark ::selection { background: rgba(255,255,255,.18); }

/* The first-visit splash (assets/splash.js paints it white in a script, out of reach of the generator). */
html.sf-dark #sf-splash-overlay { background: var(--dk-bg) !important; }

/* The -dark status colours stay deep enough to carry white text on buttons; as TEXT they need a lighter shade. */
html.sf-dark body .text-\[var\(--color-success-dark\)\] { color: #4ADE80 !important; }
html.sf-dark body .text-\[var\(--color-warning-dark\)\] { color: #FBBF24 !important; }
html.sf-dark body .text-\[var\(--color-danger-dark\)\] { color: #F87171 !important; }

/* ================= GENERATED by dev/tools/build_dark_css.py - do not edit below ================= */

/* --- assets/theme-colors.css --- */
html.sf-dark .sf-stat{color:var(--color-primary-text) !important}
html.sf-dark .sf-hero-gradient{background:var(--dk-brand-banner) !important}
html.sf-dark .sf-pill-primary{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .sf-pill-primary > i{color:var(--color-on-primary) !important}

/* --- assets/tailwind.css --- */
html.sf-dark :after,html.sf-dark :before{border-color:var(--dk-line) !important}
html.sf-dark input::-moz-placeholder,html.sf-dark textarea::-moz-placeholder{color:var(--dk-ink-4) !important}
html.sf-dark input::placeholder,html.sf-dark textarea::placeholder{color:var(--dk-ink-4) !important}
html.sf-dark .divide-gray-100>:not([hidden])~:not([hidden]){border-color:var(--dk-line) !important}
html.sf-dark .border-amber-100{border-color:#6E5B12 !important}
html.sf-dark .border-emerald-100{border-color:#186640 !important}
html.sf-dark .border-gray-100{border-color:var(--dk-line) !important}
html.sf-dark .border-gray-200{border-color:var(--dk-line) !important}
html.sf-dark .border-gray-200\/60{border-color:var(--dk-line) !important}
html.sf-dark .border-gray-200\/80{border-color:var(--dk-line) !important}
html.sf-dark .border-gray-300{border-color:var(--dk-line) !important}
html.sf-dark .border-gray-50{border-color:var(--dk-line) !important}
html.sf-dark .border-red-100{border-color:#6D1214 !important}
html.sf-dark .border-red-200{border-color:#6E1113 !important}
html.sf-dark .border-white{border-color:var(--dk-line) !important}
html.sf-dark .bg-\[var\(--color-primary\)\]{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .bg-\[var\(--color-primary\)\] > i{color:var(--color-on-primary) !important}
html.sf-dark .bg-amber-50{background-color:#3D3517 !important}
html.sf-dark .bg-blue-50{background-color:#14263F !important}
html.sf-dark .bg-emerald-50{background-color:#18392C !important}
html.sf-dark .bg-gray-100{background-color:var(--dk-raised) !important}
html.sf-dark .bg-gray-200{background-color:var(--dk-hi) !important}
html.sf-dark .bg-gray-50{background-color:var(--dk-surface) !important}
html.sf-dark .bg-red-50{background-color:#3A171A !important}
html.sf-dark .bg-white{background-color:var(--dk-surface) !important}
html.sf-dark .bg-white\/40{background-color:rgba(24,24,27,0.40) !important}
html.sf-dark .bg-white\/50{background-color:rgba(24,24,27,0.50) !important}
html.sf-dark .bg-white\/70{background-color:rgba(24,24,27,0.70) !important}
html.sf-dark .text-\[\#128C4A\]{color:#34E585 !important}
html.sf-dark .text-\[var\(--color-primary\)\]{color:var(--color-primary-text) !important}
html.sf-dark .text-\[var\(--color-primary-dark\)\]{color:var(--color-primary-text) !important}
html.sf-dark .text-amber-700{color:#F47E25 !important}
html.sf-dark .text-amber-800{color:#EB752E !important}
html.sf-dark .text-emerald-700{color:#25F4B9 !important}
html.sf-dark .text-gray-300{color:var(--dk-ink-4) !important}
html.sf-dark .text-gray-400{color:var(--dk-ink-4) !important}
html.sf-dark .text-gray-500{color:var(--dk-ink-3) !important}
html.sf-dark .text-gray-600{color:var(--dk-ink-2) !important}
html.sf-dark .text-gray-700{color:var(--dk-ink-2) !important}
html.sf-dark .text-gray-800{color:var(--dk-ink) !important}
html.sf-dark .text-gray-900{color:var(--dk-ink) !important}
html.sf-dark .text-red-600{color:#E55D5D !important}
html.sf-dark .text-red-700{color:#E65B5B !important}
html.sf-dark .text-slate-700{color:var(--dk-ink-2) !important}
html.sf-dark .placeholder-gray-400::-moz-placeholder{color:var(--dk-ink-4) !important}
html.sf-dark .placeholder-gray-400::placeholder{color:var(--dk-ink-4) !important}
html.sf-dark .before\:bg-teal-100:before{background-color:#174F45 !important}
html.sf-dark .hover\:bg-gray-200:hover{background-color:var(--dk-hi) !important}
html.sf-dark .hover\:bg-gray-50:hover{background-color:var(--dk-surface) !important}
html.sf-dark .hover\:text-\[var\(--color-primary\)\]:hover{color:var(--color-primary-text) !important}
html.sf-dark .active\:bg-gray-100:active{background-color:var(--dk-raised) !important}
html.sf-dark .active\:bg-gray-200:active{background-color:var(--dk-hi) !important}
html.sf-dark .active\:bg-gray-50:active{background-color:var(--dk-surface) !important}

/* --- assets/theme-ui.css --- */
html.sf-dark .text-gray-400{color:var(--dk-ink-3) !important}
html.sf-dark .hover\:text-gray-400:hover{color:var(--dk-ink-3) !important}
html.sf-dark .sf-navtab{color:var(--dk-ink-3) !important}
html.sf-dark .sf-navtab.is-active{color:var(--color-primary-text) !important}
html.sf-dark .sf-jobtab{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important;color:var(--dk-ink-3) !important}
html.sf-dark .sf-skel{background:linear-gradient(90deg, var(--dk-raised) 25%, var(--dk-hi) 37%, var(--dk-raised) 63%) !important}
html.sf-dark .sf-empty-icon{color:var(--color-primary-text) !important}
html.sf-dark .sf-empty-text{color:var(--dk-ink-3) !important}

/* --- assets/faq-accordion.css --- */
html.sf-dark .faq-item{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .faq-item.is-open{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .faq-q span{color:var(--dk-ink) !important}
html.sf-dark .faq-item.is-open .faq-q span{color:var(--color-primary-text) !important}
html.sf-dark .faq-toggle{background-color:var(--dk-raised) !important}
html.sf-dark .faq-toggle::before,html.sf-dark .faq-toggle::after{background-color:var(--dk-line-2) !important}
html.sf-dark .faq-item.is-open .faq-toggle{background-color:var(--color-primary, #0185FC) !important;color:var(--color-on-primary) !important}
html.sf-dark .faq-item.is-open .faq-toggle > i{color:var(--color-on-primary) !important}
html.sf-dark .faq-item.is-open .faq-toggle::before,html.sf-dark .faq-item.is-open .faq-toggle::after{background-color:var(--dk-surface) !important}

/* --- index.php <style> --- */
html.sf-dark .sf-field-label{color:var(--dk-ink-3) !important}
html.sf-dark .sf-field-hint{color:var(--dk-ink-3) !important}
html.sf-dark .sf-locked-wrap .sf-lock{color:var(--dk-ink-4) !important}
html.sf-dark .sf-section-title{color:var(--dk-ink-3) !important}

/* --- blog_post.php <style> --- */
html.sf-dark .post-content h2{color:var(--dk-ink) !important}
html.sf-dark .post-content h3{color:var(--dk-ink) !important}
html.sf-dark .post-content p{color:var(--dk-ink-2) !important}
html.sf-dark .post-content ul,html.sf-dark .post-content ol{color:var(--dk-ink-2) !important}
html.sf-dark .post-content a{color:var(--color-primary-text) !important}
html.sf-dark .post-content strong{color:var(--dk-ink) !important}

/* --- reviews_page.php <style> --- */
html.sf-dark .sf-rv-sum{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .sf-rv-chip{color:var(--color-primary-text) !important}
html.sf-dark .sf-rv-avg .n{color:var(--dk-ink) !important}
html.sf-dark .sf-rv-avg .c{color:var(--dk-ink-3) !important}
html.sf-dark .sf-rv-bar{color:var(--dk-ink-3) !important}
html.sf-dark .sf-rv-bar .t{background-color:var(--dk-raised) !important}
html.sf-dark .sf-rv-book{background-color:var(--color-primary, #0E7C86) !important;color:var(--color-on-primary) !important}
html.sf-dark .sf-rv-book > i{color:var(--color-on-primary) !important}
html.sf-dark .sf-rv-card{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .sf-rv-av{color:var(--color-primary-text) !important}
html.sf-dark .sf-rv-who .nm{color:var(--dk-ink) !important}
html.sf-dark .sf-rv-who .dt{color:var(--dk-ink-4) !important}
html.sf-dark .sf-rv-text{color:var(--dk-ink-2) !important}

/* --- partner-thank-you.php <style> --- */
html.sf-dark .pt-card{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .pt-top{background:linear-gradient(160deg,var(--color-primary-tint),var(--dk-surface) 70%) !important}
html.sf-dark .pt-tick{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .pt-tick > i{color:var(--color-on-primary) !important}
html.sf-dark .pt-top h1{color:var(--dk-ink) !important}
html.sf-dark .pt-top p{color:var(--dk-ink-2) !important}
html.sf-dark .pt-steps h2{color:var(--dk-ink-4) !important}
html.sf-dark .pt-step:not(:last-child)::before{background-color:var(--dk-hi) !important}
html.sf-dark .pt-num{color:var(--color-primary-text) !important}
html.sf-dark .pt-step b{color:var(--dk-ink) !important}
html.sf-dark .pt-step span{color:var(--dk-ink-3) !important}
html.sf-dark .pt-btn.p{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .pt-btn.p > i{color:var(--color-on-primary) !important}
html.sf-dark .pt-btn.s{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important;color:var(--dk-ink-2) !important}

/* --- google_review_page.php <style> --- */
html.sf-dark .gr-hero{background:var(--dk-brand-banner) !important}
html.sf-dark .gr-btn{background-color:var(--dk-surface) !important;color:var(--dk-ink) !important}
html.sf-dark .gr-card{border-color:var(--dk-line) !important;background-color:var(--dk-surface) !important}
html.sf-dark .gr-card-t{color:var(--dk-ink) !important}
html.sf-dark .gr-n{color:var(--color-primary-text) !important}
html.sf-dark .gr-s{color:var(--dk-ink-2) !important}
html.sf-dark .gr-note{color:var(--dk-ink-4) !important}

/* --- shop.php <style> --- */
html.sf-dark .shop-price-chip{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .shop-price-chip > i{color:var(--color-on-primary) !important}
html.sf-dark .shop-app-chip{background-color:var(--dk-surface) !important;color:var(--color-primary-text) !important}
html.sf-dark .shop-img-box{background-color:var(--dk-raised) !important}
html.sf-dark .shop-img-empty{color:var(--color-primary-text) !important}
html.sf-dark .shop-add-btn{border-top-color:var(--dk-line) !important;color:var(--color-primary-text) !important}
html.sf-dark .shop-add-btn.is-added{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .shop-add-btn.is-added > i{color:var(--color-on-primary) !important}
html.sf-dark .shop-btn-row .shop-buy-btn{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .shop-btn-row .shop-buy-btn > i{color:var(--color-on-primary) !important}
html.sf-dark .shop-stepper{border-color:var(--dk-line) !important}
html.sf-dark .shop-stepper button{color:var(--color-primary-text) !important}
html.sf-dark #shop-cart-bar a{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark #shop-cart-bar a > i{color:var(--color-on-primary) !important}
html.sf-dark .shop-city-chip{border-color:var(--dk-line) !important;color:var(--dk-ink-2) !important;background-color:var(--dk-surface) !important}
html.sf-dark .shop-city-chip.is-active{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .shop-city-chip.is-active > i{color:var(--color-on-primary) !important}
html.sf-dark #shop-cta-bar .inner{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}

/* --- order_details.php <style> --- */
html.sf-dark .inv-page{background-color:var(--dk-surface) !important}
html.sf-dark .inv-head{border-bottom-color:var(--dk-line) !important}
html.sf-dark .inv-logo-fallback{color:var(--color-primary-text) !important}
html.sf-dark .inv-copy{color:var(--dk-ink-2) !important}
html.sf-dark .inv-title{color:var(--color-primary-text) !important}
html.sf-dark .inv-company{border-bottom-color:var(--dk-line) !important}
html.sf-dark .inv-company .name{color:var(--dk-ink) !important}
html.sf-dark .inv-company .line{color:var(--dk-ink-2) !important}
html.sf-dark .inv-meta{border-bottom-color:var(--dk-line) !important}
html.sf-dark .inv-k{color:var(--color-primary-text) !important}
html.sf-dark .inv-v{color:var(--dk-ink) !important}
html.sf-dark .inv-details .h{color:var(--color-primary-text) !important}
html.sf-dark .inv-details .row{color:var(--dk-ink) !important}
html.sf-dark .inv-details .row b{color:var(--dk-ink) !important}
html.sf-dark .inv-table th{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important;border-right-color:var(--dk-line) !important}
html.sf-dark .inv-table th > i{color:var(--color-on-primary) !important}
html.sf-dark .inv-table td{color:var(--dk-ink) !important;border-bottom-color:var(--dk-line) !important}
html.sf-dark .inv-table td .desc-work{color:var(--dk-ink-2) !important}
html.sf-dark .inv-total .tl{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .inv-total .tl > i{color:var(--color-on-primary) !important}
html.sf-dark .inv-total .tv{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .inv-total .tv > i{color:var(--color-on-primary) !important}
html.sf-dark .inv-foot{color:var(--dk-ink-2) !important}
html.sf-dark .inv-foot b{color:var(--dk-ink) !important}
html.sf-dark .inv-thanks{color:var(--dk-ink-4) !important}
html.sf-dark .inv-loading,html.sf-dark .inv-error{color:var(--dk-ink-4) !important}

/* --- contact.php <style> --- */
html.sf-dark .sf-area-chip{border-color:var(--dk-line) !important;background-color:var(--dk-surface) !important;color:var(--dk-ink-2) !important}
html.sf-dark .sf-area-chip:hover,html.sf-dark .sf-area-chip:active{color:var(--color-primary-text) !important}
html.sf-dark .pf-card{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .pf-head{background:var(--dk-brand-banner) !important}
html.sf-dark .pf-l{color:var(--dk-ink-3) !important}
html.sf-dark .pf-in{border-color:var(--dk-line) !important;background-color:var(--dk-surface) !important}
html.sf-dark .pf-svc{border-color:var(--dk-line) !important;color:var(--dk-ink-2) !important}
html.sf-dark .pf-svc:has(input:checked){color:var(--color-primary-text) !important}
html.sf-dark .pf-phone .pre{border-color:var(--dk-line) !important;color:var(--dk-ink-3) !important;background-color:var(--dk-surface) !important}
html.sf-dark .pf-btn{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .pf-btn > i{color:var(--color-on-primary) !important}
html.sf-dark .pf-link{color:var(--color-primary-text) !important}
html.sf-dark .pf-err{background-color:#3A171A !important;color:#E65B5B !important}
html.sf-dark .pf-note{color:var(--dk-ink-3) !important}

/* --- update_page.php <style> --- */
html.sf-dark .up-hero{background-color:var(--dk-raised) !important}
html.sf-dark .up-tag{color:var(--color-primary-text) !important}
html.sf-dark .up-title{color:var(--dk-ink) !important}
html.sf-dark .up-date{color:var(--dk-ink-4) !important}
html.sf-dark .up-body{color:var(--dk-ink-2) !important}
html.sf-dark .up-cta{background-color:var(--color-primary) !important;color:var(--color-on-primary) !important}
html.sf-dark .up-cta > i{color:var(--color-on-primary) !important}

/* --- backend/site_chrome.php <style> --- */
html.sf-dark .sf-page-title .sf-pt-ico{background-color:var(--color-primary, #0E7C86) !important;color:var(--color-on-primary) !important}
html.sf-dark .sf-page-title .sf-pt-ico > i{color:var(--color-on-primary) !important}
html.sf-dark .sf-page-title h1{color:var(--dk-ink) !important}
html.sf-dark main h2.text-base.font-extrabold::before{background-color:var(--color-primary, #0E7C86) !important;color:var(--color-on-primary) !important}
html.sf-dark main h2.text-base.font-extrabold::before > i{color:var(--color-on-primary) !important}
html.sf-dark .sf-site-footer{background-color:var(--dk-surface) !important}
html.sf-dark .sf-site-footer .sf-ft-head{color:var(--dk-ink-4) !important}
html.sf-dark .sf-site-footer .sf-ft-link{color:var(--dk-ink-2) !important}
html.sf-dark .sf-site-footer .sf-ft-ico{background-color:var(--dk-surface) !important;color:var(--color-primary-text) !important}
html.sf-dark .sf-site-footer .sf-ft-go{color:var(--dk-ink-4) !important}
html.sf-dark .sf-site-footer .sf-ft-link.is-on{background-color:var(--color-primary, #0E7C86) !important;color:var(--color-on-primary) !important}
html.sf-dark .sf-site-footer .sf-ft-link.is-on > i{color:var(--color-on-primary) !important}
html.sf-dark .sf-site-footer .sf-ft-legal{color:var(--dk-ink-4) !important}
html.sf-dark .sf-site-footer .sf-ft-legal a:hover{color:var(--color-primary-text) !important}
html.sf-dark .sf-wish-card{background-color:var(--dk-surface) !important;border-color:var(--dk-line) !important}
html.sf-dark .sf-wish-from{color:var(--color-primary-text) !important}
html.sf-dark .sf-wish-chip{color:var(--color-primary-text) !important}
html.sf-dark .sf-wish-text{color:var(--dk-ink-2) !important}
html.sf-dark .sf-wish-quote p{color:var(--dk-ink-2) !important}
html.sf-dark .sf-wish-list li{color:var(--dk-ink-2) !important}
html.sf-dark .sf-wish-list li::before{color:var(--color-primary-text) !important}
html.sf-dark .sf-wish-btn{background-color:var(--color-primary, #0E7C86) !important;color:var(--color-on-primary) !important}
html.sf-dark .sf-wish-btn > i{color:var(--color-on-primary) !important}
html.sf-dark .sf-wish-name{color:var(--color-primary-text) !important}

/* --- style="" attributes in customer pages --- */
html.sf-dark [style*="color:#111827" i],html.sf-dark [style*="color: #111827" i]{color:var(--dk-ink) !important}
html.sf-dark [style*="color:#9ca3af" i],html.sf-dark [style*="color: #9ca3af" i]{color:var(--dk-ink-4) !important}
html.sf-dark [style*="color:#d1d5db" i],html.sf-dark [style*="color: #d1d5db" i]{color:var(--dk-ink-4) !important}
html.sf-dark [style*="color:#2563eb" i],html.sf-dark [style*="color: #2563eb" i]{color:#5787F0 !important}
html.sf-dark [style*="color:#7c3aed" i],html.sf-dark [style*="color: #7c3aed" i]{color:#9F6EF2 !important}
html.sf-dark [style*="color:#0a5860" i],html.sf-dark [style*="color: #0a5860" i]{color:#2FD8E9 !important}
html.sf-dark [style*="color:#b91c1c" i],html.sf-dark [style*="color: #b91c1c" i]{color:#E65B5B !important}
html.sf-dark [style*="color:#4b5563" i],html.sf-dark [style*="color: #4b5563" i]{color:var(--dk-ink-2) !important}
html.sf-dark [style*="color:#0f172a" i],html.sf-dark [style*="color: #0f172a" i]{color:var(--dk-ink) !important}
html.sf-dark [style*="color:#94a3b8" i],html.sf-dark [style*="color: #94a3b8" i]{color:var(--dk-ink-4) !important}
html.sf-dark [style*="color:#64748b" i],html.sf-dark [style*="color: #64748b" i]{color:var(--dk-ink-3) !important}
html.sf-dark [style*="color:#334155" i],html.sf-dark [style*="color: #334155" i]{color:var(--dk-ink-2) !important}
html.sf-dark [style*="color:#475569" i],html.sf-dark [style*="color: #475569" i]{color:var(--dk-ink-2) !important}
html.sf-dark [style*="color:#6b7280" i],html.sf-dark [style*="color: #6b7280" i]{color:var(--dk-ink-3) !important}
html.sf-dark [style*="color:#374151" i],html.sf-dark [style*="color: #374151" i]{color:var(--dk-ink-2) !important}
html.sf-dark [style*="color:#8a94a6" i],html.sf-dark [style*="color: #8a94a6" i]{color:var(--dk-ink-3) !important}
html.sf-dark [style*="color:#92400e" i],html.sf-dark [style*="color: #92400e" i]{color:#EB752E !important}
html.sf-dark [style*="color:#991b1b" i],html.sf-dark [style*="color: #991b1b" i]{color:#E35F5F !important}
html.sf-dark [style*="color:#166534" i],html.sf-dark [style*="color: #166534" i]{color:#43D67B !important}
html.sf-dark [style*="color:#128c4a" i],html.sf-dark [style*="color: #128c4a" i]{color:#34E585 !important}
html.sf-dark [style*="border:#e2e8f0" i],html.sf-dark [style*="border: #e2e8f0" i]{border-color:var(--dk-line) !important}
html.sf-dark [style*="border:#e5e7eb" i],html.sf-dark [style*="border: #e5e7eb" i]{border-color:var(--dk-line) !important}
html.sf-dark [style*="border:#fecaca" i],html.sf-dark [style*="border: #fecaca" i]{border-color:#6E1113 !important}
html.sf-dark [style*="border:#f1f5f9" i],html.sf-dark [style*="border: #f1f5f9" i]{border-color:var(--dk-line) !important}
html.sf-dark [style*="border:#dcfce7" i],html.sf-dark [style*="border: #dcfce7" i]{border-color:#176834 !important}
html.sf-dark [style*="background:#fff" i],html.sf-dark [style*="background: #fff" i]{background-color:var(--dk-surface) !important}
html.sf-dark [style*="background:#cbd5e1" i],html.sf-dark [style*="background: #cbd5e1" i]{background-color:var(--dk-line-2) !important}
html.sf-dark [style*="background:#e5e7eb" i],html.sf-dark [style*="background: #e5e7eb" i]{background-color:var(--dk-hi) !important}
html.sf-dark [style*="background:#e8f0fe" i],html.sf-dark [style*="background: #e8f0fe" i]{background-color:#16233E !important}
html.sf-dark [style*="background:#e3f6fa" i],html.sf-dark [style*="background: #e3f6fa" i]{background-color:#1A3239 !important}
html.sf-dark [style*="background:#fef3e2" i],html.sf-dark [style*="background: #fef3e2" i]{background-color:#3C2D18 !important}
html.sf-dark [style*="background:#f1ebfc" i],html.sf-dark [style*="background: #f1ebfc" i]{background-color:#24193A !important}
html.sf-dark [style*="background:#e7f5f6" i],html.sf-dark [style*="background: #e7f5f6" i]{background-color:#1D3236 !important}
html.sf-dark [style*="background:#fee2e2" i],html.sf-dark [style*="background: #fee2e2" i]{background-color:#3C1618 !important}
html.sf-dark [style*="background:#f3f4f6" i],html.sf-dark [style*="background: #f3f4f6" i]{background-color:var(--dk-raised) !important}
html.sf-dark [style*="background:#f1f5f9" i],html.sf-dark [style*="background: #f1f5f9" i]{background-color:var(--dk-raised) !important}
html.sf-dark [style*="background:#f8fafc" i],html.sf-dark [style*="background: #f8fafc" i]{background-color:var(--dk-surface) !important}
html.sf-dark [style*="background:#e2e8f0" i],html.sf-dark [style*="background: #e2e8f0" i]{background-color:var(--dk-hi) !important}
html.sf-dark [style*="background:#f5f6f8" i],html.sf-dark [style*="background: #f5f6f8" i]{background-color:var(--dk-raised) !important}
html.sf-dark [style*="background:#fef3c7" i],html.sf-dark [style*="background: #fef3c7" i]{background-color:#534615 !important}
html.sf-dark [style*="background:#fef2f2" i],html.sf-dark [style*="background: #fef2f2" i]{background-color:#3A171A !important}
html.sf-dark [style*="background:#fafbfc" i],html.sf-dark [style*="background: #fafbfc" i]{background-color:var(--dk-surface) !important}
html.sf-dark [style*="border-top:#f1f5f9" i],html.sf-dark [style*="border-top: #f1f5f9" i]{border-top-color:var(--dk-line) !important}
html.sf-dark [style*="border-top:#f3f4f6" i],html.sf-dark [style*="border-top: #f3f4f6" i]{border-top-color:var(--dk-line) !important}
html.sf-dark [style*="background:#f0fdf4" i],html.sf-dark [style*="background: #f0fdf4" i]{background-color:#193825 !important}
html.sf-dark [style*="background:#fff7ed" i],html.sf-dark [style*="background: #fff7ed" i]{background-color:#3D2B17 !important}
html.sf-dark [style*="border-bottom:#e5e7eb" i],html.sf-dark [style*="border-bottom: #e5e7eb" i]{border-bottom-color:var(--dk-line) !important}
html.sf-dark [style*="border-bottom:#eef1f4" i],html.sf-dark [style*="border-bottom: #eef1f4" i]{border-bottom-color:var(--dk-line) !important}
html.sf-dark [style*="border-bottom:#f1f5f9" i],html.sf-dark [style*="border-bottom: #f1f5f9" i]{border-bottom-color:var(--dk-line) !important}
html.sf-dark [style*="background:rgba(255,255,255,0.7)" i],html.sf-dark [style*="background: rgba(255,255,255,0.7)" i]{background-color:rgba(24,24,27,0.70) !important}