/* ==========================================================================
   WeRescue — unified auth modal (#authModal)
   Paired with templates/authentication/auth-modal.html + js/auth-modal.js.
   Uses the global design tokens (--wr-*) from base.html so light/dark "just
   work". Hand-authored (the SCSS monolith has no build step); load AFTER
   style.css so the scoped overrides below win the cascade.
   ========================================================================== */

.wr-auth-modal {
    /* Auth-only tokens (additive — keeps changes out of the base :root) */
    --wr-coral-deep: #D35E47;
    --wr-auth-card: #ffffff;
    --wr-auth-field: #FBF6F2;
    --wr-auth-line: #ECE3DC;
    --wr-auth-text: var(--wr-text);
    --wr-auth-muted: var(--wr-text-muted);
    --wr-auth-display: 'P22 Mackinac', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Neutralize the legacy global .modal theming (circular reveal, transforms,
   transparent backdrop) for THIS modal only, and repurpose ::before as a
   proper dim backdrop. Pseudo-elements aren't event targets, so Bootstrap's
   click-outside-to-close still works.
   -------------------------------------------------------------------------- */
.wr-auth-modal::before {
    content: "" !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: radial-gradient(85% 85% at 50% 25%, rgba(124, 45, 18, .30), rgba(20, 10, 5, .60)) !important;
    transform: none !important;
    opacity: 0;
    transition: opacity .35s ease !important;
    animation: none !important;
    z-index: 0;
    pointer-events: none;
}
.wr-auth-modal.show::before {
    opacity: 1;
    transform: none !important;
    animation: none !important;
}

.wr-auth-modal .modal-dialog {
    position: relative;
    z-index: 1;
    top: auto !important;
    max-width: 920px;
    width: 100%;
    margin: 1.75rem auto;
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1) !important;
}
.wr-auth-modal.show .modal-dialog {
    top: auto !important;
    opacity: 1;
    transform: none !important;
    transition-delay: 0s !important;
}

.wr-auth-modal .modal-content {
    border: none;
    background: var(--wr-auth-card);
}

/* --------------------------------------------------------------------------
   Split-panel shell
   -------------------------------------------------------------------------- */
.wr-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--wr-auth-card);
    border-radius: var(--wr-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(124, 45, 18, .45);
    max-height: 92vh;
}

/* Emotional aside ---------------------------------------------------------- */
.wr-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 38px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;  /* scope the layered z-indexes below */
    /* Coral gradient is the base AND the graceful fallback if the photo fails. */
    background: linear-gradient(155deg, #F4A393 0%, #E07A5F 48%, #C9513A 100%);
}
/* Hero photo (progressive enhancement over the coral base).
   Two aligned layers (full background + transparent subject cutout) let the
   animated hearts sit BETWEEN them, so they only show in the background. Both
   layers share object-fit/position so they overlay pixel-for-pixel; generate
   the pair with scripts/make_auth_hero.py. */
.wr-auth-photo,
.wr-auth-photo-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Per-image focal point. A different A/B hero may need another value —
       override --wr-auth-photo-pos (e.g. on #authModal) instead of editing this. */
    object-position: var(--wr-auth-photo-pos, 50% 36%);
}
.wr-auth-photo { z-index: 0; }      /* full background photo */
.wr-auth-photo-fg { z-index: 3; }   /* subject cutout — sits ABOVE the hearts */
/* Coral scrim over the photo — dense at top (logo) and bottom (headline/chips),
   light through the middle so the moment shows. Keeps brand + text contrast. */
.wr-auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(177deg,
        rgba(201, 81, 58, .80) 0%,
        rgba(201, 81, 58, .34) 22%,
        rgba(193, 70, 48, .20) 45%,
        rgba(178, 60, 42, .60) 75%,
        rgba(150, 45, 30, .92) 100%);
}
.wr-auth-aside::after {
    z-index: 2;
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 80% 8%, rgba(255, 255, 255, .30), transparent 60%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='none' stroke='white' stroke-opacity='0.2' stroke-width='2.5'><path d='M30 52c-9-9-9-22 0-27 6-3 12 0 15 6 3-6 9-9 15-6 9 5 9 18 0 27L45 70z'/></g></svg>");
    background-size: cover, 150px;
    background-position: 0 0, 0 0;
    mix-blend-mode: overlay;
    pointer-events: none;
    /* Slow seamless drift — the heart tile is 150px, so a 150px travel loops
       invisibly. The radial highlight (first layer) stays put at 0 0. */
    animation: wrHeartsFloat 42s linear infinite;
}
@keyframes wrHeartsFloat {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 150px -150px; }
}
@media (prefers-reduced-motion: reduce) {
    .wr-auth-aside::after { animation: none; }
}
.wr-auth-brand {
    position: relative;
    z-index: 4;
}
.wr-auth-logo {
    display: block;
    height: 46px;
    width: auto;
}
.wr-auth-pitch {
    position: relative;
    z-index: 4;
    margin-top: auto;
}
/* Force white on all aside text — the legacy global h2/p color rules otherwise
   override the inherited white (element selectors beat inheritance). */
.wr-auth-aside,
.wr-auth-aside h1, .wr-auth-aside h2, .wr-auth-aside h3,
.wr-auth-aside p, .wr-auth-aside b, .wr-auth-aside small {
    color: #fff;
}
.wr-auth-aside-head {
    font-family: var(--wr-auth-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -.5px;
    margin: 0 0 14px;
    text-wrap: balance;
}
.wr-auth-aside-sub {
    font-size: 14.5px;
    line-height: 1.6;
    opacity: .96;
    max-width: 34ch;
    margin: 0;
}
.wr-auth-impact {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}
.wr-auth-chip {
    flex: 1;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 14px;
    padding: 10px 12px;
    backdrop-filter: blur(4px);
}
.wr-auth-chip b {
    display: block;
    font-family: var(--wr-auth-display);
    font-size: 21px;
    line-height: 1;
}
.wr-auth-chip small {
    font-size: 11.5px;
    opacity: .9;
    letter-spacing: .2px;
}

/* Form panel --------------------------------------------------------------- */
.wr-auth-panel {
    position: relative;
    padding: 38px 40px;
    overflow-y: auto;
}
.wr-auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: var(--wr-auth-field);
    color: var(--wr-auth-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
    z-index: 2;
}
.wr-auth-close:hover {
    background: var(--wr-warm-peach);
    color: var(--wr-auth-text);
    transform: rotate(90deg);
}

/* Steps -------------------------------------------------------------------- */
.wr-auth-step {
    display: none;
}
.wr-auth-step.is-active {
    display: block;
    animation: wrAuthFade .35s ease;
}
@keyframes wrAuthFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.wr-auth-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wr-coral);
}
.wr-auth-title {
    font-family: var(--wr-auth-display);
    font-weight: 800;
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: -.4px;
    color: var(--wr-auth-text);
    margin: 6px 0 6px;
}
.wr-auth-subtitle {
    color: var(--wr-auth-muted);
    font-size: 14px;
    margin: 0 0 22px;
}
.wr-auth-email-echo {
    color: var(--wr-auth-text);
    font-weight: 600;
}

.wr-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 14px;
    color: var(--wr-auth-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.wr-auth-back:hover { color: var(--wr-coral); }

/* Social buttons ----------------------------------------------------------- */
.wr-auth-social { display: grid; gap: 10px; }
.wr-auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px;
    border: 1px solid var(--wr-auth-line);
    border-radius: 14px;
    background: var(--wr-auth-card);
    color: var(--wr-auth-text);
    font: inherit;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wr-auth-social-btn:hover:not(:disabled) {
    background: var(--wr-auth-field);
    transform: translateY(-1px);
    box-shadow: var(--wr-shadow);
}
.wr-auth-social-btn:disabled { opacity: .55; cursor: default; }
.wr-auth-social-btn svg { width: 19px; height: 19px; flex: none; }

.wr-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: var(--wr-auth-muted);
    font-size: 12px;
}
.wr-auth-divider::before,
.wr-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wr-auth-line);
}

/* Hide social affordances until the social-login PR enables them */
.wr-auth-modal:not([data-social-enabled="true"]) .wr-auth-social,
.wr-auth-modal:not([data-social-enabled="true"]) .wr-auth-divider {
    display: none;
}

/* Floating-label fields ---------------------------------------------------- */
.wr-auth-field {
    position: relative;
    margin-bottom: 14px;
}
.wr-auth-field input {
    width: 100%;
    padding: 22px 16px 8px;
    font: inherit;
    font-size: 15px;
    color: var(--wr-auth-text);
    background: var(--wr-auth-field);
    border: 1.5px solid transparent;
    border-radius: 14px;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wr-auth-field input:focus {
    border-color: var(--wr-coral);
    background: var(--wr-auth-card);
    box-shadow: 0 0 0 4px rgba(224, 122, 95, .15);
}
.wr-auth-field input[type="password"] { padding-right: 64px; }
.wr-auth-field label {
    position: absolute;
    left: 16px;
    top: 15px;
    font-size: 15px;
    color: var(--wr-auth-muted);
    pointer-events: none;
    transform-origin: left;
    transition: transform .18s ease, color .18s ease;
}
.wr-auth-field input:focus + label,
.wr-auth-field input:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(.74);
    color: var(--wr-coral);
}
.wr-auth-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--wr-auth-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.wr-auth-toggle:hover { color: var(--wr-auth-text); background: var(--wr-warm-peach); }

.wr-auth-hint {
    font-size: 12px;
    color: var(--wr-auth-muted);
    margin: -6px 2px 14px;
}
.wr-auth-hint.is-ok { color: var(--wr-success); }

.wr-auth-row-right {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 18px;
    font-size: 13px;
}
.wr-auth-link {
    color: var(--wr-coral);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.wr-auth-link:hover { text-decoration: underline; color: var(--wr-coral); }

/* Checkboxes --------------------------------------------------------------- */
.wr-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--wr-auth-muted);
    cursor: pointer;
}
.wr-auth-check input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--wr-coral);
}
.wr-auth-check a { color: var(--wr-coral); text-decoration: none; }
.wr-auth-check a:hover { text-decoration: underline; }

/* Primary CTA -------------------------------------------------------------- */
.wr-auth-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px;
    margin-top: 4px;
    border: none;
    border-radius: 14px;
    font: inherit;
    font-weight: 600;
    font-size: 15.5px;
    color: #fff;
    background: linear-gradient(135deg, var(--wr-coral), var(--wr-coral-deep));
    box-shadow: 0 10px 24px -6px rgba(224, 122, 95, .6);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.wr-auth-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -8px rgba(224, 122, 95, .7);
}
.wr-auth-cta:active:not(:disabled) { transform: translateY(0); }
.wr-auth-cta:disabled { opacity: .5; cursor: default; box-shadow: none; }
.wr-auth-spin {
    display: none;
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wrAuthSpin .7s linear infinite;
}
.wr-auth-cta.is-loading .wr-auth-spin { display: inline-block; }
.wr-auth-cta.is-loading .wr-auth-cta-label { opacity: .85; }
@keyframes wrAuthSpin { to { transform: rotate(360deg); } }

/* Messages ----------------------------------------------------------------- */
.wr-auth-error,
.wr-auth-success {
    font-size: 13px;
    margin: 0 2px 12px;
    line-height: 1.4;
}
.wr-auth-error:empty,
.wr-auth-success:empty { margin: 0; }
.wr-auth-error { color: #DC2626; }
.wr-auth-success { color: var(--wr-success); }

.wr-auth-social-fallback {
    font-size: 13px;
    color: var(--wr-auth-muted);
    line-height: 1.5;
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Toast (login/logout confirmations) — created by auth-modal.js
   -------------------------------------------------------------------------- */
.wr-toast {
    position: fixed;
    z-index: 1100;            /* above Bootstrap modal/backdrop */
    left: 50%;
    bottom: 24px;
    max-width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px 13px 16px;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-family: Roboto, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.wr-toast::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wr-coral);
    flex: none;
}
.wr-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Mobile → bottom sheet
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .wr-auth-modal .modal-dialog {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        margin: 0;
        max-width: none;
        width: 100%;
        min-height: 0 !important;  /* defeat .modal-dialog-centered full-height */
        display: block;
        transform: translateY(100%);
    }
    .wr-auth-modal.show .modal-dialog { transform: none !important; }
    .wr-auth {
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 94vh;
    }
    .wr-auth-aside { display: none; }
    .wr-auth-panel { padding: 26px 22px 30px; }
    .wr-auth-panel::before {
        content: "";
        display: block;
        width: 42px;
        height: 5px;
        margin: -8px auto 16px;
        border-radius: 999px;
        background: var(--wr-auth-line);
    }
    .wr-auth-title { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Dark mode (the site uses prefers-color-scheme, not a data-attribute)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .wr-auth-modal {
        --wr-auth-card: #16213e;
        --wr-auth-field: #1f2a44;
        --wr-auth-line: #2a3656;
        --wr-auth-text: #f0f0f0;
        --wr-auth-muted: #9CA3AF;
    }
    .wr-auth { box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .7); }
    .wr-auth-field input:focus { box-shadow: 0 0 0 4px rgba(244, 163, 147, .18); }
    .wr-auth-toggle:hover,
    .wr-auth-close:hover { background: rgba(244, 163, 147, .14); }
    .wr-auth-error { color: #FCA5A5; }
}