/* ==========================================================================
   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);
}

.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;
    }
}

/* ---- 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) {
    .page-frame {
        padding: 1rem;
        border-radius: 0.75rem;
    }
}

/* ---- 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%);
}

.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;
}

.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;
}