/* ── Anim/al PWA — Mobile-First Global Styles ───────────────────── */
:root {
    /* Brand palette — "Anim/al" (mint + navy + warm coral, shelter-pet adoption).
       The --pawly-green* names hold the mint action colors; --pawly-navy
       holds the deep brand navy; --pawly-coral* is the warm secondary accent
       used sparingly for CTAs, highlights, hero treatments and like states. */

    /* Mint scale */
    --pawly-mint-50:  #F0F8F4;
    --pawly-mint-100: #E6F2EC;
    --pawly-mint-200: #C9E6D7;
    --pawly-mint-300: #A6D6BE;
    --pawly-mint-400: #85C8AF;
    --pawly-mint-500: #5FAE8E;
    --pawly-mint-600: #4F9379;
    --pawly-mint-700: #3E7763;
    --pawly-mint-800: #2F5A4B;
    --pawly-mint-900: #213F35;

    --pawly-green: #5FAE8E;        /* primary action — tuned mint (AA on white) */
    --pawly-green-dark: #4F9379;   /* hover / pressed */
    --pawly-green-light: #85C8AF;  /* brand mint accent */
    --pawly-green-bg: #E6F2EC;     /* mint tint (chips, initials, hovers) */

    /* Navy scale */
    --pawly-navy-50:  #EEF1F6;
    --pawly-navy-100: #D6DCE8;
    --pawly-navy-200: #AEB9CE;
    --pawly-navy-300: #7E8DAC;
    --pawly-navy-400: #56678C;
    --pawly-navy-500: #3B4D74;
    --pawly-navy-600: #29395E;
    --pawly-navy-700: #1E2B47;
    --pawly-navy-800: #161F33;
    --pawly-navy-900: #0F1626;
    --pawly-navy: #29395E;         /* brand navy */
    --pawly-navy-dark: #1E2B47;    /* darker navy (splash gradient end) */

    /* Coral — warm secondary accent */
    --pawly-coral: #FF7A66;
    --pawly-coral-dark: #ED5E48;   /* AA-safe coral for small text on light */
    --pawly-coral-light: #FF9C8C;
    --pawly-coral-bg: #FFE3DC;     /* coral tint (chips, highlights) */

    /* Surfaces & canvas — bg ≠ surface so cards lift off the page */
    --pawly-bg: #F6F8F7;           /* soft off-white app canvas */
    --pawly-surface: #FFFFFF;      /* cards / sheets */
    --pawly-surface-2: #F1F5F3;    /* tonal inset / section background */
    --pawly-surface-hover: #F0F4F2;

    /* Text */
    --pawly-text: #29395E;         /* brand navy (primary text) */
    --pawly-text-secondary: #5A6680;
    --pawly-text-muted: #9AA3B5;
    --pawly-on-accent: #FFFFFF;    /* text/icon on mint or coral fills */

    /* Borders */
    --pawly-border: #E1E8E2;
    --pawly-border-strong: #CDD7CF;

    /* Status */
    --pawly-urgent: #F44336;
    --pawly-urgent-bg: #FFEBEE;
    --pawly-warning: #CC7A0B;
    --pawly-warning-bg: #FFF3E0;
    --pawly-info: #1565C0;
    --pawly-info-bg: #E3F2FD;

    /* Overlays & loaders */
    --pawly-overlay: rgba(20, 27, 38, 0.55);   /* modal / sheet backdrop */
    --pawly-overlay-strong: rgba(15, 22, 38, 0.88); /* image lightbox */
    --pawly-skeleton-base: #E9EEF0;
    --pawly-skeleton-sheen: #F5F8FA;
    --pawly-scrim: rgba(0, 0, 0, 0.05);          /* ghost-button hover, etc. */

    /* Translucent surface for glassy sticky headers */
    --pawly-glass: rgba(246, 248, 247, 0.72);

    /* Radius scale */
    --pawly-radius: 20px;
    --pawly-radius-sm: 14px;
    --pawly-radius-lg: 28px;
    --pawly-radius-pill: 999px;

    /* Elevation — layered ambient + key light */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 8px 20px rgba(16, 24, 40, 0.10), 0 16px 40px rgba(16, 24, 40, 0.10);
    --shadow-xl: 0 18px 50px rgba(16, 24, 40, 0.18);
    --shadow-glow: 0 10px 28px rgba(95, 174, 142, 0.28);
    --shadow-glow-coral: 0 10px 28px rgba(255, 122, 102, 0.30);

    /* Motion */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 0.15s;
    --dur: 0.25s;
    --dur-slow: 0.4s;

    /* Fluid typography */
    --fs-display: clamp(2rem, 1.4rem + 3vw, 3rem);
    --fs-h1: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --fs-h2: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --fs-body: clamp(0.92rem, 0.88rem + 0.15vw, 1rem);
    --fs-sm: 0.85rem;
    --fs-xs: 0.72rem;

    --bottom-nav-height: 64px;
}

/* ── Dark theme ───────────────────────────────────────────────────
   Token overrides only — every component reads var(--pawly-*), so the
   whole UI flips with these. Applied two ways:
   1. Explicit user choice: <html data-theme="dark">
   2. Auto (OS) when the user hasn't chosen: prefers-color-scheme + :not()
   The shared declarations live in one place via a custom selector list
   for the explicit case and a duplicated block for the media query
   (CSS can't put a media query inside a selector list).            */
[data-theme="dark"] {
    color-scheme: dark;

    --pawly-green: #5FB897;
    --pawly-green-dark: #7FCAAE;   /* lighter in dark → readable as text/icon accent */
    --pawly-green-light: #4F9379;
    --pawly-green-bg: rgba(133, 200, 175, 0.16);

    --pawly-coral: #FF8472;
    --pawly-coral-dark: #FFA595;   /* lighter for text on dark */
    --pawly-coral-light: #E86A55;
    --pawly-coral-bg: rgba(255, 122, 102, 0.18);

    --pawly-bg: #14181F;
    --pawly-surface: #1C222C;
    --pawly-surface-2: #232B37;
    --pawly-surface-hover: #2A3340;

    --pawly-text: #E8ECF2;
    --pawly-text-secondary: #AAB3C3;
    --pawly-text-muted: #7E8AA0;
    --pawly-on-accent: #0F1626;    /* dark ink reads better on the brighter dark-mode mint/coral */

    --pawly-border: #2C3543;
    --pawly-border-strong: #3A4555;

    --pawly-urgent-bg: rgba(244, 67, 54, 0.18);
    --pawly-warning: #E0922B;
    --pawly-warning-bg: rgba(245, 158, 11, 0.16);
    --pawly-info: #7FB6F2;
    --pawly-info-bg: rgba(21, 101, 192, 0.26);

    --pawly-overlay: rgba(0, 0, 0, 0.66);
    --pawly-overlay-strong: rgba(0, 0, 0, 0.9);
    --pawly-skeleton-base: #232B37;
    --pawly-skeleton-sheen: #2E3847;
    --pawly-scrim: rgba(255, 255, 255, 0.08);
    --pawly-glass: rgba(20, 24, 31, 0.72);

    /* Soften elevation — big white-light shadows look wrong on dark */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 18px 50px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 8px 24px rgba(95, 184, 151, 0.22);
    --shadow-glow-coral: 0 8px 24px rgba(255, 132, 114, 0.24);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;

        --pawly-green: #5FB897;
        --pawly-green-dark: #7FCAAE;
        --pawly-green-light: #4F9379;
        --pawly-green-bg: rgba(133, 200, 175, 0.16);

        --pawly-coral: #FF8472;
        --pawly-coral-dark: #FFA595;
        --pawly-coral-light: #E86A55;
        --pawly-coral-bg: rgba(255, 122, 102, 0.18);

        --pawly-bg: #14181F;
        --pawly-surface: #1C222C;
        --pawly-surface-2: #232B37;
        --pawly-surface-hover: #2A3340;

        --pawly-text: #E8ECF2;
        --pawly-text-secondary: #AAB3C3;
        --pawly-text-muted: #7E8AA0;
        --pawly-on-accent: #0F1626;

        --pawly-border: #2C3543;
        --pawly-border-strong: #3A4555;

        --pawly-urgent-bg: rgba(244, 67, 54, 0.18);
        --pawly-warning: #E0922B;
        --pawly-warning-bg: rgba(245, 158, 11, 0.16);
        --pawly-info: #7FB6F2;
        --pawly-info-bg: rgba(21, 101, 192, 0.26);

        --pawly-overlay: rgba(0, 0, 0, 0.66);
        --pawly-overlay-strong: rgba(0, 0, 0, 0.9);
        --pawly-skeleton-base: #232B37;
        --pawly-skeleton-sheen: #2E3847;
        --pawly-scrim: rgba(255, 255, 255, 0.08);
        --pawly-glass: rgba(20, 24, 31, 0.72);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 18px 50px rgba(0, 0, 0, 0.6);
        --shadow-glow: 0 8px 24px rgba(95, 184, 151, 0.22);
        --shadow-glow-coral: 0 8px 24px rgba(255, 132, 114, 0.24);
    }
}

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

html, body {
    font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--pawly-bg);
    color: var(--pawly-text);
    margin: 0;
    padding: 0;
    font-size: var(--fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Smoothly cross-fade canvas/text when the theme flips */
html {
    transition: background-color var(--dur) var(--ease-out);
}

h1, h2, h3, h4, h5, h6,
.page-header h1,
.sidebar-brand {
    font-family: 'Baloo 2', 'Mulish', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ── Links & Buttons ──────────────────────────────────────────── */
a { color: var(--pawly-green); }
a:hover { color: var(--pawly-green-dark); }

.btn-pawly {
    background-image: linear-gradient(135deg, var(--pawly-green-light), var(--pawly-green));
    background-color: var(--pawly-green);
    color: var(--pawly-on-accent);
    border: none;
    border-radius: var(--pawly-radius-pill);
    padding: 11px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-glow);
    transition: filter var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
}
.btn-pawly:hover { filter: brightness(0.96); color: var(--pawly-on-accent); box-shadow: var(--shadow-lg); }
.btn-pawly:active { transform: scale(0.97); }

/* Coral CTA — warm secondary accent for high-emphasis actions */
.btn-pawly-coral {
    background-image: linear-gradient(135deg, var(--pawly-coral-light), var(--pawly-coral));
    background-color: var(--pawly-coral);
    color: var(--pawly-on-accent);
    border: none;
    border-radius: var(--pawly-radius-pill);
    padding: 11px 22px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-glow-coral);
    transition: filter var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
}
.btn-pawly-coral:hover { filter: brightness(0.97); color: var(--pawly-on-accent); box-shadow: var(--shadow-lg); }
.btn-pawly-coral:active { transform: scale(0.97); }

.btn-pawly-outline {
    background-color: transparent;
    color: var(--pawly-green);
    border: 1.5px solid var(--pawly-green);
    border-radius: var(--pawly-radius-pill);
    padding: 10px 21px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.btn-pawly-outline:hover {
    background-color: var(--pawly-green);
    color: var(--pawly-on-accent);
}
.btn-pawly-outline:active { transform: scale(0.97); }

.btn-pawly-ghost {
    background: none;
    border: none;
    color: var(--pawly-text-secondary);
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.btn-pawly-ghost:hover {
    background-color: var(--pawly-scrim);
    color: var(--pawly-text);
}

/* ── Cards ────────────────────────────────────────────────────── */
.pawly-card {
    background: var(--pawly-surface);
    border-radius: var(--pawly-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
    border: 1px solid var(--pawly-border);
}
@media (hover: hover) {
    .pawly-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg), var(--shadow-glow);
        border-color: var(--pawly-mint-200);
    }
}

/* ── Chips / Tags ─────────────────────────────────────────────── */
.pawly-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: var(--pawly-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.pawly-chip-green {
    background-color: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
}
.pawly-chip-red {
    background-color: var(--pawly-urgent-bg);
    color: var(--pawly-urgent);
}
.pawly-chip-orange {
    background-color: var(--pawly-warning-bg);
    color: var(--pawly-warning);
}
.pawly-chip-coral {
    background-color: var(--pawly-coral-bg);
    color: var(--pawly-coral-dark);
}
.pawly-chip-gray {
    background-color: var(--pawly-surface-2);
    color: var(--pawly-text-secondary);
}

/* ── Role Badge ───────────────────────────────────────────────── */
.role-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.role-badge-org { background: var(--pawly-info-bg); color: var(--pawly-info); }
.role-badge-rescuer { background: var(--pawly-green-bg); color: var(--pawly-green-dark); }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xl { width: 80px; height: 80px; }
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-weight: 700;
    flex-shrink: 0;
}
.avatar-sm.avatar-initials { font-size: 0.72rem; }
.avatar-md.avatar-initials { font-size: 0.85rem; }
.avatar-lg.avatar-initials { font-size: 1.1rem; }
.avatar-xl.avatar-initials { font-size: 1.6rem; }

/* ── Page Header ──────────────────────────────────────────────── */
.page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pawly-glass);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--pawly-border);
}
.page-header h1 {
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: 0;
    color: var(--pawly-text);
}

/* Mobile: drop titled page-header titles + divider line, keep action/back buttons */
@media (max-width: 767.98px) {
    /* Scale the rem base on phones so all rem-based type reads larger.
       Because the design system is rem/clamp-driven, this uniformly enlarges
       every font (tokens + hardcoded sizes) and proportionally nudges rem
       spacing. A flat 1.16x overflowed buttons/cards on 320–400px devices, so
       scale dynamically instead: ~1.09x on the smallest phones, easing up to a
       1.12x cap near the tablet breakpoint. Tune the bounds to taste. */
    html {
        font-size: clamp(
            calc(var(--fs-body) * 1.08),
            calc(var(--fs-body) + 0.4vw),
            calc(var(--fs-body) * 1.12)
        );
    }

    .page-header-titled {
        border-bottom: none;
    }
    .page-header-titled h1 {
        display: none;
    }
    /* Collapse headers that only had a title (no back/action buttons) so no empty bar remains */
    .page-header-titled:not(:has(button, a)) {
        display: none;
    }
}

/* ── Skeleton ─────────────────────────────────────────────────── */
@keyframes pawly-skeleton-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.pawly-skeleton,
.pawly-skeleton-avatar,
.pawly-skeleton-thumb,
.pawly-skeleton-line {
    background-color: var(--pawly-skeleton-base);
    background-image: linear-gradient(90deg, var(--pawly-skeleton-base) 0px, var(--pawly-skeleton-sheen) 60px, var(--pawly-skeleton-base) 120px);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: pawly-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}

.pawly-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pawly-skeleton-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
}

.pawly-skeleton-thumb-sq {
    aspect-ratio: 1 / 1;
}

.pawly-skeleton-line {
    height: 0.78rem;
    margin: 4px 0;
    width: 100%;
}

.pawly-skeleton-line.sk-w-25 { width: 25%; }
.pawly-skeleton-line.sk-w-40 { width: 40%; }
.pawly-skeleton-line.sk-w-55 { width: 55%; }
.pawly-skeleton-line.sk-w-70 { width: 70%; }
.pawly-skeleton-line.sk-w-85 { width: 85%; }

.pawly-skeleton-line.sk-title { height: 1rem; }
.pawly-skeleton-line.sk-sub   { height: 0.66rem; }

.pawly-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.pawly-skeleton-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--pawly-surface);
    border-radius: 14px;
    border: 1px solid var(--pawly-border);
}

.pawly-skeleton-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pawly-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .pawly-skeleton-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pawly-skeleton-tile {
    background: var(--pawly-surface);
    border-radius: 14px;
    border: 1px solid var(--pawly-border);
    overflow: hidden;
    padding-bottom: 12px;
}

.pawly-skeleton-tile .pawly-skeleton-thumb {
    border-radius: 0;
}

.pawly-skeleton-tile-body {
    padding: 10px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
    color: var(--pawly-text-muted);
}
.empty-state i {
    font-size: 2.25rem;
    margin-bottom: 4px;
    width: 84px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pawly-surface-2);
    color: var(--pawly-green);
    box-shadow: inset 0 0 0 1px var(--pawly-border);
}
.empty-state p {
    font-size: 0.95rem;
    margin: 12px 0 0;
}

/* ── Ongoing development notice (full-area) ───────────────────── */
.dev-notice-page {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fill the content area below the page header so the page reads as
       "under construction" rather than empty. */
    min-height: 60vh;
    padding: 32px 20px;
}
.dev-notice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    max-width: 420px;
    width: 100%;
    padding: 36px 28px;
    border: 1px solid color-mix(in srgb, var(--pawly-warning) 35%, transparent);
    background: var(--pawly-warning-bg);
    border-radius: var(--pawly-radius);
}
.dev-notice-page-icon {
    font-size: 3rem;
    color: var(--pawly-warning);
}
.dev-notice-page-title {
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    color: var(--pawly-warning);
}
.dev-notice-page-sub {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    color: var(--pawly-text-secondary);
}

/* On tablet/web present it as a roomier centered page notice. */
@media (min-width: 768px) {
    .dev-notice-page {
        min-height: 65vh;
    }
    .dev-notice-card {
        max-width: 480px;
        padding: 48px 40px;
    }
    .dev-notice-page-icon {
        font-size: 3.5rem;
    }
    .dev-notice-page-title {
        font-size: 1.6rem;
    }
}

/* ── Filter Tabs ──────────────────────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: var(--pawly-radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1.5px solid var(--pawly-border);
    background: var(--pawly-surface);
    color: var(--pawly-text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
    white-space: nowrap;
}
.filter-tab:hover {
    border-color: var(--pawly-green-light);
    color: var(--pawly-green);
}
.filter-tab:active { transform: scale(0.97); }
.filter-tab.active {
    background-color: var(--pawly-green);
    border-color: var(--pawly-green);
    color: var(--pawly-on-accent);
    box-shadow: var(--shadow-glow);
}

/* ── Utilities ────────────────────────────────────────────────── */
.text-pawly { color: var(--pawly-green) !important; }
.bg-pawly { background-color: var(--pawly-green) !important; }
.text-muted-pawly { color: var(--pawly-text-muted) !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fs-sm { font-size: 0.8rem !important; }
.fs-xs { font-size: 0.7rem !important; }

.content-area {
    /* Mobile has no top app-bar, so give the page breathing room below the
       status bar / notch. Desktop overrides this fully further down. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom: calc(var(--bottom-nav-height) + 16px);
}

/* ── Motion: entrance + stagger ───────────────────────────────── */
@keyframes pawly-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pawly-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pawly-animate-in {
    animation: pawly-rise var(--dur-slow) var(--ease-spring) both;
}
.pawly-fade-in {
    animation: pawly-fade var(--dur) var(--ease-out) both;
}
/* Stagger children (feed items, grid tiles) for a lively load */
.pawly-stagger > * {
    animation: pawly-rise var(--dur-slow) var(--ease-spring) both;
}
.pawly-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.pawly-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.pawly-stagger > *:nth-child(3) { animation-delay: 0.10s; }
.pawly-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.pawly-stagger > *:nth-child(5) { animation-delay: 0.18s; }
.pawly-stagger > *:nth-child(6) { animation-delay: 0.22s; }
.pawly-stagger > *:nth-child(7) { animation-delay: 0.26s; }
.pawly-stagger > *:nth-child(8) { animation-delay: 0.30s; }

/* ── Accessibility: keyboard focus & reduced motion ───────────── */
:focus-visible {
    outline: 2px solid var(--pawly-green);
    outline-offset: 2px;
    border-radius: inherit;
}
/* Don't double-paint focus on mouse interactions */
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .pawly-card:hover { transform: none; }
}

/* ── Validation / Errors ──────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid #e50000;
}
.validation-message {
    color: #e50000;
    font-size: 0.8rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzUgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Desktop card grid ─────────────────────────────────────────── */
.desktop-card-grid {
    display: flex;
    flex-direction: column;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .content-area {
        width: 100%;
        max-width: 100%;
        padding: 16px 32px 32px;
    }

    .content-area.content-area-chat {
        padding: 0;
    }

    .page-header {
        position: static;
        padding: 4px 0 12px;
        background: transparent;
        border-bottom: 1px solid var(--pawly-border);
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

    .filter-tabs {
        padding: 8px 0;
    }

    .empty-state {
        padding: 32px 24px;
    }

    .desktop-card-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .desktop-card-grid > .pawly-card {
        margin-bottom: 0 !important;
        width: 100%;
    }
}

/* ── Collapsed sidebar (icon rail, desktop only) ──────────────── */
@media (min-width: 768px) {
    .sidebar-collapsed .sidebar-label {
        display: none;
    }

    .sidebar-collapsed .sidebar-brand {
        display: none;
    }

    .sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding: 12px 0 8px;
    }

    .sidebar-collapsed .sidebar-toggle i {
        transform: rotate(180deg);
    }

    .sidebar-collapsed .sidebar-nav {
        padding: 0 8px;
    }

    .sidebar-collapsed .sidebar-link,
    .sidebar-collapsed .sidebar-logout {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-collapsed .sidebar-footer {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar-collapsed .notif-badge {
        position: absolute;
        top: 2px;
        right: 8px;
        margin-left: 0;
    }
}

/* ── Desktop ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .pawly-card {
        border-radius: var(--pawly-radius);
    }
}

@media (min-width: 1200px) {
    .content-area {
        max-width: 1200px;
        margin: 0 auto;
    }

    .content-area.content-area-chat {
        max-width: none;
        margin: 0;
    }

    .desktop-card-grid {
        gap: 20px;
    }
}

@media (min-width: 1600px) {
    .content-area {
        max-width: 1320px;
    }
}

/* ── Large desktop ────────────────────────────────────────────── */
@media (min-width: 1440px) {
    :root {
        --pawly-radius: 18px;
    }
}

#mobile-splash,
.mobile-auth-splash {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 14vh 24px 0;
    background: var(--pawly-navy);
    overflow: hidden;
    z-index: 4000;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#mobile-splash.hide,
.mobile-auth-splash.hide {
    opacity: 0;
}

.mobile-splash-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mobile-splash-heart {
    margin-top: 18px;
    color: var(--pawly-green-light);
    font-size: 1.05rem;
    line-height: 1;
}

.mobile-splash-pets {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: block;
}

.mobile-splash-title {
    margin: 20px 0 14px;
    color: #fff;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -1px;
}

.mobile-splash-title .animal-logo-slash {
    color: var(--pawly-green-light);
}

.mobile-splash-tagline {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.4;
}

.mobile-splash-loader {
    position: relative;
    margin-top: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pawly-green-light);
    animation: splash-dot 1s ease-in-out infinite;
}

.mobile-splash-loader::before,
.mobile-splash-loader::after {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pawly-green-light);
    animation: splash-dot 1s ease-in-out infinite;
}

.mobile-splash-loader::before {
    left: -14px;
    animation-delay: -0.2s;
}

.mobile-splash-loader::after {
    left: 14px;
    animation-delay: 0.2s;
}

@keyframes splash-dot {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes splash-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: splash-spin 0.9s linear infinite;
}

@keyframes splash-pop {
    from {
        transform: scale(0.78);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 767.98px) {
    #mobile-splash,
    .mobile-auth-splash {
        display: flex;
    }
}


.driver-popover.pawly-tour-popover {
    border-radius: 18px;
    border: 1px solid rgba(41, 57, 94, 0.18);
    box-shadow: 0 18px 42px rgba(41, 57, 94, 0.18);
    font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.pawly-tour-popover .driver-popover-title {
    color: var(--pawly-text);
    font-weight: 700;
}

.pawly-tour-popover .driver-popover-description,
.pawly-tour-popover .driver-popover-progress-text {
    color: var(--pawly-text-secondary);
}

/* ── Anim/al brand lockup ─────────────────────────────────────── */
.animal-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1;
    color: inherit;
}

.animal-logo-mark {
    display: block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url('/images/logo-mark.png') center / contain no-repeat;
    mask: url('/images/logo-mark.png') center / contain no-repeat;
}

.animal-logo-word {
    font-family: 'Baloo 2', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: inherit;
}

.animal-logo-slash {
    font-weight: 600;
}

.mobile-splash-mark {
    display: inline-flex;
    color: var(--pawly-green-light);
    animation: splash-pop 0.8s ease-out;
}

.login-brand-mark {
    display: inline-flex;
    color: var(--pawly-green);
}

.pawly-tour-popover .driver-popover-description {
    line-height: 1.5;
}

.pawly-tour-popover .driver-popover-prev-btn,
.pawly-tour-popover .driver-popover-next-btn,
.pawly-tour-popover .driver-popover-close-btn {
    border-radius: 12px;
    border: 1px solid var(--pawly-border);
    text-shadow: none;
    font-weight: 600;
}

.pawly-tour-popover .driver-popover-next-btn {
    background: var(--pawly-green);
    border-color: var(--pawly-green);
    color: #fff;
}

.pawly-tour-popover .driver-popover-prev-btn:hover,
.pawly-tour-popover .driver-popover-close-btn:hover {
    background: var(--pawly-green-bg);
}

.pawly-tour-popover .driver-popover-next-btn:hover {
    background: var(--pawly-green-dark);
}

/* ── Adoptable pet card grid (shared by Adopt and Favorites pages) ──────── */
.adopt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .adopt-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
    .adopt-grid { grid-template-columns: repeat(4, 1fr); }
}

.adopt-card {
    display: flex;
    flex-direction: column;
    background: var(--pawly-surface);
    border: 1px solid var(--pawly-border);
    border-radius: var(--pawly-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.adopt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border-color: var(--pawly-mint-200);
}

.adopt-card-photo {
    position: relative;
    height: 130px;
    background-color: var(--pawly-green-bg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adopt-card-emoji {
    font-size: 2.6rem;
}

.adopt-card-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pawly-coral);
    font-size: 0.85rem;
    transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease-out);
}

.adopt-card-fav:hover {
    transform: scale(1.12);
}

.adopt-card-fav.on {
    background: var(--pawly-coral);
    color: #fff;
}

.adopt-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
}

.adopt-card-body strong {
    font-family: 'Baloo 2', system-ui, sans-serif;
    font-size: 0.98rem;
    color: var(--pawly-text);
}

.adopt-card-meta {
    font-size: 0.78rem;
    color: var(--pawly-text-secondary);
}

.adopt-card-loc {
    font-size: 0.74rem;
    color: var(--pawly-text-muted);
    margin-top: 2px;
}

.adopt-card-loc .bi {
    color: var(--pawly-green);
}

.adopt-card-dist {
    font-size: 0.74rem;
    color: var(--pawly-green);
    font-weight: 600;
    margin-top: 2px;
}

.adopt-card-dist .bi {
    color: var(--pawly-green);
}

/* Verified-shelter identifier on adoption listings. */
.adopt-card-shelter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pawly-green-bg);
    color: var(--pawly-green);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adopt-card-shelter .bi {
    color: var(--pawly-green);
}

/* "List a pet" call-to-action shown only to verified shelters. */
.adopt-shelter-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pawly-green-bg);
    color: var(--pawly-green);
    font-size: 1.2rem;
}

/* ── Shared top-level page chrome ─────────────────────────────────
   The Adopt page set the pattern for our top-level list screens: a big,
   friendly hero title and a rounded search bar on a surface. These are
   promoted here so Services / Community / My Pets / Stray (and Adopt) all
   share one definition instead of re-deriving near-identical scoped copies. */
.page-hero-title {
    font-family: 'Baloo 2', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--pawly-text);
    margin: 6px 0 14px;
}

.page-hero-title span {
    font-size: 1.4rem;
}

/* When a sub-line follows, tighten the gap so the two read as one block. */
.page-hero-title:has(+ .page-hero-sub) {
    margin-bottom: 4px;
}

/* One-line context under the hero (e.g. a result count). */
.page-hero-sub {
    margin: 0 0 14px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--pawly-text-secondary);
}

.pawly-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pawly-surface);
    border: 1px solid var(--pawly-border);
    border-radius: var(--pawly-radius-sm);
    padding: 11px 14px;
    margin-bottom: 14px;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.pawly-search:focus-within {
    border-color: var(--pawly-green-light);
    box-shadow: var(--shadow-glow);
}

.pawly-search > .bi {
    color: var(--pawly-text-muted);
}

.pawly-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.92rem;
    color: var(--pawly-text);
}

.pawly-search-clear {
    border: none;
    background: transparent;
    color: var(--pawly-text-muted);
    cursor: pointer;
    display: inline-flex;
    padding: 2px;
}

/* ── Map (Leaflet) attribution — kept (license) but discreet ──────
   The tile credit is required while we use OSM/CARTO tiles, so we shrink and
   fade it rather than remove it. Leaflet's own "Leaflet" prefix is dropped in
   JS (stray-map.js). */
.leaflet-control-attribution {
    font-size: 9px;
    padding: 0 4px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--pawly-text-muted);
    opacity: 0.65;
}

.leaflet-control-attribution a {
    color: var(--pawly-text-secondary);
}

/* Nearby map label pins. Leaflet injects these into the map layer outside any
   component's CSS scope, so they live here (global). The marker element is
   positioned top-left at the coordinate; the inner pill is shifted up/left so
   its bottom-centre tail tip lands on the point (works for any pill width). */
.nearby-pin { width: 0; height: 0; }

.nearby-pin-pill {
    position: absolute;
    bottom: 8px; /* leave room for the tail */
    left: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    background: var(--pin, #f0883e);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.nearby-pin-pill i { font-size: 0.82rem; }

/* Downward tail centred under the pill. */
.nearby-pin-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--pin, #f0883e);
    filter: drop-shadow(0 1px 0 #fff);
}

/* ===================================================================
   Stray Reports + compose modal
   Moved here from Components/Pages/StrayReports.razor.css so the compose
   modal markup (now in Components/Shared/StrayComposeForm.razor, hosted by
   MainLayout) is styled regardless of which component renders it.
   =================================================================== */
/* ── Modal Backdrop ──────────────────────────────────────────── */
.stray-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    animation: strayBackdropIn 0.2s ease-out;
}

.stray-modal-backdrop.closing {
    animation: strayBackdropOut 0.28s ease-in forwards;
}

@keyframes strayBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes strayBackdropOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Modal Panel ────────────────────────────────────────────── */
.stray-modal {
    background: var(--pawly-surface);
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: straySlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stray-modal.closing {
    animation: straySlideDown 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes straySlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes straySlideDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

.stray-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pawly-border);
    flex-shrink: 0;
}

.stray-modal-body {
    padding: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}

.stray-composer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stray-form-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stray-composer-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stray-composer-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.stray-composer-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stray-composer-caption {
    font-size: 0.8rem;
    color: var(--pawly-text-muted);
}

.stray-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 10px;
    font-size: 0.82rem;
    color: var(--pawly-text-muted);
}

.stray-empty-hint i {
    color: var(--pawly-green);
}

/* ── Report CTA Banner ──────────────────────────────────────── */
.stray-report-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--pawly-radius);
    background: linear-gradient(135deg, var(--pawly-mint-50) 0%, var(--pawly-green-bg) 100%);
    border: 1px solid var(--pawly-border);
}

.stray-report-cta-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pawly-green);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(95, 174, 142, 0.35);
}

.stray-report-cta-text {
    flex: 1;
    min-width: 0;
}

.stray-report-cta-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pawly-text, #1f2a24);
    margin: 0 0 2px;
}

.stray-report-cta-sub {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--pawly-text-muted);
    margin: 0;
}

.stray-report-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: 999px;
    background: var(--pawly-green);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
}

.stray-report-cta-btn:hover {
    background: var(--pawly-green-dark);
}

.stray-report-cta-btn:active {
    transform: scale(0.97);
}

/* ── Form Sections (MyPets-style) ───────────────────────────── */
.stray-form-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stray-form-section {
    margin-bottom: 18px;
}

.stray-form-card {
    margin-bottom: 0;
}

.stray-form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pawly-text-muted, #8a8a8a);
    margin-bottom: 8px;
}

.stray-form-label i {
    color: var(--pawly-green);
    font-size: 0.85rem;
}

.stray-required {
    color: var(--pawly-urgent);
    font-weight: 700;
    font-size: 0.72rem;
    margin-left: 2px;
}

.stray-help {
    margin: 8px 0 0;
    font-size: 0.74rem;
    color: var(--pawly-text-muted);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.stray-help i {
    color: var(--pawly-green);
    font-size: 0.82rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.stray-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ── Hero Photo Uploader (mirrors MyPets) ───────────────────── */
.stray-hero {
    margin: 0 0 22px;
}

.stray-hero-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 280px;
    border: 2px dashed var(--pawly-border);
    border-radius: var(--pawly-radius);
    background: linear-gradient(135deg, var(--pawly-green-bg) 0%, transparent 100%);
    color: var(--pawly-text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    padding: 16px;
}

.stray-hero-empty:hover {
    border-color: var(--pawly-green);
}

.stray-hero-empty:active {
    transform: scale(0.99);
}

.stray-hero-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pawly-surface);
    color: var(--pawly-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(94, 140, 90, 0.2);
    margin-bottom: 6px;
}

.stray-hero-empty-title {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--pawly-text);
}

.stray-hero-empty-sub {
    font-size: 0.78rem;
    color: var(--pawly-text-muted, #8a8a8a);
    text-align: center;
}

.stray-hero-gallery-link {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pawly-surface);
    color: var(--pawly-green-dark);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--pawly-border);
    transition: all 0.18s ease;
}

.stray-hero-gallery-link:hover {
    background: var(--pawly-green-bg);
    border-color: var(--pawly-green);
}

.stray-hero-main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 280px;
    border-radius: var(--pawly-radius);
    overflow: hidden;
    background: var(--pawly-green-bg);
}

.stray-hero-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stray-hero-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.stray-hero-remove:hover {
    background: rgba(220, 53, 69, 0.85);
}

.stray-hero-overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.stray-hero-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease;
}

.stray-hero-overlay-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}

.stray-hero-overlay-btn i {
    font-size: 0.9rem;
}

/* ── Chip group (animal type) ───────────────────────────────── */
.stray-chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stray-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--pawly-border);
    background: var(--pawly-surface);
    color: var(--pawly-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}

.stray-chip:hover {
    border-color: var(--pawly-green);
}

.stray-chip:active {
    transform: scale(0.97);
}

.stray-chip.is-active {
    background: var(--pawly-green);
    border-color: var(--pawly-green);
    color: #fff;
}

.stray-chip-emoji {
    font-size: 1rem;
    line-height: 1;
}

/* ── Location pin row ───────────────────────────────────────── */
.stray-pin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pawly-green-bg);
    border-radius: var(--pawly-radius-sm);
    margin-bottom: 8px;
}

.stray-pin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pawly-green-dark);
}

.stray-pin-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--pawly-green);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.stray-pin-change:hover {
    background: rgba(94, 140, 90, 0.14);
}

.stray-optional {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pawly-text-muted);
    background: var(--pawly-surface-2);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stray-field-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.74rem;
    color: var(--pawly-text-muted);
    line-height: 1.4;
}

.stray-field-hint i {
    color: var(--pawly-green);
    font-size: 0.78rem;
    margin-top: 2px;
}

.stray-form-row {
    display: flex;
    gap: 12px;
}

.stray-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stray-input {
    border: 1.5px solid var(--pawly-border);
    border-radius: var(--pawly-radius-sm);
    font-size: 0.9rem;
    padding: 11px 13px;
    background: var(--pawly-surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stray-input:focus {
    border-color: var(--pawly-green);
    box-shadow: 0 0 0 3px rgba(94, 140, 90, 0.12);
    outline: none;
}

.stray-input.is-invalid {
    border-color: #dc3545;
}

.stray-description-input {
    min-height: 110px;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ── Photo Upload ───────────────────────────────────────────── */
.stray-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 16px;
    border: 2px dashed var(--pawly-border);
    border-radius: 14px;
    color: var(--pawly-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    background: var(--pawly-surface-2);
    transition: all 0.2s ease;
}

.stray-photo-upload:hover {
    border-color: var(--pawly-green);
    color: var(--pawly-green-dark);
    background: var(--pawly-green-bg);
    transform: translateY(-1px);
}

.stray-photo-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(94, 140, 90, 0.12);
    color: var(--pawly-green);
    font-size: 1.35rem;
    margin-bottom: 6px;
    transition: transform 0.2s ease;
}

.stray-photo-upload:hover .stray-photo-upload-icon {
    transform: scale(1.05);
    background: rgba(94, 140, 90, 0.2);
}

.stray-photo-upload-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pawly-text);
}

.stray-photo-upload-sub {
    font-size: 0.74rem;
    color: var(--pawly-text-muted);
    text-align: center;
}

.stray-photo-preview {
    position: relative;
    border-radius: var(--pawly-radius-sm);
    overflow: hidden;
}

.stray-photo-preview img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    display: block;
}

/* ── Photo Choices (Camera / Gallery) ───────────────────────── */
.stray-photo-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stray-photo-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--pawly-border);
    border-radius: 14px;
    background: var(--pawly-surface);
    color: var(--pawly-text);
    cursor: pointer;
    transition: all 0.18s ease;
}

.stray-photo-choice:hover {
    border-color: var(--pawly-green);
    background: var(--pawly-surface-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.stray-photo-choice-primary {
    border-color: var(--pawly-green);
    background: var(--pawly-green-bg);
}

.stray-photo-choice-primary:hover {
    background: rgba(94, 140, 90, 0.16);
}

.stray-photo-choice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(94, 140, 90, 0.14);
    color: var(--pawly-green-dark);
}

.stray-photo-choice-primary .stray-photo-choice-icon {
    background: var(--pawly-green);
    color: #fff;
}

.stray-photo-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stray-photo-choice-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pawly-text);
}

.stray-photo-choice-sub {
    font-size: 0.72rem;
    color: var(--pawly-text-muted);
}

/* ── Photo Preview Retake/Gallery ───────────────────────────── */
.stray-photo-actions {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.stray-photo-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease;
}

.stray-photo-action:hover {
    background: rgba(0, 0, 0, 0.78);
}

.stray-photo-action i {
    font-size: 0.88rem;
}

@media (max-width: 420px) {
    .stray-photo-choices {
        grid-template-columns: 1fr;
    }
}

.stray-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.2s;
}

.stray-photo-remove:hover {
    background: rgba(220, 53, 69, 0.85);
}

/* ── Urgency Buttons ────────────────────────────────────────── */
.stray-urgency-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stray-urgency-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--pawly-border);
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-surface);
    color: var(--pawly-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.stray-urgency-btn:hover {
    border-color: var(--pawly-green);
}

.stray-urgency-btn:active {
    transform: scale(0.99);
}

.stray-urgency-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--pawly-surface-2);
    transition: background 0.18s ease;
}

.stray-urgency-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.stray-urgency-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pawly-text);
}

.stray-urgency-sub {
    font-size: 0.75rem;
    color: var(--pawly-text-muted);
    line-height: 1.35;
}

.stray-urgency-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--pawly-border);
    background: var(--pawly-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.78rem;
    transition: all 0.18s ease;
}

.stray-urgency-btn.active {
    border-color: var(--pawly-green);
    background: var(--pawly-green-bg);
}

.stray-urgency-btn.active .stray-urgency-icon {
    background: rgba(255, 255, 255, 0.7);
}

.stray-urgency-btn.active .stray-urgency-title {
    color: var(--pawly-green-dark);
}

.stray-urgency-btn.active .stray-urgency-radio {
    background: var(--pawly-green);
    border-color: var(--pawly-green);
    color: #fff;
}

.stray-urgency-urgent.active {
    border-color: #dc3545;
    background: var(--pawly-urgent-bg);
}

.stray-urgency-urgent.active .stray-urgency-title {
    color: #b02a37;
}

.stray-urgency-urgent.active .stray-urgency-radio {
    background: #dc3545;
    border-color: #dc3545;
}

.stray-urgency-medical.active {
    border-color: #f59e0b;
    background: var(--pawly-warning-bg);
}

.stray-urgency-medical.active .stray-urgency-title {
    color: #b45309;
}

.stray-urgency-medical.active .stray-urgency-radio {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* ── Form Error ─────────────────────────────────────────────── */
.stray-form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-urgent-bg);
    color: var(--pawly-urgent);
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── Real-photo disclaimer ──────────────────────────────────── */
.stray-photo-disclaimer {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    margin: 0 0 18px;
    border: 1px solid var(--pawly-warning);
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-warning-bg);
}

.stray-photo-disclaimer-icon {
    color: var(--pawly-warning);
    font-size: 1.05rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.stray-photo-disclaimer-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stray-photo-disclaimer-title {
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--pawly-text);
}

.stray-photo-disclaimer-text {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--pawly-text-muted);
}

.stray-disclaimer-dismiss {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pawly-text);
    cursor: pointer;
}

.stray-disclaimer-dismiss input {
    width: 15px;
    height: 15px;
    accent-color: var(--pawly-green);
    cursor: pointer;
}

/* ── Post-submit care guidance ──────────────────────────────── */
.stray-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px 4px;
}

.stray-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-size: 2rem;
    margin-bottom: 14px;
}

.stray-success-title {
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--pawly-text);
}

.stray-success-sub {
    font-size: 0.86rem;
    color: var(--pawly-text-muted);
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 420px;
}

.stray-care-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.stray-care-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pawly-border);
    border-radius: 14px;
    background: var(--pawly-surface);
}

.stray-care-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-size: 1rem;
}

.stray-care-text {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--pawly-text);
}

.stray-care-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 16px 0 0;
    font-size: 0.76rem;
    color: var(--pawly-text-muted);
    line-height: 1.4;
    text-align: left;
}

.stray-care-note i {
    color: var(--pawly-info);
    margin-top: 1px;
    flex-shrink: 0;
}

.stray-form-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ── Flat sections (no bordered cards) ──────────────────────── */
.stray-form-shell {
    gap: 0;
}

.stray-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.stray-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stray-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--pawly-text);
}

.stray-section-label i {
    color: var(--pawly-green);
    font-size: 0.95rem;
}

.stray-optional-tag {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--pawly-text-muted);
    background: var(--pawly-surface-2);
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stray-divider {
    border: 0;
    border-top: 1px solid var(--pawly-border);
    margin: 14px 0;
    opacity: 0.7;
}

.stray-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.76rem;
    color: var(--pawly-text-muted);
    line-height: 1.45;
}

.stray-hint i {
    color: var(--pawly-green);
    font-size: 0.82rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Flat inputs (no boxed background) ──────────────────────── */
.stray-textarea-flat,
.stray-input-flat {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--pawly-border);
    border-radius: 0;
    padding: 8px 2px;
    font-size: 0.95rem;
    line-height: 1.55;
    background: transparent;
    color: var(--pawly-text);
    transition: border-color 0.2s ease;
    box-shadow: none;
    outline: none;
}

.stray-textarea-flat {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}

.stray-textarea-flat::placeholder,
.stray-input-flat::placeholder {
    color: var(--pawly-text-muted);
}

.stray-textarea-flat:focus,
.stray-input-flat:focus {
    border-bottom-color: var(--pawly-green);
    background: transparent;
    box-shadow: none;
    outline: none;
}

.stray-input-flat.is-invalid {
    border-bottom-color: #dc3545;
}

/* ── Animal Type Chips ─────────────────────────────────────── */
.stray-animal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stray-animal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--pawly-border);
    border-radius: 999px;
    background: var(--pawly-surface);
    color: var(--pawly-text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.stray-animal-chip:hover {
    border-color: var(--pawly-green-light);
    background: var(--pawly-green-bg);
}

.stray-animal-chip.active {
    border-color: var(--pawly-green);
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    box-shadow: 0 0 0 2px rgba(94, 140, 90, 0.15);
}

.stray-animal-chip-emoji {
    font-size: 1rem;
    line-height: 1;
}

.stray-composer-actions-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--pawly-border);
    border-radius: 16px;
    background: var(--pawly-surface);
}

.stray-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.stray-composer-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    background: var(--pawly-surface-2);
    color: var(--pawly-text);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.stray-composer-action:hover {
    background: var(--pawly-surface-hover);
    transform: translateY(-1px);
}

.stray-composer-action-static {
    cursor: default;
}

.stray-composer-action-static:hover {
    background: var(--pawly-surface-2);
    transform: none;
}

.stray-composer-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.stray-composer-action-icon.photo {
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
}

.stray-composer-action-icon.alert {
    background: rgba(220, 53, 69, 0.14);
    color: #dc3545;
}

.stray-report-tip {
    font-size: 0.8rem;
    color: var(--pawly-text-muted);
    text-align: center;
}

/* ── Submit Actions ─────────────────────────────────────────── */
.stray-modal-footer {
    flex-shrink: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pawly-border);
    background: var(--pawly-surface);
}

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .stray-modal-backdrop {
        align-items: center;
    }

    .stray-modal {
        max-width: 680px;
        height: auto;
        max-height: 88vh;
        border-radius: 20px;
        animation: strayFadeIn 0.2s ease-out;
    }

    .stray-modal.closing {
        animation: strayFadeOut 0.2s ease-in forwards;
    }

    @keyframes strayFadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to   { opacity: 1; transform: scale(1); }
    }

    @keyframes strayFadeOut {
        from { opacity: 1; transform: scale(1); }
        to   { opacity: 0; transform: scale(0.95); }
    }

    .stray-composer-actions-card {
        padding: 14px 16px;
    }
}

/* ── Small mobile ───────────────────────────────────────────── */
@media (max-width: 400px) {
    .stray-field-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .stray-report-cta {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
        margin-top: 12px;
    }

    .stray-report-cta-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .stray-report-cta-text {
        flex: 1 1 calc(100% - 60px);
    }

    .stray-report-cta-btn {
        flex: 1 1 100%;
        padding: 12px 20px;
    }

    .stray-modal-body {
        padding: 14px;
    }

    .stray-field-grid {
        grid-template-columns: 1fr;
    }

    .stray-composer-actions-card {
        flex-direction: column;
        align-items: stretch;
    }

    .stray-composer-actions {
        justify-content: stretch;
    }

    .stray-composer-action {
        justify-content: center;
        width: 100%;
    }
}

/* ── Tappable stray card (opens the stray profile) ──────────── */
.stray-card-link {
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.stray-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(41, 57, 94, 0.12);
}

.stray-card-link:active {
    transform: translateY(0);
}

.stray-card-link:focus-visible {
    outline: 2px solid var(--pawly-green);
    outline-offset: 2px;
}

.stray-card-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* ── Resolved Card State ────────────────────────────────────── */
.stray-card-resolved {
    border-left: 3px solid var(--pawly-green);
}

/* De-emphasise the passive content of a resolved card, but never the
   action buttons — dimming those (opacity multiplies down to children)
   made the primary CTA read as disabled. */
.stray-card-resolved .p-3 > .d-flex,
.stray-card-resolved .p-3 > p,
.stray-card-resolved .stray-resolved-note,
.stray-card-resolved .stray-adopt-note {
    opacity: 0.7;
}

.stray-card-resolved img {
    filter: grayscale(40%);
}

/* ── Resolved Note ──────────────────────────────────────────── */
.stray-resolved-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Status Action Buttons ──────────────────────────────────── */
.stray-status-actions {
    display: flex;
    gap: 8px;
}

/* ── Location Picker ─────────────────────────────────────────── */
.stray-location-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.stray-locate-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 42px;
    border: 1.5px solid var(--pawly-green);
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stray-locate-btn:hover:not(:disabled) {
    background: var(--pawly-green);
    color: #fff;
}

.stray-locate-btn.loading,
.stray-locate-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Map Container ─────────────────────────────────────────────── */
.stray-map-container {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--pawly-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    animation: mapReveal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mapReveal {
    from { opacity: 0; transform: scaleY(0.92); transform-origin: top center; }
    to   { opacity: 1; transform: scaleY(1); }
}

.stray-map-canvas-large {
    height: 60dvh;
    min-height: 320px;
}

.stray-map-canvas {
    height: 220px;
    width: 100%;
    display: block;
}

.stray-map-drag-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Coordinates Row ─────────────────────────────────────────── */
.stray-coords-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stray-coords-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--pawly-green-bg);
    color: var(--pawly-green-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(94, 140, 90, 0.25);
}

.stray-clear-pin-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--pawly-urgent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.stray-clear-pin-btn:hover {
    background: var(--pawly-urgent-bg);
}

/* ── Adoption tagging ─────────────────────────────────────────── */
.stray-adopt-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: var(--pawly-surface);
    border: 1.5px solid var(--pawly-border);
    border-radius: var(--pawly-radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.stray-adopt-toggle.is-active { border-color: var(--pawly-green); background: var(--pawly-green-bg); }
.stray-adopt-toggle-icon { font-size: 1.25rem; color: var(--pawly-green); display: inline-flex; }
.stray-adopt-toggle-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.stray-adopt-toggle-title { font-weight: 700; font-size: 0.92rem; color: var(--pawly-text); }
.stray-adopt-toggle-sub { font-size: 0.76rem; color: var(--pawly-text-secondary); }
.stray-adopt-switch { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--pawly-border); position: relative; transition: background 0.18s ease; }
.stray-adopt-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.stray-adopt-toggle.is-active .stray-adopt-switch { background: var(--pawly-green); }
.stray-adopt-toggle.is-active .stray-adopt-switch::after { transform: translateX(18px); }

.stray-adopt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; line-height: 1; }
.stray-adopt-chip-for { background: var(--pawly-green); color: #fff; box-shadow: 0 2px 8px rgba(41,57,94,0.18); }
.stray-adopt-chip-done { background: var(--pawly-navy); color: #fff; }

.stray-adopt-note { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--pawly-text); background: var(--pawly-green-bg); padding: 7px 10px; border-radius: 10px; }
.stray-adopt-note .bi { color: var(--pawly-green); }
.stray-adopt-actions { display: flex; }


/* ── Stray reversal: status note + reason modal ─────────────────────── */
.stray-status-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--pawly-radius-sm);
    background: var(--pawly-surface-2);
    color: var(--pawly-text);
    font-size: 0.78rem;
    line-height: 1.4;
}

.stray-status-note i {
    color: var(--pawly-text-muted);
    margin-top: 2px;
    flex-shrink: 0;
}

.stray-reason-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: strayReasonFade 0.18s ease-out;
}

.stray-reason-modal {
    background: var(--pawly-surface);
    width: 100%;
    max-width: 440px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    animation: strayReasonPop 0.18s ease-out;
}

@keyframes strayReasonFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes strayReasonPop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.stray-reason-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pawly-border);
}

.stray-reason-body {
    padding: 16px 18px;
}

.stray-reason-prompt {
    font-size: 0.84rem;
    color: var(--pawly-text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

.stray-reason-footer {
    display: flex;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pawly-border);
}