/* ============================================================================
   ZuilerCare — "Botanical Luxe" design system
   Emerald-forward wellness marketplace. Fraunces (display) + Plus Jakarta Sans.
   Loaded after Bootstrap so component overrides win by source order.
   ============================================================================ */

:root {
    --zc-bg: #FBFAF6;
    --zc-surface: #FFFFFF;
    --zc-ink: #14251E;
    --zc-ink-2: #4A5952;
    --zc-ink-3: #7C8981;
    --zc-line: #E9E5DA;
    --zc-line-2: #F0ECE2;

    --zc-primary: #0E6B4F;
    --zc-primary-2: #0A5540;
    --zc-primary-tint: #E7F0EA;

    --zc-accent: #FF6B4A;
    --zc-accent-2: #F0512E;
    --zc-accent-tint: #FFE9E2;

    --zc-gold: #E0A82E;

    --zc-hero-1: #0F6E51;
    --zc-hero-2: #0A3F31;

    --zc-r-sm: 10px;
    --zc-r: 16px;
    --zc-r-lg: 24px;
    --zc-r-xl: 32px;
    --zc-pill: 999px;

    --zc-shadow-sm: 0 1px 2px rgba(20, 37, 30, .05);
    --zc-shadow: 0 2px 6px rgba(20, 37, 30, .05), 0 14px 34px -18px rgba(20, 37, 30, .22);
    --zc-shadow-lg: 0 30px 70px -30px rgba(10, 63, 49, .45);

    --zc-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --zc-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --zc-maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--zc-sans);
    color: var(--zc-ink);
    background: var(--zc-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, .zc-display {
    font-family: var(--zc-display);
    font-optical-sizing: auto;
    font-weight: 560;
    letter-spacing: -0.02em;
    color: var(--zc-ink);
    line-height: 1.05;
}

a { color: var(--zc-primary); text-decoration: none; }
a:hover { color: var(--zc-primary-2); }

.zc-eyebrow {
    font-family: var(--zc-sans);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zc-primary);
}

.zc-muted { color: var(--zc-ink-2); }
.zc-lede { font-size: 1.15rem; line-height: 1.6; color: var(--zc-ink-2); }

/* ---------- App shell ---------------------------------------------------- */
.zc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.zc-container { width: 100%; max-width: var(--zc-maxw); margin-inline: auto; padding-inline: 24px; }
.zc-main { flex: 1 0 auto; }
.zc-section { padding-block: 72px; }

/* ---------- Top navigation ---------------------------------------------- */
.zc-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--zc-bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--zc-line);
}
.zc-nav-inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.zc-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--zc-display); font-weight: 600; font-size: 1.3rem; color: var(--zc-ink); }
.zc-brand:hover { color: var(--zc-ink); }
.zc-brand-mark {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    background: radial-gradient(120% 120% at 30% 20%, #1F8C67 0, var(--zc-primary) 45%, var(--zc-primary-2) 100%);
    color: #fff; box-shadow: var(--zc-shadow-sm);
}
.zc-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.zc-nav-link {
    padding: 8px 14px; border-radius: var(--zc-pill); color: var(--zc-ink-2);
    font-weight: 550; font-size: .94rem; transition: background .15s, color .15s;
}
.zc-nav-link:hover { background: var(--zc-primary-tint); color: var(--zc-primary-2); }
.zc-nav-link.active { color: var(--zc-primary-2); background: var(--zc-primary-tint); }
.zc-nav-spacer { flex: 1; }

/* ---------- Buttons (also override Bootstrap) --------------------------- */
.zc-btn, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--zc-sans); font-weight: 650; font-size: .95rem; line-height: 1;
    padding: 12px 20px; border-radius: var(--zc-pill); border: 1px solid transparent;
    cursor: pointer; transition: transform .12s ease, background .15s, box-shadow .15s, color .15s;
}
.zc-btn:active, .btn:active { transform: translateY(1px); }

.btn-primary, .zc-btn-primary {
    background: var(--zc-primary); border-color: var(--zc-primary); color: #fff;
    box-shadow: 0 10px 20px -12px rgba(14, 107, 79, .8);
}
.btn-primary:hover, .zc-btn-primary:hover { background: var(--zc-primary-2); border-color: var(--zc-primary-2); color: #fff; }

.zc-btn-accent { background: var(--zc-accent); border-color: var(--zc-accent); color: #fff; box-shadow: 0 12px 24px -12px rgba(255, 107, 74, .7); }
.zc-btn-accent:hover { background: var(--zc-accent-2); border-color: var(--zc-accent-2); color: #fff; }

.btn-outline-primary, .zc-btn-ghost {
    background: transparent; border-color: var(--zc-line); color: var(--zc-ink);
}
.btn-outline-primary:hover, .zc-btn-ghost:hover { background: var(--zc-surface); border-color: var(--zc-primary); color: var(--zc-primary-2); }

.btn-outline-secondary { background: transparent; border-color: var(--zc-line); color: var(--zc-ink); }
.btn-outline-secondary:hover { background: var(--zc-surface); border-color: var(--zc-ink); color: var(--zc-ink); }

.btn-success { background: var(--zc-primary); border-color: var(--zc-primary); color: #fff; }
.btn-success:hover { background: var(--zc-primary-2); border-color: var(--zc-primary-2); }
.btn-danger { background: var(--zc-accent-2); border-color: var(--zc-accent-2); color: #fff; }
.btn-warning { background: var(--zc-gold); border-color: var(--zc-gold); color: #3a2c05; }

.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn:disabled, .zc-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.zc-btn-block { width: 100%; }

/* ---------- Forms -------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .9rem; color: var(--zc-ink); margin-bottom: 6px; }
.form-control, .form-select {
    width: 100%; font-family: var(--zc-sans); font-size: .98rem; color: var(--zc-ink);
    background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-r-sm);
    padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--zc-ink-3); }
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--zc-primary);
    box-shadow: 0 0 0 4px var(--zc-primary-tint);
}

/* ---------- Cards -------------------------------------------------------- */
.card, .zc-card {
    background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-r-lg);
    box-shadow: var(--zc-shadow-sm); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card-body { padding: 24px; }
.card-footer { padding: 16px 24px; border-top: 1px solid var(--zc-line-2); background: transparent; }
.card-title { font-family: var(--zc-display); font-weight: 560; font-size: 1.22rem; }
.card-subtitle { font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: var(--zc-ink-3); }
.zc-card-hover:hover, .card.zc-card-hover:hover { transform: translateY(-4px); box-shadow: var(--zc-shadow); border-color: color-mix(in srgb, var(--zc-primary) 30%, var(--zc-line)); }

/* ---------- Chips / badges --------------------------------------------- */
.zc-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--zc-pill);
    background: var(--zc-surface); border: 1px solid var(--zc-line); color: var(--zc-ink);
    font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.zc-chip:hover { border-color: var(--zc-primary); color: var(--zc-primary-2); background: var(--zc-primary-tint); }
.zc-chip.active { background: var(--zc-ink); border-color: var(--zc-ink); color: #fff; }

.badge {
    font-family: var(--zc-sans); font-weight: 650; font-size: .74rem; letter-spacing: .02em;
    padding: 5px 11px; border-radius: var(--zc-pill);
}
.text-bg-success { background: var(--zc-primary-tint) !important; color: var(--zc-primary-2) !important; }
.text-bg-danger { background: var(--zc-accent-tint) !important; color: var(--zc-accent-2) !important; }
.text-bg-warning { background: #FBF0D3 !important; color: #7a5b06 !important; }
.text-bg-secondary { background: var(--zc-line-2) !important; color: var(--zc-ink-2) !important; }
.text-bg-info { background: #E4EEF6 !important; color: #245b86 !important; }

/* ---------- Hero -------------------------------------------------------- */
.zc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 90% at 85% -10%, rgba(255, 107, 74, .34) 0, transparent 55%),
        radial-gradient(100% 120% at 0% 110%, rgba(224, 168, 46, .22) 0, transparent 50%),
        linear-gradient(155deg, var(--zc-hero-1) 0%, var(--zc-hero-2) 100%);
}
.zc-hero::after {
    content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2px),
                      radial-gradient(circle at 70% 60%, #fff 0 1.5px, transparent 2px);
    background-size: 46px 46px, 62px 62px;
}
.zc-hero-inner { position: relative; z-index: 1; padding-block: 96px; }
.zc-hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; max-width: 15ch; }
.zc-hero h1 em { font-style: italic; color: #FFD9CB; }
.zc-hero p { color: rgba(255, 255, 255, .86); font-size: 1.18rem; max-width: 46ch; margin-top: 18px; }

/* floating search */
.zc-search {
    margin-top: 34px; background: var(--zc-surface); border-radius: var(--zc-pill);
    box-shadow: var(--zc-shadow-lg); padding: 8px; display: flex; align-items: center; gap: 6px;
    max-width: 720px;
}
.zc-search-field { flex: 1; display: flex; flex-direction: column; padding: 6px 18px; min-width: 0; }
.zc-search-field + .zc-search-field { border-left: 1px solid var(--zc-line); }
.zc-search-field label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zc-ink-3); }
.zc-search-field input { border: none; outline: none; font-family: var(--zc-sans); font-size: 1rem; color: var(--zc-ink); background: transparent; padding: 2px 0; }
.zc-search-field input::placeholder { color: var(--zc-ink-3); }
.zc-search .zc-btn-primary { flex: 0 0 auto; padding: 15px 26px; }

.zc-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.zc-hero-chips .zc-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(4px); }
.zc-hero-chips .zc-chip:hover { background: #fff; color: var(--zc-primary-2); border-color: #fff; }

/* ---------- Section headers -------------------------------------------- */
.zc-section-head { max-width: 640px; margin-bottom: 36px; }
.zc-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 10px 0 0; }
.zc-section-head p { margin-top: 12px; }

/* ---------- Business cards (marketplace) ------------------------------- */
.zc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.zc-biz { display: flex; flex-direction: column; }
.zc-biz-cover { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center; }
.zc-biz-cover span { font-family: var(--zc-display); font-size: 2.6rem; color: rgba(255, 255, 255, .92); font-weight: 560; }
.zc-biz-cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--zc-ink); font-weight: 650; font-size: .74rem; letter-spacing: .02em; padding: 5px 12px; border-radius: var(--zc-pill); }
.zc-biz-body { padding: 18px 20px 22px; }
.zc-biz-body h3 { font-size: 1.2rem; margin: 0; }
.zc-biz-loc { color: var(--zc-ink-2); font-size: .92rem; margin-top: 4px; }
.zc-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-size: .9rem; color: var(--zc-ink); margin-top: 12px; }
.zc-rating .star { color: var(--zc-gold); }
.zc-rating .count { color: var(--zc-ink-3); font-weight: 500; }

/* ---------- Feature / value cards -------------------------------------- */
.zc-feature { padding: 28px; height: 100%; }
.zc-feature .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--zc-primary-tint); color: var(--zc-primary-2); font-size: 1.4rem; margin-bottom: 16px; }
.zc-feature h3 { font-size: 1.24rem; margin: 0 0 8px; }
.zc-feature p { color: var(--zc-ink-2); margin: 0; line-height: 1.55; }

/* ---------- Auth / centered panels ------------------------------------- */
.zc-panel { max-width: 460px; margin: 56px auto; background: var(--zc-surface); border: 1px solid var(--zc-line); border-radius: var(--zc-r-xl); box-shadow: var(--zc-shadow); padding: 40px; }
.zc-panel h1 { font-size: 2rem; }

/* ---------- Tables ------------------------------------------------------ */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table thead th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zc-ink-3); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--zc-line); text-align: left; }
.table tbody td { padding: 16px; border-bottom: 1px solid var(--zc-line-2); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--zc-primary-tint) 40%, transparent); }

/* ---------- Alerts ------------------------------------------------------ */
.alert { border-radius: var(--zc-r); padding: 14px 18px; border: 1px solid transparent; font-weight: 500; }
.alert-danger { background: var(--zc-accent-tint); border-color: color-mix(in srgb, var(--zc-accent) 40%, transparent); color: var(--zc-accent-2); }
.alert-success { background: var(--zc-primary-tint); border-color: color-mix(in srgb, var(--zc-primary) 30%, transparent); color: var(--zc-primary-2); }
.alert-warning { background: #FBF0D3; border-color: #ecd28a; color: #7a5b06; }

/* ---------- Pricing ----------------------------------------------------- */
.zc-price { font-family: var(--zc-display); font-size: 2.4rem; font-weight: 560; color: var(--zc-ink); }
.zc-price small { font-family: var(--zc-sans); font-size: .95rem; font-weight: 500; color: var(--zc-ink-3); }
.zc-plan-featured { border-color: var(--zc-primary); box-shadow: var(--zc-shadow); position: relative; }
.zc-plan-featured::before { content: "Most popular"; position: absolute; top: 16px; right: 16px; background: var(--zc-accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: var(--zc-pill); }

/* ---------- Footer ------------------------------------------------------ */
.zc-footer { background: var(--zc-ink); color: rgba(255,255,255,.72); margin-top: 24px; }
.zc-footer-inner { padding-block: 44px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.zc-footer .zc-brand, .zc-footer .zc-brand:hover { color: #fff; }
.zc-footer a { color: rgba(255,255,255,.72); }
.zc-footer a:hover { color: #fff; }
.zc-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Utilities --------------------------------------------------- */
.zc-stack-sm > * + * { margin-top: 10px; }
.zc-list-check { list-style: none; padding: 0; margin: 18px 0 0; }
.zc-list-check li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--zc-ink-2); }
.zc-list-check li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .82em; position: absolute; left: 0; top: .18em; color: var(--zc-primary); }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 860px) {
    .zc-nav-links { display: none; }
    .zc-hero-inner { padding-block: 64px; }
    .zc-search { flex-wrap: wrap; border-radius: var(--zc-r-lg); }
    .zc-search-field + .zc-search-field { border-left: none; }
    .zc-search .zc-btn-primary { width: 100%; }
    .zc-section { padding-block: 52px; }
}

/* ---------- A11y -------------------------------------------------------- */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--zc-primary) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Blazor framework bits (kept) ------------------------------- */
.validation-message { color: var(--zc-accent-2); font-size: .86rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--zc-primary); }
.invalid { outline: 1px solid var(--zc-accent-2); }

#blazor-error-ui {
    color-scheme: light; background: #fff; box-shadow: var(--zc-shadow); position: fixed;
    bottom: 0; left: 0; right: 0; padding: 12px 20px; display: none; z-index: 1000; border-top: 3px solid var(--zc-accent);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }

.blazor-error-boundary { background: var(--zc-accent-2); padding: 1rem; color: white; border-radius: var(--zc-r); }
.blazor-error-boundary::after { content: "An error has occurred." }

/* ---------- Font Awesome icons ----------------------------------------- */
/* Vendored Font Awesome Free 6.7.2 (see wwwroot/lib/fontawesome). Glyphs inherit
   currentColor + font-size, so the Botanical Luxe palette themes them for free. */
.zc-btn i, .btn i { margin-right: .5em; }
.zc-btn i:only-child, .btn i:only-child { margin-right: 0; }
.zc-brand-mark i { font-size: .95em; line-height: 1; }
.zc-nav-link i { margin-right: 7px; font-size: .85em; opacity: .85; }
.form-label i { color: var(--zc-primary); margin-right: 8px; width: 1em; text-align: center; }
.zc-biz-loc i { color: var(--zc-primary); margin-right: 6px; }
.zc-contact i { color: var(--zc-primary); margin-right: 9px; width: 1em; text-align: center; }
.zc-empty-ico { display: block; font-size: 2.4rem; color: var(--zc-ink-3); margin-bottom: 14px; }