/* ==========================================================================
   UplivaAI theme layer
   Loaded LAST in _MarketingLayout and _AdminLayout. Visual-only overrides:
   no selectors here change behaviour, IDs or form field names.
   ========================================================================== */

:root {
    /* Brand: deep forest -> emerald (WhatsApp-adjacent, but not WhatsApp's own green) */
    --brand-950: #03201a;
    --brand-900: #052c23;
    --brand-800: #063b2f;
    --brand-700: #0a5241;
    --brand-600: #0b6e55;
    --brand-500: #10a371;
    --brand-400: #34d399;
    --brand-100: #dcf5ea;
    --brand-50:  #f0faf5;

    /* Neutrals (slightly warm) */
    --ink:      #0d1b16;
    --ink-2:    #2b3a34;
    --muted:    #5b6b64;
    --subtle:   #8a9791;
    --line:     #e3e8e5;
    --line-2:   #d3dcd7;
    --canvas:   #f7f7f3;
    --surface:  #ffffff;
    --surface-2:#fafbf9;

    /* Accent + semantic */
    --accent:   #f2b544;
    --success:  #12805c;
    --warning:  #a16207;
    --danger:   #b42318;
    --info:     #1d4ed8;

    /* Type */
    --font-display: "Manrope", "DM Sans", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Shape + depth */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --shadow-xs: 0 1px 2px rgba(13,27,22,.06);
    --shadow-sm: 0 2px 8px rgba(13,27,22,.05), 0 1px 2px rgba(13,27,22,.04);
    --shadow-md: 0 12px 32px -8px rgba(13,27,22,.12), 0 2px 6px rgba(13,27,22,.04);
    --shadow-lg: 0 30px 70px -20px rgba(6,59,47,.28), 0 8px 20px -8px rgba(13,27,22,.10);
    --ring: 0 0 0 4px rgba(16,163,113,.18);

    /* Legacy token bridge so older rules pick up the new palette */
    --u-ink: var(--ink);
    --u-muted: var(--muted);
    --u-green: var(--brand-500);
    --u-green-dark: var(--brand-800);
    --u-mint: var(--brand-50);
    --u-pearl: var(--canvas);
    --u-line: var(--line);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.upliva-body, body.admin-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.upliva-body { background: var(--canvas); }
::selection { background: var(--brand-100); color: var(--brand-900); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

.container { width: min(1200px, calc(100% - 48px)); }

/* ---------- Shared type primitives ---------- */
.upliva-kicker, .upliva-login-dialog-kicker, .price-label, .register-badge, .platform-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body);
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-600); opacity: 1;
}
.platform-kicker.dark { color: var(--brand-600); }

/* ---------- Buttons (one system: primary / secondary / ghost) ---------- */
.upliva-btn, .platform-btn, .upliva-login-submit, .upliva-chatbot-next {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px;
    border-radius: 12px; border: 1px solid transparent;
    font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.005em;
    text-decoration: none; cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.upliva-btn span, .platform-btn span, .upliva-login-submit span { font-size: 16px; transition: transform .18s ease; }
.upliva-btn:hover span, .platform-btn:hover span, .upliva-login-submit:hover span { transform: translateX(2px); }

.upliva-btn-primary, .platform-btn-primary, .upliva-login-submit, .upliva-chatbot-next {
    background: var(--brand-800); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -6px rgba(6,59,47,.45);
}
.upliva-btn-primary:hover, .platform-btn-primary:hover, .upliva-login-submit:hover, .upliva-chatbot-next:hover:not(:disabled) {
    background: var(--brand-700); color: #fff; transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 14px 28px -8px rgba(6,59,47,.5);
}
.upliva-btn-primary:active, .platform-btn-primary:active, .upliva-login-submit:active { transform: translateY(0); }

.upliva-btn-secondary, .platform-btn-light {
    background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs);
}
.upliva-btn-secondary:hover, .platform-btn-light:hover { border-color: var(--brand-500); color: var(--brand-800); background: var(--surface); transform: translateY(-1px); }

.upliva-btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }

/* ---------- Header ---------- */
.upliva-header {
    background: rgba(247,247,243,.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(13,27,22,.06);
}
.upliva-nav { min-height: 76px; }
.upliva-brand img { width: 156px; }
.upliva-header nav { gap: 6px; }
.upliva-header nav a {
    font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted);
    padding: 8px 14px; border-radius: 10px; transition: color .15s ease, background .15s ease;
}
.upliva-header nav a:hover { color: var(--ink); background: rgba(13,27,22,.04); }
.upliva-header nav .upliva-login-link { color: var(--ink) !important; font-weight: 600; margin-left: 10px; }
.upliva-header nav .upliva-nav-cta {
    background: var(--brand-800) !important; color: #fff !important;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    padding: 11px 18px; border-radius: 11px; margin-left: 4px;
    box-shadow: 0 8px 20px -8px rgba(6,59,47,.55);
}
.upliva-header nav .upliva-nav-cta:hover { background: var(--brand-700) !important; }

/* ---------- Hero ---------- */
.upliva-hero {
    min-height: auto;
    padding: 88px 0 104px;
    background:
        radial-gradient(1000px 520px at 88% 8%, rgba(16,163,113,.12), transparent 60%),
        radial-gradient(700px 420px at -5% 95%, rgba(242,181,68,.10), transparent 60%),
        var(--canvas);
}
.upliva-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(13,27,22,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,22,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.upliva-hero-glow { display: none; }
.upliva-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }

.upliva-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.upliva-eyebrow span {
    width: 8px; height: 8px; background: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(16,163,113,.16);
    animation: uplivaPulse 2.4s ease-in-out infinite;
}
@keyframes uplivaPulse { 50% { box-shadow: 0 0 0 7px rgba(16,163,113,.05); } }

.upliva-hero h1 {
    font: 800 clamp(40px, 5.4vw, 68px)/1.04 var(--font-display);
    letter-spacing: -.035em; margin: 24px 0 22px; max-width: 640px; color: var(--ink);
}
.upliva-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--brand-800) 10%, var(--brand-500) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.upliva-hero-sub { font-size: 19px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.upliva-hero-actions { gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.upliva-hero-login { margin-top: 16px; font-size: 14px; color: var(--muted); }
.upliva-hero-login a { color: var(--brand-700); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(10,82,65,.25); }
.upliva-hero-login a:hover { border-color: var(--brand-700); }

.upliva-trust-row {
    display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; padding-top: 28px;
    border-top: 1px solid var(--line);
    font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.upliva-trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.upliva-trust-row svg { width: 18px; height: 18px; flex: none; color: var(--brand-500); }

.upliva-hero-visual { min-height: 0; padding: 28px 0; }
.upliva-video-shell {
    background: linear-gradient(160deg, var(--brand-800), var(--brand-950));
    border-radius: 24px; padding: 12px; transform: none;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.video-topline, .video-bottomline { font-size: 12px; padding: 6px 8px 12px; color: #a9cdbf; }
.video-bottomline { padding: 12px 8px 4px; }
.video-sound { color: var(--brand-400); font-weight: 600; }
.upliva-ad-video { border-radius: 14px; }

/* Decorative floating cards around the hero video */
.upliva-floating-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
    box-shadow: var(--shadow-md);
    animation: uplivaFloat 6s ease-in-out infinite;
}
.upliva-floating-card.lead-card { right: -18px; top: -6px; width: 220px; }
.upliva-floating-card.chat-card { left: -26px; bottom: 6px; width: 240px; animation-delay: -3s; }
.floating-label { font-size: 11px; letter-spacing: .1em; color: var(--brand-600); margin-bottom: 6px; }
.lead-card strong { font: 700 15px/1.3 var(--font-display); color: var(--ink); }
.lead-card small { font-size: 13px; color: var(--muted); }
.chat-card .chat-bubble {
    display: block; padding: 9px 12px; border-radius: 12px 12px 12px 4px;
    background: var(--brand-50); color: var(--ink-2); font-size: 13px; line-height: 1.45;
}
.chat-card .chat-bubble + .chat-bubble { margin-top: 6px; border-radius: 12px 12px 4px 12px; background: #dcf8c6; margin-left: 28px; }
@keyframes uplivaFloat { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    .upliva-floating-card, .upliva-eyebrow span { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Sections ---------- */
.upliva-offer, .upliva-combined { padding: 112px 0; background: var(--surface); }
.upliva-combined + .upliva-combined { background: var(--canvas); border-top: 1px solid var(--line); }
.upliva-section-heading { max-width: 760px; }
.upliva-section-heading h2 {
    font: 800 clamp(32px, 4vw, 48px)/1.1 var(--font-display);
    letter-spacing: -.03em; margin: 14px 0 16px; color: var(--ink);
}
.upliva-section-heading p { font-size: 18px; line-height: 1.65; color: var(--muted); }

/* Cards: one radius, one border, one shadow ramp */
.journey-card, .upliva-price-card, .upliva-get-strip, .upliva-register-card, .business-form, .confirmation-card {
    border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm);
}
.upliva-journey-grid { gap: 20px; margin-top: 56px; }
.journey-card { padding: 28px; min-height: 320px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.journey-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.journey-card.journey-highlight {
    background: linear-gradient(165deg, var(--brand-700), var(--brand-900));
    border-color: transparent; box-shadow: var(--shadow-lg);
}
.journey-top > span { font-size: 13px; font-weight: 700; color: var(--subtle); letter-spacing: .06em; }
.journey-icon { width: 52px; height: 52px; border-radius: 14px; font-size: 24px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.journey-highlight .journey-icon { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.journey-card h3 { font: 700 20px/1.25 var(--font-display); letter-spacing: -.015em; margin: 28px 0 10px; }
.journey-card p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.journey-highlight p { color: #bfd8ce; }
.journey-output { padding-top: 20px; margin-top: auto; border-top: 1px dashed var(--line-2); }
.journey-output strong { font-size: 11px; letter-spacing: .1em; color: var(--brand-600); }
.journey-highlight .journey-output strong { color: var(--brand-400); }
.journey-output span { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }
.journey-highlight .journey-output span { color: #fff; }

.upliva-get-strip { margin-top: 24px; padding: 28px 32px; gap: 32px; }
.get-strip-title h3 { font: 800 26px/1.15 var(--font-display); letter-spacing: -.02em; margin-top: 8px; }
.get-strip-items { gap: 10px; }
.get-strip-items span {
    padding: 10px 16px; border-radius: 999px; font-size: 14px; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line);
}
.get-strip-items b { color: var(--brand-800); font-weight: 700; }

/* Plans */
.upliva-pricing-grid { gap: 24px; margin-top: 56px; }
.upliva-pricing-grid.two-up { grid-template-columns: repeat(2, 1fr); max-width: 960px; margin-left: auto; margin-right: auto; }
.upliva-price-card { padding: 36px; min-height: 0; }
.upliva-price-card.featured {
    border: 1.5px solid var(--brand-500); transform: none;
    box-shadow: 0 0 0 6px rgba(16,163,113,.07), var(--shadow-md);
}
.price-popular {
    top: 32px; right: 32px; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.upliva-price-card h3 {
    font: 800 26px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 16px 0 0; display: block;
}
.upliva-price-card p { font-size: 16px; line-height: 1.6; color: var(--muted); min-height: 0; margin: 12px 0 24px; }
.upliva-price-card ul { gap: 12px; margin: 0 0 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.upliva-price-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); }
.upliva-price-card li:before {
    content: ""; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%;
    background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b6e55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* Closing CTA panel */
.upliva-register-panel {
    margin-top: 72px !important; padding: 56px; gap: 48px; border-radius: var(--r-xl);
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(52,211,153,.18), transparent 60%),
        linear-gradient(160deg, var(--brand-800), var(--brand-950));
    box-shadow: var(--shadow-lg);
}
.upliva-register-panel .upliva-kicker { color: var(--brand-400); }
.upliva-register-panel h2 { font: 800 clamp(30px, 3.4vw, 42px)/1.1 var(--font-display); letter-spacing: -.03em; margin: 14px 0; color: #fff; }
.upliva-register-panel p { font-size: 17px; line-height: 1.65; color: #b6d0c6; }
.upliva-register-card { padding: 32px; border: 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.upliva-register-card h3 { font: 800 24px/1.2 var(--font-display); letter-spacing: -.02em; margin: 10px 0 0; }
.register-types { gap: 8px; margin: 20px 0 24px; }
.register-types span { font-size: 13px; font-weight: 500; padding: 7px 12px; color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.register-login { font-size: 14px; color: var(--muted); margin-top: 16px; }
.register-login a, .upliva-login-footer a { color: var(--brand-700); font-weight: 600; }

/* ---------- Footer ---------- */
.upliva-footer { background: var(--brand-950); padding: 56px 0 28px; }
.compact-footer-inner p { font-size: 15px; color: #8fb0a4; margin: 0; }
.compact-footer-inner > div { gap: 24px; }
.compact-footer-inner a:not(.upliva-brand) { font-size: 15px; color: #d4e4dd; transition: color .15s ease; }
.compact-footer-inner a:not(.upliva-brand):hover { color: #fff; }
.upliva-copyright {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    margin-top: 40px; padding-top: 24px; font-size: 13px; color: #6f8f84;
}
.upliva-copyright a { color: #a9cdbf; text-decoration: none; }

/* ---------- Forms (shared) ---------- */
.upliva-login-form label, .upliva-chatbot-form label, .field label, .business-selector-form label,
.lead-search-field label, .lead-pagesize-field label {
    font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--ink-2);
}
.upliva-login-form input, .upliva-chatbot-form input, .upliva-chatbot-form select,
.field input, .field select, .field textarea,
.business-form .field input, .business-form .field select, .business-form .field textarea,
.business-selector-form select, .lead-search-field input, .lead-pagesize-field select {
    width: 100%; min-height: 48px; padding: 12px 14px;
    font: 400 16px/1.4 var(--font-body); color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
    box-shadow: var(--shadow-xs); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.upliva-login-form input::placeholder, .upliva-chatbot-form input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #9aa6a0; }
.upliva-login-form input:hover, .upliva-chatbot-form input:hover, .upliva-chatbot-form select:hover,
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b9c6bf; }
.upliva-login-form input:focus, .upliva-chatbot-form input:focus, .upliva-chatbot-form select:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.business-selector-form select:focus, .lead-search-field input:focus, .lead-pagesize-field select:focus {
    border-color: var(--brand-500); box-shadow: var(--ring); background: var(--surface);
}
.field select, .upliva-chatbot-form select, .business-selector-form select, .lead-pagesize-field select {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6b64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") right 12px center/18px no-repeat;
}
.field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error {
    border-color: var(--danger); box-shadow: 0 0 0 4px rgba(180,35,24,.10);
}
.field span.field-validation-error, .field .field-validation-error, .field-validation { display: block; margin-top: 6px; font-size: 13px; color: var(--danger); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--subtle); opacity: 1; }
.validation, .upliva-login-error {
    display: block; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5;
    background: #fef3f2; color: var(--danger); border: 1px solid #fecdca;
}

/* ---------- Login modal ---------- */
.upliva-login-backdrop { background: rgba(3,32,26,.55); backdrop-filter: blur(6px); }
.upliva-login-dialog { width: min(440px, 100%); padding: 40px; border-radius: 24px; border: 0; box-shadow: 0 40px 100px -20px rgba(0,0,0,.45); }
.upliva-login-icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
    background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
}
.upliva-login-icon svg { width: 22px; height: 22px; }
.upliva-login-close {
    right: 18px; top: 18px; width: 36px; height: 36px; font-size: 22px;
    background: transparent; color: var(--subtle); transition: background .15s ease, color .15s ease;
}
.upliva-login-close:hover { background: var(--canvas); color: var(--ink); }
.upliva-login-dialog-kicker { margin-bottom: 8px; }
.upliva-login-dialog h2 { font: 800 30px/1.15 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.upliva-login-dialog > p { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.upliva-login-form { gap: 6px; }
.upliva-login-form label { margin-top: 10px; }
.upliva-login-form label:first-of-type { margin-top: 0; }
.upliva-password-wrap input { padding-right: 72px; }
.upliva-password-toggle {
    right: 6px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px;
    font-size: 13px; font-weight: 600; border-radius: 9px;
    background: transparent; color: var(--brand-700);
}
.upliva-password-toggle:hover { background: var(--brand-50); }
.upliva-login-submit { margin-top: 20px; height: auto; min-height: 50px; }
.upliva-login-footer { font-size: 14px; color: var(--muted); margin-top: 28px; padding-top: 20px; border-color: var(--line); }

/* ---------- Chat widget ---------- */
.upliva-chatbot-launch {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 20px; font: 700 15px var(--font-display);
    background: var(--brand-800); box-shadow: 0 18px 40px -12px rgba(6,59,47,.6);
    transition: transform .18s ease, background .18s ease;
}
.upliva-chatbot-launch:hover { background: var(--brand-700); transform: translateY(-2px); }
.upliva-chatbot-dot { width: 9px; height: 9px; margin: 0; background: var(--brand-400); box-shadow: 0 0 0 4px rgba(52,211,153,.22); }
.upliva-chatbot { background: rgba(3,32,26,.18); }
.upliva-chatbot-card { width: min(400px, calc(100vw - 28px)); border-radius: 22px; border: 0; box-shadow: 0 40px 90px -20px rgba(3,32,26,.45); }
.upliva-chatbot-head { padding: 20px 22px; background: linear-gradient(150deg, var(--brand-800), var(--brand-950)); }
.upliva-chatbot-head .upliva-kicker { font-size: 11px; color: var(--brand-400); }
.upliva-chatbot-head strong { font: 700 17px/1.3 var(--font-display); }
.upliva-chatbot-head-actions button { width: 34px; height: 34px; }
.upliva-chatbot-body { padding: 22px; }
.upliva-chatbot-message { font-size: 15px; line-height: 1.55; color: var(--ink-2); background: var(--brand-50); border-radius: 14px 14px 14px 4px; padding: 14px 16px; margin-bottom: 18px; }
.upliva-chatbot-form { gap: 10px; }
.upliva-chatbot-form label span { font-weight: 400; color: var(--subtle); }
.upliva-chatbot-form input, .upliva-chatbot-form select { margin-top: 8px; }
.upliva-chatbot-next { margin-top: 8px; width: 100%; }
.upliva-chatbot-progress { font-size: 13px; color: var(--subtle); margin-top: 12px; }
.upliva-chatbot-result { font-size: 14px; padding: 12px 14px; }

/* ---------- Registration + confirmation ---------- */
.platform-section.platform-soft { background: var(--canvas); padding: 96px 0 112px; }
.registration-grid { gap: 72px; }
.registration-info h2 { font: 800 clamp(34px, 4vw, 48px)/1.1 var(--font-display); letter-spacing: -.03em; margin: 14px 0 0; color: var(--ink); }
.registration-lead-copy { font-size: 18px; color: var(--muted); margin: 18px 0 36px; }
.registration-steps { gap: 0; }
.registration-steps > div { grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--line); }
.registration-steps > div:last-child { border-bottom: 1px solid var(--line); }
.registration-steps span { width: 36px; height: 36px; font-size: 13px; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.registration-steps strong { font-size: 16px; color: var(--ink); }
.registration-steps small { font-size: 14px; color: var(--muted); }
.lead-registration-card { padding: 40px; box-shadow: var(--shadow-md); }
.lead-form-heading h3 { font: 800 26px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 10px 0; }
.lead-form-heading p { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.lead-form-fields { gap: 4px; }
.business-form .field { margin-bottom: 18px; }
.business-form .field label { margin-bottom: 8px; color: var(--ink-2); }
.lead-submit-btn { margin-top: 8px; min-height: 52px; }
.lead-privacy-note { font-size: 13px; color: var(--subtle); margin-top: 16px; }
.lead-privacy-note::before { content: "🔒 "; }

.platform-confirmation, .confirmation { background: var(--canvas); padding: 96px 20px; }
.confirmation-card { padding: 56px; width: min(680px, 100%); box-shadow: var(--shadow-md); }
.success-icon { width: 72px; height: 72px; font-size: 30px; background: var(--brand-50); color: var(--brand-600); box-shadow: 0 0 0 10px rgba(16,163,113,.07); }
.confirmation h1, .lead-success-card h1 { font: 800 clamp(28px, 3.6vw, 38px)/1.2 var(--font-display); letter-spacing: -.025em; margin: 14px auto 16px; }
.confirmation-card > p { font-size: 17px; line-height: 1.65; color: var(--muted); }
.lead-success-note { border-radius: 14px; background: var(--surface-2); border-color: var(--line); padding: 20px 22px; }
.lead-success-note span { font-size: 15px; color: var(--muted); }

.upliva-direct-login-note { font-size: 16px; color: var(--muted); }

/* ==========================================================================
   Workspace (admin + business owner)
   ========================================================================== */
body.admin-body { background: #f5f7f6; }
.admin-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.88); color: var(--ink); padding: 0;
    backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.admin-nav { min-height: 68px; gap: 20px; }
.admin-nav .upliva-brand img { width: 140px; }
.workspace-top-actions { gap: 4px; }
.workspace-top-link {
    min-height: 38px; padding: 8px 14px; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
    color: var(--muted) !important; font: 600 14px var(--font-body);
    transition: color .15s ease, background .15s ease;
}
.workspace-top-link:hover { background: var(--canvas); border-color: transparent; color: var(--ink) !important; }
.workspace-top-link.is-active { color: var(--brand-800) !important; background: var(--brand-50); }
.workspace-top-logout { margin-left: 8px; border-color: var(--line-2); color: var(--ink-2) !important; }
.workspace-top-logout:hover { border-color: #fecdca; background: #fef3f2; color: var(--danger) !important; }

.admin-page { padding: 48px 0 96px; }
.admin-head { margin-bottom: 32px; align-items: flex-end; }
.admin-head h1 { font: 800 clamp(30px, 3.4vw, 40px)/1.15 var(--font-display); letter-spacing: -.03em; margin: 8px 0; color: var(--ink); }
.admin-head p { font-size: 16px; color: var(--muted); margin: 0; }

.admin-stats { gap: 16px; }
.admin-stats > div, .admin-plan-card, .admin-dashboard-toolbar, .admin-table-wrap, .owner-info-grid article, .content-list, .admin-note-card, .lead-search-bar {
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.admin-stats > div { padding: 22px 24px; }
.admin-stats strong { font: 800 32px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.admin-stats span { font-size: 14px; color: var(--muted); margin-top: 6px; }

.admin-dashboard-summary > div { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 12px; padding: 10px 16px; }
.admin-dashboard-summary strong { font: 800 20px var(--font-display); color: var(--brand-800); }
.admin-dashboard-summary span { font-size: 12px; color: var(--muted); }

.admin-plan-card-head h2 { font: 800 22px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.admin-plan-card-full .admin-plan-card-head h2 { font-size: 24px; }
.admin-plan-card-head p { font-size: 14px; color: var(--muted); }
.admin-plan-card-head > strong { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.admin-section-heading strong { font: 700 17px var(--font-display); color: var(--ink); }
.admin-section-heading span { font-size: 14px; color: var(--muted); }

.admin-table-wrap { overflow: auto; }
.admin-table th, .admin-table td { padding: 14px 18px; border-bottom: 1px solid #eef1ef; font-size: 14px; }
.admin-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-2); color: var(--subtle); font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.admin-table tbody tr { transition: background .12s ease; }
.admin-table tbody tr:hover { background: #f8fbf9; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td small { font-size: 13px; color: var(--subtle); }

.workspace-btn {
    min-height: 40px; padding: 8px 16px; border-radius: 10px;
    font: 600 14px var(--font-body); letter-spacing: 0;
    background: var(--surface); border: 1px solid var(--line-2); color: var(--ink) !important;
    box-shadow: var(--shadow-xs);
}
.workspace-btn:hover { background: var(--surface-2); border-color: #b9c6bf; color: var(--ink) !important; box-shadow: var(--shadow-sm); }
.workspace-btn-primary, .workspace-btn-secondary {
    background: var(--brand-800) !important; border-color: var(--brand-800) !important; color: #fff !important;
}
.workspace-btn-primary:hover, .workspace-btn-secondary:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; color: #fff !important; }
.workspace-btn-danger {
    min-height: 40px; padding: 8px 16px; border-radius: 10px; font: 600 14px var(--font-body);
    background: #fff; border: 1px solid #fecdca; color: var(--danger) !important;
}
.workspace-btn-danger:hover { background: #fef3f2; }
.admin-actions button, .admin-actions a, .content-row button {
    border-radius: 8px; padding: 7px 12px; font: 600 13px var(--font-body); border-color: var(--line-2); color: var(--ink);
}
.admin-actions button:hover, .admin-actions a:hover, .content-row button:hover { background: var(--surface-2); }

/* Status chips: consistent size, semantic colour */
.status-badge, .lead-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font: 600 12px/1.5 var(--font-body); letter-spacing: 0;
    background: #f1f3f2; color: var(--ink-2); border: 1px solid transparent;
}
.status-badge::before, .lead-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.status-badge.approved, .lead-status-confirmed, .lead-status-converted { background: #ecfdf3; color: var(--success); border-color: #c6f0da; }
.status-badge.pending, .lead-status-interested { background: #fffaeb; color: var(--warning); border-color: #fde9b5; }
.status-badge.rejected, .lead-status-notinterested { background: #fef3f2; color: var(--danger); border-color: #fecdca; }

.lead-update-form select, .lead-update-form input, .lead-status-form select {
    min-height: 38px; padding: 6px 10px; font: 400 14px var(--font-body);
    border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface);
}
.lead-update-form select:focus, .lead-update-form input:focus, .lead-status-form select:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: none; }
.lead-edit-label { font-size: 12px; letter-spacing: .06em; color: var(--brand-600); }
.lead-source { font-size: 12px; }

.upliva-toast { top: 84px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 16px 18px; }
.upliva-toast-success { border-left: 4px solid var(--success); }
.upliva-toast-error { border-left: 4px solid var(--danger); }
.upliva-toast-info { border-left: 4px solid var(--info); }
.upliva-toast-body strong { font: 700 15px var(--font-display); color: var(--ink); }
.upliva-toast-body span { font-size: 14px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
    .upliva-hero { padding: 64px 0 80px; }
    .upliva-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .upliva-hero-visual { max-width: 640px; }
    .upliva-floating-card.lead-card { right: 8px; }
    .upliva-floating-card.chat-card { left: 8px; }
    .upliva-journey-grid { grid-template-columns: 1fr 1fr; }
    .upliva-register-panel { padding: 40px; }
}
@media (max-width: 900px) {
    .upliva-pricing-grid.two-up { grid-template-columns: 1fr; }
    .upliva-header nav a:not(.upliva-login-link):not(.upliva-nav-cta) { display: none; }
}
@media (max-width: 720px) {
    .container { width: calc(100% - 32px); }
    body.upliva-body, body.admin-body { font-size: 15px; }
    .upliva-nav { min-height: 64px; }
    .upliva-brand img { width: 128px; }
    .upliva-header nav a { font-size: 14px; padding: 8px 10px; }
    .upliva-header nav .upliva-login-link { margin-left: 0; }
    .upliva-header nav .upliva-nav-cta { padding: 9px 14px !important; font-size: 13px; }
    .upliva-hero { padding: 48px 0 64px; }
    .upliva-hero h1 { font-size: 38px; letter-spacing: -.03em; }
    .upliva-hero-sub { font-size: 17px; }
    .upliva-hero-actions { flex-direction: column; }
    .upliva-hero-actions .upliva-btn { width: 100%; }
    .upliva-trust-row { gap: 10px 18px; font-size: 13px; }
    .upliva-floating-card { display: none; }
    .upliva-offer, .upliva-combined { padding: 72px 0; }
    .upliva-section-heading h2 { font-size: 30px; letter-spacing: -.025em; }
    .upliva-section-heading p { font-size: 16px; }
    .upliva-journey-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
    .journey-card { min-height: 0; padding: 24px; }
    .upliva-get-strip { padding: 24px; }
    .get-strip-items span { font-size: 13px; padding: 8px 12px; }
    .upliva-price-card { padding: 28px 24px; }
    .price-popular { position: static; display: inline-block; margin-top: 12px; }
    .upliva-register-panel { padding: 28px 22px; gap: 28px; border-radius: 22px; }
    .upliva-register-card { padding: 24px; }
    .upliva-login-dialog { padding: 32px 24px; }
    .lead-registration-card, .confirmation-card { padding: 28px 22px; }
    .registration-grid { gap: 40px; }
    .admin-page { padding: 32px 0 72px; }
    .admin-nav .upliva-brand img { width: 118px; }
    .workspace-top-link { padding: 8px 10px; font-size: 13px; }
}

.validation-list { margin: 6px 0 0 18px; padding: 0; }

/* ==========================================================================
   Workspace components (ws-*) - replace per-view inline styles
   ========================================================================== */

/* Button hierarchy: one filled primary per area, everything else neutral */
.workspace-btn-secondary {
    background: var(--surface) !important; border-color: var(--line-2) !important; color: var(--ink) !important;
}
.workspace-btn-secondary:hover { background: var(--surface-2) !important; border-color: #b9c6bf !important; color: var(--ink) !important; }
.workspace-btn-primary { background: var(--brand-800) !important; border-color: var(--brand-800) !important; color: #fff !important; }
.workspace-btn-primary:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; color: #fff !important; }
.workspace-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.platform-btn:disabled, .workspace-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.admin-primary-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 11px;
    background: var(--brand-800); color: #fff; font: 700 14px var(--font-display); text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(6,59,47,.5); transition: background .15s ease, transform .15s ease; white-space: nowrap;
}
.admin-primary-link:hover { background: var(--brand-700); transform: translateY(-1px); }

/* Page width variants */
.ws-container-wide { max-width: 1440px !important; }
.ws-container-md { max-width: 1180px !important; }
.ws-container-sm { max-width: 1100px !important; }

/* Stats: auto-fit so 5 or 7 tiles never leave an orphan row */
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
.admin-stat-link { display: block; color: inherit; text-decoration: none; }
.admin-stats > div:has(.admin-stat-link):hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); }

/* Panels */
.content-list, .business-form { padding: 28px; max-width: none; }
.ws-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ws-panel-head h2, .business-form h2, .content-list h2 {
    font: 800 22px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--ink); margin: 6px 0 4px;
}
.ws-panel-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 720px; }
.ws-divider { border: 0; border-top: 1px solid var(--line); margin: 36px 0 28px; }

/* Filter bars */
.ws-filter-bar { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(200px, 1fr) auto auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.ws-filter-bar.two-col { grid-template-columns: minmax(240px, 2fr) minmax(200px, 1fr); margin: 20px 0; }
.ws-filter-bar .field { margin: 0; }
.ws-filter-bar .workspace-btn, .ws-filter-bar .platform-btn { min-height: 48px; }

/* Tables inside panels */
.ws-table-scroll { overflow-x: auto; margin: 0 -28px -28px; border-top: 1px solid var(--line); }
.ws-table-scroll .admin-table { min-width: 950px; }
.ws-table-scroll .admin-table th:first-child, .ws-table-scroll .admin-table td:first-child { padding-left: 28px; }
.ws-table-scroll .admin-table th:last-child, .ws-table-scroll .admin-table td:last-child { padding-right: 28px; }
.admin-table td { vertical-align: middle; }
.ws-thumb { display: block; width: 64px; height: 52px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.ws-thumb-empty { display: grid; place-items: center; width: 64px; height: 52px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line-2); font-size: 11px; color: var(--subtle); }
.ws-item-name { font-weight: 600; color: var(--ink); }
.ws-item-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.ws-item-sku { display: block; margin-top: 3px; font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.ws-muted { color: var(--subtle); font-size: 13px; }
.ws-row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ws-row-actions form { display: inline; margin: 0; }
.ws-pre { max-width: 520px; white-space: pre-wrap; }

/* Empty state */
.ws-empty {
    padding: 40px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--muted); font-size: 15px;
}
.ws-empty a { color: var(--brand-700); font-weight: 600; }

/* Callouts */
.ws-callout, .admin-note-card {
    padding: 14px 16px; border-radius: 12px; box-shadow: none;
    background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-2); font-size: 14px; line-height: 1.55;
}
.admin-note-card { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.admin-note-card strong, .ws-callout strong { font-weight: 700; color: var(--ink); }
.admin-note-card span { font-size: 14px; color: var(--muted); }
.ws-callout { display: block; margin: 8px 0 24px; }
.ws-callout-warning { background: #fffaeb; border-color: #fde9b5; color: #7a5a12; }
.ws-callout-warning strong { color: #5c430c; }
.ws-callout-danger { background: #fef3f2; border-color: #fecdca; color: var(--danger); }
.ws-callout-danger strong { color: var(--danger); }
.ws-callout-success { background: #ecfdf3; border-color: #c6f0da; color: var(--success); }
.ws-callout-success strong { color: var(--success); }
.ws-callout-neutral { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.ws-callout code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: rgba(13,27,22,.06); color: var(--ink); }
.ws-mt-0 { margin-top: 0 !important; }
.ws-mb-24 { margin-bottom: 24px !important; }

/* Inline selector strip (catalog entry mode) */
.ws-inline-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ws-inline-field label { margin: 0 !important; font-weight: 600; color: var(--ink); font-size: 14px; }
.ws-inline-field select { width: auto; min-width: 220px; min-height: 42px; }
.ws-inline-field .ws-muted { flex: 1 1 240px; }

/* Forms */
.form-grid { gap: 4px 20px; }
.required-mark { color: var(--danger); margin-left: 2px; }
.ws-help { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--subtle); }
.ws-image-preview img { width: 180px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.ws-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.ws-form-actions .ws-muted { flex: 1 1 260px; }
.ws-checkbox { display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.ws-checkbox input[type="checkbox"], .whatsapp-product-checkbox {
    width: 18px !important; height: 18px; min-height: 0 !important; padding: 0 !important; margin: 0; box-shadow: none !important;
    accent-color: var(--brand-600); cursor: pointer;
}
.ws-field-tile { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ws-field-tile strong { display: block; font-size: 14px; color: var(--ink); }
.ws-grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }

/* Pills */
.top-pick-badge, .ws-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
    font: 600 13px/1.4 var(--font-body); white-space: nowrap;
}

/* WhatsApp catalog selection groups */
.ws-group { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.ws-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ws-group-head strong { display: block; font: 700 16px var(--font-display); color: var(--ink); }
.ws-group-head span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.ws-rank-row { display: grid; grid-template-columns: auto 64px minmax(200px, 1fr) 110px 84px; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #eef1ef; transition: background .12s ease; }
.ws-rank-row:last-child { border-bottom: 0; }
.ws-rank-row:hover { background: #f8fbf9; }
.ws-rank-row:has(.whatsapp-product-checkbox:checked) { background: var(--brand-50); }
.ws-rank-row .ws-price { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.whatsapp-rank-input { min-height: 40px !important; text-align: center; }
.whatsapp-rank-input:disabled { background: var(--surface-2); color: var(--subtle); }

/* Accent card (outbound test) */
.ws-card-accent { margin-top: 24px; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--brand-100); background: linear-gradient(160deg, var(--brand-50), var(--surface) 60%); }
.ws-card-accent h2 { margin: 10px 0 6px; }
.ws-stat-tile { min-width: 132px; padding: 14px 18px; border-radius: 14px; text-align: center; background: linear-gradient(160deg, var(--brand-700), var(--brand-900)); color: #fff; }
.ws-stat-tile strong { display: block; font: 800 26px/1.1 var(--font-display); }
.ws-stat-tile span { font-size: 12px; opacity: .85; }
.ws-send-grid { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(240px, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.ws-send-grid .field { margin: 0; }
.ws-subform { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
    .ws-filter-bar, .ws-filter-bar.two-col, .ws-send-grid { grid-template-columns: 1fr; }
    .ws-rank-row { grid-template-columns: auto 56px minmax(0, 1fr) 72px; }
    .ws-rank-row .ws-price { display: none; }
    .content-list, .business-form { padding: 20px; }
    .ws-table-scroll { margin: 0 -20px -20px; }
}
.ws-mt-24 { margin-top: 24px !important; }
.admin-table-wrap .workspace-btn-sm { white-space: nowrap; }

/* Footer logo: use the light-text SVG instead of flattening the logo to white */
.footer-brand img { filter: none !important; }

/* ==========================================================================
   Validation: quiet when valid, one clear line when not
   - Field messages (<span asp-validation-for class="validation">) are plain
     text, never a box, and take no space while empty/valid.
   - The ModelOnly summary only shows when it actually has errors.
   ========================================================================== */
.field span.validation,
.field .field-validation-error,
.field .field-validation-valid {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 6px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font: 500 13px/1.4 var(--font-body); color: var(--danger);
}
.field span.validation:empty,
.field .field-validation-valid { display: none !important; }
.field .field-validation-error::before {
    content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-.9 4.2h1.8v5.6H9.1V5.7Zm0 7.1h1.8v1.8H9.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-.9 4.2h1.8v5.6H9.1V5.7Zm0 7.1h1.8v1.8H9.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hints stay grey (legacy ".field span" rule colours every span red) */
.field .field-hint, .field .ws-help { color: var(--subtle); font-size: 13px; font-weight: 400; }

/* Invalid input: red border + soft ring, no filled background */
.field input.input-validation-error,
.field select.input-validation-error,
.field textarea.input-validation-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(180,35,24,.10) !important;
    background-color: var(--surface);
}
.field input.input-validation-error:focus,
.field select.input-validation-error:focus,
.field textarea.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(180,35,24,.16) !important; }

/* Summary: hidden while valid, a single danger callout when there are errors */
.validation-summary-valid { display: none !important; }
.validation-summary-errors {
    display: block; margin: 0 0 20px; padding: 14px 16px 14px 44px; position: relative;
    border: 1px solid #fecdca; border-radius: 12px; background: #fef3f2; color: var(--danger);
    font-size: 14px; line-height: 1.5;
}
.validation-summary-errors::before {
    content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-.9 4.2h1.8v5.6H9.1V5.7Zm0 7.1h1.8v1.8H9.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-.9 4.2h1.8v5.6H9.1V5.7Zm0 7.1h1.8v1.8H9.1v-1.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }
.validation-summary-errors li + li { margin-top: 4px; }

/* Razor wraps field messages in an inner <span>; stop the legacy ".field span" 11px/red rule shrinking it */
.field .field-validation-error span, .field span.validation span { font: inherit; color: inherit; }
/* Keep the dropdown chevron on selects inside .business-form (legacy background shorthand removed it) */
.business-form .field select, .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6b64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px;
    appearance: none; -webkit-appearance: none;
}

/* Enquiry date filter */
.ws-filter-bar.ws-filter-dates { grid-template-columns: repeat(3, minmax(150px, 1fr)) auto auto; margin-bottom: 10px; }
.ws-quick-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ws-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #d6e1da; border-radius: 999px; background: #fff; color: #0b3529; font-size: 13px; font-weight: 600; text-decoration: none; }
.ws-chip:hover { border-color: #0b5d46; }
.ws-result-count { margin-left: auto; font-size: 13px; color: #68766f; }
@media (max-width: 900px) { .ws-filter-bar.ws-filter-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-filter-bar.ws-filter-dates .field:nth-of-type(3) { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ws-filter-bar.ws-filter-dates { grid-template-columns: 1fr 1fr; } .ws-result-count { margin-left: 0; width: 100%; } }