/* ===================================================================
   Canadian Tax Marketplace — Brand theme overlay
   Loaded AFTER the base theme CSS in every layout head. Visual only —
   no markup/behaviour depends on this file.

   Palette (businesslounge theme — red / charcoal / white):
     Red      #D62930  primary  — buttons, links, accents, hero overlays
     Charcoal #15171A  ink      — text, dark sections, footer
     White    #FFFFFF  canvas   + grey #F6F7F9 for section alternation
     Green    #1F9D55  reserved ONLY for the "Verified" trust signal
   !important on the brand variables is deliberate: the layouts set
   --bs-primary inline from the DB via JS, and !important is the only way
   a stylesheet beats an inline (non-important) custom property.
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
    --ca-red: #D62930;
    --ca-red-dark: #B11F26;
    --ca-btn: #8B2A2E;        /* charcoal-red — button fills */
    --ca-btn-dark: #6E2125;
    --ca-ink: #15171A;
    --ca-ink-2: #23262B;
    --ca-grey: #F6F7F9;
    --ca-muted: #5A6472;
    --ca-green: #1F9D55;

    /* Primary = red. Beat the inline JS that sets these from the DB. */
    --bs-primary: #D62930 !important;
    --bs-primary-rgb: 214, 41, 48 !important;
    --bs-primary-bg-subtle: rgba(214, 41, 48, 0.08) !important;
    --bs-primary-border-subtle: rgba(214, 41, 48, 0.22) !important;
    --bs-link-color: #D62930 !important;
    --bs-link-color-rgb: 214, 41, 48 !important;
    --bs-link-hover-color: #B11F26 !important;
    --bs-body-color: #23262B !important;
}

/* ── Primary = red ────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--ca-btn);
    --bs-btn-border-color: var(--ca-btn);
    --bs-btn-hover-bg: var(--ca-btn-dark);
    --bs-btn-hover-border-color: var(--ca-btn-dark);
    --bs-btn-active-bg: var(--ca-btn-dark);
    --bs-btn-active-border-color: var(--ca-btn-dark);
    --bs-btn-disabled-bg: var(--ca-btn);
    --bs-btn-disabled-border-color: var(--ca-btn);
    background-color: var(--ca-btn) !important;
    border-color: var(--ca-btn) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--ca-btn-dark) !important;
    border-color: var(--ca-btn-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--ca-btn);
    --bs-btn-border-color: var(--ca-btn);
    --bs-btn-hover-bg: var(--ca-btn);
    --bs-btn-hover-border-color: var(--ca-btn);
    --bs-btn-active-bg: var(--ca-btn);
    color: var(--ca-btn);
    border-color: var(--ca-btn);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ca-btn) !important;
    border-color: var(--ca-btn) !important;
    color: #fff !important;
}

.bg-primary { background-color: rgba(214, 41, 48, var(--bs-bg-opacity, 1)) !important; }
.text-primary { color: var(--ca-red) !important; }
.border-primary { border-color: var(--ca-red) !important; }
.link-primary { color: var(--ca-red) !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: rgba(214, 41, 48, var(--bs-bg-opacity, 1)) !important; }

/* Charcoal "dark" surfaces */
.bg-dark { background-color: var(--ca-ink) !important; }
.btn-dark {
    --bs-btn-bg: var(--ca-ink);
    --bs-btn-border-color: var(--ca-ink);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    background-color: var(--ca-ink) !important;
    border-color: var(--ca-ink) !important;
}

/* Tabs / pills (register Firm/Staff tabs) — charcoal, not red, for legible text */
.nav-pills .nav-link { color: var(--ca-ink); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ca-ink) !important;
    color: #fff !important;
}
.nav-tabs .nav-link.active { color: var(--ca-ink) !important; border-bottom-color: var(--ca-red) !important; }

/* Form focus ring → red */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ca-red) !important;
    box-shadow: 0 0 0 0.2rem rgba(214, 41, 48, 0.18) !important;
}
.form-check-input:checked { background-color: var(--ca-red) !important; border-color: var(--ca-red) !important; }

/* Pagination active */
.page-item.active .page-link { background-color: var(--ca-red) !important; border-color: var(--ca-red) !important; }
.page-link { color: var(--ca-red); }

/* ── Verified / success = green (the one reserved exception) ──────── */
.bg-success { background-color: rgba(31, 157, 85, var(--bs-bg-opacity, 1)) !important; }
.text-success { color: var(--ca-green) !important; }
.badge.bg-success, .badge.text-bg-success { background-color: rgba(31, 157, 85, var(--bs-bg-opacity, 1)) !important; }
.btn-success {
    --bs-btn-bg: var(--ca-green);
    --bs-btn-border-color: var(--ca-green);
    --bs-btn-hover-bg: #18803f;
    --bs-btn-hover-border-color: #18803f;
    background-color: var(--ca-green) !important;
    border-color: var(--ca-green) !important;
}

/* ── Danger = a deeper red so destructive ≠ primary ───────────────── */
.btn-danger {
    --bs-btn-bg: #B11F26;
    --bs-btn-border-color: #B11F26;
    --bs-btn-hover-bg: #8E1820;
    --bs-btn-hover-border-color: #8E1820;
    background-color: #B11F26 !important;
    border-color: #B11F26 !important;
}
.text-danger { color: #B11F26 !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: #B11F26 !important; }

/* Primary call-to-action button (red) — opt-in via .btn-ca */
.btn-ca {
    background-color: var(--ca-btn);
    border: 1px solid var(--ca-btn);
    color: #fff;
    font-weight: 600;
}
.btn-ca:hover, .btn-ca:focus { background-color: var(--ca-btn-dark); border-color: var(--ca-btn-dark); color: #fff; }

.ca-maple { color: var(--ca-red); }

/* ── Split-screen auth brand panel ────────────────────────────────── */
.auth-brand-panel {
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 480px;
}
.auth-brand-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    width: 100%;
}
.auth-brand-inner h2 {
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    font-size: 1.55rem;
    margin: 1.5rem 0 1.75rem;
}
.auth-brand-points { list-style: none; padding: 0; margin: 0; }
.auth-brand-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.45rem 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.97rem;
}
.auth-brand-points li i { color: #FF6B6B; margin-top: 0.2rem; width: 1.2rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   Design system — typography, buttons, cards, forms
   (Roboto type, soft shadows) on the red/charcoal/white brand.
═══════════════════════════════════════════════════════════════════ */

/* ── Typography (Roboto) ───────────────────────────────────────────── */
body,
.btn, .form-control, .form-select, .nav, .dropdown-menu,
input, textarea, select, button, .badge, .card {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    letter-spacing: -0.012em;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
}
.eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.78rem; font-weight: 700; color: var(--ca-red);
}
.text-slate { color: var(--ca-muted) !important; }
.link-ink, .link-ink:hover, .link-ink:focus { color: #15171A !important; }

/* ── Buttons — refined, with a subtle lift (no padding override) ──── */
.btn {
    border-radius: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { border-radius: 0.7rem; padding: 0.8rem 1.9rem; font-size: 1.03rem; }
.btn-primary { box-shadow: 0 6px 18px rgba(139, 42, 46, 0.26); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(139, 42, 46, 0.36); }
.btn-ca { box-shadow: 0 6px 18px rgba(139, 42, 46, 0.26); }
.btn-ca:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(139, 42, 46, 0.36); }

/* ── Cards — softer, rounded, gentle elevation ────────────────────── */
.card {
    border: 1px solid rgba(5, 18, 41, 0.06);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(5, 18, 41, 0.05);
}
.card.shadow-sm, .shadow-sm { box-shadow: 0 8px 28px rgba(5, 18, 41, 0.07) !important; }
.card.shadow, .shadow { box-shadow: 0 16px 48px rgba(5, 18, 41, 0.10) !important; }

/* ── Forms — rounded, comfortable inputs ──────────────────────────── */
.form-control, .form-select {
    border-radius: 0.55rem;
    border-color: #DFE5EC;
}

/* ── Section rhythm helper for public pages ───────────────────────── */
.section-pad { padding: 5rem 0; }
@media (max-width: 768px) { .section-pad { padding: 3rem 0; } }

/* ── Storefront nav bar ───────────────────────────────────────────── */
.iq-navbar {
    background: #fff !important;
    box-shadow: 0 2px 18px rgba(5, 18, 41, 0.07);
}
.iq-navbar .iq-nav-menu .nav-link,
.horizontal-nav .iq-nav-menu .nav-link {
    color: #23262B !important;
    font-weight: 600;
    transition: color 0.15s ease;
}
.iq-navbar .iq-nav-menu .nav-link:hover,
.iq-navbar .iq-nav-menu .nav-link.active,
.horizontal-nav .iq-nav-menu .nav-link:hover,
.horizontal-nav .iq-nav-menu .nav-link.active {
    color: var(--ca-red) !important;
}