/* ==========================================================================
   Sajha Community - design system matching https://sajha.com/redesign
   Modern, clean look: Source Sans 3 typeface, navy-blue-to-orange gradient accents,
   white sticky header, light footer, soft-shadow cards with a hover lift.
   ========================================================================== */

:root {
    --primary: hsl(220, 85%, 25%);
    --primary-hover: hsl(220, 85%, 20%);
    --primary-foreground: hsl(0, 0%, 100%);

    --secondary: hsl(25, 95%, 95%);
    --secondary-foreground: hsl(220, 15%, 15%);

    --accent: hsl(25, 85%, 55%);
    --accent-hover: hsl(25, 85%, 50%);
    --accent-foreground: hsl(0, 0%, 100%);

    --background: hsl(220, 25%, 95.5%);
    --foreground: hsl(220, 15%, 15%);

    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(220, 15%, 15%);

    --muted: hsl(220, 15%, 94%);
    --muted-foreground: hsl(220, 10%, 45%);

    --border: hsl(220, 15%, 84%);
    --destructive: hsl(0, 84%, 60%);

    --gradient-hero: linear-gradient(135deg, hsl(220, 85%, 25%), hsl(25, 85%, 55%));
    --gradient-card: linear-gradient(145deg, hsl(0, 0%, 100%), hsl(220, 15%, 98%));
    --gradient-button: linear-gradient(135deg, hsl(220, 85%, 25%), hsl(220, 85%, 30%));

    --shadow-sm: 0 2px 4px hsla(220, 15%, 15%, 0.06);
    --shadow-md: 0 4px 12px hsla(220, 15%, 15%, 0.08);
    --shadow-lg: 0 8px 24px hsla(220, 15%, 15%, 0.12);
    --shadow-xl: 0 16px 48px hsla(220, 15%, 15%, 0.16);

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;

    /* Retint Bootstrap's own primary/link variables so every stock utility (bg-primary,
       text-primary, border-primary, links) follows this palette automatically. */
    --bs-primary: var(--primary);
    --bs-primary-rgb: 10, 46, 118;
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: 10, 46, 118;
    --bs-link-hover-color: var(--primary-hover);
    --bs-link-hover-color-rgb: 8, 37, 94;
}

html {
    font-size: 15px;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* ---- Navbar ---- */
.sajha-navbar {
    background-color: var(--card);
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--border);
}

.navbar-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-text {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-subtitle {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted-foreground);
}

.sajha-navbar .nav-link {
    color: var(--foreground);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    transition: var(--transition-fast);
}

.sajha-navbar .nav-link:hover {
    color: var(--primary);
    background-color: var(--muted);
}

.sajha-navbar .navbar-text {
    color: var(--foreground) !important;
}

.navbar .badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
}

.navbar-toggler {
    border-color: var(--border);
}

.nav-auth-group {
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .sajha-navbar .navbar-collapse {
        padding-bottom: 1rem;
    }
    .nav-auth-group {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
    .nav-auth-group .nav-item {
        flex: 1;
    }
    .nav-auth-group .nav-item-username {
        flex-basis: 100%;
        margin: 0 0 0.5rem !important;
    }
    .nav-auth-group .btn {
        width: 100%;
    }
    .nav-auth-group .navbar-text {
        padding: 0.4rem 0;
    }
}

/* ---- Region switcher (custom dropdown with flag icons) ---- */
.region-dropdown-menu {
    min-width: 300px;
    max-width: calc(100vw - 2rem);
}

.region-search-input {
    border-color: var(--border);
}

.region-option-list {
    max-height: 360px;
    overflow-y: auto;
}

.region-option {
    font-size: 0.88rem;
}

.region-option.selected {
    background-color: var(--secondary);
    color: var(--primary);
    font-weight: 600;
}

.region-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-option-country {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    flex-shrink: 0;
}

.region-option-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px hsla(220, 15%, 15%, 0.12);
}

.region-option-flag-blank {
    background-color: var(--muted);
}

.region-option-globe {
    color: var(--primary);
}

.region-toggle-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px hsla(220, 15%, 15%, 0.15);
}

@media (max-width: 575.98px) {
    .region-dropdown-menu {
        min-width: 0;
        width: 100%;
    }
}

/* ---- Footer ---- */
.sajha-footer {
    background-color: var(--card);
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
}

.sajha-footer a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: var(--transition-fast);
}

.sajha-footer a:hover {
    color: var(--primary);
}

/* ---- Hero banner ---- */
/* Grid overlay: image and text share the same cell. The image is never cropped
   (width:100%, height:auto keeps its true proportions); if the overlaid text
   ever needs more room than the image is tall, the row grows to fit the text
   instead of clipping it, and the extra space is filled by the brand gradient. */
.hero-nepal {
    display: grid;
    overflow: hidden;
    background: var(--gradient-hero);
}

.hero-photo {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 6 / 1;
    object-fit: cover;
    object-position: center 35%;
    align-self: start;
}

.hero-overlay {
    grid-area: 1 / 1;
    background-image: linear-gradient(100deg, hsla(220, 70%, 10%, 0.9) 0%, hsla(220, 70%, 15%, 0.72) 30%, hsla(220, 60%, 20%, 0.32) 58%, hsla(25, 60%, 25%, 0.08) 80%, hsla(25, 60%, 25%, 0) 100%);
}

.hero-text-overlay {
    grid-area: 1 / 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-tile-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.stat-tile-label {
    font-size: 0.82rem;
    color: var(--muted-foreground);
}

.stat-tile-link {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-tile-link:hover,
.stat-tile-link:focus-visible {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.hero-accent {
    color: var(--accent);
}

/* The hero's close (X) button sits over a bright sky, so give it a soft dark disc to stay visible on any photo */
.hero-nepal .btn-close {
    background-color: rgba(0, 0, 0, 0.4);
    /* btn-close-white applies filter: invert(), which turned this dark disc white and hid the X - draw a white X directly instead */
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-size: 0.75em;
    border-radius: 50%;
    padding: 0.55rem;
    opacity: 1;
}
.hero-nepal .btn-close:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

.hero-nepal .hero-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.hero-nepal .hero-lead {
    font-size: 0.95rem;
    font-weight: 400;
}

@media (max-width: 575.98px) {
    /* on phones the text block is taller than a 6:1 photo, which left a visible seam through the heading */
    .hero-photo {
        aspect-ratio: 5 / 2;
    }
    .hero-nepal .hero-title {
        font-size: 1.3rem;
        line-height: 1.25;
    }
    .hero-nepal .hero-lead {
        font-size: 0.82rem;
    }
    .hero-nepal .hero-cta {
        padding: 0.4rem 0.9rem;
        font-size: 0.85rem;
    }
}

/* ---- Sponsorship: homepage hero spotlight + "thank you" card (2026-09-28) ----
   The old photo hero above is replaced on the homepage by this two-part split: a rotating
   sponsor spotlight (left) and a thank-you/pitch card (right) - see views/home/_sponsorHero.cfm.
   The same .supporter-feature-stage/-thumbs markup and assets/js/supporter-carousel.js also drive the
   Sponsors page's per-tier banner grids (.supporter-tier-grid below). */
.supporter-hero-row {
    align-items: stretch;
}
.supporter-feature {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--gradient-hero);
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.1rem 0.9rem;
    gap: 0.65rem;
}
.supporter-feature-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.92;
}
.supporter-gem {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: var(--accent);
    flex: none;
}
.supporter-feature-stage {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 0.5rem;
    aspect-ratio: 3 / 1;
}
.supporter-feature-stage::-webkit-scrollbar {
    display: none;
}
.supporter-feature-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: block;
}
.supporter-feature-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.supporter-feature-invite {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1.5px dashed hsla(0, 0%, 100%, 0.4);
    border-radius: 0.5rem;
    color: #fff;
    text-decoration: none;
    padding: 1.5rem;
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 8rem;
    box-sizing: border-box;
}
.supporter-feature-invite:hover {
    border-color: hsla(0, 0%, 100%, 0.7);
}
.supporter-feature-invite h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.supporter-feature-invite p {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0;
}
.supporter-feature-thumbs {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 40px;
}
.supporter-feature-thumbs::-webkit-scrollbar {
    display: none;
}
/* Hidden by default on a "hover" stage (the homepage spotlight is an ad slot, kept clean) -
   revealed by desktop :hover/:focus-within, or by a first tap on touch (assets/js/supporter-carousel.js
   toggles .thumbs-open, since :hover never fires on touch). A "visible" stage (Sponsors page) never
   gets this rule, so its thumbnails just show whenever the phone media query below displays them. */
.supporter-feature[data-thumbs-mode="hover"] .supporter-feature-thumbs {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.supporter-feature[data-thumbs-mode="hover"].thumbs-open .supporter-feature-thumbs {
    opacity: 1;
    pointer-events: auto;
}
/* Only real-hover devices: on a phone a tap leaves a "sticky" :hover, which would keep the strip open
   after tapping a thumbnail (the JS closes it by removing .thumbs-open). */
@media (hover: hover) {
    .supporter-feature[data-thumbs-mode="hover"]:hover .supporter-feature-thumbs,
    .supporter-feature[data-thumbs-mode="hover"]:focus-within .supporter-feature-thumbs {
        opacity: 1;
        pointer-events: auto;
    }
}
.supporter-feature-thumb {
    flex: 0 0 68px;
    aspect-ratio: 3 / 1;
    border-radius: 0.3rem;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    opacity: 0.6;
    background: none;
    cursor: pointer;
}
.supporter-feature-thumb.is-active {
    border-color: var(--accent);
    opacity: 1;
}
/* Homepage: the strip overlays the bottom of the banner on a dark fade (no extra row below it) */
.supporter-feature-frame {
    position: relative;
}
.supporter-feature-frame .supporter-feature-thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 0;
    justify-content: center;
    padding: 1.4rem 0.6rem 0.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    z-index: 2;
}
.supporter-feature-frame .supporter-feature-thumb {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.supporter-feature-frame .supporter-feature-thumb:hover {
    opacity: 1;
}
.supporter-feature-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.supporter-note {
    position: relative;
    height: 100%;
    border-radius: 0.75rem;
    background: var(--secondary);
    border: 1px solid var(--border);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
}
.supporter-note-watermark {
    position: absolute;
    right: -0.3rem;
    bottom: -1.2rem;
    font-family: "Noto Sans Devanagari", sans-serif;
    font-weight: 700;
    font-size: 4.5rem;
    color: var(--accent);
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}
.supporter-note-eyebrow,
.supporter-note-title,
.supporter-note > p,
.supporter-chips,
.supporter-note-cta {
    position: relative;
    z-index: 1;
}
.supporter-note-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.supporter-note-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
}
.supporter-note-title span {
    color: var(--accent);
}
.supporter-note > p {
    margin: 0;
    color: var(--secondary-foreground);
}
.supporter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.supporter-chip {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    background: var(--primary);
}
/* Cycled by position (views/home/_sponsorHero.cfm) so a row of sponsor initials reads as distinct
   people rather than one flat color - never built from a hex literal in CFML (see the CFML
   "#" gotcha in CLAUDE.md: a bare "#rrggbb" inside a CFML string is a compile error). */
.supporter-chip-c0 { background: var(--primary); }
.supporter-chip-c1 { background: var(--accent); }
.supporter-chip-c2 { background: #5c8a3a; }
.supporter-chip-c3 { background: #8a3a6f; }
.supporter-chip-c4 { background: #3a7a8a; }
.supporter-chip-c5 { background: #8a6a1e; }
.supporter-chip-more {
    background: var(--muted);
    color: var(--muted-foreground);
}
.supporter-note-cta {
    font-weight: 600;
    margin-top: auto;
}
.supporter-note-cta-primary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--accent);
    color: #fff !important;
    text-decoration: none;
    width: fit-content;
}
.supporter-note-cta-primary:hover {
    background: var(--accent-hover);
}
@media (max-width: 575.98px) {
    .supporter-feature {
        padding: 0.85rem 0.85rem 0.7rem;
    }
    .supporter-note-title {
        font-size: 1.2rem;
    }
}

/* ---- Sponsors page: tier banner grids (3-across on desktop, swipe + thumbnails on a phone) ---- */
.supporter-tier {
    margin-top: 2rem;
}
.supporter-tier-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.supporter-tier-head h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    color: var(--tier-c, var(--primary));
}
.supporter-tier-head .supporter-gem {
    background: var(--tier-c, var(--accent));
}
.supporter-tier-head-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--tier-c, var(--border)), transparent);
}
/* Tier accent colors, set as a class (never a hex literal built in CFML - see the "#" gotcha). */
.supporter-tier-platinum { --tier-c: #5b8bb0; }
.supporter-tier-gold { --tier-c: #b8860b; }
.supporter-tier-silver { --tier-c: #6c757d; }
.supporter-price-card {
    border-top: 4px solid var(--tier-c, var(--border));
}
.supporter-price-card h3 {
    color: var(--tier-c, var(--primary));
}
.supporter-tier-count {
    font-size: 0.8rem;
    color: var(--muted-foreground);
}
.supporter-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.supporter-slot {
    position: relative;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 3 / 1;
    display: block;
}
.supporter-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.supporter-tier-empty {
    padding: 1.25rem;
    border: 1.5px dashed var(--border);
    border-radius: 0.6rem;
    text-align: center;
    color: var(--muted-foreground);
}
.supporter-tier-thumbs {
    display: none;
}
@media (max-width: 767.98px) {
    .supporter-tier-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }
    .supporter-tier-grid::-webkit-scrollbar {
        display: none;
    }
    .supporter-slot {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
    .supporter-tier-thumbs {
        display: flex;
        gap: 0.4rem;
        margin-top: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .supporter-tier-thumbs::-webkit-scrollbar {
        display: none;
    }
}
.supporter-tier-thumb {
    flex: 0 0 22%;
    aspect-ratio: 3 / 1;
    border-radius: 0.3rem;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    opacity: 0.55;
    background: none;
    cursor: pointer;
}
.supporter-tier-thumb.is-active {
    border-color: var(--tier-c, var(--accent));
    opacity: 1;
}
.supporter-tier-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Page frame: wraps the whole 1200px content area in one shaded box ---- */
.page-frame {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
}

@media (max-width: 575.98px) {
    /* Phones: maximise usable width - the page wrapper (header.cfm's "container py-4") loses all its
       padding and the frame goes edge to edge with no border/corners/shadow (decided 2026-09-23). */
    .container.py-4 {
        padding: 0 !important;
    }
    .page-frame {
        padding: 1rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* Detail pages (News thread, Classifieds, Events, Providers, Service requests) - their controllers set
       pageFrameBoxed = true so everything on the page sits inside one visible boundary, like the form cards do.
       A small outer margin keeps the border off the very edge of the screen. */
    .page-frame.page-frame-boxed {
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        box-shadow: var(--shadow-md);
        margin: 0.5rem;
    }
    /* Opt-in (includes/header.cfm sets pageFrameFlush before a "single centered card" form page -
       Login/Register/Forgot-Reset Password/Complete Profile, Listings/Events/Providers New & Edit):
       the card already has its own shadow and padding, so the frame around it just eats width on a
       phone for no visual benefit. Desktop is untouched - the centered column there is intentional. */
    .page-frame-flush {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--gradient-card);
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}

.list-group-item-action:hover {
    background-color: var(--muted);
}

/* ---- Buttons ---- */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background: var(--gradient-button);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}

.btn-secondary {
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-color: var(--secondary-foreground);
    --bs-btn-hover-bg: var(--muted);
    --bs-btn-hover-border-color: var(--muted);
    --bs-btn-hover-color: var(--secondary-foreground);
    --bs-btn-active-bg: var(--muted);
    --bs-btn-active-border-color: var(--muted);
    --bs-btn-active-color: var(--secondary-foreground);
}

/* ---- Badges / price tags ---- */
.badge {
    border-radius: 9999px;
    font-weight: 500;
}

.badge.bg-success {
    background-color: hsl(142, 60%, 40%) !important;
}

.text-success {
    color: hsl(142, 60%, 35%) !important;
}

.badge.bg-danger, .badge.bg-destructive {
    background-color: var(--destructive) !important;
}

/* ---- Forms ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem hsla(220, 85%, 25%, 0.15);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem hsla(220, 85%, 25%, 0.15);
}

/* ---- Listing photo upload slots ---- */
.photo-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    background: var(--card);
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 0.5rem;
    margin: 0;
}

.photo-drop:hover {
    border-color: var(--primary);
}

.photo-drop-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Listing image gallery ---- */
.listing-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
}

.category-pills .btn {
    border-radius: 2rem;
}

/* ---- Section tabs (e.g. Classifieds: Browse / My Listings) ---- */
.nav-tabs {
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    color: var(--muted-foreground);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.6rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--primary);
}

/* ---- Content cards (thread/listing/event/provider list items) ---- */
.content-card-hover {
    transition: var(--transition-smooth);
}

.content-card-hover:hover {
    box-shadow: var(--shadow-md);
}

/* ---- Embedded video links (YouTube/Facebook) in post bodies ---- */
.video-embed-landscape,
.video-embed-portrait {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.video-embed-landscape {
    aspect-ratio: 16 / 9;
}

.video-embed-portrait {
    max-width: 380px;
    aspect-ratio: 9 / 16;
    margin-left: auto;
    margin-right: auto;
}

.video-embed-landscape iframe,
.video-embed-portrait iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- "Translate to Nepali" link (content detail pages) ---- */
.translate-ne-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    text-decoration: none;
}

.translate-ne-link.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* ---- Section icon badges (homepage) ---- */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    color: #fff;
    flex-shrink: 0;
}

.icon-badge svg {
    width: 1.15rem;
    height: 1.15rem;
}

.icon-badge-blue { background: linear-gradient(135deg, hsl(220, 85%, 25%), hsl(220, 85%, 40%)); }
.icon-badge-orange { background: linear-gradient(135deg, hsl(25, 85%, 50%), hsl(38, 90%, 55%)); }
.icon-badge-green { background: linear-gradient(135deg, hsl(150, 60%, 32%), hsl(150, 55%, 45%)); }
.icon-badge-purple { background: linear-gradient(135deg, hsl(265, 55%, 45%), hsl(280, 60%, 58%)); }
.icon-badge-teal { background: linear-gradient(135deg, hsl(190, 70%, 32%), hsl(190, 65%, 46%)); }
.icon-badge-red { background: linear-gradient(135deg, hsl(0, 70%, 45%), hsl(10, 75%, 55%)); }

.badge-soft-blue { background-color: hsl(220, 85%, 94%); color: hsl(220, 85%, 30%); }
.badge-soft-orange { background-color: hsl(25, 90%, 92%); color: hsl(25, 80%, 38%); }
.badge-soft-green { background-color: hsl(150, 55%, 92%); color: hsl(150, 55%, 28%); }
.badge-soft-purple { background-color: hsl(265, 55%, 94%); color: hsl(265, 45%, 40%); }
.badge-soft-teal { background-color: hsl(190, 60%, 92%); color: hsl(190, 65%, 26%); }
.badge-soft-red { background-color: hsl(0, 80%, 94%); color: hsl(0, 65%, 42%); }

.icon-badge-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.5rem;
}
.icon-badge-sm svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* ---- Event date/poster accents ---- */
.event-date-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, hsl(150, 60%, 32%), hsl(150, 55%, 45%));
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}
.event-date-ribbon svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.event-poster-placeholder {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero);
    color: hsla(0, 0%, 100%, 0.85);
}
.event-poster-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}
.event-poster-placeholder-lg {
    height: 220px;
}
.event-poster-placeholder-lg svg {
    width: 3.5rem;
    height: 3.5rem;
}

.stars-inline {
    color: hsl(38, 92%, 50%);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ---- Recipient picker (hint-based message compose) ---- */
.recipient-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: var(--card);
    cursor: text;
}

.recipient-picker:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem hsla(220, 85%, 25%, 0.15);
}

.recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border-radius: 9999px;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.recipient-chip-pending {
    background-color: hsl(25, 90%, 94%);
    border: 1px dashed hsl(25, 80%, 55%);
}

.recipient-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
}

.recipient-chip-remove:hover {
    opacity: 1;
}

#recipientInput {
    border: none;
    outline: none;
    flex: 1;
    min-width: 150px;
    padding: 0.25rem;
    background: transparent;
}

.recipient-suggestions {
    margin-top: 0.25rem;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    border-radius: 0.5rem;
}

/* ---- Original post vs. reply/quote/response hierarchy ----
   The "main posting" (thread OP, event, listing, need, provider) gets a bold
   accent card with an eyebrow label. Replies/quotes/reviews underneath get a
   visually quieter, indented "response" treatment so the two are never
   confused at a glance. */
.original-post-card {
    /* Flat on detail pages - the boxed/accent card chrome cost too much screen space. */
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.original-post-card > .card-body {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5rem;
}

.original-post-card.accent-orange { border-left-color: hsl(25, 85%, 50%); }
.original-post-card.accent-green { border-left-color: hsl(150, 60%, 35%); }
.original-post-card.accent-purple { border-left-color: hsl(265, 55%, 48%); }
.original-post-card.accent-teal { border-left-color: hsl(190, 70%, 34%); }
.original-post-card.accent-red { border-left-color: hsl(0, 70%, 48%); }

.original-post-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}

/* Community News post image: floated left so the description text wraps beside
   it and then continues full-width below once the text runs past the image's
   height. Full width (no float) on mobile. */
.thread-post-image {
    float: left;
    width: 30%;
    margin: 0 1.25rem 0.75rem 0;
}

.thread-post-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .thread-post-image {
        float: none;
        width: 100%;
        margin: 0 0 0.75rem 0;
    }
}

/* Small square thumbnail for the homepage Community News list - the uploaded
   post image (cropped to fit) or a generic category icon when none exists.
   Deliberately cropped (unlike the full post-image convention) since this is
   a fixed-size list thumbnail, not the post body render. */
.news-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--muted);
}

.responses-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.75rem 0 1rem;
    color: var(--muted-foreground);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.responses-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.response-thread {
    position: relative;
    margin-left: 1.1rem;
    padding-left: 1.4rem;
    border-left: 2px dashed var(--border);
}

.response-card {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    box-shadow: none;
    position: relative;
}

.response-card::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: -1.65rem;
    width: 1rem;
    height: 2px;
    background: var(--border);
}

.response-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.response-empty {
    margin-left: 1.1rem;
    padding: 1.25rem 1.4rem;
    border: 1px dashed var(--border);
    border-radius: 0.65rem;
    color: var(--muted-foreground);
    background: var(--muted);
}

/* ---- Impactful form presentation ---- */
.form-hero-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.form-hero-header {
    background: var(--gradient-hero);
    padding: 1.85rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.form-hero-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% -20%, hsla(0, 0%, 100%, 0.25), transparent 55%);
    /* Purely decorative - without this, it sits on top of everything in the header (it's
       positioned and generated last, so it paints above the h2/icon too, which is why THEY
       already needed position:relative to escape it) and silently swallows clicks on any link
       added to the header text, even though the link stays visible through its transparent
       background. Found 2026-09-28 on the Sponsors form's "See how it looks" link - the first
       .form-hero-header to put a clickable link in the <p>. */
    pointer-events: none;
}

.form-hero-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: hsla(0, 0%, 100%, 0.18);
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    position: relative;
}

.form-hero-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
}

.form-hero-header h2 {
    color: #fff;
    margin-bottom: 0.3rem;
    position: relative;
}

.form-hero-header p {
    color: hsla(0, 0%, 100%, 0.88);
    margin-bottom: 0;
    font-size: 0.95rem;
    max-width: 32rem;
    position: relative;
}

.form-hero-body {
    background: var(--card);
    padding: 2rem;
}

.form-hero-body .form-label {
    font-weight: 600;
    font-size: 0.88rem;
}

.form-hero-body .btn-primary {
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    /* the fixed 2rem side padding left barely 60% of a phone's width for the actual inputs -
       same page-frame treatment: keep some breathing room, but not this much of it */
    .form-hero-header {
        padding: 1.25rem 1.1rem;
    }
    .form-hero-body {
        padding: 1.25rem 1.1rem;
    }
}

.form-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.85rem;
}

/* ---- Image lightbox ---- */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    padding: 0.25rem 0.9rem;
    cursor: pointer;
    z-index: 5;
    border-radius: 0.375rem;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

/* Community News list: the .mb-1 title/byline lines are set to the lightest weight. Scoped here because .mb-1 is a Bootstrap utility used site-wide. */
.news-list .mb-1 {
    font-weight: 100;
}

/* Share buttons (WhatsApp / Viber / Facebook / copy link) under posts, listings and events */
.share-viber {
    color: #7360f2;
    border: 1px solid #7360f2;
    background: transparent;
}
.share-viber:hover {
    color: #fff;
    background: #7360f2;
}

/* ---- Clickable star rating input (Provider reviews - assets/js/star-rating.js) ---- */
.star-rating-input {
    display: inline-flex;
    gap: 0.15rem;
}

.star-rating-star {
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--border);
    cursor: pointer;
}

.star-rating-star-filled {
    color: hsl(38, 92%, 50%);
}

.star-rating-star:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.star-rating-hint-error {
    color: var(--danger, #dc3545);
    font-weight: 600;
}

/* Compact hero header (2026-09-23): icon sits beside the title instead of above it, smaller title and
   padding - used on the Classifieds "Contact the Seller", Needs/Events "Submit a Quote", News "Post a
   Reply" and Provider "Leave a Review" cards. Opt in with class "hero-compact" on the .form-hero-card and
   wrap the icon + h2 in .hero-title-row. Other .form-hero-header uses (login, new/edit forms) are untouched. */
.hero-compact .form-hero-header {
    padding: 1rem 1.1rem;
}
.hero-compact .hero-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
    position: relative;
}
.hero-compact .form-hero-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    margin-bottom: 0;
    flex: none;
}
.hero-compact .form-hero-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.hero-compact .form-hero-header h2 {
    font-size: 1.15rem;
    margin: 0;
}
.hero-compact .form-hero-body {
    padding: 1rem 1.1rem;
}

/* Detail-page title (News thread, Classifieds, Events, Service requests, Providers): 25% smaller than Bootstrap's default h2 (calc(1.325rem + .9vw), 2rem from 1200px up) */
.detail-title-sm {
    font-size: calc(0.99375rem + 0.675vw);
}
@media (min-width: 1200px) {
    .detail-title-sm {
        font-size: 1.5rem;
    }
}

/* ---- Member avatars + author links (profiles) ---- */
.avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    vertical-align: middle;
}
.avatar-sm { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
.avatar-md { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.avatar-lg { width: 6rem; height: 6rem; font-size: 2.4rem; }
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-foreground, #fff);
    background: var(--primary, hsl(217, 70%, 45%));
}
.author-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    z-index: 2; /* stays clickable above a row's .stretched-link */
}
.author-link:hover .author-link-name { text-decoration: underline; }

/* ---- Notification bell (top nav dropdown + full page) ---- */
.notif-menu { width: 22rem; max-width: 92vw; }
.notif-tabs { display: flex; border-bottom: 1px solid var(--border, #dee2e6); }
.notif-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground, #6c757d);
    border-bottom: 2px solid transparent;
}
.notif-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.notif-panel { max-height: 22rem; overflow-y: auto; }
.notif-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    border-top: 1px solid var(--border, #dee2e6);
}
.notif-item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.9rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border, #eef0f2);
}
.notif-item:hover { background: var(--muted, #f6f7f9); color: inherit; }
.notif-item.notif-unread { background: hsla(220, 85%, 45%, 0.06); }
.notif-item.notif-unread .notif-title { font-weight: 700; }
.notif-icon {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--muted, #eef0f2);
    color: var(--primary);
}
.notif-icon-alert { color: hsl(25, 85%, 45%); }
.notif-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.85rem; line-height: 1.3; }
.notif-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.notif-body { color: var(--muted-foreground, #6c757d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { color: var(--muted-foreground, #6c757d); font-size: 0.72rem; }
.notif-list .notif-item:last-child { border-bottom: 0; }

/* Narrow desktop (992-1199px): the logged-in nav now has a People link too, so tighten spacing so the username and Logout don't wrap or clip */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sajha-navbar .navbar-nav .nav-link { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.9rem; }
    .sajha-navbar .nav-item-username .navbar-text { font-size: 0.85rem; white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
    .sajha-navbar .nav-auth-group { flex-wrap: nowrap; }
}

.author-follow { font-size: 0.78rem; font-weight: 600; text-decoration: none; vertical-align: baseline; position: relative; z-index: 2; }
.author-follow:hover { text-decoration: underline; }


/* ---- Home-screen app / push notifications (2026-09-23) ---- */
.push-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--background, #fff);
    border: 1px solid rgba(10, 46, 118, 0.25);
    border-radius: 14px;
}
.push-banner[hidden] { display: none; }
.push-banner-text { flex: 1 1 200px; font-size: 0.95rem; font-weight: 600; }
.push-banner-actions { display: flex; align-items: center; gap: 4px; }
.install-steps li { margin-bottom: 0.4rem; }

/* ---- Mobile menu: fit more on screen and scroll when it doesn't (2026-09-24) ----
   The navbar is sticky, so an open menu taller than the phone used to push its lower part
   (auth buttons, bell panel) out of reach with no way to scroll to it. */
@media (max-width: 991.98px) {
    .sajha-navbar .navbar-collapse {
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 0.5rem;
    }
    .sajha-navbar .navbar-nav .nav-link {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
    .sajha-navbar .navbar-nav.mb-2 {
        margin-bottom: 0.25rem !important;
    }
    .nav-auth-group {
        margin-top: 0.4rem;
        padding-top: 0.5rem;
    }
}

/* ---- Top bar tidy-up (2026-09-24): "More" menu, one account menu, indented sub-menus on phones ---- */
.nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.nav-account-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-toggle-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-head { padding: 0.35rem 1rem 0.25rem; min-width: 13rem; }
.nav-account-menu .dropdown-item { padding-top: 0.45rem; padding-bottom: 0.45rem; }
@media (min-width: 992px) {
    .sajha-navbar .nav-account-toggle {
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 0.2rem 0.65rem 0.2rem 0.3rem;
    }
}
@media (max-width: 991.98px) {
    /* Sub-menus (Communities, More, account) open inline, indented under their parent with a guide line */
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) {
        border: 0;
        border-left: 2px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        margin: 0 0 0.35rem 0.85rem;
        padding: 0 0 0 0.35rem;
    }
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item {
        padding: 0.4rem 0.75rem;
        font-size: 0.92rem;
        color: var(--muted-foreground);
        border-radius: 0.4rem;
    }
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item:hover,
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item:focus {
        background: var(--muted);
        color: var(--primary);
    }
    .sajha-navbar .navbar-nav .dropdown-menu .dropdown-item.text-danger { color: var(--bs-danger) !important; }
    .sajha-navbar .navbar-nav .dropdown-menu .dropdown-divider { margin: 0.25rem 0.5rem; }
    .sajha-navbar .nav-account-head { padding: 0.35rem 0.75rem 0.25rem; min-width: 0; }
    /* caret pushed to the right edge so the parent rows line up */
    .sajha-navbar .navbar-nav .nav-link.dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
    .sajha-navbar .nav-account-toggle.dropdown-toggle,
    .sajha-navbar .nav-region-item .nav-link.dropdown-toggle { justify-content: flex-start; }
    .sajha-navbar .nav-account-toggle.dropdown-toggle::after,
    .sajha-navbar .nav-region-item .nav-link.dropdown-toggle::after { margin-left: auto; }
    .sajha-navbar .navbar-collapse { padding-top: 0.5rem; }
    /* the auth block stacks: region, account (or Login / Register) */
    .nav-auth-group { flex-direction: column; align-items: stretch; gap: 0.15rem; }
    .sajha-navbar .nav-auth-group .nav-item { flex: none; }
    .sajha-navbar .nav-auth-group .nav-item .btn { width: 100%; }
}

/* ---- Bell beside the burger icon on phones (2026-09-24) ----
   The bell now lives outside the collapsing menu. On a phone its panel opens as a full-width sheet
   under the top bar (a 22rem panel anchored to a bell near the right edge would be cut off on the left). */
.nav-bell-group .nav-link { padding-left: 0.5rem; padding-right: 0.5rem; }
@media (max-width: 991.98px) {
    .sajha-navbar .nav-bell-group .dropdown { position: static; }
    .sajha-navbar .nav-bell-group .dropdown-menu.notif-menu {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 100%;
        width: auto;
        max-width: none;
        margin-top: 0;
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
    }
}

/* ---- Conversation bubbles: compact, sender name always on ONE line (2026-09-24) ---- */
.msg-row { display: flex; margin-bottom: 0.5rem; }
.msg-bubble { padding: 0.35rem 0.6rem; max-width: 88%; min-width: 0; }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; min-width: 0; }
.msg-name { font-size: 0.8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { font-size: 0.7rem; flex: 0 0 auto; white-space: nowrap; }
.msg-body { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }

/* ---- Conversation page (2026-09-24) ----
   Desktop/tablet: the original cards, bubbles a little tighter. Phones (<576px): a full-screen chat -
   slim top bar, bubbles (mine on the right in navy, theirs on the left in grey), day dividers, one time
   stamp per run of messages, chips in one swipeable row, and a pill reply box with a round send button.
   The run/divider markers come from assets/js/messages-poll.js (class js-chat on #messagesList). */
.chat-scroll { max-height: 55vh; overflow-y: auto; }
.chat-day, .chat-stamp, .msg-mini, .chat-context .chat-sub { display: none; }
.chat-send .send-icon { display: none; }
.chat-context { font-size: 0.85rem; margin-bottom: 0.5rem; }

@media (max-width: 575.98px) {
    body:has(.chat-shell) .sajha-footer { display: none; }
    .chat-shell {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 4.6rem);
        height: calc(100dvh - 4.6rem);
        background: var(--card);
    }
    .chat-top {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.35rem 0.6rem;
        border-bottom: 1px solid var(--border);
        flex: 0 0 auto;
    }
    .chat-back { font-size: 2rem; line-height: 1; padding: 0 0.4rem 0.2rem; color: var(--primary); text-decoration: none; }
    .chat-avatar {
        width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: 0 0 auto;
        background: var(--primary); color: #fff; font-weight: 700;
        display: grid; place-items: center;
    }
    .chat-who { min-width: 0; }
    .chat-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-sub { display: block !important; font-size: 0.75rem; color: var(--muted-foreground); }
    .chat-context { flex: 0 0 auto; padding: 0.25rem 0.75rem; margin: 0; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .chat-card {
        flex: 1 1 auto; min-height: 0;
        border: 0; border-radius: 0; box-shadow: none !important;
        margin: 0 !important; display: flex; flex-direction: column;
    }
    .chat-scroll { flex: 1 1 auto; max-height: none; padding: 0.4rem 0.6rem; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    #messagesList.js-chat { display: flex; flex-direction: column; }

    .js-chat .msg-row { margin: 2px 0 0; align-items: flex-end; gap: 0.4rem; }
    .js-chat .msg-row.run-first { margin-top: 8px; }
    .js-chat .msg-bubble { max-width: 80%; padding: 0.4rem 0.75rem; border-radius: 1.15rem !important; }
    .js-chat .msg-row.theirs .msg-bubble { background: var(--muted) !important; border-bottom-left-radius: 0.3rem !important; }
    .js-chat .msg-row.mine .msg-bubble { background: var(--primary) !important; color: #fff; border-bottom-right-radius: 0.3rem !important; }
    .js-chat .msg-body { font-size: 1rem; line-height: 1.3; }
    .js-chat .msg-head { display: none; }
    /* group chats: name above the first bubble of someone else's run */
    .chat-group .js-chat .msg-row.theirs.run-first .msg-head { display: flex; }
    .chat-group .js-chat .msg-row.theirs.run-first .msg-time { display: none; }
    .chat-group .js-chat .msg-row.theirs.run-first .msg-name { color: var(--primary); }

    .msg-mini {
        display: grid; place-items: center; flex: 0 0 auto;
        width: 1.5rem; height: 1.5rem; border-radius: 50%;
        background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 700;
        visibility: hidden;
    }
    .js-chat .msg-row.theirs.run-last .msg-mini { visibility: visible; }

    .chat-day { display: block; align-self: center; font-size: 0.75rem; color: var(--muted-foreground); margin: 0.7rem 0 0.2rem; }
    .chat-stamp { display: block; font-size: 0.7rem; color: var(--muted-foreground); margin: 1px 0.3rem 0; }
    .chat-stamp.mine { align-self: flex-end; }
    .chat-stamp.theirs { align-self: flex-start; margin-left: 2.1rem; }

    .chat-foot-card {
        flex: 0 0 auto; margin: 0; border-radius: 0; border: 0;
        border-top: 1px solid var(--border) !important; box-shadow: none;
    }
    .chat-foot-card .card-body { padding: 0.35rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom, 0px)); }
    .chat-foot-card .quick-replies { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0.4rem; scrollbar-width: none; }
    .chat-foot-card .quick-replies::-webkit-scrollbar { display: none; }
    .chat-foot-card .quick-replies > span { display: none; }
    .chat-foot-card .qr-chip { flex: 0 0 auto; white-space: nowrap; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
    .chat-foot-card .input-group { flex-wrap: nowrap; align-items: flex-end; gap: 0.5rem; }
    .chat-foot-card textarea.form-control {
        border: 0; background: var(--muted); resize: none; overflow-y: auto;
        border-radius: 1.3rem !important; padding: 0.55rem 0.95rem;
        font-size: 16px; /* 16px stops iOS zooming in on focus */
        height: 2.6rem; min-height: 2.6rem; max-height: 7.5rem;
    }
    .chat-foot-card .chat-send {
        flex: 0 0 auto; width: 2.6rem; height: 2.6rem; padding: 0;
        border-radius: 50% !important; display: grid; place-items: center;
    }
    .chat-send .send-label { display: none; }
    .chat-send .send-icon { display: block; width: 1.25rem; height: 1.25rem; fill: #fff; }
}

/* Conversation, keyboard up (phones): the chat panel is pinned to the visible area above the keyboard.
   Its top/height come from assets/js/messages-poll.js (visualViewport). It covers the site nav while typing. */
@media (max-width: 575.98px) {
    html.chat-kb, html.chat-kb body { overflow: hidden; }
    html.chat-kb .chat-shell { position: fixed; left: 0; right: 0; z-index: 1045; }
}

/* Conversation, desktop/tablet (2026-09-25): the same idea as the phone - the chat fills the window, only the
   messages scroll, and the reply box stays pinned at the bottom (with the quick replies), instead of trailing
   after a short message list. The site footer is hidden on this page, as on phones. */
@media (min-width: 576px) {
    body:has(.chat-shell) .sajha-footer { display: none; }
    .chat-shell {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 10.9rem);
        height: calc(100dvh - 10.9rem);
        min-height: 26rem;
    }
    .chat-shell > * { flex: 0 0 auto; }
    .chat-shell > .chat-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .chat-shell > .chat-card .chat-scroll { flex: 1 1 auto; max-height: none; min-height: 0; }
}

/* Conversation reply box: one line on phones (see the phone block above); two lines' worth of height on larger screens */
.chat-foot-card textarea.form-control { min-height: 4.2rem; }
@media (max-width: 575.98px) {
    .chat-foot-card textarea.form-control { height: 2.6rem; min-height: 2.6rem; overflow-y: hidden; }
}

/* ---- Inbox (message list): compact Messenger-style rows (2026-09-24) ---- */
.inbox-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem 0.5rem 0.4rem; }
.inbox-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: 0 0 auto; background: transparent; }
.inbox-row.is-unread .inbox-dot { background: var(--primary); }
.inbox-avatar {
    width: 2.7rem; height: 2.7rem; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
    background: var(--primary); color: #fff;
}
.inbox-avatar.is-group { background: var(--accent); }
.inbox-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inbox-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.inbox-name { font-size: 1rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); }
.inbox-when { font-size: 0.75rem; color: var(--muted-foreground); flex: 0 0 auto; white-space: nowrap; }
.inbox-preview { font-size: 0.88rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row.is-unread .inbox-name, .inbox-row.is-unread .inbox-preview { font-weight: 700; color: var(--foreground); }
.inbox-row.is-unread .inbox-when { color: var(--primary); font-weight: 700; }
@media (max-width: 575.98px) {
    .inbox-title { font-size: 1.35rem; }
    .inbox-list { border-radius: 0.75rem; overflow: hidden; }
}

/* ---- New message screen (2026-09-24): Messenger-style "To:" row + people list + message bar ---- */
.newmsg-top { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.newmsg-cancel { color: var(--primary); text-decoration: none; font-size: 1rem; min-width: 4rem; }
.newmsg-title { font-size: 1.05rem; }
.newmsg-top-spacer { min-width: 4rem; }
.newmsg-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.newmsg-to { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.9rem; background: var(--muted); flex: 0 0 auto; }
.newmsg-to-label { color: var(--muted-foreground); padding-top: 0.45rem; margin: 0; }
.newmsg-to .recipient-picker { flex: 1 1 auto; border: 0; background: transparent; padding: 0.15rem 0; box-shadow: none !important; min-width: 0; }
.newmsg-to .recipient-chip { font-size: 0.95rem; background: var(--card); border: 1px solid var(--border); }
.newmsg-to #recipientInput { font-size: 16px; min-width: 7rem; padding: 0.35rem 0.2rem; }
.newmsg-results-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.newmsg-results { display: flex; flex-direction: column; }
.newmsg-result { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.5rem 0.9rem; }
.newmsg-result:active, .newmsg-result:hover { background: var(--muted); }
.newmsg-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: 0 0 auto; object-fit: cover; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.05rem; }
.newmsg-result-name { font-size: 1.05rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.newmsg-hint { margin: 0; padding: 0.9rem; font-size: 0.85rem; color: var(--muted-foreground); }
.newmsg-group { padding: 0.4rem 0.9rem; flex: 0 0 auto; border-top: 1px solid var(--border); }
.newmsg-form .chat-foot-card { border-radius: 0; border: 0; border-top: 1px solid var(--border); box-shadow: none; margin: 0; }
.newmsg-form .chat-foot-card .card-body { padding: 0.45rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 576px) {
    .newmsg-shell { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
    .newmsg-results-wrap { min-height: 14rem; max-height: 24rem; }
    .newmsg-form .chat-foot-card textarea.form-control { min-height: 4.2rem; }
}
@media (max-width: 575.98px) {
    .newmsg-shell { border-radius: 0; }
}

/* ---- Group chats: the › arrow in the phone chat bar and the Group info page (2026-09-24) ---- */
.groupinfo-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.groupinfo-top .chat-back { font-size: 2rem; line-height: 1; color: var(--primary); text-decoration: none; padding: 0 0.4rem 0.2rem 0; }
.groupinfo-members .avatar-md { width: 2.4rem; height: 2.4rem; }
.groupinfo-members .author-link { font-weight: 600; font-size: 1.02rem; }
@media (max-width: 575.98px) {
    .chat-info { margin-left: auto; font-size: 2rem; line-height: 1; color: var(--primary); text-decoration: none; padding: 0 0.5rem 0.2rem; }
}

/* ---- Discussion replies: comment-style rows (avatar, name + time, text, Reply / thumbs-up) (2026-09-24) ---- */
.reply-list { display: flex; flex-direction: column; gap: 1.1rem; }
.reply-item { display: flex; align-items: flex-start; gap: 0.65rem; }
.reply-avatar { flex: 0 0 auto; text-decoration: none; }
.reply-avatar .avatar-md { width: 2.6rem; height: 2.6rem; }
.reply-main { flex: 1 1 auto; min-width: 0; }
.reply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.4rem; }
.reply-name .author-link { font-weight: 700; font-size: 1.02rem; color: var(--foreground); text-decoration: none; }
.reply-time { font-size: 0.8rem; color: var(--muted-foreground); }
.reply-body { font-size: 1.05rem; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 0.1rem; }
.reply-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; }
.reply-actions > a { color: var(--muted-foreground); text-decoration: none; }
.reply-actions .reaction-bar { margin: 0; display: inline-flex; flex-wrap: nowrap; }
.reply-actions .reaction-btn { border: 0; background: transparent; padding: 0.1rem 0; gap: 0.35rem; color: var(--muted-foreground); line-height: 1; }
.reply-actions .reaction-btn:hover { background: transparent; color: var(--primary); }
.reply-actions .reaction-btn svg { width: 1.3rem; height: 1.3rem; fill: none; }
.reply-actions .reaction-btn.is-active { background: transparent; color: var(--primary); }
.reply-actions .reaction-btn.is-active svg { fill: currentColor; }
.reply-actions .reaction-count { font-size: 0.9rem; font-weight: 600; }
/* replies now read like a comment feed - no dashed indent rail, so the text gets the full width */
.response-thread.reply-list { margin-left: 0; padding-left: 0; border-left: 0; }

/* ---- Reaction row + Save/Share bar: compact and lined up (2026-09-24) ---- */
.reaction-bar:not(.reply-like) { gap: 0.3rem; margin: 0.35rem 0; flex-wrap: nowrap; }
.reaction-bar:not(.reply-like) .reaction-btn { padding: 0.05rem 0.55rem; font-size: 1.05rem; line-height: 1.5; gap: 0.25rem; }
.reaction-bar:not(.reply-like) .reaction-count { font-size: 0.75rem; }

.share-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; margin-top: 0.4rem; }
.share-save { display: flex; }
.share-links { display: flex; align-items: center; gap: 0.4rem; }
.share-label { font-size: 0.85rem; color: var(--muted-foreground); flex: 0 0 auto; }
/* the four share buttons share the row equally, so they line up whatever their text length */
.share-links .btn { flex: 1 1 0; min-width: 0; padding: 0.2rem 0.3rem; font-size: 0.8rem; text-align: center; white-space: nowrap; }
@media (min-width: 576px) {
    .share-bar { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
    .share-links .btn { flex: 0 0 auto; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
}

/* ---- Top bar menus: tighter account menu, no highlight left behind after a click (2026-09-27) ---- */
.nav-account-menu { padding: 0.25rem 0; font-size: 0.9rem; }
.nav-account-head { padding: 0.2rem 0.85rem 0.15rem; }
.nav-account-menu .dropdown-item { padding: 0.22rem 0.85rem; }
.nav-account-menu .dropdown-divider { margin: 0.2rem 0; }
/* Bootstrap paints a clicked menu item solid blue (:active), and a tap leaves hover/focus shading behind.
   Keep shading only for a real mouse hover and for keyboard focus. */
.sajha-navbar .dropdown-item:active,
.sajha-navbar .dropdown-item.active { background-color: transparent; color: var(--bs-dropdown-link-color); }
.sajha-navbar .dropdown-item:focus:not(:focus-visible) { background-color: transparent; }
.sajha-navbar .navbar-nav .nav-link.show,
.sajha-navbar .navbar-nav .nav-link:focus:not(:focus-visible) { background-color: transparent; color: var(--foreground); }
@media (hover: none) {
    .sajha-navbar .nav-link:hover { background-color: transparent; color: var(--foreground); }
    .sajha-navbar .dropdown-item:hover { background-color: transparent; }
}
@media (max-width: 991.98px) {
    .sajha-navbar .navbar-nav .nav-account-menu.dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item { padding: 0.3rem 0.75rem; }
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item:active,
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item:focus:not(:focus-visible) { background: transparent; color: var(--muted-foreground); }
    .sajha-navbar .nav-account-head { padding: 0.2rem 0.75rem 0.15rem; }
}
@media (max-width: 991.98px) and (hover: none) {
    .sajha-navbar .navbar-nav .dropdown-menu:not(.notif-menu):not(.region-dropdown-menu) .dropdown-item:hover { background: transparent; color: var(--muted-foreground); }
}

/* ---- Top bar: no blue ring around a tapped menu title (2026-09-27) ----
   Bootstrap draws a thick light-blue ring (box-shadow) on a focused .nav-link. It is meant for keyboard users, but iPhone
   Safari also shows it after a TAP, so "Communities" / "More" / the account menu got a blue box when opened.
   Touch screens: no ring at all. Mouse + keyboard screens: a thin outline, and only when reached with the Tab key. */
.sajha-navbar .nav-link:focus-visible { box-shadow: none; outline: 2px solid var(--primary); outline-offset: 1px; }
@media (hover: none) {
    .sajha-navbar .nav-link:focus,
    .sajha-navbar .nav-link:focus-visible { box-shadow: none; outline: none; }
}