/*
 * Agency-branded chrome for public-facing pages (login, password reset,
 * agency landing). Loaded conditionally when the agency has a public
 * background OR a public theme selected. Dark monochrome shell: true-black
 * body, #181818 cards, accent colour driven per-theme.
 *
 * Page-specific layout (landing hero / rail) lives inline in the page
 * template. The agency background image, if set, is injected via
 * j2.agency_branded_head.inc.html and overrides the body bg.
 */

:root {
    --ab-bg: #0a0a0a;
    --ab-bg-elev: #141414;
    --ab-card: #181818;
    --ab-card-hover: #232323;
    --ab-overlay: rgba(0, 0, 0, 0.55);
    --ab-glass: rgba(20, 20, 20, 0.72);
    --ab-glass-card: rgba(24, 24, 24, 0.78);
    --ab-border: rgba(255, 255, 255, 0.10);
    --ab-border-hover: rgba(255, 255, 255, 0.30);
    --ab-text: #ffffff;
    --ab-text-soft: #d2d2d2;
    --ab-text-muted: #8c8c8c;
    --ab-accent: #e50914;
    --ab-accent-hover: #f6121d;
    --ab-radius-sm: 4px;
    --ab-radius-md: 6px;
    --ab-radius-lg: 8px;
    --ab-radius-pill: 999px;
    --ab-text-shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.7);
    --ab-text-shadow-soft: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* ── Body chrome ── */
body.agency-branded {
    background: var(--ab-bg);
    color: var(--ab-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Logo image is rendered at intrinsic 400px wide via inline style; cap it
   to its container so it doesn't overflow on narrow phones (cutting off
   the "App" suffix). */
body.agency-branded .logo-main {
    max-width: 100% !important;
    height: auto;
}

/* Top + bottom fade overlay on auth pages (login, password reset) when
   an agency public_background image is loaded. Mirrors the gradient
   treatment used on the landing hero so the card pops and the
   Copyright footer stays legible against busy photographic bgs. The
   landing page (.al-landing) handles its own per-section gradients,
   so it's excluded; same for the no-image fallback (mesh gradient). */
body.agency-branded:not(.al-landing):not(.agency-branded--no-image)::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.20) 18%,
            rgba(0,0,0,0.20) 65%,
            rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 0;
}
body.agency-branded:not(.al-landing):not(.agency-branded--no-image) > * {
    position: relative;
    z-index: 1;
}

/* On mobile the auth row's `min-vh-100` (100vh) plus the copyright row
   below it overflows the viewport. Cap the row so the form + footer fit
   on one screen, while keeping desktop centring untouched. */
@media (max-width: 575.98px) {
    body.agency-branded > main .row.min-vh-100 {
        min-height: calc(100vh - 96px) !important;
    }
    body.agency-branded > main .row.py-6 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* When the page wants a branded card but the agency has NOT uploaded a
   public_background image, fall back to Falcon's light page chrome — and
   intensify the auth card (solid dark, no glass) so it actually pops on
   the light background instead of looking washed out. */
body.agency-branded.agency-branded--no-image {
    /* Cool monochrome slate-blue mesh — single hue family in 4 soft blobs.
       Reads as quiet / premium / corporate (Apple, Linear, Vercel) without
       the warm-rainbow energy of a multi-hue mesh. */
    background:
        radial-gradient(at 18% 22%, hsla(218, 70%, 86%, 0.55) 0, transparent 52%),
        radial-gradient(at 82% 18%, hsla(208, 55%, 90%, 0.45) 0, transparent 50%),
        radial-gradient(at 76% 82%, hsla(225, 60%, 88%, 0.50) 0, transparent 52%),
        radial-gradient(at 12% 88%, hsla(212, 50%, 92%, 0.55) 0, transparent 50%),
        #f6f8fc;
    color: #5e6e82;
}
body.agency-branded.agency-branded--no-image > .container.mt-n4 {
    color: #5e6e82;
    text-shadow: none;
}
body.agency-branded.agency-branded--no-image > .container.mt-n4 a {
    color: #2c7be5;
    text-decoration: underline;
}
body.agency-branded.agency-branded--no-image > .container.mt-n4 a:hover {
    color: #2c7be5;
    opacity: 0.85;
}
body.agency-branded.agency-branded--no-image .card {
    background: #2a3140;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(15, 25, 50, 0.16), 0 4px 12px rgba(15, 25, 50, 0.08);
}
body.agency-branded.agency-branded--no-image .card .form-control {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
}
body.agency-branded.agency-branded--no-image .card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
body.agency-branded.agency-branded--no-image .card .form-control:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
}
body.agency-branded.agency-branded--no-image .card .position-relative.mt-4::before,
body.agency-branded.agency-branded--no-image .card .position-relative.mt-4::after {
    background: rgba(255, 255, 255, 0.22);
}
body.agency-branded.agency-branded--no-image .card .divider-content-center {
    color: rgba(255, 255, 255, 0.7) !important;
}
body.agency-branded.agency-branded--no-image .card .btn-outline-light {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
}
body.agency-branded.agency-branded--no-image .card .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.50);
}
body.agency-branded.agency-branded--no-image .card a:not(.btn) {
    color: rgba(255, 255, 255, 0.78);
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
body.agency-branded.agency-branded--no-image .card a:not(.btn):hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* ── Footer copyright (Falcon's `.container.mt-n4`) ──
   Sits over a photographic bg + bottom-fade overlay; needs decent
   weight + a soft text-shadow so it never gets lost on busy images. */
body.agency-branded > .container.mt-n4 {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.45);
}
body.agency-branded > .container.mt-n4 a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    text-underline-offset: 2px;
}
body.agency-branded > .container.mt-n4 a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* ── Auth form card (login, password reset). Sits on a dimmed billboard,
   so it keeps a soft, premium glass treatment — round corners, lighter
   translucent fill, gentle shadow. ─────────────────────────────────────── */
body.agency-branded .card {
    background: rgba(20, 20, 22, 0.55);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    color: var(--ab-text);
}
body.agency-branded .card-body { padding: 36px 32px !important; }
body.agency-branded .card h5 {
    color: var(--ab-text);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
body.agency-branded .card p,
body.agency-branded .card .text-secondary {
    color: var(--ab-text-soft) !important;
    font-size: 14px;
}

/* Inline text links inside the auth card (e.g. "Forgot password?", terms
   links). Falcon's default blue gets lost on the dark glass surface.
   `:not(.btn)` keeps button-shaped links (Google, etc.) un-underlined. */
body.agency-branded .card a:not(.btn) {
    color: var(--ab-text-soft);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
body.agency-branded .card a:not(.btn):hover,
body.agency-branded .card a:not(.btn):focus {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.7);
}

/* Inputs */
body.agency-branded .card .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ab-text);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s;
}
body.agency-branded .card .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ab-border-hover);
    box-shadow: none;
    color: var(--ab-text);
}
body.agency-branded .card .form-control::placeholder { color: var(--ab-text-muted); }

/* Primary button — neutral white pill (matches the hero CTA on landing).
   Stays consistent across all themes since the card lives over an
   uploaded background image and a coloured button competes with it. */
body.agency-branded .card .btn-primary {
    background: #fff;
    color: #111;
    border: none;
    border-radius: var(--ab-radius-pill);
    padding: 12px 24px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
body.agency-branded .card .btn-primary:hover,
body.agency-branded .card .btn-primary:focus,
body.agency-branded .card .btn-primary:active {
    background: #fff !important;
    color: #111 !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

/* Outline button (Google etc) */
body.agency-branded .card .btn-outline-light {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ab-radius-pill);
    padding: 10px 24px;
    color: var(--ab-text);
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
body.agency-branded .card .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
}

/* Divider — text flanked by two lines, no overlap */
body.agency-branded .card .position-relative.mt-4 {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.agency-branded .card .position-relative.mt-4::before,
body.agency-branded .card .position-relative.mt-4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ab-border);
}
body.agency-branded .card .position-relative hr { display: none !important; }
body.agency-branded .card .divider-content-center {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    color: var(--ab-text-muted) !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0;
    white-space: nowrap;
}