/**
 * Campaign Page Styles
 * Extracted from Pages/C/Campaign.cshtml
 */

/* ── Layout: sidebar pinned to physical LEFT + full-width main ─ */
.campaign-layout {
    display: flex;
    direction: ltr; /* force LTR flex ordering regardless of page dir="rtl" */
    align-items: flex-start;
    gap: 0;
    position: relative;
    width: 100%;
}

/* Restore RTL inside the children */
.campaign-sidebar,
.campaign-main {
    direction: rtl;
    top:0;
}

/* SIDEBAR — relative on desktop, scrolls along with the page */
.campaign-sidebar {
    display: none; /* hidden on mobile — bottom bar used instead */
}

@media (min-width: 992px) {
    .campaign-sidebar {
        display: block;
        position: relative;
        align-self: flex-start;
        flex: 0 0 300px;
        padding: 0 1rem 2rem;
    }

    /* Cards inside sidebar always fill width, text never overflows */
    .campaign-sidebar .card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .campaign-sidebar .card-body {
        overflow: hidden;
        word-break: break-word;
    }

    /* Constrain the layout to a readable max-width on large screens */
    .campaign-layout {
        max-width: 1400px;
        margin-inline: auto;
    }
}

/* Wider sidebar on xl screens */
@media (min-width: 1200px) {
    .campaign-sidebar {
        flex-basis: 340px;
    }
}

/* MAIN CONTENT — takes all remaining space */
.campaign-main {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 0 1.5rem 2rem 1rem;
}

@media (max-width: 991.98px) {
    .campaign-main {
        padding: 0 1rem 8rem; /* bottom padding for mobile bar */
        width: 100%;
    }
}

/* ── All donors / ambassadors section ──────────────────────── */
.all-tables-section {
    background: #f8fafc;
}

.all-tables-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 992px) {
    .all-tables-container {
        padding-left: calc(300px + 1.5rem); /* align with campaign-main on desktop */
    }
}

@media (min-width: 1200px) {
    .all-tables-container {
        padding-left: calc(340px + 1.5rem);
    }
}

@media (max-width: 991.98px) {
    .all-tables-section {
        padding-bottom: 7rem; /* clear mobile sticky bar */
    }
}

/* (table styles removed — now using card grid layout) */

/* pager buttons */
.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pager-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.pager-btn.active, .pager-btn:disabled { background: var(--ir-primary, #2563eb); color: #fff; border-color: var(--ir-primary, #2563eb); cursor: default; }
.pager-ellipsis { padding: 0 4px; color: #94a3b8; font-size: 0.85rem; }

/* ── Donor / Ambassador card grid ─────────────────────────── */
.donor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 1rem;
}

/* Dedicated full-page "All Donors" tab: denser, auto-filling grid that scales
   with the full-width main column instead of the fixed two columns. */
.donor-grid--all {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 767.98px) {
    .donor-grid { grid-template-columns: minmax(0, 1fr); }
    .donor-grid--all { grid-template-columns: minmax(0, 1fr); }
}

.donor-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.donor-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.donor-card__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.donor-card__avatar--anon {
    background: #f1f5f9;
    color: #94a3b8;
}

.donor-card__body {
    flex: 1;
    min-width: 0;
}

.donor-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.donor-card__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donor-card__name--anon {
    color: #94a3b8;
    font-style: italic;
}

.donor-card__amount {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ir-primary, #2563eb);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donor-card__meta {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}

.donor-card__meta .fundraiser-link {
    color: #64748b;
    font-weight: 500;
}

.donor-card__note {
    font-size: 0.82rem;
    color: #475569;
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ambassador-specific: medal badges for top 3 */
.donor-card__avatar--gold   { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.donor-card__avatar--silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #fff; }
.donor-card__avatar--bronze { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }

.donor-card__donations {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}

/* ── Share grid in sidebar ──────────────────────────────────── */
.share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    line-height: 1;
}

.share-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.share-btn i, .share-btn svg { font-size: 1.25rem; }

.share-btn__icon { width: 1.25rem; height: 1.25rem; }

.share-btn--facebook  { background: #1877f2; }
.share-btn--tiktok    { background: #010101; }
.share-btn--threads   { background: #000000; }
.share-btn--linkedin  { background: #0077b5; }
.share-btn--whatsapp  { background: #25d366; }
.share-btn--copy      { background: #64748b; }

/* ── Mobile bottom bar ──────────────────────────────────────── */
.campaign-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.13);
}

/* Secondary CTA in the mobile bar: bank-transfer details. Neutral slate so the
   orange donate button stays the only saturated colour in the bar and clearly
   reads as the primary action (a new brand hue here would compete with it). */
.btn-bank-transfer {
    border: 1.5px solid var(--color-neutral-300, #cbd5e1);
    color: var(--color-neutral-700, #334155);
    background: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.btn-bank-transfer .bi {
    font-size: 0.95rem;
}

.btn-bank-transfer:hover,
.btn-bank-transfer:focus {
    background: var(--color-neutral-50, #f8fafc);
    color: var(--color-neutral-800, #1e293b);
    border-color: var(--color-neutral-400, #94a3b8);
}

/* Donate stays visually dominant: it takes more of the bar than the secondary. */
.campaign-mobile-bar .btn-donate {
    flex: 1 1 58%;
}

.campaign-mobile-bar .btn-bank-transfer {
    flex: 1 1 42%;
}

/* Reserve space at the page bottom so the sticky mobile CTA doesn't overlap
   footer links or the accessibility widget. The bar uses .d-lg-none, so this
   only applies below the lg breakpoint where the bar is actually rendered. */
@media (max-width: 991.98px) {
    body:has(.campaign-mobile-bar) {
        padding-bottom: 90px;
    }
}

.mobile-share-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.mobile-share-btn:hover { color: #fff; transform: scale(1.1); }

/* ── Referral Banner ────────────────────────────────────────── */
.referral-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid var(--ir-primary, #2563eb);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.referral-banner i {
    color: var(--ir-primary, #2563eb);
    font-size: 1.25rem;
}

/* ── Hero overlay panel tweaks ────────────────────────────── */
@media (min-width: 992px) {
    .hero-info-overlay .row {
        justify-content: space-between;
    }
    .hero-info-overlay .col-lg-7 {
        max-width: calc(58.333% - 0.5rem);
    }
    .hero-info-overlay .col-lg-5 {
        max-width: calc(41.667% - 0.5rem);
    }
}

/* ── Campaign rich content ──────────────────────────────────── */
.campaign-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.campaign-content p { line-height: 1.8; margin-bottom: 1rem; max-width:100%!important}

.campaign-content h1, .campaign-content h2,
.campaign-content h3, .campaign-content h4,
.campaign-content h5, .campaign-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.campaign-content ul, .campaign-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.campaign-content blockquote {
    border-left: 4px solid var(--ir-primary, #2563eb);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--ir-gray-600, #64748b);
}

/* ── Sticky-nav scroll offset ─────────────────────────────────
   The campaign-nav-bar is `position: sticky; top: 56px`. Without scroll
   padding, any anchor click or scrollIntoView() lands the target row
   underneath the sticky bar — invisible to the user. Apply a global
   scroll-padding-top equal to (main nav 56px + sticky strip ~74px).
   On mobile the strip is taller (~120px because pills wrap to 2 rows).
   ============================================================ */
html {
    scroll-padding-top: 130px;
}

@media (max-width: 575.98px) {
    html {
        scroll-padding-top: 200px;
    }
}

/* ── Teams-tab card header (title + sort segmented control) ──── */
.teams-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.teams-tab-header__sort .btn { white-space: nowrap; }

@media (max-width: 575.98px) {
    .teams-tab-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.85rem 1rem;
    }
    .teams-tab-header__title {
        text-align: center;
        font-size: 1.05rem;
    }
    .teams-tab-header__sort {
        display: flex;
        width: 100%;
    }
    .teams-tab-header__sort .btn {
        flex: 1 1 0;
        padding: 0.4rem 0.4rem;
        font-size: 0.78rem;
    }
    .teams-tab-header__sort .btn i { margin-inline-end: 0.2rem !important; }
}

/* ── Campaign nav bar (title + pills) ──────────────────────── */
.campaign-nav-bar {
    padding: 1.1rem 0;
    margin-bottom: 1.5rem;
}

.campaign-nav-title {
    font-size: 1.05rem;
    color: var(--ir-dark, #0f172a);
    margin-bottom: 0.65rem;
    line-height: 1.35;
    text-align: center;
    padding-inline: 0.75rem;
    /* Allow long campaign names to wrap on phones instead of butting against the logo */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Mobile: pills wrap to one neat row of 4 (each shrinks to share width) */
@media (max-width: 575.98px) {
    .campaign-nav-bar .nav-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem !important;
        padding-inline: 0.5rem;
    }
    .campaign-nav-bar .nav-pills .nav-item {
        flex: 0 1 auto;
    }
    .campaign-nav-bar .nav-pills .nav-link {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.82rem !important;
    }
}

@media (min-width: 576px) {
    .campaign-nav-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        padding: 1.1rem 0;
    }
    .campaign-nav-bar .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.25rem;
        text-align: center;
    }
    .campaign-nav-bar .nav-pills {
        justify-content: center;
        flex-wrap: wrap;
    }
    .campaign-nav-title {
        margin-bottom: 0;
        flex-shrink: 0;
        max-width: 40%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .campaign-nav-title {
        font-size: 1.5rem;
        max-width: 50%;
    }
}

/* ── Nav pills ──────────────────────────────────────────────── */
.ratio iframe { border-radius: 8px; }

/* Colored tab bar — buttons render in negative (white) on the colored band */
.campaign-nav-bar {
    /* NOTE: do NOT set `position` here — Bootstrap's `.sticky-top` sets
       `position: sticky` and overriding it breaks the pinned-on-scroll behavior. */
    background:
        radial-gradient(circle at 88% 50%, rgba(212, 162, 76, 0.22), transparent 38%),
        radial-gradient(circle at 12% 120%, rgba(96, 165, 250, 0.30), transparent 45%),
        linear-gradient(135deg, #1e4ed8 0%, #2563eb 45%, #1d4dc8 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 24px -8px rgba(11, 23, 38, 0.35);
    margin-top: 1.5rem;
    overflow: hidden;
}
.campaign-nav-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 14px);
    pointer-events: none;
    z-index: 0;
}
.campaign-nav-bar::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 162, 76, 0.55), transparent);
    pointer-events: none;
    z-index: 0;
}
.campaign-nav-bar > .container { position: relative; z-index: 1; }

/* Sticky-state polish: extra elevation + a thin gold rim when pinned to viewport */
.campaign-nav-bar.sticky-top {
    margin-top: 1.5rem;
}

/* On mobile/tablet (where the page switches to the bottom donate bar layout)
   don't pin the nav bar — let it scroll away with the page. Overrides
   Bootstrap's `.sticky-top { position: sticky !important }`. */
@media (max-width: 991.98px) {
    .campaign-nav-bar.sticky-top {
        position: static !important;
        top: auto !important;
    }
}

.campaign-nav-bar .campaign-nav-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(11, 23, 38, 0.25);
}

.campaign-nav-bar .nav-pills .nav-link {
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.campaign-nav-bar .nav-pills .nav-link:not(.active) {
    background: #fff;
    color: var(--ir-primary, #2563eb);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.campaign-nav-bar .nav-pills .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.85);
    color: var(--ir-primary, #2563eb);
}

.campaign-nav-bar .nav-pills .nav-link.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid #fff;
}

/* Donate tab — overrides the white-pill skin above so the CTA pops
   against both the blue navbar and the neighboring white pills. */
.campaign-nav-bar .nav-pills .nav-link--donate,
.campaign-nav-bar .nav-pills .nav-link--donate:not(.active),
.campaign-nav-bar .nav-pills .nav-link--donate.active {
    background: var(--color-donate, #F26D21);
    color: #fff;
    border: 1px solid var(--color-donate, #F26D21);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(242, 109, 33, 0.35);
}

.campaign-nav-bar .nav-pills .nav-link--donate:not(.active):hover,
.campaign-nav-bar .nav-pills .nav-link--donate:hover {
    background: var(--color-donate-dark, #D85A12);
    border-color: var(--color-donate-dark, #D85A12);
    color: #fff;
    box-shadow: 0 4px 14px rgba(242, 109, 33, 0.45);
}

/* ── Countdown ──────────────────────────────────────────────── */
.countdown-display { font-family: 'Courier New', monospace; font-weight: 600; }

/* ── Team / Member avatars ──────────────────────────────────── */
.team-avatar {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem; font-weight: 600; flex-shrink: 0;
}

.team-initials { display: block; line-height: 1; }

.team-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: white;
}

.team-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    border-color: var(--ir-primary, #2563eb);
}

.team-member-avatars { gap: -8px; }

.member-avatar, .member-avatar-small {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.75rem; font-weight: 600;
    border: 2px solid white;
    margin-left: -8px; flex-shrink: 0;
}

.member-avatar-small { width: 28px; height: 28px; font-size: 0.7rem; }
.member-avatar:first-child { margin-left: 0; }
.member-avatar.member-count { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); font-size: 0.7rem; }

/* ── Matcher cards ──────────────────────────────────────────── */
.matcher-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid transparent;
}

.matcher-card:hover {
    background: white;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    border-color: var(--ir-primary, #2563eb);
}

.matcher-decoration { transition: all 0.3s ease; }
.matcher-card:hover .matcher-decoration { opacity: 0.15; transform: scale(1.1); }

.matching-pool-summary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bg-gradient-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.matcher-icon .rounded-circle { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }

/* ── List group ─────────────────────────────────────────────── */
.list-group-item { border-left: none; border-right: none; }
.list-group-item:first-child { border-top: none; }
.list-group-item:last-child { border-bottom: none; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-lg { max-width: 800px; }
.progress-bar.bg-gradient { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); }

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

/* ── Campaign hero wrapper ──────────────────────────────────── */
.campaign-hero {
    display: block;
    position: relative;
    overflow: hidden;
}

/* ── Hero info overlay ─────────────────────────────────────── */
.hero-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
    /* Larger bottom padding lifts the raised/goal/progress card up off the very
       bottom edge, opening a clear band the donation cubes overlap into without
       ever covering the progress bar or donor count. */
    padding: 2.5rem 0 6rem;
    z-index: 3;
    color: #fff;
}

/* Semi-transparent panels behind text for readability */
.hero-info-overlay .col-sm-7,
.hero-info-overlay .col-sm-5 {
    position: relative;
    padding: 1rem 1.5rem;
}

.hero-info-overlay .col-sm-7 > *,
.hero-info-overlay .col-sm-5 > div {
    position: relative;
    z-index: 1;
}

.hero-info-overlay .col-sm-7::before,
.hero-info-overlay .col-sm-5::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    z-index: 0;
}

/* Raised amount — accent color */
.hero-info-overlay .hero-raised-amount {
    color: #4ade80;
}

/* Raised + goal share a justify-content-between row. Both figures are large and
   nowrap, so on narrow screens they crowd the middle. A column gap + min-width:0
   on each side guarantees clear separation between current and target. */
.hero-info-overlay .d-flex.justify-content-between {
    gap: 1rem;
}
.hero-info-overlay .d-flex.justify-content-between > div {
    min-width: 0;
}

.hero-info-secondary {
    color: rgba(255,255,255,0.7);
}

.hero-info-overlay .progress {
    background-color: rgba(255,255,255,0.2);
}

.hero-info-overlay .countdown-display {
    color: #fff;
}

/* Mobile: overlay becomes a normal block below the hero */
@media (max-width: 991.98px) {
    .hero-info-overlay {
        position: relative;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        padding: 1.25rem 0.5rem 4.5rem;
    }

    /* No frosted panels needed on solid dark bg */
    .hero-info-overlay .col-sm-7::before,
    .hero-info-overlay .col-sm-5::before {
        display: none;
    }

    .hero-info-overlay .col-sm-7,
    .hero-info-overlay .col-sm-5 {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .hero-info-overlay {
        padding: 1rem 0.25rem 4.5rem;
    }
    /* Phones: shrink the big figures so current + target keep a clear gap
       instead of butting together in the middle of the card. */
    .hero-info-overlay .hero-raised-amount {
        font-size: 1.6rem;
    }
    .hero-info-overlay .h4 {
        font-size: 1.1rem;
    }
    .hero-info-overlay .d-flex.justify-content-between {
        gap: 1.25rem;
    }
    /* Reserve bottom safe-area for the third-party accessibility widget (fixed
       bottom-left) + sticky mobile donate CTA, so sidebar share buttons don't
       end up underneath either. */
    .campaign-content-section { padding-bottom: 6rem !important; }
}

/* ── Hero slideshow ─────────────────────────────────────────── */
.hero-slideshow {
    position: relative;
    width: 100%;
    /* Width-responsive height: scales with the viewport width (so the banner is
       framed consistently) and is bounded so it never gets too short or too tall. */
    height: clamp(360px, 42vw, 560px);
    overflow: hidden;
    background: #000;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    /* `cover` keeps the image's aspect ratio (fills the frame, crops overflow)
       instead of `100% 100%` which stretched/distorted it on every screen. */
    background-size: cover !important;
    background-position: center !important;
}

.hero-slide--active { opacity: 1; }

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
}

.hero-placeholder-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: rgba(255,255,255,0.3);
}

/* Arrow controls */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
    pointer-events: none;
}

.campaign-hero:hover .hero-arrow {
    opacity: 1;
    pointer-events: auto;
}

.hero-arrow:hover {
    background: rgba(0,0,0,0.65);
}

.hero-arrow--prev { left: 14px; }
.hero-arrow--next { right: 14px; }

/* Dot indicators */
.hero-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.hero-dot--active {
    background: #fff;
    transform: scale(1.3);
}

/* ── Mobile hero slider ─────────────────────────────────────────
   On phones the banner artwork is the campaign's main visual, and the
   gallery images are ~3:2. A short fixed box + `cover` cropped the top
   and bottom of every banner (cutting off titles/faces), and there was
   no usable way to navigate slides — the arrows are hover-only (no
   hover on touch) and the dots were not visible. So on small screens:
     • size the frame to the banners' natural 3:2 ratio so `cover`
       crops almost nothing,
     • surface the dot indicators as a tappable, legible control,
     • (swipe-to-change is wired up in campaign.js).
   ============================================================ */
@media (max-width: 991.98px) {
    .hero-slideshow {
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 70vh;
    }

    /* High-specificity + !important: the dots are otherwise suppressed
       on this page and a plain `.hero-dots` rule does not win. */
    .campaign-hero .hero-slideshow .hero-dots {
        display: flex !important;
        bottom: 12px;
        gap: 10px;
        padding: 7px 12px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 999px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .campaign-hero .hero-dot {
        width: 9px;
        height: 9px;
        position: relative;
    }
    /* Enlarge the touch target to ~28px without growing the visible dot. */
    .campaign-hero .hero-dot::after {
        content: '';
        position: absolute;
        inset: -10px;
    }
    .campaign-hero .hero-dot--active {
        transform: scale(1.4);
    }
}

/* ── Team square cards (Givechak-merged) ───────────────────────
   Card-as-link grid for the campaign teams tab + per-team page.
   Single anchor per card, zero nested interactive elements,
   square footprint, percentage chip clamped to [12%, 88%].
*/
:root {
    --ir-radius-square: 8px;
    --ir-square-primary: #2563eb;
    --ir-square-primary-dark: #1d4ed8;
    --ir-square-success: #047857;
    --ir-square-success-dark: #035e44;
    --ir-square-success-soft: #d1fae5;
    --ir-square-track: #e5e7eb;
    --ir-square-border: #e2e8f0;
    --ir-square-name: #111827;
    --ir-square-muted: #4b5563;
    --ir-square-bg: #ffffff;
    --ir-square-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --ir-square-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.14);
    --ir-square-avatar-from: #5566d8;
    --ir-square-avatar-to: #4338ca;
}

.team-square-grid {
    margin-top: 1rem;
}

.team-square-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-height: 240px;
    padding: 18px 16px 14px;
    background: var(--ir-square-bg);
    border: 1px solid var(--ir-square-border);
    border-radius: var(--ir-radius-square);
    box-shadow: var(--ir-square-shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.team-square-card:hover,
.team-square-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--ir-square-shadow-md);
    border-color: var(--ir-square-primary);
    color: inherit;
    text-decoration: none;
}

.team-square-card:focus-visible {
    outline: 3px solid var(--ir-square-primary);
    outline-offset: 2px;
}

/* Extend the link hit area up so the heart-bubble (which sits above the
   card edge) is still part of the clickable target. */
.team-square-card::after {
    content: '';
    position: absolute;
    inset: -22px 0 0 0;
    pointer-events: auto;
}

.team-square-card__heart {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ir-square-avatar-from) 0%, var(--ir-square-avatar-to) 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    pointer-events: none;
}

.team-square-card__initials {
    color: #fff;
    line-height: 1;
}

.team-square-card__name {
    margin-top: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ir-square-name);
    text-align: center;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.team-square-card__leader {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--ir-square-muted);
    text-align: center;
}

.team-square-card__leader > i { margin-inline-end: 0.25rem; }

.team-square-card__raised {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ir-square-name);
}

.team-square-card__goal {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--ir-square-muted);
    margin-top: 2px;
}

.team-square-card__progress {
    position: relative;
    display: block;
    margin-top: 14px;
    height: 22px;
}

.team-square-card__progress-track {
    position: absolute;
    inset: 7px 0;
    background: var(--ir-square-track);
    border-radius: 4px;
    overflow: hidden;
}

.team-square-card__progress-fill {
    display: block;
    height: 100%;
    background: var(--ir-square-success);
    border-radius: 4px;
}

.team-square-card__progress-chip {
    position: absolute;
    top: 0;
    /* logical property: flips to the right edge under dir="rtl" so the chip
       tracks the fill (which hugs the inline-start edge) in both LTR and RTL */
    inset-inline-start: clamp(12%, var(--pct, 0%), 88%);
    transform: translateX(-50%);
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--ir-square-success);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(5, 150, 105, 0.35);
    pointer-events: none;
}

/* translateX(-50%) centres the chip on its anchor in LTR, but the percentage
   doesn't flip sign under RTL — so mirror it to keep the chip centred on the
   fill's (right-anchored) leading edge in Hebrew. */
[dir="rtl"] .team-square-card__progress-chip {
    transform: translateX(50%);
}

.team-square-card__footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--ir-square-border);
}

.team-square-card__member-count {
    font-size: 0.78rem;
    color: var(--ir-square-muted);
    font-weight: 600;
}

.team-square-card__member-count > i { margin-inline-end: 0.3rem; }