/* ==========================================================================
   UI VERSION: brand-v1  — client-facing forms (sign-in/up, client portal, Yasmeen chat, app install)
   Same tokens as the homepage (home.css .dh) and the client emails.
   Loaded only when config('catalogue.ui_version') === 'brand-v1'. Roll back: UI_VERSION=classic.
   ========================================================================== */
:root {
    --de-cream: #F5F0E8; --de-paper: #FBF8F3; --de-tile: #EFE8DE; --de-ink: #15120E; --de-text: #2A251F;
    --de-muted: #6B6259; --de-faint: #8F8579; --de-line: #E8E0D4; --de-accent: #C4511C; --de-accent-ink: #9C3D12;
    --de-peach: #F7DCC8; --de-soft: #FBEDE4;
    --de-display: "Inter Tight", "Inter", system-ui, sans-serif; --de-serif: "Instrument Serif", Georgia, serif;
}

/* ---------- sign in / sign up / reset (layouts/auth + liner-auth.css) ---------- */
.auth-shell { --em: #C4511C; --em-dark: #9C3D12; color: var(--de-text); background: #fff; }
.auth-shell a { color: var(--de-accent-ink); } .auth-shell a:hover { color: var(--de-accent); }
.auth-shell h1, .auth-shell h2, .auth-shell h3 { font-family: var(--de-display); letter-spacing: -.025em; color: var(--de-ink); }
.auth-brand-col { background: #C4511C !important; background-image: none !important; }  /* solid brand orange, no gradients */
.auth-blob { display: none !important; }
.auth-brand-col h1, .auth-brand-col h2, .auth-brand-col h3 { color: #fff !important; }
.auth-brand-col p { color: rgb(255 255 255 / .9) !important; }
.auth-tile { background: rgb(255 255 255 / .14) !important; border-color: rgb(255 255 255 / .28) !important; }
.auth-tile i, .auth-tile svg { color: #fff !important; }
.auth-tile, .auth-tile * { color: #fff !important; }
.auth-checks i { background: #fff !important; color: var(--de-accent) !important; }
.auth-centered { background: var(--de-cream) !important; }
.auth-card { border-color: var(--de-line) !important; border-radius: 18px !important; }
.auth-icon { background: var(--de-soft) !important; color: var(--de-accent) !important; }
.auth-shell .theme-input, .auth-shell input.form-control, .auth-shell select.form-select { border-color: var(--de-line) !important; border-radius: 10px !important; color: var(--de-ink); }
.auth-shell .theme-input:focus, .auth-shell input.form-control:focus { border-color: #D98A5F !important; box-shadow: 0 0 0 3px rgb(196 81 28 / .14) !important; }
.auth-shell .btn-primary, .auth-shell button[type="submit"].btn, .auth-shell .btn-secondary:not(.btn-light) {
    background: var(--de-accent) !important; border-color: var(--de-accent) !important; color: #fff !important; border-radius: 10px !important; font-weight: 600; }
.auth-shell .btn-primary:hover, .auth-shell button[type="submit"].btn:hover { background: var(--de-accent-ink) !important; border-color: var(--de-accent-ink) !important; }
.auth-shell .form-check-input:checked { background-color: var(--de-accent) !important; border-color: var(--de-accent) !important; }

/* ---------- client portal (portal.css) ---------- */
.cp, body.cpx, body.cpa { --ink: #15120E; --text: #2A251F; --muted: #6B6259; --line: #E8E0D4; --cream: #F5F0E8; --soft: #FBEDE4;
      --em: #C4511C; --em-dk: #9C3D12; --em-lt: #D98A5F; --accent: #C4511C; }
body.cpx, body.cpa { background: var(--de-cream) !important; color: var(--de-ink) !important; }
.cpx-side { background: var(--de-paper) !important; border-right-color: var(--de-line) !important; }
.cpx-nav a { color: var(--de-muted); } .cpx-nav a:hover { background: var(--de-tile); color: var(--de-ink); }
.cpx-nav a.on { background: var(--de-ink) !important; color: #fff !important; } .cpx-nav a.on svg { color: #fff !important; }
.cpx-avatar { background: var(--de-accent) !important; }
.cpx-iconbtn:hover { background: var(--de-tile) !important; color: var(--de-ink) !important; }
.cpx-crumb b { color: var(--de-ink) !important; }
.cpx-top-link:hover, .cpa-back:hover { color: var(--de-accent) !important; }
.cpx-flash { background: var(--de-soft) !important; color: var(--de-accent-ink) !important; border-color: #F2C9B0 !important; }
.cpx-tabs a.on { color: var(--de-ink) !important; box-shadow: inset 0 -2px 0 var(--de-accent); }
.cp-head h1, .cp-title, .cpx h1, .cpx h2 { font-family: var(--de-display); letter-spacing: -.025em; }
.cp-kicker { color: var(--de-accent-ink) !important; }
.cp-stat { border-color: var(--de-line) !important; background: #fff !important; }
.cp-stat:hover { border-color: #E3B79C !important; }
.cpx .cp-stat:nth-child(n) { background: #fff !important; } .cpx .cp-stat .cp-stat-ic { background: var(--de-soft) !important; color: var(--de-accent) !important; }
.cpx .cp-stat:nth-child(3) { background: var(--de-ink) !important; border-color: var(--de-ink) !important; }
.cpx .cp-stat:nth-child(3), .cpx .cp-stat:nth-child(3) * { color: #fff !important; }
.cpx .cp-stat:nth-child(3) .cp-stat-ic { background: rgb(255 255 255 / .1) !important; color: #E9A27E !important; }
.cp-attn { border-color: #F2C9B0 !important; background: var(--de-soft) !important; }
.cp-ok { background: #E7F0E4 !important; color: #2F6A40 !important; }
.cp-btn-ink { background: var(--de-ink) !important; color: #fff !important; } .cp-btn-ink:hover { background: var(--de-text) !important; }
.cp-btn-accent { background: var(--de-accent) !important; box-shadow: 0 8px 18px -10px rgb(196 81 28 / .7) !important; } .cp-btn-accent:hover { background: var(--de-accent-ink) !important; }
.cp-btn-line { border-color: var(--de-line) !important; color: var(--de-ink) !important; background: #fff !important; }
.cp-btn-line:hover { border-color: var(--de-ink) !important; }
.cp input:focus, .cp select:focus, .cp textarea:focus, .cpa input:focus, .cpx input:focus, .cpx textarea:focus, .cpx select:focus {
    border-color: #D98A5F !important; box-shadow: 0 0 0 3px rgb(196 81 28 / .14) !important; outline: 0; }

/* ---------- Yasmeen chat widget (edgemate) ---------- */
.em-fab { background: var(--de-accent) !important; color: #fff !important; box-shadow: 0 0 0 2px #fff, 0 10px 24px -8px rgb(21 18 14 / .55) !important; }
.em-fab:hover, .em-fab:focus-visible { background: var(--de-accent-ink) !important; }
.em-head { background: var(--de-ink) !important; }
.em-avatar { color: var(--de-accent) !important; }
.em-me { background: var(--de-accent) !important; }
.em-card:hover { border-color: #E3B79C !important; }
.em-quick button { border-color: #F2C9B0 !important; color: var(--de-accent-ink) !important; background: #fff !important; }
.em-quick button:hover { background: var(--de-soft) !important; }
.em-lead { background: var(--de-soft) !important; border-color: #F2C9B0 !important; color: var(--de-accent-ink) !important; }
.em-form input:focus, .em-form textarea:focus, .em-input input:focus { border-color: #D98A5F !important; box-shadow: 0 0 0 3px rgb(196 81 28 / .14) !important; }
.em-form button, .em-input button { background: var(--de-accent) !important; }
.em-form button:hover, .em-input button:hover { background: var(--de-accent-ink) !important; }

/* ---------- app install bar ---------- */
.pwa-install .pwa-btn { background: var(--de-accent) !important; }

/* warm secondary text (was cool slate) */
.auth-shell .text-muted, .auth-shell p, .auth-shell label, .auth-shell small { color: var(--de-muted) !important; }
.auth-shell label.form-label, .auth-shell .form-label { color: var(--de-text) !important; }
body.cpx .cp-sub, body.cpx .cpx-crumb, body.cpx [class*="-sub"], body.cpx .cp-muted, body.cpx small, body.cpa p, body.cpa small { color: var(--de-muted) !important; }
.cpx-side .cpx-nav-title, .cpx-side h6, .cpx-side [class*="title"] { color: var(--de-faint) !important; }
.auth-shell .auth-brand-col p, .auth-shell .auth-brand-col small, .auth-shell .auth-brand-col span, .auth-shell .auth-brand-col label { color: rgb(255 255 255 / .92) !important; }
/* keep the footer's last row (social icons) clear of the floating Ask Yasmeen button */
body:has(.em-fab) footer.df { padding-bottom: 84px; }
/* back-to-top: quiet brand square above the Ask Yasmeen button (was a bright amber square overlapping the footer icons) */
.scroll-top-btn { background: #fff !important; color: var(--de-ink) !important; border: 1px solid var(--de-line) !important; border-radius: 10px !important;
    bottom: 96px !important; right: 24px !important; box-shadow: 0 8px 20px -10px rgb(21 18 14 / .45) !important; }
.scroll-top-btn:hover { background: var(--de-ink) !important; color: #fff !important; }
@media (max-width: 991.98px) { .scroll-top-btn { left: auto !important; right: 18px !important; bottom: 160px !important; } }