/*
  ============================================================
  ServiceOS - THEME COLOR CONTROL FILE  (केंद्रीय कलर फाइल)
  ============================================================
  Yeh EK file hai jise badalne se poori site (customer app,
  admin panel, technician panel - sab) ka color badal jayega.

  Har variable ke upar Hindi me likha hai woh kahan/kis liye
  use hota hai. Sirf hex code (#xxxxxx) change karo, naam
  (--color-xxx) mat chedo, warna site break ho jayegi.
  ============================================================
*/

:root {

  /* ============ 1. BRAND / PRIMARY (मुख्य रंग) ============
     Yeh aapka asli brand color hai - header, buttons, links,
     icons, selected tabs, prices - sabse zyada jagah yahi
     dikhta hai. Deep teal - premium/trustworthy feel for a
     home-repair brand, distinct from generic bright blue. */
  --color-primary: #0E7C86;

  /* Primary ka thoda halka shade - hover effect (mouse le
     jaane par) aur gradients me dusra color ke liye. */
  --color-primary-light: #45A8B0;

  /* Primary ka aur gehra (dark) shade - pressed/active button
     state ke liye. */
  --color-primary-dark: #0A5860;

  /* Primary ka RGB version - kabhi transparent shadow/overlay
     banane ke liye chahiye hota hai (rgba ke through). */
  --color-primary-rgb: 14, 124, 134;
  /* Raw channels, so a colour can be used at partial opacity in a Tailwind arbitrary value:
     shadow-[rgb(var(--color-primary-rgb)/0.2)]. Writing bg-[var(--color-primary)]/20 does
     NOT work - Tailwind cannot split an alpha channel out of a var() it can't see inside,
     so those classes silently produced no CSS at all. */
  --color-warning-rgb: 245, 158, 11;
  --color-danger-rgb:  239, 68, 68;

  /* Bahut halka tint (lightest background) - jaise badge ka
     background, icon circle ka background, selected card/
     address/slot ka light background. */
  --color-primary-tint: #E7F5F6;

  /* Primary tint ke upar likha jaane wala text (jaise "Order
     Received" badge ka text, ya light bg par dark text). */
  --color-primary-tint-text: #0A5860;

  /* Gradient banners (jaise homepage ke offer cards, "Schedule
     Booking" header banner) me primary ke sath dusra color -
     ek gehra navy-teal jo gradient ko depth deta hai. */
  --color-secondary: #0A4650;

  /* Gradient banner ke andar likha gaya halka/faint text
     (jaise "Verified Nashik Technicians" jaisी subtitle). */
  --color-secondary-soft: #AFD6DA;


  /* ============ 2. SUCCESS (सफलता / पॉज़िटिव रंग) ============
     Jahan kaam safaltapoorvak hua ho - jaise "Completed"
     status, WhatsApp button, OTP verify button, "Work
     Completed" button, sahi (✓) icon. Pehle "emerald" tha. */
  --color-success: #10B981;
  --color-success-dark: #059669;   /* hover/pressed state */
  --color-success-tint: #ECFDF5;   /* halka success background */
  --color-success-soft: #D1FAE5;   /* gradient banner ka light text */


  /* ============ 3. WARNING (चेतावनी / पीला रंग) ============
     Jahan thoda dhyan dene ki zarurat ho - jaise "Pending"
     status, alert/warning message. Pehle "amber" tha. */
  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;   /* hover/pressed state */
  --color-warning-tint: #FFFBEB;   /* halka warning background */
  --color-warning-soft: #FEF3C7;   /* gradient/badge ka light shade */


  /* ============ 4. DANGER (खतरा / गलती / लाल रंग) ============
     Error message, "Cancelled/Rejected" status, delete button,
     galat OTP jaisी jagah. Pehle "red" tha. */
  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;    /* hover/pressed state */
  --color-danger-tint: #FEF2F2;    /* halka error background */
  --color-danger-soft: #FEE2E2;    /* gradient/badge ka light shade */


  /* ============ 5. INFO (जानकारी / बैंगनी-नीला रंग) ============
     Extra informational badges/highlights ke liye (purple/
     indigo wali jagah). Kam use hota hai. */
  --color-info: #7C3AED;
  --color-info-dark: #6D28D9;      /* hover/pressed state */
  --color-info-tint: #F5F3FF;      /* halka info background */
  --color-info-soft: #EDE9FE;      /* gradient/badge ka light shade */

}


/* ============================================================
   APP LAYOUT WIDTH (पूरी साइट की चौड़ाई)
   ============================================================
   --app-max-width: Yeh value CONTENT containers ki max width
   control karti hai. Sab pages ke <main>, content wrappers
   is width se zyada wide nahi honge.

   Abhi: 42rem (672px) = tablet jitni width.
   Mobile look ke liye: 28rem (448px).
   Aur bade layout ke liye: 56rem ya 64rem.

   NOTE: Body full-width rehti hai (gray sides dikhti hain
   wide desktop pe - yeh intentional hai, exactly technician
   panel jaisa look). Width sirf content area ki hoti hai.
   ============================================================ */
:root {
  --app-max-width: 42rem;
}

/* Wide desktop pe content ke baaki sides gray dikhein -
   bilkul technician panel jaisa centered card look */
html {
  background-color: #f1f5f9;
}

/* Body full-width rehti hai. Content containers (main, nav)
   khud max-w-2xl mx-auto se center hote hain - body nahi. */
html, body {
  width: 100%;
  max-width: 100% !important;
  overflow-x: hidden; /* fallback for very old browsers */
}
/* Body ko hamesha kam-se-kam poori screen height bhar-na chahiye - warna short
   pages pe (thoda saved address, khali booking list, etc) body jaldi khatam ho
   jaati hai aur neeche html ka gray (jo sirf desktop-wide side-margins ke liye
   hai) dikhne lagta hai. Mobile pe koi side-margin nahi hota, isliye yeh gray
   sirf ek visual bug jaisa dikhta hai - body ab poori tarah white bharega.
   body already `bg-white` class use karti hai (Tailwind) - yeh sirf height
   guarantee karta hai taaki woh white area screen ke end tak fail jaaye. */
body {
  min-height: 100vh;
  min-height: 100dvh; /* mobile browsers ka address-bar collapse/expand handle karta hai */
}
/* overflow-x:hidden turns html/body into a scroll container, which BREAKS
   position:sticky (that's why sticky headers scrolled away while admin's
   position:fixed header worked). overflow-x:clip prevents horizontal scroll the
   same way WITHOUT creating a scroll container, so sticky headers work again.
   @supports keeps the safe `hidden` fallback for browsers without clip. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}


/* ============================================================
   SLIDER COLOURS (स्लाइडर रंग - एक जगह से सब बदलो)
   ============================================================
   Har slider ke background gradient ke do rang yahan set
   hain - "from" (shuru का रंग) aur "to" (end का रंग).
   Sirf hex code badlo, slider ka background apne aap
   update ho jayega - HTML chhuna nahi padega.

   Sab sliders sky-blue family me hain intentionally.
   ============================================================

   ── HOME PAGE - 4 SLIDERS ──────────────────────────────── */
:root {
  /* Home Slider 1 - Deep teal (flagship/main offer) */
  --slider-home-1-from: #0A5860;
  --slider-home-1-to:   #45A8B0;

  /* Home Slider 2 - Deep navy-teal (premium feel) */
  --slider-home-2-from: #052E36;
  --slider-home-2-to:   #0A5860;

  /* Home Slider 3 - Warm brass/gold (warranty/trust accent, deliberately the
     one warm slide among three cool ones - reads as "quality guarantee") */
  --slider-home-3-from: #9C7326;
  --slider-home-3-to:   #E0B462;

  /* Home Slider 4 - Twilight teal (soft evening gradient) */
  --slider-home-4-from: #063E52;
  --slider-home-4-to:   #0E7C86;

  /* Shop Slider 1 - Deep teal (matches home feel) */
  --slider-shop-1-from: #0A5860;
  --slider-shop-1-to:   #7ECBD1;

  /* Shop Slider 2 - Ice teal (clean product feel) */
  --slider-shop-2-from: #0A4650;
  --slider-shop-2-to:   #C5E5E8;
}

/* ── PRODUCT GRID - ODD LAYOUT FIX ─────────────────────── */
/*
  Agar grid me odd items hain (1, 3, 5, 7...) to last item
  DONO column ki jagah occupy karta hai - jaise 2 cards ki
  width barabar 1 hi card ban jata hai (wide/bada card).

  Cards ki height ab FIXED nahi hai. Har card ki image
  aspect-[4/3] hai, to card apni image + text se height leta
  hai. Wide (odd-last) card ki width zyada hai, to uski image
  bhi proportionally tall ho jati hai - height apne aap sahi.

  Isliye yahan height set karne ki zaroorat NAHI. Pehle yahan
  "height: 16rem !important" tha, jo wide card ki image ko flat
  kar deta tha (width barhti thi, height nahi). Woh hata diya.

  CSS :last-child:nth-child(odd) = "agar last item odd number
  par hai" = total count odd hai = last card ko full-width karo.
*/
.product-grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;       /* dono columns ki poori width le */
}

/* ============================================================
   SQUARE UI - ONE consistent corner radius across ALL 3 sites
   (customer app, technician portal, admin - every page loads
   this file). Cards, containers, form fields, buttons, borders
   all use Tailwind rounded-* classes, so overriding those here
   squares the entire UI in one place - nothing gets missed.

   >>> THE ONLY KNOB: change --sf-radius below. <<<
   0px = perfectly sharp square · 4px = crisp square
   6-8px = soft square · 12px = rounded (current) · 16px+ = very rounded

   rounded-full is deliberately NOT overridden, so circular
   avatars / profile photos / tech photos stay round.
   ============================================================ */
:root { --sf-radius: 4px; }

.rounded-sm, .rounded, .rounded-md, .rounded-lg,
.rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: var(--sf-radius) !important;
}
/* top-only / bottom-only rounded (bottom sheets, tab strips) keep the flat side flat */
.rounded-t-lg, .rounded-t-xl, .rounded-t-2xl, .rounded-t-3xl {
  border-radius: var(--sf-radius) var(--sf-radius) 0 0 !important;
}
.rounded-b-lg, .rounded-b-xl, .rounded-b-2xl, .rounded-b-3xl {
  border-radius: 0 0 var(--sf-radius) var(--sf-radius) !important;
}

/* ============================================================
   BOLD STAT NUMBERS (bade, rangeen numbers - jaise wallet balance,
   price, booking count) - class="sf-stat" jahan bhi ek number ko
   "confident/fresh" dikhana ho, jaise reference screenshot ka ₹0.
   ============================================================ */
.sf-stat {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.sf-stat-success { color: var(--color-success-dark); }
.sf-stat-white { color: #fff; }

/* Gradient hero/header treatment - flat single-color header ki jagah
   thoda depth wala gradient, jaise reference screenshot ka green header. */
.sf-hero-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 55%, var(--color-secondary) 130%);
}
.sf-hero-gradient-success {
  background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
}

/* Vibrant accent pill/badge - saturated, high-contrast (jaise screenshot ka blue "+₹12.5" pill) */
.sf-pill-primary  { background: var(--color-primary);  color: #fff; font-weight: 800; }
.sf-pill-success  { background: var(--color-success);  color: #fff; font-weight: 800; }
.sf-pill-warning  { background: var(--color-warning);  color: #fff; font-weight: 800; }

/* ============================================================
   CARD DEPTH (halka sa saaya - flat/basic dikhne wale card ko
   thoda "uthaa hua" feel dena, bina koi HTML/class badle)
   ============================================================
   Tailwind ka default shadow-sm itna halka hai ki lagbhag dikhta
   hi nahi - poora app isi wajah se "flat/basic" lagta tha. Yahan
   thoda zyada visible, brand-color-tinted saaya diya gaya hai
   (plain grey shadow se zyada "intentional/premium" lagta hai).
   shadow-sm project me sabse zyada card/container par lagi hai,
   isliye yeh EK change poore app ko depth de deta hai.
   ============================================================ */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.04), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}
.shadow, .shadow-md {
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.05), 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
.shadow-lg {
  box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.06), 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

/* ============================================================
   CRISP WHITE (dull off-white ki jagah pure white - customer,
   admin, technician sab jagah)
   ============================================================
   NOTE: yeh ab CSS force-override se NAHI, balki har page ki
   asli class (bg-gray-50 -> bg-white) directly badal ke kiya
   gaya hai - taaki yeh "default" ho, kisi override pe depend
   na kare. bg-gray-100/200/300 aur hover:/active: wale states
   jaanbujhke nahi chhue gaye (progress bars, muted buttons,
   tap-feedback ke liye gray zaroori hai).
   ============================================================ */

/* Mono design only (assets/theme-mono.css shows these). Hidden in the Classic design. */
.sf-m-only { display: none; }

/* ===== Mono design ===== */
:root { --sf-style: mono; }
/* ============================================================================================================
 * theme-mono.css - the Mono design of the customer website/app (Deepak, 26 Oct 2026).
 *
 * A second, completely different look for a business's customer side: black and white, bold type, flat white
 * surfaces separated by hairlines and grey bands, black controls, generous white space. Served ONLY to a
 * business whose SaaS console or master admin picked "Mono": backend/tenant_theme.php appends this file to
 * /theme.php. Admin panels and the technician app never load it. Classic is untouched.
 *
 * How it is built
 *  - Every colour comes from the tokens below; dark mode redefines the tokens (section 20), so each rule
 *    works in both modes without a second copy.
 *  - The main colour (--color-primary) is black unless the business picks one. In dark mode a default black
 *    becomes near-white with dark text (emitted by tenant_theme.php).
 *  - It loads BEFORE the compiled Tailwind file and before inline <style> blocks of a page, so rules start with
 *    "html:not(.sf-no-mono) body" for weight and use !important where a utility class would otherwise win.
 *  - A page that must keep its own look (the printable invoice) sets class "sf-no-mono" on <html>.
 *
 * Scale used everywhere: page title 26-28/800, section 19/700, body 15/400, label 13/600, caption 12/500.
 * Controls: 48px fields, 52px buttons, 8px radius; cards 12px; chips and status pills fully round.
 * ============================================================================================================ */

/* ---------- 0. Tokens ---------- */
/* Declared on body, not :root: dark mode swaps --color-primary on body, and a variable is worked out where it is declared. */
html:not(.sf-no-mono) body { --m-act: var(--color-primary, #111111); --m-on-act: var(--color-on-primary, #FFFFFF); }
/* --m-act is every filled control (buttons, chips, ticks, selected states, badges): the business's main colour,
 * black by default, replaced everywhere at once when a colour is picked in the console or master admin.
 * --m-ink stays for text. (Deepak, 26 Oct 2026: "buttons only black and white; a picked colour replaces the black".) */
:root {
    --m-bg: #FFFFFF;
    --m-ink: #0F0F0F;
    --m-ink-2: #545454;
    --m-ink-3: #8A8A8A;
    --m-line: #E8E8E8;
    --m-field: #D6D6D6;
    --m-soft: #F5F5F5;
    --m-band: #F2F2F2;
    --m-r: 12px;
    --m-r-sm: 8px;
    --m-shadow-pop: 0 12px 32px rgba(0,0,0,.14);
}

/* ---------- 1. Base and type ---------- */
html:not(.sf-no-mono) body { background: var(--m-bg) !important; color: var(--m-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; }
html:not(.sf-no-mono) body .text-gray-900, html:not(.sf-no-mono) body .text-gray-800, html:not(.sf-no-mono) body .text-slate-900, html:not(.sf-no-mono) body .text-slate-800 { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .text-gray-700, html:not(.sf-no-mono) body .text-gray-600, html:not(.sf-no-mono) body .text-slate-700, html:not(.sf-no-mono) body .text-slate-600 { color: var(--m-ink-2) !important; }
html:not(.sf-no-mono) body .text-gray-500, html:not(.sf-no-mono) body .text-gray-400, html:not(.sf-no-mono) body .text-slate-500, html:not(.sf-no-mono) body .text-slate-400 { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body .text-gray-300 { color: #BDBDBD !important; }
html:not(.sf-no-mono) body .font-extrabold { font-weight: 700 !important; }
html:not(.sf-no-mono) body .font-black { font-weight: 800 !important; }
html:not(.sf-no-mono) body .bg-gray-50, html:not(.sf-no-mono) body .bg-slate-50, html:not(.sf-no-mono) body .bg-gray-100 { background-color: var(--m-soft) !important; }
html:not(.sf-no-mono) body .text-\[var\(--color-primary\)\], html:not(.sf-no-mono) body .text-\[var\(--color-primary-dark\)\] { color: var(--color-primary) !important; }
html:not(.sf-no-mono) body a { -webkit-tap-highlight-color: rgba(0,0,0,.06); }
html:not(.sf-no-mono) body ::selection { background: var(--m-ink); color: var(--m-bg); }

/* Section titles written as small grey capitals: sentence case, big and dark. */
html:not(.sf-no-mono) body h2.uppercase, html:not(.sf-no-mono) body h3.uppercase, html:not(.sf-no-mono) body h4.uppercase {
    text-transform: none !important; letter-spacing: -0.02em !important; font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important;
    color: var(--m-ink) !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* Captions and labels written as small capitals, anywhere inside a page: plain sentence case. */
html:not(.sf-no-mono) body main label.uppercase, html:not(.sf-no-mono) body main p.uppercase, html:not(.sf-no-mono) body main span.uppercase.tracking-wide:not([class*="bg-"]),
html:not(.sf-no-mono) body main div.uppercase:not([class*="bg-"]), html:not(.sf-no-mono) body .view-section [style*="text-transform:uppercase"]:not([class*="chip"]) {
    text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--m-ink) !important;
}
html:not(.sf-no-mono) body main label.uppercase, html:not(.sf-no-mono) body main .pl-1 { padding-left: 0 !important; }
html:not(.sf-no-mono) body .sf-section-title { text-transform: none !important; letter-spacing: -0.02em !important; font-size: 19px !important; font-weight: 700 !important; color: var(--m-ink) !important; margin-bottom: 4px; }
html:not(.sf-no-mono) body .sf-field-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--m-ink) !important; padding-left: 0 !important; }

/* ---------- 2. Surfaces and shapes ---------- */
html:not(.sf-no-mono) body .rounded-2xl, html:not(.sf-no-mono) body .rounded-3xl { border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body .rounded-xl, html:not(.sf-no-mono) body .rounded-lg { border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body .rounded-md { border-radius: 6px !important; }
html:not(.sf-no-mono) body .rounded-t-3xl, html:not(.sf-no-mono) body .rounded-t-2xl { border-radius: 20px 20px 0 0 !important; }
html:not(.sf-no-mono) body .shadow-sm, html:not(.sf-no-mono) body .shadow, html:not(.sf-no-mono) body .shadow-md,
html:not(.sf-no-mono) body .shadow-lg, html:not(.sf-no-mono) body .shadow-xl, html:not(.sf-no-mono) body .shadow-2xl { box-shadow: none !important; }
html:not(.sf-no-mono) body .border-gray-100, html:not(.sf-no-mono) body .border-gray-200, html:not(.sf-no-mono) body .border-gray-200\/60,
html:not(.sf-no-mono) body .border-gray-200\/80, html:not(.sf-no-mono) body .border-gray-50, html:not(.sf-no-mono) body .border-gray-300 { border-color: var(--m-line) !important; }
html:not(.sf-no-mono) body .divide-gray-100 > * + *, html:not(.sf-no-mono) body .divide-gray-50 > * + * { border-color: var(--m-line) !important; }
/* Tinted panels (main-colour tint, gradients) become plain grey or solid ink. */
html:not(.sf-no-mono) body [class*="bg-[var(--color-primary-tint)]"] { background-color: var(--m-soft) !important; border-color: transparent !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .bg-gradient-to-br, html:not(.sf-no-mono) body .bg-gradient-to-r, html:not(.sf-no-mono) body .bg-gradient-to-b,
html:not(.sf-no-mono) body .sf-hero-gradient { background-image: none !important; background-color: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body .sf-hero-gradient * { color: inherit !important; }

/* ---------- 3. Form fields ---------- */
html:not(.sf-no-mono) body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html:not(.sf-no-mono) body select, html:not(.sf-no-mono) body textarea {
    border: 1px solid var(--m-field) !important; border-radius: var(--m-r-sm) !important; background-color: var(--m-bg) !important; box-shadow: none !important;
    color: var(--m-ink); letter-spacing: 0 !important; font-size: 15px; min-height: 48px;
}
html:not(.sf-no-mono) body textarea { min-height: 88px; line-height: 1.5; }
html:not(.sf-no-mono) body input::placeholder, html:not(.sf-no-mono) body textarea::placeholder { color: #A3A3A3 !important; letter-spacing: 0 !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body input:focus, html:not(.sf-no-mono) body select:focus, html:not(.sf-no-mono) body textarea:focus {
    border-color: var(--m-ink) !important; box-shadow: 0 0 0 1px var(--m-ink) !important; outline: none !important;
}
html:not(.sf-no-mono) body input[readonly], html:not(.sf-no-mono) body input:disabled { background-color: var(--m-soft) !important; border-color: transparent !important; color: var(--m-ink-2) !important; }
html:not(.sf-no-mono) body input[type="checkbox"], html:not(.sf-no-mono) body input[type="radio"] { accent-color: var(--m-ink); }

/* ---------- 4. Buttons, links, chips, status ---------- */
html:not(.sf-no-mono) body button.bg-\[var\(--color-primary\)\], html:not(.sf-no-mono) body a.bg-\[var\(--color-primary\)\],
html:not(.sf-no-mono) body button[style*="background:var(--color-primary)"], html:not(.sf-no-mono) body a[style*="background:var(--color-primary)"] {
    border-radius: var(--m-r-sm) !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important;
}
html:not(.sf-no-mono) body button.w-full.bg-\[var\(--color-primary\)\], html:not(.sf-no-mono) body a.w-full.bg-\[var\(--color-primary\)\] { min-height: 52px; font-size: 15px !important; }
html:not(.sf-no-mono) body button:active { transform: scale(.985); }
/* Coloured action buttons and blocks (green PDF, red free visit, green share) become ink. */
html:not(.sf-no-mono) body .bg-emerald-500, html:not(.sf-no-mono) body .bg-emerald-600, html:not(.sf-no-mono) body .bg-\[var\(--color-success\)\] {
    background-color: var(--m-act) !important; color: var(--m-on-act) !important; border-radius: var(--m-r-sm) !important;
}
/* Literal capitals in a few buttons ("BOOK AGAIN", "ADD NEW ADDRESS", "EDIT"): sentence case. */
html:not(.sf-no-mono) body .sf-bk-again, html:not(.sf-no-mono) body #btn-show-add-address, html:not(.sf-no-mono) body .sfm-cap { text-transform: lowercase !important; letter-spacing: 0 !important; }
html:not(.sf-no-mono) body .sf-bk-again::first-letter, html:not(.sf-no-mono) body #btn-show-add-address::first-letter, html:not(.sf-no-mono) body .sfm-cap::first-letter { text-transform: uppercase; }

/* ---------- 5. Headers and bottom tabs ---------- */
html:not(.sf-no-mono) body header.sticky { border-bottom: 0 !important; box-shadow: 0 1px 0 var(--m-line); padding-top: 10px !important; padding-bottom: 10px !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body header .js-header-city-name { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body header .tracking-wider.uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body header .fa-chevron-down { color: var(--m-ink) !important; }
/* Round grey header buttons (call, account, back, share). */
html:not(.sf-no-mono) body header a.w-9, html:not(.sf-no-mono) body header button.w-9,
html:not(.sf-no-mono) body header button:has(> i.fa-arrow-left), html:not(.sf-no-mono) body header a:has(> i.fa-arrow-left),
html:not(.sf-no-mono) body header button:has(> i.fa-share-nodes), html:not(.sf-no-mono) body header button[aria-label="Share booking"] {
    width: 40px !important; height: 40px !important; flex: 0 0 40px; border: 0 !important; background: var(--m-soft) !important; border-radius: 50% !important;
    color: var(--m-ink) !important; display: inline-flex !important; align-items: center; justify-content: center;
}
html:not(.sf-no-mono) body header button:has(> i.fa-arrow-left) i, html:not(.sf-no-mono) body header a:has(> i.fa-arrow-left) i { font-size: 15px !important; }
html:not(.sf-no-mono) body .view-section > header.sticky { padding-left: 16px !important; padding-right: 16px !important; min-height: 60px; }
html:not(.sf-no-mono) body .view-section > header.sticky h2 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .view-section > header.sticky > * + *, html:not(.sf-no-mono) body .view-section > header.sticky > div > * + * { margin-left: 12px !important; }

/* Bottom tabs: white, a hairline on top, grey labels, the active tab ink with a short bar on top. */
html:not(.sf-no-mono) body #main-bottom-nav, html:not(.sf-no-mono) body .fixed.bottom-0.border-t {
    border-top: 1px solid var(--m-line) !important; box-shadow: none !important; background: var(--m-bg) !important; padding-top: 4px !important;
}
html:not(.sf-no-mono) body .sf-navtab { color: var(--m-ink-3) !important; background: transparent !important; border-radius: 0 !important; position: relative; gap: 4px !important; }
html:not(.sf-no-mono) body .sf-navtab i { font-size: 19px !important; }
html:not(.sf-no-mono) body .sf-navtab .nav-label { font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html:not(.sf-no-mono) body .sf-navtab.is-active { color: var(--m-ink) !important; background: transparent !important; }
html:not(.sf-no-mono) body .sf-navtab.is-active .nav-label { font-weight: 700 !important; }
html:not(.sf-no-mono) body .sf-navtab.is-active::before {
    content: ""; position: absolute; top: -5px; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 3px 3px; background: var(--m-act);
}
html:not(.sf-no-mono) body .sf-nav-badge { background: var(--m-act) !important; color: var(--m-on-act) !important; }

/* ---------- 6. Pop-ups, sheets, toasts ---------- */
/* City picker: a bottom sheet with plain rows on a phone, a centred card on a desktop. */
html:not(.sf-no-mono) body #city-picker-modal { align-items: flex-end !important; padding: 0 !important; }
html:not(.sf-no-mono) body #city-picker-modal > div { max-width: 560px !important; border-radius: 20px 20px 0 0 !important; box-shadow: none !important; padding: 20px 16px 18px !important; background: var(--m-bg) !important; }
@media (min-width: 768px) {
    html:not(.sf-no-mono) body #city-picker-modal { align-items: center !important; }
    html:not(.sf-no-mono) body #city-picker-modal > div { border-radius: var(--m-r) !important; max-width: 460px !important; }
}
html:not(.sf-no-mono) body #city-picker-title { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.03em; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #city-picker-search { background: var(--m-soft) !important; border-color: transparent !important; }
html:not(.sf-no-mono) body #city-picker-list { margin: 0 !important; padding: 0 !important; }
html:not(.sf-no-mono) body .js-city-row { margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: transparent !important; padding: 15px 2px !important; }
html:not(.sf-no-mono) body .js-city-row > span:first-child > span:first-child { background: transparent !important; color: var(--m-ink) !important; width: 22px !important; justify-content: flex-start !important; }
html:not(.sf-no-mono) body .js-city-row span { color: var(--m-ink) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body .js-city-row[style*="var(--color-primary)"] span { font-weight: 700 !important; }
html:not(.sf-no-mono) body .js-city-row > span:last-child { background: transparent !important; font-size: 12px !important; }
/* The site-wide city sheet on the basic pages (site_chrome). */
html:not(.sf-no-mono) body #sf-chrome-sheet > div { border-radius: 20px 20px 0 0 !important; }
/* Message boxes and confirms (assets/modal.js). */
html:not(.sf-no-mono) body .sf-modal-overlay { background: rgba(0,0,0,.45) !important; font-family: inherit !important; }
html:not(.sf-no-mono) body .sf-modal-box { border-radius: var(--m-r) !important; box-shadow: var(--m-shadow-pop) !important; padding: 24px 20px 18px !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .sf-modal-icon { border-radius: 50% !important; background: var(--m-soft) !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-modal-msg { font-size: 15px !important; font-weight: 500 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-modal-btn { border-radius: var(--m-r-sm) !important; padding: 13px !important; font-size: 14px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body .sf-modal-btn-secondary { background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-field) !important; }
html:not(.sf-no-mono) body .sf-modal-field label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-modal-field input, html:not(.sf-no-mono) body .sf-modal-field textarea { background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .sf-toast { background: var(--m-act) !important; color: var(--m-on-act) !important; border-radius: var(--m-r-sm) !important; font-weight: 500 !important; }
/* Technician card pop-up, reschedule. */
html:not(.sf-no-mono) body #tech-modal-popup > div, html:not(.sf-no-mono) body #reschedule-modal > div { border-radius: var(--m-r) !important; box-shadow: var(--m-shadow-pop) !important; border: 0 !important; }
html:not(.sf-no-mono) body #tech-modal-popup [class*="bg-gradient"] { background-color: var(--m-act) !important; }

/* ---------- 7. Home ---------- */
html:not(.sf-no-mono) body .sf-m-only { display: block; }
html:not(.sf-no-mono) body span.sf-m-only { display: inline; }
html:not(.sf-no-mono) body #home-core { display: none !important; }
html:not(.sf-no-mono) body #home-view main { padding-left: 16px !important; padding-right: 16px !important; margin-top: 0 !important; padding-top: 6px; padding-bottom: 8px; }
html:not(.sf-no-mono) body #home-view main > * + * { margin-top: 24px !important; }
html:not(.sf-no-mono) body #home-view main > #home-search-wrap { margin-top: 18px !important; }
html:not(.sf-no-mono) body #home-search-wrap.hidden { display: block !important; }
html:not(.sf-no-mono) body #home-search-wrap { box-shadow: none !important; }
html:not(.sf-no-mono) body #home-search-wrap input { background: var(--m-soft) !important; border-color: transparent !important; font-size: 15px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
html:not(.sf-no-mono) body #home-search-wrap input:focus { border-color: var(--m-ink) !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #home-search-wrap > span { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #home-search-suggestions { border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; box-shadow: var(--m-shadow-pop) !important; margin-top: 6px !important; }
html:not(.sf-no-mono) body #home-search-suggestions button { padding: 12px 14px !important; border-color: var(--m-line) !important; }
html:not(.sf-no-mono) body #home-search-suggestions img { border-radius: 8px !important; width: 40px !important; height: 40px !important; }
html:not(.sf-no-mono) body #home-search-suggestions span { font-weight: 500 !important; font-size: 15px !important; }
html:not(.sf-no-mono) body #home-search-empty { text-align: left !important; font-size: 14px !important; color: var(--m-ink-3) !important; padding: 0 !important; }
.sfm-nomatch { display: none !important; }

.sfm-h1 { margin: 6px 0 0; font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -0.04em; color: var(--m-ink); }
.sfm-h1 span { color: inherit; }
.sfm-h2 { margin: 0 0 14px; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; color: var(--m-ink); }
.sfm-block { display: block; }
/* A full-width grey band above a section, like a page divider. */
.sfm-band { position: relative; padding-top: 30px; }
.sfm-band::before { content: ""; position: absolute; top: 0; left: -16px; right: -16px; height: 8px; background: var(--m-band); }

/* "What are you looking for?": as many columns as there are services (up to 4), then 3 / 4 / 6 per row. */
.sfm-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.sfm-cats[data-count="1"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfm-cats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfm-cats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
@media (min-width: 560px) { .sfm-cats:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sfm-cats[data-count="5"], .sfm-cats[data-count="6"], .sfm-cats[data-count="7"], .sfm-cats[data-count="8"], .sfm-cats[data-count="9"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sfm-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: center; min-width: 0; }
.sfm-cat-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--m-r); background: var(--m-soft); overflow: hidden; display: block; position: relative; }
.sfm-cat-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); pointer-events: none; }
.sfm-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.sfm-cat:active .sfm-cat-img img { transform: scale(.95); }
@media (hover: hover) { .sfm-cat:hover .sfm-cat-img img { transform: scale(1.04); } }
.sfm-cat-name { font-size: 12.5px; line-height: 1.25; font-weight: 500; color: var(--m-ink); max-width: 100%; overflow-wrap: anywhere; }
.sfm-cats[data-count="4"] .sfm-cat-name { font-size: 12px; }

/* "Most booked services": a sideways row of cards, peeking at the edge so it reads as scrollable. */
.sfm-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sfm-rail::-webkit-scrollbar { display: none; }
.sfm-card { flex: 0 0 156px; scroll-snap-align: start; cursor: pointer; position: relative; min-width: 0; }
@media (min-width: 700px) { .sfm-card { flex-basis: 190px; } }
.sfm-card-img { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--m-r); overflow: hidden; background: var(--m-soft); position: relative; }
.sfm-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfm-card-name { margin: 10px 0 0; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--m-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sfm-card-rate { margin: 4px 0 0; font-size: 12.5px; font-weight: 500; color: var(--m-ink-2); display: flex; align-items: center; gap: 4px; }
.sfm-card-rate.hidden { display: none; }
.sfm-card-rate i { font-size: 10px; color: var(--m-ink); }
.sfm-card-price { margin: 4px 0 0; font-size: 13px; font-weight: 500; color: var(--m-ink-2); }
.sfm-card-price span { color: var(--m-ink); font-weight: 700; }
/* "Book": a small white pill sitting on the picture's bottom edge. */
.sfm-add { position: absolute; top: calc(156px - 18px); right: 8px; height: 34px; padding: 0 16px; border-radius: var(--m-r-sm); border: 1px solid var(--m-line);
    background: var(--m-bg); color: var(--m-ink); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
@media (min-width: 700px) { .sfm-add { top: calc(190px - 18px); } }

/* Banner slider: flat, rounder; white badge; small dots. */
html:not(.sf-no-mono) body #home-slider-container { border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body #home-slider-container [id^="home-slide-"] { border-radius: var(--m-r) !important; box-shadow: none !important; }
html:not(.sf-no-mono) body #home-slider-container [id$="-badge"] { background: var(--m-bg) !important; color: var(--m-ink) !important; border-radius: 4px !important; letter-spacing: 0.05em !important; font-weight: 700 !important; }
html:not(.sf-no-mono) body #home-slider-container h3 { font-size: 21px !important; letter-spacing: -0.025em; font-weight: 800 !important; }
html:not(.sf-no-mono) body #home-slider-container p[id$="-subline"] { font-size: 13px !important; color: rgba(255,255,255,.78) !important; }
html:not(.sf-no-mono) body [id^="home-dot-"] { height: 4px !important; }

/* "Why customers choose us": a list, icon in a grey circle, title and one line. */
.sfm-why-h { margin-bottom: 2px !important; }
html:not(.sf-no-mono) body #home-trust { display: block !important; border: 0 !important; padding: 0 !important; text-align: left !important; background: transparent !important; margin-top: 4px !important; }
html:not(.sf-no-mono) body #home-trust > div { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 14px; padding: 15px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--m-line) !important; }
html:not(.sf-no-mono) body #home-trust > div:last-child { border-bottom: 0 !important; }
html:not(.sf-no-mono) body #home-trust > div > div { width: 44px !important; height: 44px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--m-soft) !important; color: var(--m-ink) !important; flex: 0 0 44px; }
html:not(.sf-no-mono) body #home-trust > div > div i { font-size: 16px !important; }
.sfm-why-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html:not(.sf-no-mono) body #home-trust .sfm-why-txt > span:first-child { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; }
html:not(.sf-no-mono) body .sfm-why-sub { display: block !important; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--m-ink-3); }

/* ---------- 8. Service and product pages ---------- */
html:not(.sf-no-mono) body #service-details-view main, html:not(.sf-no-mono) body #product-details-view main { padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; }
html:not(.sf-no-mono) body #service-details-view main > *, html:not(.sf-no-mono) body #product-details-view main > * { margin-top: 0 !important; }
html:not(.sf-no-mono) body #service-details-view main > div:first-child, html:not(.sf-no-mono) body #product-details-view main > div:first-child { border: 0 !important; border-radius: 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #service-details-view main > div:first-child > div:first-child { aspect-ratio: 16 / 11 !important; background: var(--m-soft); }
html:not(.sf-no-mono) body #product-details-view main > div:first-child > div:first-child { aspect-ratio: 1 / 1 !important; background: var(--m-soft); }
html:not(.sf-no-mono) body #service-details-view main > div:first-child > div.p-5, html:not(.sf-no-mono) body #product-details-view main > div:first-child > div.p-5 { padding: 22px 16px 6px !important; }
html:not(.sf-no-mono) body #service-details-view main > div:first-child > div.p-5 > * + *, html:not(.sf-no-mono) body #product-details-view main > div:first-child > div.p-5 > * + * { margin-top: 12px !important; }
html:not(.sf-no-mono) body #detail-card-title, html:not(.sf-no-mono) body #detail-product-card-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.15 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #detail-service-desc, html:not(.sf-no-mono) body #detail-product-desc { font-size: 15px !important; line-height: 1.6 !important; color: var(--m-ink-2) !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body #service-details-view main > div:first-child .border-t, html:not(.sf-no-mono) body #product-details-view main > div:first-child .border-t {
    border-top: 0 !important; padding-top: 2px !important; justify-content: flex-start !important; gap: 8px; align-items: baseline !important;
}
html:not(.sf-no-mono) body #service-details-view main > div:first-child .border-t > span:first-child, html:not(.sf-no-mono) body #product-details-view main > div:first-child .border-t > span:first-child {
    text-transform: none !important; font-size: 14px !important; color: var(--m-ink-3) !important; font-weight: 500 !important; order: 2; letter-spacing: 0 !important;
}
html:not(.sf-no-mono) body #detail-service-price, html:not(.sf-no-mono) body #detail-product-price { font-size: 24px !important; order: 1; letter-spacing: -0.02em; color: var(--m-ink) !important; font-weight: 800 !important; }
html:not(.sf-no-mono) body #detail-app-offer { background: var(--m-soft) !important; border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body #detail-cta-slot, html:not(.sf-no-mono) body #product-cta-slot { padding: 12px 16px 26px; }
html:not(.sf-no-mono) body #detail-cta-btn, html:not(.sf-no-mono) body #product-cta-btn { border-radius: var(--m-r-sm) !important; box-shadow: none !important; min-height: 52px; font-size: 15px !important; font-weight: 600 !important; }
/* Pinned at the bottom: a white strip with a hairline behind the button, like a checkout bar. */
html:not(.sf-no-mono) body #detail-cta-btn.is-pinned, html:not(.sf-no-mono) body #product-cta-btn.is-pinned { box-shadow: 0 0 0 10px var(--m-bg), 0 -11px 0 0 var(--m-line) !important; }
/* The sections under it: open, a grey band between them, no boxes. */
html:not(.sf-no-mono) body #service-details-view main > div:not(:first-child):not(#detail-cta-slot),
html:not(.sf-no-mono) body #product-details-view main > div:not(:first-child):not(#product-cta-slot) {
    position: relative; border: 0 !important; border-radius: 0 !important; padding: 32px 16px 24px !important; background: var(--m-bg) !important;
}
html:not(.sf-no-mono) body #service-details-view main > div:not(:first-child):not(#detail-cta-slot)::before,
html:not(.sf-no-mono) body #product-details-view main > div:not(:first-child):not(#product-cta-slot)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--m-band); }
html:not(.sf-no-mono) body #service-details-view main h3, html:not(.sf-no-mono) body #service-details-view main h4,
html:not(.sf-no-mono) body #product-details-view main h3:not(#detail-product-card-title), html:not(.sf-no-mono) body #product-details-view main h4 {
    font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; margin-bottom: 16px !important; color: var(--m-ink) !important; text-transform: none !important;
}
html:not(.sf-no-mono) body #detail-issues-list > * + *, html:not(.sf-no-mono) body #detail-product-bullets > * + * { margin-top: 12px !important; }
html:not(.sf-no-mono) body #detail-issues-list li, html:not(.sf-no-mono) body #detail-product-bullets li { font-size: 15px !important; color: var(--m-ink-2) !important; font-weight: 400 !important; line-height: 1.45; }
html:not(.sf-no-mono) body #detail-issues-list i, html:not(.sf-no-mono) body #detail-whyus-list i, html:not(.sf-no-mono) body #detail-product-bullets i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #detail-whyus-list > div { gap: 14px !important; }
html:not(.sf-no-mono) body #detail-whyus-list > div > div:first-child { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 50% !important; background: var(--m-soft) !important; border: 0 !important; }
html:not(.sf-no-mono) body #detail-whyus-list p:first-child, html:not(.sf-no-mono) body #detail-whyus-list .font-bold, html:not(.sf-no-mono) body #detail-whyus-list .font-extrabold { font-size: 15px !important; font-weight: 600 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #detail-whyus-list p + p { font-size: 13.5px !important; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body #detail-whyus-list > * + * { margin-top: 18px !important; }
/* Ratings block when there are none yet: one quiet line, not a big empty card. */
html:not(.sf-no-mono) body #service-reviews-container .sf-empty, html:not(.sf-no-mono) body #product-reviews-container .sf-empty { padding: 0 !important; text-align: left !important; }
html:not(.sf-no-mono) body #service-reviews-container .sf-empty-icon, html:not(.sf-no-mono) body #product-reviews-container .sf-empty-icon { display: none !important; }
html:not(.sf-no-mono) body #service-reviews-container .w-12, html:not(.sf-no-mono) body #service-reviews-container .w-14,
html:not(.sf-no-mono) body #service-reviews-container [class*="rounded-full"][class*="w-1"] { display: none !important; }
html:not(.sf-no-mono) body #service-reviews-container p { text-align: left !important; font-size: 14px !important; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body #service-reviews-container > div { padding-top: 0 !important; padding-bottom: 0 !important; }

/* FAQ: a plain list with hairlines and a thin plus. */
html:not(.sf-no-mono) body .faq-item { border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
html:not(.sf-no-mono) body .faq-item:first-child { border-top: 1px solid var(--m-line) !important; }
html:not(.sf-no-mono) body .faq-q { padding: 17px 0 !important; background: none !important; gap: 16px; }
html:not(.sf-no-mono) body .faq-q span:first-child { font-size: 15px !important; font-weight: 600 !important; color: var(--m-ink) !important; text-align: left; }
html:not(.sf-no-mono) body .faq-a-inner { padding: 0 !important; }
html:not(.sf-no-mono) body .faq-item.is-open .faq-a-inner { padding-bottom: 18px !important; }
html:not(.sf-no-mono) body .faq-item.is-open .faq-toggle { background: none !important; }
html:not(.sf-no-mono) body .faq-item.is-open, html:not(.sf-no-mono) body.dark-mode .faq-item, html:not(.sf-no-mono) body.dark-mode .faq-item.is-open { background: none !important; }
html:not(.sf-no-mono) body .faq-a-inner p { padding: 0 !important; font-size: 14px !important; color: var(--m-ink-2) !important; line-height: 1.6 !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body .faq-toggle { background: none !important; border: 0 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .faq-toggle::before, html:not(.sf-no-mono) body .faq-toggle::after { background: var(--m-act) !important; }
html:not(.sf-no-mono) body #detail-faq-list > * + * { margin-top: 0 !important; }

/* ---------- 9. Booking form ---------- */
html:not(.sf-no-mono) body #booking-journey-view main { padding-left: 16px !important; padding-right: 16px !important; }
html:not(.sf-no-mono) body #booking-journey-view main > * + * { margin-top: 26px !important; }
html:not(.sf-no-mono) body #booking-journey-view main > div:first-child { background: var(--m-soft) !important; border: 0 !important; padding: 16px !important; }
html:not(.sf-no-mono) body #booking-journey-view main > div:first-child p.uppercase, html:not(.sf-no-mono) body #booking-journey-view main > div:first-child p:first-child { font-size: 12px !important; color: var(--m-ink-3) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body #journey-item-title { font-size: 17px !important; font-weight: 700 !important; }
html:not(.sf-no-mono) body #journey-item-price { font-size: 14px !important; color: var(--m-ink-2) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body #booking-journey-view main > div:first-child [class*="color-success-tint"], html:not(.sf-no-mono) body #booking-journey-view main > div:first-child span[class*="emerald"], html:not(.sf-no-mono) body #booking-journey-view main > div:first-child span[class*="success"] {
    background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-line) !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; padding: 4px 10px !important;
}
html:not(.sf-no-mono) body #booking-journey-view main > div:first-child [class*="color-success-tint"] svg, html:not(.sf-no-mono) body #booking-journey-view main > div:first-child span[class*="emerald"] i, html:not(.sf-no-mono) body #booking-journey-view main > div:first-child span[class*="success"] i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #booking-journey-view main h4 { margin-bottom: 12px !important; }
html:not(.sf-no-mono) body #booking-journey-view .space-y-1 > label, html:not(.sf-no-mono) body #booking-journey-view label.uppercase { display: block; margin-bottom: 6px !important; }
html:not(.sf-no-mono) body #booking-journey-view input, html:not(.sf-no-mono) body #booking-journey-view textarea, html:not(.sf-no-mono) body #booking-journey-view #chk-city { font-size: 15px !important; padding: 13px 14px !important; }
html:not(.sf-no-mono) body #booking-journey-view #chk-city { background: var(--m-soft) !important; border-color: transparent !important; color: var(--m-ink-2) !important; min-height: 48px; }
html:not(.sf-no-mono) body #booking-journey-view [class*="flex"][class*="justify-between"] > label.uppercase + * { font-size: 12px !important; }
html:not(.sf-no-mono) body #btn-add-checkout-location, html:not(.sf-no-mono) body #btn-add-new-address-checkout, html:not(.sf-no-mono) body #btn-add-location {
    border: 1px solid var(--m-ink) !important; color: var(--m-ink) !important; background: var(--m-bg) !important; border-radius: var(--m-r-sm) !important; min-height: 48px; font-weight: 600 !important;
}
html:not(.sf-no-mono) body #btn-add-checkout-location i, html:not(.sf-no-mono) body #btn-add-new-address-checkout i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #chk-location-status { background: var(--m-soft) !important; border: 0 !important; }
html:not(.sf-no-mono) body #chk-location-status * { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #saved-address-options > * { border: 1px solid var(--m-field) !important; border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body #saved-address-options > *[class*="border-[var(--color-primary)]"], html:not(.sf-no-mono) body #saved-address-options > *:has(input:checked) { border-color: var(--m-ink) !important; box-shadow: 0 0 0 1px var(--m-ink) !important; }
/* Day chips: round; the chosen one filled ink. Time slots: the chosen one filled ink. */
html:not(.sf-no-mono) body [id^="day-tab-"] { border: 1px solid var(--m-field) !important; background: var(--m-bg) !important; color: var(--m-ink) !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; min-height: 42px; }
html:not(.sf-no-mono) body [id^="day-tab-"][class*="bg-[var(--color-primary)]"], html:not(.sf-no-mono) body [id^="day-tab-"][class*="border-[var(--color-primary)]"],
html:not(.sf-no-mono) body [id^="day-tab-"][class*="bg-[var(--color-primary-tint)]"] { background: var(--m-act) !important; color: var(--m-on-act) !important; border-color: var(--m-act) !important; }
html:not(.sf-no-mono) body [id^="lbl-slot-"] { border: 1px solid var(--m-field) !important; border-radius: var(--m-r-sm) !important; padding: 14px 10px !important; }
html:not(.sf-no-mono) body [id^="lbl-slot-"] p:first-of-type, html:not(.sf-no-mono) body [id^="lbl-slot-"] span:first-of-type { font-size: 15px !important; font-weight: 700 !important; }
html:not(.sf-no-mono) body [id^="lbl-slot-"][class*="border-[var(--color-primary)]"] { background: var(--m-act) !important; border-color: var(--m-act) !important; }
html:not(.sf-no-mono) body [id^="lbl-slot-"][class*="border-[var(--color-primary)]"] * { color: var(--m-bg) !important; }
html:not(.sf-no-mono) body #other-date-input { margin-top: 10px !important; }
html:not(.sf-no-mono) body #booking-journey-view .bg-gray-50, html:not(.sf-no-mono) body #booking-journey-view [class*="bg-slate-50"] { border: 0 !important; }
html:not(.sf-no-mono) body #redeem-points-row { background: var(--m-soft) !important; border: 0 !important; }
html:not(.sf-no-mono) body #redeem-points-row * { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #btn-place-order, html:not(.sf-no-mono) body #btn-pay-later, html:not(.sf-no-mono) body #btn-book-app { border-radius: var(--m-r-sm) !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; min-height: 52px; }
html:not(.sf-no-mono) body #btn-pay-later { border: 1px solid var(--m-ink) !important; color: var(--m-ink) !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #booking-journey-error { text-align: left !important; font-size: 13px !important; }

/* ---------- 10. Login and OTP ---------- */
html:not(.sf-no-mono) body #whatsapp-login-view main { text-align: left !important; margin-top: 24px !important; }
html:not(.sf-no-mono) body #whatsapp-login-view main > .w-20 { display: none !important; }
html:not(.sf-no-mono) body #whatsapp-login-view main > * + * { margin-top: 20px !important; }
html:not(.sf-no-mono) body #auth-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1.15 !important; }
html:not(.sf-no-mono) body #auth-sub, html:not(.sf-no-mono) body #login-order-hint { text-align: left !important; font-size: 15px !important; margin: 6px 0 0 !important; max-width: none !important; color: var(--m-ink-2) !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body #whatsapp-login-view div:has(> #tab-login) { background: none !important; padding: 0 !important; border-bottom: 1px solid var(--m-line); border-radius: 0 !important; gap: 0 !important; margin: 4px 0 0 !important; }
html:not(.sf-no-mono) body #tab-login, html:not(.sf-no-mono) body #tab-signup {
    flex: 0 0 auto !important; padding: 12px 0 !important; margin: 0 26px -1px 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
    border-bottom: 2px solid transparent !important; font-size: 15px !important; font-weight: 600 !important; color: var(--m-ink-3) !important;
}
html:not(.sf-no-mono) body #tab-login[style*="255, 255, 255"], html:not(.sf-no-mono) body #tab-signup[style*="255, 255, 255"],
html:not(.sf-no-mono) body #tab-login[style*="#fff"], html:not(.sf-no-mono) body #tab-signup[style*="#fff"] { border-bottom-color: var(--m-ink) !important; color: var(--m-ink) !important; font-weight: 700 !important; }
html:not(.sf-no-mono) body #wa-number-step label, html:not(.sf-no-mono) body #signup-name-fields label { font-size: 13px !important; font-weight: 600 !important; color: var(--m-ink) !important; margin-bottom: 6px !important; }
html:not(.sf-no-mono) body #wa-number-step input, html:not(.sf-no-mono) body #signup-name-fields input { font-size: 16px !important; padding-top: 13px !important; padding-bottom: 13px !important; }
html:not(.sf-no-mono) body #wa-number-step .relative > span { color: var(--m-ink) !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body #otp-input { font-size: 22px !important; letter-spacing: 0.5em !important; text-align: center; font-weight: 700 !important; }
html:not(.sf-no-mono) body #otp-input::placeholder { letter-spacing: 0.1em !important; font-size: 15px !important; }
html:not(.sf-no-mono) body #btn-send-otp, html:not(.sf-no-mono) body #btn-verify-otp {
    background: var(--color-primary) !important; color: var(--color-on-primary, #fff) !important; border-radius: var(--m-r-sm) !important; box-shadow: none !important; min-height: 52px; font-size: 15px !important; font-weight: 600 !important;
}
html:not(.sf-no-mono) body #btn-send-otp i, html:not(.sf-no-mono) body #btn-verify-otp i { color: inherit !important; }
html:not(.sf-no-mono) body #wa-otp-step p { text-align: left !important; }
html:not(.sf-no-mono) body #wa-otp-step button[onclick^="resetOtpStep"] { background: none !important; color: var(--m-ink) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; min-height: 0 !important; }
html:not(.sf-no-mono) body #wa-otp-step button[id*="resend"], html:not(.sf-no-mono) body #resend-otp-btn { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #wa-login-error { text-align: left !important; }

/* ---------- 11. Bookings and orders lists ---------- */
html:not(.sf-no-mono) body #bookings-view main { padding-top: 4px; }
html:not(.sf-no-mono) body #bk-kind-switch { border-bottom: 1px solid var(--m-line) !important; justify-content: flex-start; gap: 26px; }
html:not(.sf-no-mono) body #bk-kind-switch button { flex: 0 0 auto !important; font-size: 15px !important; font-weight: 600 !important; padding: 12px 0 !important; margin-bottom: -1px !important; }
html:not(.sf-no-mono) body #bk-kind-switch button i { margin-right: 6px; }
html:not(.sf-no-mono) body #bookings-heading { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.035em !important; padding-left: 0 !important; margin-top: 18px !important; }
html:not(.sf-no-mono) body #bookings-subtabs { background: none !important; padding: 0 !important; gap: 8px !important; margin-top: 12px !important; }
html:not(.sf-no-mono) body #bookings-subtabs button { flex: 0 0 auto !important; padding: 9px 18px !important; border-radius: 999px !important; border: 1px solid var(--m-field) !important; background: var(--m-bg) !important; color: var(--m-ink) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body #bookings-subtabs button.shadow, html:not(.sf-no-mono) body #bookings-subtabs button.bg-white { background: var(--m-act) !important; border-color: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body #bookings-list-container { margin-top: 8px !important; }
html:not(.sf-no-mono) body #bookings-list-container > * + * { margin-top: 0 !important; }
html:not(.sf-no-mono) body #bookings-list-container > div:not(.sf-bk-card) { text-align: left !important; padding-left: 0 !important; font-size: 15px !important; }
html:not(.sf-no-mono) body .sf-bk-card { border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 6px 0 14px; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .sf-bk-head { background: none !important; border-bottom: 0 !important; padding: 16px 0 8px !important; gap: 12px !important; }
html:not(.sf-no-mono) body .sf-bk-head img, html:not(.sf-no-mono) body .sf-bk-head > div:first-child:not([style*="flex:1"]) { border-radius: var(--m-r-sm) !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; }
html:not(.sf-no-mono) body .sf-bk-head p:first-child { font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; letter-spacing: -0.015em; }
html:not(.sf-no-mono) body .sf-bk-head p + p { font-size: 12px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body .sf-bk-head > span { background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-field) !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; padding: 5px 10px !important; }
html:not(.sf-no-mono) body .sf-bk-card > div:last-child { padding: 2px 0 6px !important; }
html:not(.sf-no-mono) body .sf-bk-card span[style*="color:#64748B"] { color: var(--m-ink-3) !important; font-weight: 500 !important; font-size: 13px !important; }
html:not(.sf-no-mono) body .sf-bk-card span[style*="color:#0F172A"] { color: var(--m-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body .sf-bk-card span[style*="font-size:15px"] { font-size: 16px !important; font-weight: 800 !important; }
html:not(.sf-no-mono) body .sf-bk-card p[style*="color:#94A3B8"] { color: var(--m-ink-3) !important; font-weight: 500 !important; font-size: 12.5px !important; }
html:not(.sf-no-mono) body .sf-bk-again { background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-ink) !important; border-radius: var(--m-r-sm) !important; font-size: 14px !important; font-weight: 600 !important; padding: 12px !important; }
html:not(.sf-no-mono) body .sf-bk-card button[onclick^="event.stopPropagation(); resumeBookingPayment"] { border-radius: var(--m-r-sm) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html:not(.sf-no-mono) body #orders-list-container > div { border-radius: 0 !important; }
html:not(.sf-no-mono) body #orders-list-container a, html:not(.sf-no-mono) body #bookings-view .sf-empty a, html:not(.sf-no-mono) body #bookings-view .sf-empty button {
    color: var(--m-ink) !important;
}
/* Empty states anywhere: a grey circle, a quiet line, an outlined action. */
html:not(.sf-no-mono) body .sf-empty { padding-top: 36px !important; }
html:not(.sf-no-mono) body .sf-empty-icon { background: var(--m-soft) !important; color: var(--m-ink) !important; border-radius: 50% !important; }
html:not(.sf-no-mono) body .sf-empty-text { font-size: 15px !important; color: var(--m-ink-2) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body .sf-empty a, html:not(.sf-no-mono) body .sf-empty button { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 10px 18px !important; border: 1px solid var(--m-ink) !important; border-radius: var(--m-r-sm) !important; background: var(--m-bg) !important; color: var(--m-ink) !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; }

/* ---------- 12. Booking journey (after booking) ---------- */
html:not(.sf-no-mono) body #booking-detail-view main > div:first-child { border: 0 !important; padding: 8px 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .relative.pl-6::before { background: #DADADA !important; width: 2px !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .bg-teal-600 { background: var(--m-act) !important; --tw-ring-color: transparent !important; box-shadow: none !important; border-color: var(--m-bg) !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .bg-red-600 { --tw-ring-color: transparent !important; box-shadow: none !important; border-color: var(--m-bg) !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .space-y-6 > * + * { margin-top: 26px !important; }
html:not(.sf-no-mono) body #booking-detail-timeline span.text-xs.font-extrabold { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.015em; }
html:not(.sf-no-mono) body #booking-detail-timeline span.text-\[10px\] { font-size: 12px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .text-\[11px\] { font-size: 14px !important; line-height: 1.55 !important; color: var(--m-ink-2) !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .text-\[11px\] b, html:not(.sf-no-mono) body #booking-detail-timeline .text-\[11px\] strong, html:not(.sf-no-mono) body #booking-detail-timeline .text-\[11px\] .font-bold,
html:not(.sf-no-mono) body #booking-detail-timeline .text-\[11px\] .font-extrabold { color: var(--m-ink) !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body #booking-detail-timeline span.uppercase, html:not(.sf-no-mono) body #booking-detail-timeline span[class*="rounded"][class*="text-[9px]"], html:not(.sf-no-mono) body #booking-detail-timeline span[class*="rounded"][class*="text-[10px]"] {
    text-transform: none !important; letter-spacing: 0 !important; background: var(--m-bg) !important; border: 1px solid var(--m-field) !important; border-radius: 999px !important; color: var(--m-ink) !important; font-weight: 600 !important; font-size: 11.5px !important; padding: 3px 9px !important;
}
html:not(.sf-no-mono) body #booking-detail-timeline a.underline, html:not(.sf-no-mono) body #booking-detail-timeline span.underline { color: var(--m-ink) !important; font-weight: 600 !important; text-underline-offset: 3px; }
html:not(.sf-no-mono) body #booking-detail-timeline a.bg-emerald-500 { background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-ink) !important; min-height: 50px; display: flex !important; align-items: center; justify-content: center; font-weight: 600 !important; }
html:not(.sf-no-mono) body #booking-detail-timeline a.bg-emerald-500 i { color: var(--m-ink) !important; }
/* Rate this service. */
html:not(.sf-no-mono) body #booking-detail-timeline .bg-white.border.rounded-xl, html:not(.sf-no-mono) body .sf-bk-card .bg-white.border { border: 0 !important; background: var(--m-soft) !important; }
html:not(.sf-no-mono) body #rate-stars { color: #C7C7C7 !important; }
html:not(.sf-no-mono) body #rate-stars .text-amber-400, html:not(.sf-no-mono) body #rate-stars .text-yellow-400 { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #rate-comment { background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .bg-amber-50 { background-color: var(--m-soft) !important; border-color: transparent !important; }
html:not(.sf-no-mono) body .bg-amber-50 .text-amber-700, html:not(.sf-no-mono) body .bg-amber-50 .text-amber-600 { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .text-amber-500 { color: var(--m-ink) !important; }
/* "Problem not solved?": a plain grey panel with an ink button (no red block). */
html:not(.sf-no-mono) body #booking-detail-timeline .bg-red-50:has(#btn-repeat-complaint) { background: var(--m-soft) !important; border: 0 !important; text-align: left !important; }
html:not(.sf-no-mono) body #booking-detail-timeline .bg-red-50:has(#btn-repeat-complaint) p { color: var(--m-ink) !important; font-size: 15px !important; font-weight: 700 !important; }
html:not(.sf-no-mono) body #btn-repeat-complaint { background: var(--m-act) !important; color: var(--m-on-act) !important; border-radius: var(--m-r-sm) !important; min-height: 50px; font-weight: 600 !important; }
html:not(.sf-no-mono) body #booking-detail-timeline button.border-2 { border-width: 1px !important; border-radius: var(--m-r-sm) !important; min-height: 46px; }
html:not(.sf-no-mono) body #booking-detail-timeline button.border:not(.border-2), html:not(.sf-no-mono) body #booking-detail-timeline a.border:not(.bg-emerald-500) { border-color: var(--m-field) !important; border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body #reschedule-action button { border-color: var(--m-ink) !important; color: var(--m-ink) !important; border-radius: var(--m-r-sm) !important; min-height: 50px; font-weight: 600 !important; }
html:not(.sf-no-mono) body #reschedule-action p { text-align: left !important; font-size: 12.5px !important; margin-top: 8px !important; }
html:not(.sf-no-mono) body #payment-action button { border-radius: var(--m-r-sm) !important; min-height: 52px; font-weight: 600 !important; }

/* ---------- 13. Account and its pages ---------- */
html:not(.sf-no-mono) body #profile-view main { margin-top: 8px !important; }
html:not(.sf-no-mono) body #profile-view main > div:first-child { border: 0 !important; padding: 10px 0 22px !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #profile-avatar { width: 64px !important; height: 64px !important; font-size: 24px !important; border-radius: 50% !important; }
html:not(.sf-no-mono) body #profile-display-name { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; }
html:not(.sf-no-mono) body #profile-display-phone { font-size: 14px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; margin-top: 4px !important; }
html:not(.sf-no-mono) body #profile-view main > div:first-child > button { border: 1px solid var(--m-ink) !important; color: var(--m-ink) !important; border-radius: 999px !important; padding: 8px 18px !important; font-size: 13px !important; font-weight: 600 !important; background: var(--m-bg) !important; flex-shrink: 0; }
html:not(.sf-no-mono) body #profile-view main > div:first-child > div { min-width: 0; }
html:not(.sf-no-mono) body #profile-view .divide-y { border: 0 !important; border-radius: 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #profile-view .divide-y > div, html:not(.sf-no-mono) body #profile-view .divide-y > a, html:not(.sf-no-mono) body #profile-view .divide-y > details { padding: 17px 0 !important; border-color: var(--m-line) !important; }
html:not(.sf-no-mono) body #profile-view .divide-y .w-9 { background: transparent !important; border: 0 !important; width: 24px !important; height: 24px !important; color: var(--m-ink) !important; justify-content: flex-start !important; }
html:not(.sf-no-mono) body #profile-view .divide-y .w-9 i { color: var(--m-ink) !important; font-size: 18px !important; }
html:not(.sf-no-mono) body #profile-view .divide-y span.text-sm { font-size: 16px !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body #profile-view .divide-y .fa-chevron-right, html:not(.sf-no-mono) body #profile-view .divide-y .fa-chevron-down { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body #theme-toggle-container > div { border: 0 !important; background: var(--m-soft) !important; border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body #theme-toggle-container > div > div:first-child > div:first-child { background: var(--m-bg) !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #theme-toggle-container button { border-radius: 999px !important; }
/* Edit profile, addresses, appliances, refer, language: open sections with hairlines, edge-aligned fields. */
html:not(.sf-no-mono) body #edit-profile-view main > div, html:not(.sf-no-mono) body #my-referral-view main > div:not(.sf-hero-gradient) {
    border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-radius: 0 !important; background: var(--m-bg) !important; padding-left: 0 !important; padding-right: 0 !important;
}
html:not(.sf-no-mono) body #addresses-view main > div { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-radius: 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #edit-profile-view main > div + div { padding-top: 22px !important; }
html:not(.sf-no-mono) body #profile-photo-preview { border-radius: 50% !important; }
html:not(.sf-no-mono) body #edit-profile-view main > div:first-child { border: 0 !important; }
html:not(.sf-no-mono) body #addresses-view [style*="text-transform:uppercase"] { font-size: 19px !important; font-weight: 700 !important; color: var(--m-ink) !important; letter-spacing: -0.02em !important; }
html:not(.sf-no-mono) body #addresses-view main > div:first-child > div:first-child { background: none !important; padding-left: 0 !important; }
html:not(.sf-no-mono) body #addresses-view button[style*="margin-right:28px"], html:not(.sf-no-mono) body #addresses-view button[onclick^="shareAddress"] {
    text-transform: lowercase !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--m-ink) !important; text-decoration: underline; text-underline-offset: 3px;
}
html:not(.sf-no-mono) body #addresses-view button[style*="margin-right:28px"]::first-letter, html:not(.sf-no-mono) body #addresses-view button[onclick^="shareAddress"]::first-letter { text-transform: uppercase; }
html:not(.sf-no-mono) body #btn-show-add-address { border-radius: var(--m-r-sm) !important; border-color: var(--m-ink) !important; color: var(--m-ink) !important; font-size: 15px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body #addresses-view [style*="var(--color-success)"], html:not(.sf-no-mono) body #addresses-view .border-emerald-400 { border-color: var(--m-ink) !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #appliances-list > div { border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #appliances-list .sf-empty, html:not(.sf-no-mono) body #appliances-list > div:only-child { border-bottom: 0 !important; }
/* Refer and earn: an ink banner, the code in a dashed box, an ink share button. */
html:not(.sf-no-mono) body #my-referral-view main > .sf-hero-gradient { border-radius: var(--m-r) !important; padding: 22px 18px !important; text-align: left !important; }
html:not(.sf-no-mono) body #my-referral-view main > .sf-hero-gradient p:first-of-type { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.03em; }
html:not(.sf-no-mono) body #my-referral-view main > .sf-hero-gradient p + p { font-size: 13.5px !important; opacity: .8; margin-top: 6px !important; }
html:not(.sf-no-mono) body #ref-code-display { color: var(--m-ink) !important; border: 1.5px dashed var(--m-field); border-radius: var(--m-r-sm); padding: 14px 0; letter-spacing: 0.32em !important; }
html:not(.sf-no-mono) body #my-referral-view main button { min-height: 50px; }

/* ---------- 14. Cart ---------- */
html:not(.sf-no-mono) body #cart-view main { padding-left: 16px !important; padding-right: 16px !important; }
html:not(.sf-no-mono) body #cart-city-line { font-size: 13px !important; color: var(--m-ink-3) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body #cart-lines > div { border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; padding: 14px 0 !important; box-shadow: none !important; background: var(--m-bg) !important; margin: 0 !important; }
html:not(.sf-no-mono) body #cart-lines img { border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body #cart-summary { border: 0 !important; background: var(--m-soft) !important; padding: 18px 16px !important; }
html:not(.sf-no-mono) body #cart-summary [class*="text-[var(--color-success)]"], html:not(.sf-no-mono) body #cart-summary .text-emerald-600 { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #cart-checkout-btn, html:not(.sf-no-mono) body #cart-app-btn { border-radius: var(--m-r-sm) !important; box-shadow: none !important; min-height: 52px; font-weight: 600 !important; font-size: 15px !important; }
html:not(.sf-no-mono) body #cart-checkout-bar { background: var(--m-bg); padding-top: 10px !important; border-top: 1px solid var(--m-line); }
html:not(.sf-no-mono) body #cart-continue { color: var(--m-ink) !important; text-decoration: underline; text-underline-offset: 3px; font-size: 14px !important; font-weight: 600 !important; }
/* Steppers (cart and shop): one hairline pill. */
html:not(.sf-no-mono) body .shop-stepper, html:not(.sf-no-mono) body #cart-lines div[style*="border:1px solid #E5E7EB"] { border: 1px solid var(--m-field) !important; border-radius: 999px !important; }
html:not(.sf-no-mono) body .shop-stepper button, html:not(.sf-no-mono) body #cart-lines div[style*="border:1px solid #E5E7EB"] button { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #cart-lines p.text-\[var\(--color-primary\)\] { color: var(--m-ink) !important; }

/* ---------- 15. Shop pages (shop.php) ---------- */
html:not(.sf-no-mono) body .shop-city-chip { border-color: var(--m-field) !important; color: var(--m-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; padding: 8px 16px !important; }
html:not(.sf-no-mono) body .shop-city-chip.is-active { background: var(--m-act) !important; color: var(--m-on-act) !important; border-color: var(--m-act) !important; }
html:not(.sf-no-mono) body .shop-card { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; }
html:not(.sf-no-mono) body .shop-img-box { border-radius: var(--m-r) !important; background: var(--m-soft) !important; }
html:not(.sf-no-mono) body .shop-card h3, html:not(.sf-no-mono) body .shop-card h2 { text-align: left !important; font-size: 15px !important; font-weight: 600 !important; margin-top: 10px !important; }
html:not(.sf-no-mono) body .shop-card p { text-align: left !important; }
html:not(.sf-no-mono) body .shop-card .text-center { text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; }
html:not(.sf-no-mono) body .shop-btn-row { gap: 8px; margin-top: 10px; }
html:not(.sf-no-mono) body .shop-add-btn { border: 1px solid var(--m-ink) !important; background: var(--m-bg) !important; color: var(--m-ink) !important; border-radius: var(--m-r-sm) !important; min-height: 42px; font-size: 13.5px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body .shop-btn-row .shop-buy-btn { background: var(--m-act) !important; color: var(--m-on-act) !important; border-color: var(--m-act) !important; }
html:not(.sf-no-mono) body .shop-price-chip { background: var(--m-bg) !important; color: var(--m-ink) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
html:not(.sf-no-mono) body .shop-app-chip { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body #shop-cta-bar { padding: 0 !important; }
html:not(.sf-no-mono) body #shop-cta-bar .inner { max-width: none !important; border: 0 !important; border-top: 1px solid var(--m-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 16px !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body #shop-cta-bar .inner > * { max-width: 40rem; margin-left: auto; margin-right: auto; width: 100%; }
html:not(.sf-no-mono) body #shop-cta-bar p.uppercase, html:not(.sf-no-mono) body #shop-cta-bar .uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; color: var(--m-ink-3) !important; font-weight: 500 !important; }
html:not(.sf-no-mono) body #shop-cta-bar button { border-radius: var(--m-r-sm) !important; min-height: 50px; font-weight: 600 !important; }
html:not(.sf-no-mono) body #shop-add-main { background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-ink) !important; }
html:not(.sf-no-mono) body #shop-buy-main { background: var(--color-primary) !important; color: var(--color-on-primary, #fff) !important; border: 1px solid var(--color-primary) !important; }
html:not(.sf-no-mono) body .shop-limit-note { color: var(--m-ink-2) !important; }

/* ---------- 16. Contact page and partner form ---------- */
html:not(.sf-no-mono) body .sf-city-contact > * + * { margin-top: 0 !important; }
html:not(.sf-no-mono) body .sf-city-contact > a, html:not(.sf-no-mono) body .sf-city-contact > div {
    background: var(--m-bg) !important; color: var(--m-ink) !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 0 !important;
}
html:not(.sf-no-mono) body .sf-city-contact > a > div:first-child, html:not(.sf-no-mono) body .sf-city-contact > div > div > div:first-child {
    background: var(--m-soft) !important; color: var(--m-ink) !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; margin-right: 14px !important;
}
html:not(.sf-no-mono) body .sf-city-contact > a > div:first-child i { color: var(--m-ink) !important; font-size: 18px !important; }
html:not(.sf-no-mono) body .sf-city-contact p.uppercase { font-size: 12.5px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; opacity: 1 !important; }
html:not(.sf-no-mono) body .sf-city-contact p.text-sm { font-size: 17px !important; font-weight: 700 !important; color: var(--m-ink) !important; letter-spacing: -0.01em; }
html:not(.sf-no-mono) body .sf-city-contact a.text-xs, html:not(.sf-no-mono) body .sf-city-contact h2 + p + a, html:not(.sf-no-mono) body .sf-city-contact a[href*="map"] { color: var(--m-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html:not(.sf-no-mono) body .pf-card { border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; box-shadow: none !important; }
html:not(.sf-no-mono) body .pf-head { background: var(--m-bg) !important; color: var(--m-ink) !important; border-bottom: 1px solid var(--m-line); padding: 22px 18px !important; }
html:not(.sf-no-mono) body .pf-head-ico { background: var(--m-soft) !important; color: var(--m-ink) !important; border-radius: 50% !important; }
html:not(.sf-no-mono) body .pf-head h2 { font-size: 19px !important; font-weight: 800 !important; letter-spacing: -0.025em; }
html:not(.sf-no-mono) body .pf-head p { color: var(--m-ink-2) !important; opacity: 1 !important; font-size: 13.5px !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body .pf-l { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .pf-chk, html:not(.sf-no-mono) body .pf-svc { border-color: var(--m-field) !important; border-radius: var(--m-r-sm) !important; }

/* ---------- 17. Basic pages, SEO service/city pages, footer ---------- */
html:not(.sf-no-mono) body .sf-page-title { background: none !important; border: 0 !important; padding: 0 !important; margin: 6px 0 22px !important; box-shadow: none !important; }
html:not(.sf-no-mono) body .sf-page-title::before { display: none !important; }
html:not(.sf-no-mono) body .sf-page-title .sf-pt-ico { display: none !important; }
html:not(.sf-no-mono) body .sf-page-title h1 { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -0.04em !important; color: var(--m-ink) !important; line-height: 1.12 !important; }
html:not(.sf-no-mono) body main h2.text-base.font-extrabold::before { display: none !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border, html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-lg.border {
    border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; padding: 6px 0 26px !important; background: var(--m-bg) !important;
}
html:not(.sf-no-mono) body:not(:has(.view-section)) main h2.text-base, html:not(.sf-no-mono) body:not(:has(.view-section)) main h2.text-sm, html:not(.sf-no-mono) body:not(:has(.view-section)) main h2.text-lg {
    font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; margin-bottom: 10px !important;
}
html:not(.sf-no-mono) body:not(:has(.view-section)) main .text-sm.text-gray-600, html:not(.sf-no-mono) body:not(:has(.view-section)) main p.text-gray-600 { font-size: 15.5px !important; line-height: 1.7 !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main li { line-height: 1.6; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main a[class*="text-[var(--color-primary)]"] { text-decoration: underline; text-underline-offset: 3px; }
/* SEO service and city pages: the hero picture with its title stays; boxes around the rest go. */
html:not(.sf-no-mono) body:not(:has(.view-section)) main .relative.overflow-hidden.rounded-2xl { border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main span[class*="bg-black"], html:not(.sf-no-mono) body:not(:has(.view-section)) main span[class*="bg-white/"] { border-radius: 4px !important; letter-spacing: 0.04em; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .flex-wrap > span[class*="border"], html:not(.sf-no-mono) body:not(:has(.view-section)) main .flex-wrap > a[class*="border"] { border-radius: 999px !important; border-color: var(--m-field) !important; }
/* Breadcrumb, footer links, copyright. */
html:not(.sf-no-mono) body nav[aria-label="Breadcrumb"], html:not(.sf-no-mono) body .sf-breadcrumb { font-size: 13px !important; }
html:not(.sf-no-mono) body .sf-ft-head { text-transform: none !important; letter-spacing: -0.02em !important; font-size: 19px !important; font-weight: 700 !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-ft-grid { display: block !important; }
html:not(.sf-no-mono) body .sf-ft-link { display: flex !important; align-items: center; gap: 14px; background: var(--m-bg) !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; padding: 16px 0 !important; color: var(--m-ink) !important; box-shadow: none !important; }
html:not(.sf-no-mono) body .sf-ft-link.is-on { background: var(--m-bg) !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-ft-link.is-on .sf-ft-txt { font-weight: 700 !important; }
html:not(.sf-no-mono) body .sf-ft-ico { background: none !important; border: 0 !important; color: var(--m-ink) !important; width: 22px !important; height: auto !important; }
html:not(.sf-no-mono) body .sf-ft-ico i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-ft-txt { font-size: 15.5px !important; font-weight: 500 !important; color: inherit !important; }
html:not(.sf-no-mono) body .sf-ft-go { margin-left: auto; color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body .sf-copy-line + * , html:not(.sf-no-mono) body footer p { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body footer a { color: var(--m-ink-2) !important; }

/* ---------- 18. Result pages (thank you, payment failed, partner thank you, wishes, reminders) ---------- */
html:not(.sf-no-mono) body .pop-in[style*="var(--color-success)"], html:not(.sf-no-mono) body .pop-in.bg-\[var\(--color-danger\)\] {
    background: var(--m-act) !important; color: var(--m-on-act) !important; border-radius: 50% !important; box-shadow: none !important;
}
html:not(.sf-no-mono) body .pop-in.bg-\[var\(--color-danger\)\] { width: 64px !important; height: 64px !important; font-size: 26px !important; }
html:not(.sf-no-mono) body .pop-in + h1, html:not(.sf-no-mono) body h1.text-2xl { letter-spacing: -0.035em !important; font-weight: 800 !important; }
html:not(.sf-no-mono) body .bg-\[var\(--color-success-tint\)\], html:not(.sf-no-mono) body [style*="background:var(--color-success-tint)"], html:not(.sf-no-mono) body .bg-emerald-50, html:not(.sf-no-mono) body .bg-green-50 {
    background: var(--m-soft) !important; border-color: transparent !important; color: var(--m-ink) !important;
}
html:not(.sf-no-mono) body .bg-emerald-50 *, html:not(.sf-no-mono) body .bg-green-50 *, html:not(.sf-no-mono) body [style*="background:var(--color-success-tint)"] * { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .sf-wish-quote { border-left-color: var(--m-ink) !important; background: var(--m-soft) !important; }
html:not(.sf-no-mono) body .sf-wish-list li::before { background: var(--m-soft) !important; color: var(--m-ink) !important; border-radius: 50% !important; }
html:not(.sf-no-mono) body .sf-wish-btn { border-radius: var(--m-r-sm) !important; }
html:not(.sf-no-mono) body .sf-wish-from { color: var(--m-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; }
html:not(.sf-no-mono) body .sf-wish-card { border: 0 !important; box-shadow: none !important; }

/* ---------- 19. Desktop ---------- */
@media (min-width: 1024px) {
    .sfm-h1 { font-size: 36px; }
    html:not(.sf-no-mono) body .sf-page-title h1 { font-size: 38px !important; }
    html:not(.sf-no-mono) body #home-view main > * + * { margin-top: 32px !important; }
    .sfm-band { padding-top: 38px; }
    .sfm-band::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }
    html:not(.sf-no-mono) body #service-details-view main > div:first-child > div:first-child { aspect-ratio: 21 / 10 !important; border-radius: var(--m-r); overflow: hidden; margin-top: 12px; }
}

/* ---------- 20. Dark mode: the same design on near-black ---------- */
html:not(.sf-no-mono) body.dark-mode {
    --m-bg: #0B0B0B;
    --m-ink: #F2F2F2;
    --m-ink-2: #B8B8B8;
    --m-ink-3: #8C8C8C;
    --m-line: #262626;
    --m-field: #3A3A3A;
    --m-soft: #181818;
    --m-band: #141414;
    --m-shadow-pop: 0 12px 32px rgba(0,0,0,.6);
    color: var(--m-ink) !important;
}
/* dark-mode.css paints navy; here every surface stays neutral. */
html:not(.sf-no-mono) body.dark-mode .bg-white, html:not(.sf-no-mono) body.dark-mode .bg-gray-50, html:not(.sf-no-mono) body.dark-mode header.sticky,
html:not(.sf-no-mono) body.dark-mode #main-bottom-nav, html:not(.sf-no-mono) body.dark-mode .fixed.bottom-0.border-t { background-color: var(--m-bg) !important; }
html:not(.sf-no-mono) body.dark-mode .bg-gray-100, html:not(.sf-no-mono) body.dark-mode .bg-gray-200 { background-color: var(--m-soft) !important; }
html:not(.sf-no-mono) body.dark-mode .border-gray-100, html:not(.sf-no-mono) body.dark-mode .border-gray-200, html:not(.sf-no-mono) body.dark-mode .border-gray-50 { border-color: var(--m-line) !important; }
html:not(.sf-no-mono) body.dark-mode .text-gray-900, html:not(.sf-no-mono) body.dark-mode .text-gray-800, html:not(.sf-no-mono) body.dark-mode h1, html:not(.sf-no-mono) body.dark-mode h2,
html:not(.sf-no-mono) body.dark-mode h3, html:not(.sf-no-mono) body.dark-mode h4 { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body.dark-mode .text-gray-700, html:not(.sf-no-mono) body.dark-mode .text-gray-600 { color: var(--m-ink-2) !important; }
html:not(.sf-no-mono) body.dark-mode .text-gray-500, html:not(.sf-no-mono) body.dark-mode .text-gray-400 { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body.dark-mode input, html:not(.sf-no-mono) body.dark-mode select, html:not(.sf-no-mono) body.dark-mode textarea { background-color: var(--m-bg) !important; color: var(--m-ink) !important; border-color: var(--m-field) !important; }
html:not(.sf-no-mono) body.dark-mode #home-search-wrap input, html:not(.sf-no-mono) body.dark-mode #city-picker-search { background-color: var(--m-soft) !important; border-color: transparent !important; }
html:not(.sf-no-mono) body.dark-mode .sf-bk-card [style*="color:#0F172A"], html:not(.sf-no-mono) body.dark-mode [style*="color:#0F172A"] { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body.dark-mode .sf-bk-card [style*="color:#64748B"] { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body.dark-mode .sf-bk-card, html:not(.sf-no-mono) body.dark-mode .sf-bk-head { background: var(--m-bg) !important; }
html:not(.sf-no-mono) body.dark-mode #theme-toggle-container > div { background: var(--m-soft) !important; }
html:not(.sf-no-mono) body.dark-mode #theme-toggle-container .bg-gray-100 { background: var(--m-bg) !important; }
html:not(.sf-no-mono) body.dark-mode #theme-toggle-container button.bg-white { background: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body.dark-mode #theme-toggle-container p { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body.dark-mode #theme-toggle-container p + p { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body.dark-mode #profile-avatar, html:not(.sf-no-mono) body.dark-mode #profile-photo-preview { background: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body.dark-mode .sfm-cat-img, html:not(.sf-no-mono) body.dark-mode .sfm-card-img { background: var(--m-soft); }
html:not(.sf-no-mono) body.dark-mode .sfm-cat-img::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
html:not(.sf-no-mono) body.dark-mode #home-slider-container [id$="-badge"] { background: #FFFFFF !important; color: #0F0F0F !important; }
html:not(.sf-no-mono) body.dark-mode .sf-navtab.is-active::before { background: var(--m-act); }
html:not(.sf-no-mono) body.dark-mode .sf-modal-box, html:not(.sf-no-mono) body.dark-mode #city-picker-modal > div { background: var(--m-soft) !important; }
html:not(.sf-no-mono) body.dark-mode .sf-modal-msg, html:not(.sf-no-mono) body.dark-mode #city-picker-title { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body.dark-mode .sf-hero-gradient, html:not(.sf-no-mono) body.dark-mode .bg-gradient-to-br, html:not(.sf-no-mono) body.dark-mode .bg-gradient-to-r { background-color: var(--m-soft) !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body.dark-mode #shop-cta-bar .inner, html:not(.sf-no-mono) body.dark-mode .pf-card, html:not(.sf-no-mono) body.dark-mode .pf-head { background: var(--m-bg) !important; }

html:not(.sf-no-mono) body #booking-journey-view span:has(> .fa-pen) { color: var(--m-ink-3) !important; font-weight: 500 !important; font-size: 11.5px !important; }

/* ---------- 21. Fine fixes found on review ---------- */
html:not(.sf-no-mono) body #addresses-view main { padding: 0 16px !important; }
html:not(.sf-no-mono) body #addresses-view main > div > div:first-child { padding-left: 0 !important; padding-right: 0 !important; }
html:not(.sf-no-mono) body #addresses-list-container > div { padding-left: 0 !important; padding-right: 0 !important; }
html:not(.sf-no-mono) body #addresses-view #addr-city-btn i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border > .p-5, html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border > div > .p-5,
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border.p-5, html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border.p-6 { padding-left: 0 !important; padding-right: 0 !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border .shop-img-box, html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.overflow-hidden > img:first-child { border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.overflow-hidden { overflow: visible !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main ul i.fa-check, html:not(.sf-no-mono) body:not(:has(.view-section)) main li i.fa-check { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border > div[style*="padding:16px"] { padding: 18px 0 4px !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .bg-white.rounded-2xl.border > div > h1 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.035em !important; }
html:not(.sf-no-mono) body:not(:has(.view-section)) main .js-sf-web > * { border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- 22. Polish pass 2 (26 Oct 2026) ---------- */
/* Contact rows: one rhythm for every row, the icon gap comes only from the icon's own margin. */
html:not(.sf-no-mono) body .sf-city-contact > a { gap: 0 !important; }
/* Ticks in product and service lists: ink, not green. */
html:not(.sf-no-mono) body .fa-check.text-\[var\(--color-success\)\], html:not(.sf-no-mono) body li > .fa-check { color: var(--m-ink) !important; }
/* Thank you: the reassurance panel is a quiet grey note, not a green alert. */
html:not(.sf-no-mono) body div[style*="background:#F0FDF4"] { background: var(--m-soft) !important; border-color: transparent !important; border-radius: var(--m-r) !important; }
html:not(.sf-no-mono) body div[style*="background:#F0FDF4"] i { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body div[style*="background:#F0FDF4"] p { color: var(--m-ink) !important; font-weight: 500 !important; }
/* Small labels written in capitals read as sentence case in Mono. */
html:not(.sf-no-mono) body span.uppercase.tracking-wide, html:not(.sf-no-mono) body p.uppercase.tracking-wide { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--m-ink-3) !important; }
/* Partner thank you: flat card, no tinted gradient, plain step icons. */
html:not(.sf-no-mono) body .pt-card { box-shadow: none !important; border: 1px solid var(--m-line) !important; border-radius: var(--m-r) !important; background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .pt-top { background: var(--m-bg) !important; }
html:not(.sf-no-mono) body .pt-tick { background: var(--m-act) !important; color: var(--m-on-act) !important; box-shadow: none !important; }
html:not(.sf-no-mono) body .pt-top h1 { font-size: 26px !important; letter-spacing: -0.03em; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .pt-top p, html:not(.sf-no-mono) body .pt-step span { color: var(--m-ink-2) !important; font-weight: 400 !important; }
html:not(.sf-no-mono) body .pt-steps h2 { text-transform: none !important; letter-spacing: -0.01em !important; font-size: 17px !important; color: var(--m-ink) !important; }
html:not(.sf-no-mono) body .pt-num { background: var(--m-soft) !important; color: var(--m-ink) !important; border-radius: 50% !important; }
html:not(.sf-no-mono) body .pt-step b { color: var(--m-ink) !important; font-weight: 700 !important; font-size: 15px !important; }
html:not(.sf-no-mono) body .pt-step:not(:last-child)::before { background: var(--m-line) !important; }
/* 404: no coloured glow under the home button. */
html:not(.sf-no-mono) body a.shadow-md { box-shadow: none !important; border-radius: var(--m-r) !important; }
/* The full-width line above the copyright follows the Mono line colour (it was a light grey bar in dark mode). */
html:not(.sf-no-mono) body .sf-copy-line { background: var(--m-line) !important; box-shadow: 0 0 0 100vmax var(--m-line) !important; }


/* ---------- 23. Two colours only (Deepak, 26 Oct 2026) ----------
 * "All buttons only black and white; a colour picked in the backend replaces the black. Checkboxes, icons, buttons:
 * black. Only in a rare case, where things must be told apart, the TEXT may be green or red."
 * So: every filled control and icon uses --m-act (the main colour, black by default); every tinted panel is grey;
 * only status words keep green (done, paid) or red (cancelled, errors, Logout). */
html:not(.sf-no-mono) body {
    --m-ok: #1B7F3B; --m-bad: #C62828;
    --color-success: var(--m-act); --color-success-dark: var(--m-ok); --color-success-tint: var(--m-soft); --color-success-soft: #EBEBEB;
    --color-warning: var(--m-ink); --color-warning-dark: var(--m-ink); --color-warning-tint: var(--m-soft); --color-warning-soft: #EBEBEB; --color-warning-rgb: 15, 15, 15;
    --color-danger: var(--m-bad); --color-danger-dark: var(--m-bad); --color-danger-tint: var(--m-soft); --color-danger-soft: #EBEBEB;
    --color-info: var(--m-ink); --color-info-dark: var(--m-ink); --color-info-tint: var(--m-soft); --color-info-soft: #EBEBEB;
    --color-secondary: var(--m-ink); --color-secondary-soft: #D6D6D6;
    --slider-home-1-from: #111111; --slider-home-1-to: #3A3A3A; --slider-home-2-from: #1A1A1A; --slider-home-2-to: #444444;
    --slider-home-3-from: #0D0D0D; --slider-home-3-to: #333333; --slider-home-4-from: #161616; --slider-home-4-to: #4A4A4A;
    --slider-shop-1-from: #111111; --slider-shop-1-to: #555555; --slider-shop-2-from: #1A1A1A; --slider-shop-2-to: #666666;
    accent-color: var(--m-act);
}
html:not(.sf-no-mono) body input[type="checkbox"], html:not(.sf-no-mono) body input[type="radio"] { accent-color: var(--m-act) !important; }
html:not(.sf-no-mono) body input[type="checkbox"]:checked, html:not(.sf-no-mono) body input[type="radio"]:checked { filter: none !important; }
/* Filled buttons and blocks in any colour: the main colour. */
html:not(.sf-no-mono) body .bg-green-300, html:not(.sf-no-mono) body .bg-green-400, html:not(.sf-no-mono) body .bg-green-500, html:not(.sf-no-mono) body .bg-green-600, html:not(.sf-no-mono) body .bg-green-700, html:not(.sf-no-mono) body .bg-green-800, html:not(.sf-no-mono) body .bg-green-900, html:not(.sf-no-mono) body .bg-emerald-300, html:not(.sf-no-mono) body .bg-emerald-400, html:not(.sf-no-mono) body .bg-emerald-500, html:not(.sf-no-mono) body .bg-emerald-600, html:not(.sf-no-mono) body .bg-emerald-700, html:not(.sf-no-mono) body .bg-emerald-800, html:not(.sf-no-mono) body .bg-emerald-900, html:not(.sf-no-mono) body .bg-lime-300, html:not(.sf-no-mono) body .bg-lime-400, html:not(.sf-no-mono) body .bg-lime-500, html:not(.sf-no-mono) body .bg-lime-600, html:not(.sf-no-mono) body .bg-lime-700, html:not(.sf-no-mono) body .bg-lime-800, html:not(.sf-no-mono) body .bg-lime-900, html:not(.sf-no-mono) body .bg-red-300, html:not(.sf-no-mono) body .bg-red-400, html:not(.sf-no-mono) body .bg-red-500, html:not(.sf-no-mono) body .bg-red-600, html:not(.sf-no-mono) body .bg-red-700, html:not(.sf-no-mono) body .bg-red-800, html:not(.sf-no-mono) body .bg-red-900, html:not(.sf-no-mono) body .bg-rose-300, html:not(.sf-no-mono) body .bg-rose-400, html:not(.sf-no-mono) body .bg-rose-500, html:not(.sf-no-mono) body .bg-rose-600, html:not(.sf-no-mono) body .bg-rose-700, html:not(.sf-no-mono) body .bg-rose-800, html:not(.sf-no-mono) body .bg-rose-900, html:not(.sf-no-mono) body .bg-teal-300, html:not(.sf-no-mono) body .bg-teal-400, html:not(.sf-no-mono) body .bg-teal-500, html:not(.sf-no-mono) body .bg-teal-600, html:not(.sf-no-mono) body .bg-teal-700, html:not(.sf-no-mono) body .bg-teal-800, html:not(.sf-no-mono) body .bg-teal-900, html:not(.sf-no-mono) body .bg-cyan-300, html:not(.sf-no-mono) body .bg-cyan-400, html:not(.sf-no-mono) body .bg-cyan-500, html:not(.sf-no-mono) body .bg-cyan-600, html:not(.sf-no-mono) body .bg-cyan-700, html:not(.sf-no-mono) body .bg-cyan-800, html:not(.sf-no-mono) body .bg-cyan-900, html:not(.sf-no-mono) body .bg-sky-300, html:not(.sf-no-mono) body .bg-sky-400, html:not(.sf-no-mono) body .bg-sky-500, html:not(.sf-no-mono) body .bg-sky-600, html:not(.sf-no-mono) body .bg-sky-700, html:not(.sf-no-mono) body .bg-sky-800, html:not(.sf-no-mono) body .bg-sky-900, html:not(.sf-no-mono) body .bg-blue-300, html:not(.sf-no-mono) body .bg-blue-400, html:not(.sf-no-mono) body .bg-blue-500, html:not(.sf-no-mono) body .bg-blue-600, html:not(.sf-no-mono) body .bg-blue-700, html:not(.sf-no-mono) body .bg-blue-800, html:not(.sf-no-mono) body .bg-blue-900, html:not(.sf-no-mono) body .bg-indigo-300, html:not(.sf-no-mono) body .bg-indigo-400, html:not(.sf-no-mono) body .bg-indigo-500, html:not(.sf-no-mono) body .bg-indigo-600, html:not(.sf-no-mono) body .bg-indigo-700, html:not(.sf-no-mono) body .bg-indigo-800, html:not(.sf-no-mono) body .bg-indigo-900, html:not(.sf-no-mono) body .bg-violet-300, html:not(.sf-no-mono) body .bg-violet-400, html:not(.sf-no-mono) body .bg-violet-500, html:not(.sf-no-mono) body .bg-violet-600, html:not(.sf-no-mono) body .bg-violet-700, html:not(.sf-no-mono) body .bg-violet-800, html:not(.sf-no-mono) body .bg-violet-900, html:not(.sf-no-mono) body .bg-purple-300, html:not(.sf-no-mono) body .bg-purple-400, html:not(.sf-no-mono) body .bg-purple-500, html:not(.sf-no-mono) body .bg-purple-600, html:not(.sf-no-mono) body .bg-purple-700, html:not(.sf-no-mono) body .bg-purple-800, html:not(.sf-no-mono) body .bg-purple-900, html:not(.sf-no-mono) body .bg-fuchsia-300, html:not(.sf-no-mono) body .bg-fuchsia-400, html:not(.sf-no-mono) body .bg-fuchsia-500, html:not(.sf-no-mono) body .bg-fuchsia-600, html:not(.sf-no-mono) body .bg-fuchsia-700, html:not(.sf-no-mono) body .bg-fuchsia-800, html:not(.sf-no-mono) body .bg-fuchsia-900, html:not(.sf-no-mono) body .bg-pink-300, html:not(.sf-no-mono) body .bg-pink-400, html:not(.sf-no-mono) body .bg-pink-500, html:not(.sf-no-mono) body .bg-pink-600, html:not(.sf-no-mono) body .bg-pink-700, html:not(.sf-no-mono) body .bg-pink-800, html:not(.sf-no-mono) body .bg-pink-900, html:not(.sf-no-mono) body .bg-amber-300, html:not(.sf-no-mono) body .bg-amber-400, html:not(.sf-no-mono) body .bg-amber-500, html:not(.sf-no-mono) body .bg-amber-600, html:not(.sf-no-mono) body .bg-amber-700, html:not(.sf-no-mono) body .bg-amber-800, html:not(.sf-no-mono) body .bg-amber-900, html:not(.sf-no-mono) body .bg-yellow-300, html:not(.sf-no-mono) body .bg-yellow-400, html:not(.sf-no-mono) body .bg-yellow-500, html:not(.sf-no-mono) body .bg-yellow-600, html:not(.sf-no-mono) body .bg-yellow-700, html:not(.sf-no-mono) body .bg-yellow-800, html:not(.sf-no-mono) body .bg-yellow-900, html:not(.sf-no-mono) body .bg-orange-300, html:not(.sf-no-mono) body .bg-orange-400, html:not(.sf-no-mono) body .bg-orange-500, html:not(.sf-no-mono) body .bg-orange-600, html:not(.sf-no-mono) body .bg-orange-700, html:not(.sf-no-mono) body .bg-orange-800, html:not(.sf-no-mono) body .bg-orange-900, html:not(.sf-no-mono) body .bg-\[var\(--color-danger\)\], html:not(.sf-no-mono) body .bg-\[var\(--color-warning\)\], html:not(.sf-no-mono) body .bg-\[var\(--color-info\)\], html:not(.sf-no-mono) body .bg-\[var\(--color-secondary\)\] { background-color: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body .bg-\[var\(--color-danger\)\] *, html:not(.sf-no-mono) body .bg-\[var\(--color-success\)\] * { color: inherit; }
/* Tinted panels and pills: grey. */
html:not(.sf-no-mono) body .bg-green-50, html:not(.sf-no-mono) body .bg-green-100, html:not(.sf-no-mono) body .bg-green-200, html:not(.sf-no-mono) body .bg-emerald-50, html:not(.sf-no-mono) body .bg-emerald-100, html:not(.sf-no-mono) body .bg-emerald-200, html:not(.sf-no-mono) body .bg-lime-50, html:not(.sf-no-mono) body .bg-lime-100, html:not(.sf-no-mono) body .bg-lime-200, html:not(.sf-no-mono) body .bg-red-50, html:not(.sf-no-mono) body .bg-red-100, html:not(.sf-no-mono) body .bg-red-200, html:not(.sf-no-mono) body .bg-rose-50, html:not(.sf-no-mono) body .bg-rose-100, html:not(.sf-no-mono) body .bg-rose-200, html:not(.sf-no-mono) body .bg-teal-50, html:not(.sf-no-mono) body .bg-teal-100, html:not(.sf-no-mono) body .bg-teal-200, html:not(.sf-no-mono) body .bg-cyan-50, html:not(.sf-no-mono) body .bg-cyan-100, html:not(.sf-no-mono) body .bg-cyan-200, html:not(.sf-no-mono) body .bg-sky-50, html:not(.sf-no-mono) body .bg-sky-100, html:not(.sf-no-mono) body .bg-sky-200, html:not(.sf-no-mono) body .bg-blue-50, html:not(.sf-no-mono) body .bg-blue-100, html:not(.sf-no-mono) body .bg-blue-200, html:not(.sf-no-mono) body .bg-indigo-50, html:not(.sf-no-mono) body .bg-indigo-100, html:not(.sf-no-mono) body .bg-indigo-200, html:not(.sf-no-mono) body .bg-violet-50, html:not(.sf-no-mono) body .bg-violet-100, html:not(.sf-no-mono) body .bg-violet-200, html:not(.sf-no-mono) body .bg-purple-50, html:not(.sf-no-mono) body .bg-purple-100, html:not(.sf-no-mono) body .bg-purple-200, html:not(.sf-no-mono) body .bg-fuchsia-50, html:not(.sf-no-mono) body .bg-fuchsia-100, html:not(.sf-no-mono) body .bg-fuchsia-200, html:not(.sf-no-mono) body .bg-pink-50, html:not(.sf-no-mono) body .bg-pink-100, html:not(.sf-no-mono) body .bg-pink-200, html:not(.sf-no-mono) body .bg-amber-50, html:not(.sf-no-mono) body .bg-amber-100, html:not(.sf-no-mono) body .bg-amber-200, html:not(.sf-no-mono) body .bg-yellow-50, html:not(.sf-no-mono) body .bg-yellow-100, html:not(.sf-no-mono) body .bg-yellow-200, html:not(.sf-no-mono) body .bg-orange-50, html:not(.sf-no-mono) body .bg-orange-100, html:not(.sf-no-mono) body .bg-orange-200 { background-color: var(--m-soft) !important; }
/* Coloured text: green and red stay (status), every other colour turns ink. */
html:not(.sf-no-mono) body .text-green-400, html:not(.sf-no-mono) body .text-green-500, html:not(.sf-no-mono) body .text-green-600, html:not(.sf-no-mono) body .text-green-700, html:not(.sf-no-mono) body .text-green-800, html:not(.sf-no-mono) body .text-green-900, html:not(.sf-no-mono) body .text-emerald-400, html:not(.sf-no-mono) body .text-emerald-500, html:not(.sf-no-mono) body .text-emerald-600, html:not(.sf-no-mono) body .text-emerald-700, html:not(.sf-no-mono) body .text-emerald-800, html:not(.sf-no-mono) body .text-emerald-900, html:not(.sf-no-mono) body .text-lime-400, html:not(.sf-no-mono) body .text-lime-500, html:not(.sf-no-mono) body .text-lime-600, html:not(.sf-no-mono) body .text-lime-700, html:not(.sf-no-mono) body .text-lime-800, html:not(.sf-no-mono) body .text-lime-900 { color: var(--m-ok) !important; }
html:not(.sf-no-mono) body .text-red-400, html:not(.sf-no-mono) body .text-red-500, html:not(.sf-no-mono) body .text-red-600, html:not(.sf-no-mono) body .text-red-700, html:not(.sf-no-mono) body .text-red-800, html:not(.sf-no-mono) body .text-red-900, html:not(.sf-no-mono) body .text-rose-400, html:not(.sf-no-mono) body .text-rose-500, html:not(.sf-no-mono) body .text-rose-600, html:not(.sf-no-mono) body .text-rose-700, html:not(.sf-no-mono) body .text-rose-800, html:not(.sf-no-mono) body .text-rose-900 { color: var(--m-bad) !important; }
html:not(.sf-no-mono) body .text-teal-300, html:not(.sf-no-mono) body .text-teal-400, html:not(.sf-no-mono) body .text-teal-500, html:not(.sf-no-mono) body .text-teal-600, html:not(.sf-no-mono) body .text-teal-700, html:not(.sf-no-mono) body .text-teal-800, html:not(.sf-no-mono) body .text-teal-900, html:not(.sf-no-mono) body .text-cyan-300, html:not(.sf-no-mono) body .text-cyan-400, html:not(.sf-no-mono) body .text-cyan-500, html:not(.sf-no-mono) body .text-cyan-600, html:not(.sf-no-mono) body .text-cyan-700, html:not(.sf-no-mono) body .text-cyan-800, html:not(.sf-no-mono) body .text-cyan-900, html:not(.sf-no-mono) body .text-sky-300, html:not(.sf-no-mono) body .text-sky-400, html:not(.sf-no-mono) body .text-sky-500, html:not(.sf-no-mono) body .text-sky-600, html:not(.sf-no-mono) body .text-sky-700, html:not(.sf-no-mono) body .text-sky-800, html:not(.sf-no-mono) body .text-sky-900, html:not(.sf-no-mono) body .text-blue-300, html:not(.sf-no-mono) body .text-blue-400, html:not(.sf-no-mono) body .text-blue-500, html:not(.sf-no-mono) body .text-blue-600, html:not(.sf-no-mono) body .text-blue-700, html:not(.sf-no-mono) body .text-blue-800, html:not(.sf-no-mono) body .text-blue-900, html:not(.sf-no-mono) body .text-indigo-300, html:not(.sf-no-mono) body .text-indigo-400, html:not(.sf-no-mono) body .text-indigo-500, html:not(.sf-no-mono) body .text-indigo-600, html:not(.sf-no-mono) body .text-indigo-700, html:not(.sf-no-mono) body .text-indigo-800, html:not(.sf-no-mono) body .text-indigo-900, html:not(.sf-no-mono) body .text-violet-300, html:not(.sf-no-mono) body .text-violet-400, html:not(.sf-no-mono) body .text-violet-500, html:not(.sf-no-mono) body .text-violet-600, html:not(.sf-no-mono) body .text-violet-700, html:not(.sf-no-mono) body .text-violet-800, html:not(.sf-no-mono) body .text-violet-900, html:not(.sf-no-mono) body .text-purple-300, html:not(.sf-no-mono) body .text-purple-400, html:not(.sf-no-mono) body .text-purple-500, html:not(.sf-no-mono) body .text-purple-600, html:not(.sf-no-mono) body .text-purple-700, html:not(.sf-no-mono) body .text-purple-800, html:not(.sf-no-mono) body .text-purple-900, html:not(.sf-no-mono) body .text-fuchsia-300, html:not(.sf-no-mono) body .text-fuchsia-400, html:not(.sf-no-mono) body .text-fuchsia-500, html:not(.sf-no-mono) body .text-fuchsia-600, html:not(.sf-no-mono) body .text-fuchsia-700, html:not(.sf-no-mono) body .text-fuchsia-800, html:not(.sf-no-mono) body .text-fuchsia-900, html:not(.sf-no-mono) body .text-pink-300, html:not(.sf-no-mono) body .text-pink-400, html:not(.sf-no-mono) body .text-pink-500, html:not(.sf-no-mono) body .text-pink-600, html:not(.sf-no-mono) body .text-pink-700, html:not(.sf-no-mono) body .text-pink-800, html:not(.sf-no-mono) body .text-pink-900, html:not(.sf-no-mono) body .text-amber-300, html:not(.sf-no-mono) body .text-amber-400, html:not(.sf-no-mono) body .text-amber-500, html:not(.sf-no-mono) body .text-amber-600, html:not(.sf-no-mono) body .text-amber-700, html:not(.sf-no-mono) body .text-amber-800, html:not(.sf-no-mono) body .text-amber-900, html:not(.sf-no-mono) body .text-yellow-300, html:not(.sf-no-mono) body .text-yellow-400, html:not(.sf-no-mono) body .text-yellow-500, html:not(.sf-no-mono) body .text-yellow-600, html:not(.sf-no-mono) body .text-yellow-700, html:not(.sf-no-mono) body .text-yellow-800, html:not(.sf-no-mono) body .text-yellow-900, html:not(.sf-no-mono) body .text-orange-300, html:not(.sf-no-mono) body .text-orange-400, html:not(.sf-no-mono) body .text-orange-500, html:not(.sf-no-mono) body .text-orange-600, html:not(.sf-no-mono) body .text-orange-700, html:not(.sf-no-mono) body .text-orange-800, html:not(.sf-no-mono) body .text-orange-900 { color: var(--m-ink) !important; }
/* Icons in any colour: the main colour (tick, shield, pin, star...). */
html:not(.sf-no-mono) body i.text-green-300, html:not(.sf-no-mono) body svg.text-green-300, html:not(.sf-no-mono) body i.text-green-400, html:not(.sf-no-mono) body svg.text-green-400, html:not(.sf-no-mono) body i.text-green-500, html:not(.sf-no-mono) body svg.text-green-500, html:not(.sf-no-mono) body i.text-green-600, html:not(.sf-no-mono) body svg.text-green-600, html:not(.sf-no-mono) body i.text-green-700, html:not(.sf-no-mono) body svg.text-green-700, html:not(.sf-no-mono) body i.text-green-800, html:not(.sf-no-mono) body svg.text-green-800, html:not(.sf-no-mono) body i.text-green-900, html:not(.sf-no-mono) body svg.text-green-900, html:not(.sf-no-mono) body i.text-emerald-300, html:not(.sf-no-mono) body svg.text-emerald-300, html:not(.sf-no-mono) body i.text-emerald-400, html:not(.sf-no-mono) body svg.text-emerald-400, html:not(.sf-no-mono) body i.text-emerald-500, html:not(.sf-no-mono) body svg.text-emerald-500, html:not(.sf-no-mono) body i.text-emerald-600, html:not(.sf-no-mono) body svg.text-emerald-600, html:not(.sf-no-mono) body i.text-emerald-700, html:not(.sf-no-mono) body svg.text-emerald-700, html:not(.sf-no-mono) body i.text-emerald-800, html:not(.sf-no-mono) body svg.text-emerald-800, html:not(.sf-no-mono) body i.text-emerald-900, html:not(.sf-no-mono) body svg.text-emerald-900, html:not(.sf-no-mono) body i.text-lime-300, html:not(.sf-no-mono) body svg.text-lime-300, html:not(.sf-no-mono) body i.text-lime-400, html:not(.sf-no-mono) body svg.text-lime-400, html:not(.sf-no-mono) body i.text-lime-500, html:not(.sf-no-mono) body svg.text-lime-500, html:not(.sf-no-mono) body i.text-lime-600, html:not(.sf-no-mono) body svg.text-lime-600, html:not(.sf-no-mono) body i.text-lime-700, html:not(.sf-no-mono) body svg.text-lime-700, html:not(.sf-no-mono) body i.text-lime-800, html:not(.sf-no-mono) body svg.text-lime-800, html:not(.sf-no-mono) body i.text-lime-900, html:not(.sf-no-mono) body svg.text-lime-900, html:not(.sf-no-mono) body i.text-red-300, html:not(.sf-no-mono) body svg.text-red-300, html:not(.sf-no-mono) body i.text-red-400, html:not(.sf-no-mono) body svg.text-red-400, html:not(.sf-no-mono) body i.text-red-500, html:not(.sf-no-mono) body svg.text-red-500, html:not(.sf-no-mono) body i.text-red-600, html:not(.sf-no-mono) body svg.text-red-600, html:not(.sf-no-mono) body i.text-red-700, html:not(.sf-no-mono) body svg.text-red-700, html:not(.sf-no-mono) body i.text-red-800, html:not(.sf-no-mono) body svg.text-red-800, html:not(.sf-no-mono) body i.text-red-900, html:not(.sf-no-mono) body svg.text-red-900, html:not(.sf-no-mono) body i.text-rose-300, html:not(.sf-no-mono) body svg.text-rose-300, html:not(.sf-no-mono) body i.text-rose-400, html:not(.sf-no-mono) body svg.text-rose-400, html:not(.sf-no-mono) body i.text-rose-500, html:not(.sf-no-mono) body svg.text-rose-500, html:not(.sf-no-mono) body i.text-rose-600, html:not(.sf-no-mono) body svg.text-rose-600, html:not(.sf-no-mono) body i.text-rose-700, html:not(.sf-no-mono) body svg.text-rose-700, html:not(.sf-no-mono) body i.text-rose-800, html:not(.sf-no-mono) body svg.text-rose-800, html:not(.sf-no-mono) body i.text-rose-900, html:not(.sf-no-mono) body svg.text-rose-900, html:not(.sf-no-mono) body i.text-teal-300, html:not(.sf-no-mono) body svg.text-teal-300, html:not(.sf-no-mono) body i.text-teal-400, html:not(.sf-no-mono) body svg.text-teal-400, html:not(.sf-no-mono) body i.text-teal-500, html:not(.sf-no-mono) body svg.text-teal-500, html:not(.sf-no-mono) body i.text-teal-600, html:not(.sf-no-mono) body svg.text-teal-600, html:not(.sf-no-mono) body i.text-teal-700, html:not(.sf-no-mono) body svg.text-teal-700, html:not(.sf-no-mono) body i.text-teal-800, html:not(.sf-no-mono) body svg.text-teal-800, html:not(.sf-no-mono) body i.text-teal-900, html:not(.sf-no-mono) body svg.text-teal-900, html:not(.sf-no-mono) body i.text-cyan-300, html:not(.sf-no-mono) body svg.text-cyan-300, html:not(.sf-no-mono) body i.text-cyan-400, html:not(.sf-no-mono) body svg.text-cyan-400, html:not(.sf-no-mono) body i.text-cyan-500, html:not(.sf-no-mono) body svg.text-cyan-500, html:not(.sf-no-mono) body i.text-cyan-600, html:not(.sf-no-mono) body svg.text-cyan-600, html:not(.sf-no-mono) body i.text-cyan-700, html:not(.sf-no-mono) body svg.text-cyan-700, html:not(.sf-no-mono) body i.text-cyan-800, html:not(.sf-no-mono) body svg.text-cyan-800, html:not(.sf-no-mono) body i.text-cyan-900, html:not(.sf-no-mono) body svg.text-cyan-900, html:not(.sf-no-mono) body i.text-sky-300, html:not(.sf-no-mono) body svg.text-sky-300, html:not(.sf-no-mono) body i.text-sky-400, html:not(.sf-no-mono) body svg.text-sky-400, html:not(.sf-no-mono) body i.text-sky-500, html:not(.sf-no-mono) body svg.text-sky-500, html:not(.sf-no-mono) body i.text-sky-600, html:not(.sf-no-mono) body svg.text-sky-600, html:not(.sf-no-mono) body i.text-sky-700, html:not(.sf-no-mono) body svg.text-sky-700, html:not(.sf-no-mono) body i.text-sky-800, html:not(.sf-no-mono) body svg.text-sky-800, html:not(.sf-no-mono) body i.text-sky-900, html:not(.sf-no-mono) body svg.text-sky-900, html:not(.sf-no-mono) body i.text-blue-300, html:not(.sf-no-mono) body svg.text-blue-300, html:not(.sf-no-mono) body i.text-blue-400, html:not(.sf-no-mono) body svg.text-blue-400, html:not(.sf-no-mono) body i.text-blue-500, html:not(.sf-no-mono) body svg.text-blue-500, html:not(.sf-no-mono) body i.text-blue-600, html:not(.sf-no-mono) body svg.text-blue-600, html:not(.sf-no-mono) body i.text-blue-700, html:not(.sf-no-mono) body svg.text-blue-700, html:not(.sf-no-mono) body i.text-blue-800, html:not(.sf-no-mono) body svg.text-blue-800, html:not(.sf-no-mono) body i.text-blue-900, html:not(.sf-no-mono) body svg.text-blue-900, html:not(.sf-no-mono) body i.text-indigo-300, html:not(.sf-no-mono) body svg.text-indigo-300, html:not(.sf-no-mono) body i.text-indigo-400, html:not(.sf-no-mono) body svg.text-indigo-400, html:not(.sf-no-mono) body i.text-indigo-500, html:not(.sf-no-mono) body svg.text-indigo-500, html:not(.sf-no-mono) body i.text-indigo-600, html:not(.sf-no-mono) body svg.text-indigo-600, html:not(.sf-no-mono) body i.text-indigo-700, html:not(.sf-no-mono) body svg.text-indigo-700, html:not(.sf-no-mono) body i.text-indigo-800, html:not(.sf-no-mono) body svg.text-indigo-800, html:not(.sf-no-mono) body i.text-indigo-900, html:not(.sf-no-mono) body svg.text-indigo-900, html:not(.sf-no-mono) body i.text-violet-300, html:not(.sf-no-mono) body svg.text-violet-300, html:not(.sf-no-mono) body i.text-violet-400, html:not(.sf-no-mono) body svg.text-violet-400, html:not(.sf-no-mono) body i.text-violet-500, html:not(.sf-no-mono) body svg.text-violet-500, html:not(.sf-no-mono) body i.text-violet-600, html:not(.sf-no-mono) body svg.text-violet-600, html:not(.sf-no-mono) body i.text-violet-700, html:not(.sf-no-mono) body svg.text-violet-700, html:not(.sf-no-mono) body i.text-violet-800, html:not(.sf-no-mono) body svg.text-violet-800, html:not(.sf-no-mono) body i.text-violet-900, html:not(.sf-no-mono) body svg.text-violet-900, html:not(.sf-no-mono) body i.text-purple-300, html:not(.sf-no-mono) body svg.text-purple-300, html:not(.sf-no-mono) body i.text-purple-400, html:not(.sf-no-mono) body svg.text-purple-400, html:not(.sf-no-mono) body i.text-purple-500, html:not(.sf-no-mono) body svg.text-purple-500, html:not(.sf-no-mono) body i.text-purple-600, html:not(.sf-no-mono) body svg.text-purple-600, html:not(.sf-no-mono) body i.text-purple-700, html:not(.sf-no-mono) body svg.text-purple-700, html:not(.sf-no-mono) body i.text-purple-800, html:not(.sf-no-mono) body svg.text-purple-800, html:not(.sf-no-mono) body i.text-purple-900, html:not(.sf-no-mono) body svg.text-purple-900, html:not(.sf-no-mono) body i.text-fuchsia-300, html:not(.sf-no-mono) body svg.text-fuchsia-300, html:not(.sf-no-mono) body i.text-fuchsia-400, html:not(.sf-no-mono) body svg.text-fuchsia-400, html:not(.sf-no-mono) body i.text-fuchsia-500, html:not(.sf-no-mono) body svg.text-fuchsia-500, html:not(.sf-no-mono) body i.text-fuchsia-600, html:not(.sf-no-mono) body svg.text-fuchsia-600, html:not(.sf-no-mono) body i.text-fuchsia-700, html:not(.sf-no-mono) body svg.text-fuchsia-700, html:not(.sf-no-mono) body i.text-fuchsia-800, html:not(.sf-no-mono) body svg.text-fuchsia-800, html:not(.sf-no-mono) body i.text-fuchsia-900, html:not(.sf-no-mono) body svg.text-fuchsia-900, html:not(.sf-no-mono) body i.text-pink-300, html:not(.sf-no-mono) body svg.text-pink-300, html:not(.sf-no-mono) body i.text-pink-400, html:not(.sf-no-mono) body svg.text-pink-400, html:not(.sf-no-mono) body i.text-pink-500, html:not(.sf-no-mono) body svg.text-pink-500, html:not(.sf-no-mono) body i.text-pink-600, html:not(.sf-no-mono) body svg.text-pink-600, html:not(.sf-no-mono) body i.text-pink-700, html:not(.sf-no-mono) body svg.text-pink-700, html:not(.sf-no-mono) body i.text-pink-800, html:not(.sf-no-mono) body svg.text-pink-800, html:not(.sf-no-mono) body i.text-pink-900, html:not(.sf-no-mono) body svg.text-pink-900, html:not(.sf-no-mono) body i.text-amber-300, html:not(.sf-no-mono) body svg.text-amber-300, html:not(.sf-no-mono) body i.text-amber-400, html:not(.sf-no-mono) body svg.text-amber-400, html:not(.sf-no-mono) body i.text-amber-500, html:not(.sf-no-mono) body svg.text-amber-500, html:not(.sf-no-mono) body i.text-amber-600, html:not(.sf-no-mono) body svg.text-amber-600, html:not(.sf-no-mono) body i.text-amber-700, html:not(.sf-no-mono) body svg.text-amber-700, html:not(.sf-no-mono) body i.text-amber-800, html:not(.sf-no-mono) body svg.text-amber-800, html:not(.sf-no-mono) body i.text-amber-900, html:not(.sf-no-mono) body svg.text-amber-900, html:not(.sf-no-mono) body i.text-yellow-300, html:not(.sf-no-mono) body svg.text-yellow-300, html:not(.sf-no-mono) body i.text-yellow-400, html:not(.sf-no-mono) body svg.text-yellow-400, html:not(.sf-no-mono) body i.text-yellow-500, html:not(.sf-no-mono) body svg.text-yellow-500, html:not(.sf-no-mono) body i.text-yellow-600, html:not(.sf-no-mono) body svg.text-yellow-600, html:not(.sf-no-mono) body i.text-yellow-700, html:not(.sf-no-mono) body svg.text-yellow-700, html:not(.sf-no-mono) body i.text-yellow-800, html:not(.sf-no-mono) body svg.text-yellow-800, html:not(.sf-no-mono) body i.text-yellow-900, html:not(.sf-no-mono) body svg.text-yellow-900, html:not(.sf-no-mono) body i.text-orange-300, html:not(.sf-no-mono) body svg.text-orange-300, html:not(.sf-no-mono) body i.text-orange-400, html:not(.sf-no-mono) body svg.text-orange-400, html:not(.sf-no-mono) body i.text-orange-500, html:not(.sf-no-mono) body svg.text-orange-500, html:not(.sf-no-mono) body i.text-orange-600, html:not(.sf-no-mono) body svg.text-orange-600, html:not(.sf-no-mono) body i.text-orange-700, html:not(.sf-no-mono) body svg.text-orange-700, html:not(.sf-no-mono) body i.text-orange-800, html:not(.sf-no-mono) body svg.text-orange-800, html:not(.sf-no-mono) body i.text-orange-900, html:not(.sf-no-mono) body svg.text-orange-900,
html:not(.sf-no-mono) body i.text-\[var\(--color-success\)\], html:not(.sf-no-mono) body i.text-\[var\(--color-success-dark\)\], html:not(.sf-no-mono) body i.text-\[var\(--color-warning\)\], html:not(.sf-no-mono) body i.text-\[var\(--color-danger\)\], html:not(.sf-no-mono) body i.text-\[var\(--color-primary\)\], html:not(.sf-no-mono) body i.text-\[var\(--color-primary-dark\)\] { color: var(--m-act) !important; }
html:not(.sf-no-mono) body .bg-\[var\(--color-success\)\] i, html:not(.sf-no-mono) body .bg-\[var\(--color-primary\)\] i, html:not(.sf-no-mono) body [class*="bg-"][class*="-600"] i, html:not(.sf-no-mono) body [class*="bg-"][class*="-500"] i { color: inherit !important; }
/* Coloured borders and rings. */
html:not(.sf-no-mono) body .border-green-50, html:not(.sf-no-mono) body .border-green-100, html:not(.sf-no-mono) body .border-green-200, html:not(.sf-no-mono) body .border-emerald-50, html:not(.sf-no-mono) body .border-emerald-100, html:not(.sf-no-mono) body .border-emerald-200, html:not(.sf-no-mono) body .border-lime-50, html:not(.sf-no-mono) body .border-lime-100, html:not(.sf-no-mono) body .border-lime-200, html:not(.sf-no-mono) body .border-red-50, html:not(.sf-no-mono) body .border-red-100, html:not(.sf-no-mono) body .border-red-200, html:not(.sf-no-mono) body .border-rose-50, html:not(.sf-no-mono) body .border-rose-100, html:not(.sf-no-mono) body .border-rose-200, html:not(.sf-no-mono) body .border-teal-50, html:not(.sf-no-mono) body .border-teal-100, html:not(.sf-no-mono) body .border-teal-200, html:not(.sf-no-mono) body .border-cyan-50, html:not(.sf-no-mono) body .border-cyan-100, html:not(.sf-no-mono) body .border-cyan-200, html:not(.sf-no-mono) body .border-sky-50, html:not(.sf-no-mono) body .border-sky-100, html:not(.sf-no-mono) body .border-sky-200, html:not(.sf-no-mono) body .border-blue-50, html:not(.sf-no-mono) body .border-blue-100, html:not(.sf-no-mono) body .border-blue-200, html:not(.sf-no-mono) body .border-indigo-50, html:not(.sf-no-mono) body .border-indigo-100, html:not(.sf-no-mono) body .border-indigo-200, html:not(.sf-no-mono) body .border-violet-50, html:not(.sf-no-mono) body .border-violet-100, html:not(.sf-no-mono) body .border-violet-200, html:not(.sf-no-mono) body .border-purple-50, html:not(.sf-no-mono) body .border-purple-100, html:not(.sf-no-mono) body .border-purple-200, html:not(.sf-no-mono) body .border-fuchsia-50, html:not(.sf-no-mono) body .border-fuchsia-100, html:not(.sf-no-mono) body .border-fuchsia-200, html:not(.sf-no-mono) body .border-pink-50, html:not(.sf-no-mono) body .border-pink-100, html:not(.sf-no-mono) body .border-pink-200, html:not(.sf-no-mono) body .border-amber-50, html:not(.sf-no-mono) body .border-amber-100, html:not(.sf-no-mono) body .border-amber-200, html:not(.sf-no-mono) body .border-yellow-50, html:not(.sf-no-mono) body .border-yellow-100, html:not(.sf-no-mono) body .border-yellow-200, html:not(.sf-no-mono) body .border-orange-50, html:not(.sf-no-mono) body .border-orange-100, html:not(.sf-no-mono) body .border-orange-200 { border-color: var(--m-line) !important; }
html:not(.sf-no-mono) body .border-green-300, html:not(.sf-no-mono) body .border-green-400, html:not(.sf-no-mono) body .border-green-500, html:not(.sf-no-mono) body .border-green-600, html:not(.sf-no-mono) body .border-green-700, html:not(.sf-no-mono) body .border-green-800, html:not(.sf-no-mono) body .border-green-900, html:not(.sf-no-mono) body .border-emerald-300, html:not(.sf-no-mono) body .border-emerald-400, html:not(.sf-no-mono) body .border-emerald-500, html:not(.sf-no-mono) body .border-emerald-600, html:not(.sf-no-mono) body .border-emerald-700, html:not(.sf-no-mono) body .border-emerald-800, html:not(.sf-no-mono) body .border-emerald-900, html:not(.sf-no-mono) body .border-lime-300, html:not(.sf-no-mono) body .border-lime-400, html:not(.sf-no-mono) body .border-lime-500, html:not(.sf-no-mono) body .border-lime-600, html:not(.sf-no-mono) body .border-lime-700, html:not(.sf-no-mono) body .border-lime-800, html:not(.sf-no-mono) body .border-lime-900, html:not(.sf-no-mono) body .border-red-300, html:not(.sf-no-mono) body .border-red-400, html:not(.sf-no-mono) body .border-red-500, html:not(.sf-no-mono) body .border-red-600, html:not(.sf-no-mono) body .border-red-700, html:not(.sf-no-mono) body .border-red-800, html:not(.sf-no-mono) body .border-red-900, html:not(.sf-no-mono) body .border-rose-300, html:not(.sf-no-mono) body .border-rose-400, html:not(.sf-no-mono) body .border-rose-500, html:not(.sf-no-mono) body .border-rose-600, html:not(.sf-no-mono) body .border-rose-700, html:not(.sf-no-mono) body .border-rose-800, html:not(.sf-no-mono) body .border-rose-900, html:not(.sf-no-mono) body .border-teal-300, html:not(.sf-no-mono) body .border-teal-400, html:not(.sf-no-mono) body .border-teal-500, html:not(.sf-no-mono) body .border-teal-600, html:not(.sf-no-mono) body .border-teal-700, html:not(.sf-no-mono) body .border-teal-800, html:not(.sf-no-mono) body .border-teal-900, html:not(.sf-no-mono) body .border-cyan-300, html:not(.sf-no-mono) body .border-cyan-400, html:not(.sf-no-mono) body .border-cyan-500, html:not(.sf-no-mono) body .border-cyan-600, html:not(.sf-no-mono) body .border-cyan-700, html:not(.sf-no-mono) body .border-cyan-800, html:not(.sf-no-mono) body .border-cyan-900, html:not(.sf-no-mono) body .border-sky-300, html:not(.sf-no-mono) body .border-sky-400, html:not(.sf-no-mono) body .border-sky-500, html:not(.sf-no-mono) body .border-sky-600, html:not(.sf-no-mono) body .border-sky-700, html:not(.sf-no-mono) body .border-sky-800, html:not(.sf-no-mono) body .border-sky-900, html:not(.sf-no-mono) body .border-blue-300, html:not(.sf-no-mono) body .border-blue-400, html:not(.sf-no-mono) body .border-blue-500, html:not(.sf-no-mono) body .border-blue-600, html:not(.sf-no-mono) body .border-blue-700, html:not(.sf-no-mono) body .border-blue-800, html:not(.sf-no-mono) body .border-blue-900, html:not(.sf-no-mono) body .border-indigo-300, html:not(.sf-no-mono) body .border-indigo-400, html:not(.sf-no-mono) body .border-indigo-500, html:not(.sf-no-mono) body .border-indigo-600, html:not(.sf-no-mono) body .border-indigo-700, html:not(.sf-no-mono) body .border-indigo-800, html:not(.sf-no-mono) body .border-indigo-900, html:not(.sf-no-mono) body .border-violet-300, html:not(.sf-no-mono) body .border-violet-400, html:not(.sf-no-mono) body .border-violet-500, html:not(.sf-no-mono) body .border-violet-600, html:not(.sf-no-mono) body .border-violet-700, html:not(.sf-no-mono) body .border-violet-800, html:not(.sf-no-mono) body .border-violet-900, html:not(.sf-no-mono) body .border-purple-300, html:not(.sf-no-mono) body .border-purple-400, html:not(.sf-no-mono) body .border-purple-500, html:not(.sf-no-mono) body .border-purple-600, html:not(.sf-no-mono) body .border-purple-700, html:not(.sf-no-mono) body .border-purple-800, html:not(.sf-no-mono) body .border-purple-900, html:not(.sf-no-mono) body .border-fuchsia-300, html:not(.sf-no-mono) body .border-fuchsia-400, html:not(.sf-no-mono) body .border-fuchsia-500, html:not(.sf-no-mono) body .border-fuchsia-600, html:not(.sf-no-mono) body .border-fuchsia-700, html:not(.sf-no-mono) body .border-fuchsia-800, html:not(.sf-no-mono) body .border-fuchsia-900, html:not(.sf-no-mono) body .border-pink-300, html:not(.sf-no-mono) body .border-pink-400, html:not(.sf-no-mono) body .border-pink-500, html:not(.sf-no-mono) body .border-pink-600, html:not(.sf-no-mono) body .border-pink-700, html:not(.sf-no-mono) body .border-pink-800, html:not(.sf-no-mono) body .border-pink-900, html:not(.sf-no-mono) body .border-amber-300, html:not(.sf-no-mono) body .border-amber-400, html:not(.sf-no-mono) body .border-amber-500, html:not(.sf-no-mono) body .border-amber-600, html:not(.sf-no-mono) body .border-amber-700, html:not(.sf-no-mono) body .border-amber-800, html:not(.sf-no-mono) body .border-amber-900, html:not(.sf-no-mono) body .border-yellow-300, html:not(.sf-no-mono) body .border-yellow-400, html:not(.sf-no-mono) body .border-yellow-500, html:not(.sf-no-mono) body .border-yellow-600, html:not(.sf-no-mono) body .border-yellow-700, html:not(.sf-no-mono) body .border-yellow-800, html:not(.sf-no-mono) body .border-yellow-900, html:not(.sf-no-mono) body .border-orange-300, html:not(.sf-no-mono) body .border-orange-400, html:not(.sf-no-mono) body .border-orange-500, html:not(.sf-no-mono) body .border-orange-600, html:not(.sf-no-mono) body .border-orange-700, html:not(.sf-no-mono) body .border-orange-800, html:not(.sf-no-mono) body .border-orange-900 { border-color: var(--m-act) !important; }
html:not(.sf-no-mono) body [class*="ring-"] { --tw-ring-color: var(--m-line) !important; }
html:not(.sf-no-mono) body [class*="shadow-"][class*="/"] { --tw-shadow-color: transparent !important; }

/* Colours written straight into a page or script (style="..."). Browsers keep a script-set colour as rgb(). */
html:not(.sf-no-mono) body [style*="color:#16A34A"], html:not(.sf-no-mono) body [style*="color:#166534"], html:not(.sf-no-mono) body [style*="color:#10B981"], html:not(.sf-no-mono) body [style*="color:#059669"] { color: var(--m-ok) !important; }
html:not(.sf-no-mono) body i[style*="color:#16A34A"], html:not(.sf-no-mono) body i[style*="color:#10B981"], html:not(.sf-no-mono) body i[style*="color:#128C4A"] { color: var(--m-act) !important; }
html:not(.sf-no-mono) body [style*="color:#B91C1C"], html:not(.sf-no-mono) body [style*="color:#EF4444"], html:not(.sf-no-mono) body [style*="color:#ef4444"], html:not(.sf-no-mono) body [style*="color:#DC2626"] { color: var(--m-bad) !important; }
html:not(.sf-no-mono) body [style*="color:#F59E0B"], html:not(.sf-no-mono) body [style*="color:#f59e0b"], html:not(.sf-no-mono) body [style*="color:#FBBF24"], html:not(.sf-no-mono) body [style*="color:#92400E"], html:not(.sf-no-mono) body [style*="color:#D97706"],
html:not(.sf-no-mono) body [style*="color: rgb(245, 158, 11)"], html:not(.sf-no-mono) body [style*="color:#4285F4"], html:not(.sf-no-mono) body [style*="color:#2563EB"], html:not(.sf-no-mono) body [style*="color:#7C3AED"], html:not(.sf-no-mono) body [style*="color:#0891B2"],
html:not(.sf-no-mono) body [style*="color:#0E7C86"], html:not(.sf-no-mono) body [style*="color:#0A5860"], html:not(.sf-no-mono) body [style*="color:#0B5F66"] { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body [style*="color:#94A3B8"], html:not(.sf-no-mono) body [style*="color: #94A3B8"], html:not(.sf-no-mono) body [style*="color:#9CA3AF"] { color: var(--m-ink-3) !important; }
html:not(.sf-no-mono) body [style*="color:#64748B"], html:not(.sf-no-mono) body [style*="color:#475569"], html:not(.sf-no-mono) body [style*="color:#334155"], html:not(.sf-no-mono) body [style*="color: #64748B"] { color: var(--m-ink-2) !important; }
html:not(.sf-no-mono) body [style*="color:#0F172A"], html:not(.sf-no-mono) body [style*="color:#1F2937"], html:not(.sf-no-mono) body [style*="color:#111827"] { color: var(--m-ink) !important; }
html:not(.sf-no-mono) body [style*="background:#FEF3C7"], html:not(.sf-no-mono) body [style*="background:#FEE2E2"], html:not(.sf-no-mono) body [style*="background:#fee2e2"], html:not(.sf-no-mono) body [style*="background:#fef3c7"], html:not(.sf-no-mono) body [style*="background:#fff7ed"],
html:not(.sf-no-mono) body [style*="background:#DCFCE7"], html:not(.sf-no-mono) body [style*="background:#F0FDF4"], html:not(.sf-no-mono) body [style*="background:#FEF2F2"], html:not(.sf-no-mono) body [style*="background:#F1F5F9"], html:not(.sf-no-mono) body [style*="background:#F8FAFC"],
html:not(.sf-no-mono) body [style*="background:#E8F0FE"], html:not(.sf-no-mono) body [style*="background:#E3F6FA"], html:not(.sf-no-mono) body [style*="background:#FEF3E2"], html:not(.sf-no-mono) body [style*="background:#F1EBFC"], html:not(.sf-no-mono) body [style*="background:#E7F5F6"] { background: var(--m-soft) !important; border-color: transparent !important; }
html:not(.sf-no-mono) body [style*="background:#E11D48"], html:not(.sf-no-mono) body [style*="background:#ef4444"], html:not(.sf-no-mono) body [style*="background:#EF4444"], html:not(.sf-no-mono) body [style*="background:#10B981"], html:not(.sf-no-mono) body [style*="background:#16A34A"] { background: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body [style*="border:1px solid #DCFCE7"], html:not(.sf-no-mono) body [style*="border:1.4px solid #E2E8F0"], html:not(.sf-no-mono) body [style*="border-top:1px solid #F1F5F9"] { border-color: var(--m-line) !important; }
/* My Appliances: the appliance drawings in ink, their cut-outs in the grey of the band. */
html:not(.sf-no-mono) body #appliances-list svg [fill]:not([fill="none"]) { fill: var(--m-ink); }
html:not(.sf-no-mono) body #appliances-list svg [stroke]:not([stroke="none"]) { stroke: var(--m-ink); }
html:not(.sf-no-mono) body #appliances-list svg [fill="#E8F0FE"], html:not(.sf-no-mono) body #appliances-list svg [fill="#E3F6FA"], html:not(.sf-no-mono) body #appliances-list svg [fill="#FEF3E2"], html:not(.sf-no-mono) body #appliances-list svg [fill="#F1EBFC"] { fill: var(--m-soft); }
html:not(.sf-no-mono) body #appliances-list svg [stroke="#E8F0FE"], html:not(.sf-no-mono) body #appliances-list svg [stroke="#E3F6FA"], html:not(.sf-no-mono) body #appliances-list svg [stroke="#FEF3E2"], html:not(.sf-no-mono) body #appliances-list svg [stroke="#F1EBFC"] { stroke: var(--m-soft); }
/* Pop-ups (assets/modal.js): danger button and icon circles. */
html:not(.sf-no-mono) body .sf-modal-btn-danger { background: var(--m-act) !important; color: var(--m-on-act) !important; }
html:not(.sf-no-mono) body .sf-modal-icon { background: var(--m-soft) !important; color: var(--m-ink) !important; }
/* Stars: ink, not gold. */
html:not(.sf-no-mono) body .fa-star.text-\[var\(--color-warning\)\], html:not(.sf-no-mono) body [style*="color:var(--color-warning)"] { color: var(--m-ink) !important; }
/* Dark mode: the status greens and reds lighter, so they read on near-black. */
html:not(.sf-no-mono) body.dark-mode { --m-ok: #5CC97B; --m-bad: #FF6B6B; --color-success-soft: #222; --color-warning-soft: #222; --color-danger-soft: #222; --color-info-soft: #222; }
/* "Our Work" box on the app's service screen: flat like the rest of that screen. */
html:not(.sf-no-mono) body #detail-ourwork .sf-our-work { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 !important; background: transparent !important; }


/* Per-business brand colour */
:root {
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-primary-light: #474747;
  --color-primary-dark: #000000;
  --color-primary-rgb: 0, 0, 0;
  --color-primary-tint: #E6E6E6;
  --color-primary-tint-text: #000000;
  --color-secondary: #000000;
  --color-secondary-soft: #A6A6A6;
  --slider-home-1-from: #000000;
  --slider-home-1-to: #474747;
  --slider-home-2-from: #000000;
  --slider-home-2-to: #000000;
  --slider-home-4-from: #000000;
  --slider-home-4-to: #000000;
  --slider-shop-1-from: #000000;
  --slider-shop-1-to: #808080;
  --slider-shop-2-from: #000000;
  --slider-shop-2-to: #BFBFBF;
}