/**
 * Copyright © 2026 The Cookie Dough Man Fundraisers Inc. All rights reserved.
 *
 * Proprietary and confidential. For internal use only.
 * See LICENSE for full terms.
 *
 * SPDX-License-Identifier: LicenseRef-CookieDoughMan-Proprietary
 */

/*
 * Campaign Donation Page v2
 * -------------------------
 * Scoped styles for the redesigned (Figma) public participant donation page.
 * Everything is namespaced under `.dpv2-page` and uses a `dpv2-` class prefix
 * so these rules never leak into Bootstrap, custom.css, or any existing page.
 *
 * Design tokens are taken directly from the Figma "MyDonatePage" UI kit.
 */

.dpv2-page {
    /* Color tokens */
    --dpv2-bg: #fafafa;
    --dpv2-white: #ffffff;
    --dpv2-gray-25: #fdfdfd;
    --dpv2-gray-50: #fafafa;
    --dpv2-gray-200: #e9eaeb;
    --dpv2-gray-300: #d5d7da;
    --dpv2-gray-400: #a4a7ae;
    --dpv2-gray-500: #717680;
    --dpv2-gray-600: #535862;
    --dpv2-gray-700: #414651;
    --dpv2-gray-800: #252b37;
    --dpv2-gray-900: #181d27;
    --dpv2-gray-warm-900: #1c1917;
    --dpv2-gray-neutral-900: #111927;
    --dpv2-violet-100: #ece9fe;
    --dpv2-violet-300: #c3b5fd;
    --dpv2-violet-600: #7839ee;
    --dpv2-violet-900: #491c96;
    --dpv2-brand-100: #f4ebff;
    --dpv2-brand-600: #7f56d9;
    --dpv2-green-50: #f3fee7;
    --dpv2-green-200: #d0f8ab;
    --dpv2-green-500: #66c61c;
    --dpv2-green-600: #4ca30d;
    /* MDP-847: donate green. White on green-600 is only 3.21:1, so the button
       fill is green-700 (5.15:1) / green-800 on hover (7.27:1), both clearing
       WCAG AA 4.5:1 and beating the 4.96:1 of the violet they replace. */
    --dpv2-green-700: #3b7c0f;
    --dpv2-green-800: #326212;
    --dpv2-green-900: #2b5314;
    --dpv2-yellow-400: #fac515;
    --dpv2-yellow-600: #ca8504;
    --dpv2-avatar-bg: #d9e5cc;

    /* Effects */
    --dpv2-shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    --dpv2-shadow-lg: 0 12px 16px 0 rgba(10, 13, 18, 0.08),
        0 4px 6px 0 rgba(10, 13, 18, 0.03), 0 2px 2px 0 rgba(10, 13, 18, 0.04);

    font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--dpv2-bg);
    color: var(--dpv2-gray-900);
    min-height: 100vh;
    box-sizing: border-box;
    /* Pull the page flush against the base container padding so the dark bar is full-bleed */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    /*
     * Use `clip` (not `hidden`) to contain the full-bleed horizontal overflow.
     * `overflow-x: hidden` forces the browser to compute `overflow-y: auto`,
     * which turns this wrapper into a scroll container and silently breaks the
     * sticky sidebar (sticky then references this never-scrolling box instead of
     * the viewport). `overflow-x: clip` contains the same horizontal overflow but
     * leaves `overflow-y: visible`, so position: sticky keeps working.
     */
    overflow-x: clip;
}

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

.dpv2-page p {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Top bar                                                            */
/* ------------------------------------------------------------------ */
.dpv2-topbar {
    background-color: var(--dpv2-gray-warm-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 168px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.dpv2-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /*
     * .dpv2-topbar now has three flex children (identity, actions, lang - the
     * language pill moved out of .dpv2-topbar-actions for MDP-738's mobile
     * reflow). The container's justify-content: space-between would spread
     * all three apart evenly, floating the Donate/Share buttons in the middle
     * of the bar instead of clustered next to the language pill. Push
     * everything after identity to the right instead, so actions + lang stay
     * adjacent like the original two-group design.
     */
    margin-right: auto;
}

.dpv2-identity-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dpv2-avatar {
    width: 32px;
    height: 32px;
    border-radius: 200px;
    background-color: var(--dpv2-avatar-bg);
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dpv2-green-900);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
}

.dpv2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.dpv2-identity-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpv2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--dpv2-gray-500);
    flex-shrink: 0;
}

.dpv2-identity-grade {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-400);
    white-space: nowrap;
}

/* Language selector (custom dropdown that drives Google Translate) */
.dpv2-lang {
    position: relative;
    flex-shrink: 0;
}

.dpv2-lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dpv2-gray-800);
    border: 1px solid var(--dpv2-gray-700);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: var(--dpv2-shadow-xs);
    cursor: pointer;
    font-family: inherit;
}

.dpv2-lang-toggle:hover {
    background-color: var(--dpv2-gray-700);
}

.dpv2-lang-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dpv2-lang-label {
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.dpv2-lang-label strong {
    color: var(--dpv2-white);
    font-weight: 500;
}

.dpv2-lang-label span {
    color: var(--dpv2-gray-300);
    font-weight: 400;
}

.dpv2-lang-caret {
    color: var(--dpv2-gray-300);
    font-size: 14px;
    transition: transform 0.2s ease;
}

.dpv2-lang.is-open .dpv2-lang-caret {
    transform: rotate(180deg);
}

/* Dropdown menu */
.dpv2-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--dpv2-gray-800);
    border: 1px solid var(--dpv2-gray-700);
    border-radius: 10px;
    box-shadow: var(--dpv2-shadow-lg, 0 12px 24px rgba(0, 0, 0, 0.35));
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.dpv2-lang.is-open .dpv2-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dpv2-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--dpv2-gray-200);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.dpv2-lang-option img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dpv2-lang-option em {
    font-style: normal;
    color: var(--dpv2-gray-400);
}

.dpv2-lang-option:hover,
.dpv2-lang-option:focus-visible {
    background-color: var(--dpv2-gray-700);
    outline: none;
}

.dpv2-lang-option.is-active {
    background-color: var(--dpv2-gray-700);
    color: var(--dpv2-white);
}

/* While a translation request is in flight, dim + lock the selector */
.dpv2-lang.is-loading .dpv2-lang-toggle {
    opacity: 0.6;
    pointer-events: none;
}

.dpv2-lang.is-loading .dpv2-lang-caret {
    animation: dpv2-lang-spin 0.7s linear infinite;
}

@keyframes dpv2-lang-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/* Top bar actions (Donate + Share + language pill)                   */
/* ------------------------------------------------------------------ */
.dpv2-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

/*
 * Normalize the three top-bar controls to the same height. box-sizing is
 * border-box (set globally under .dpv2-page *), so this 40px includes the 1px
 * borders on the Share button and the language pill; the Donate button has no
 * border. Vertical centering is handled by each control's own flex alignment.
 */
.dpv2-topbar-actions .dpv2-donate-btn--topbar,
.dpv2-topbar-actions .dpv2-topbar-share-btn,
.dpv2-topbar-actions .dpv2-topbar-manage-btn,
.dpv2-topbar .dpv2-lang-toggle {
    height: 40px;
}

/* Manage button — brand violet so the owner's primary action stands out from the
 * neutral Share button in the dark bar. Only rendered on the management page. */
.dpv2-topbar-manage-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dpv2-brand-600);
    border: 1px solid var(--dpv2-brand-600);
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: var(--dpv2-shadow-xs);
    color: var(--dpv2-white);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dpv2-topbar-manage-btn:hover {
    background-color: var(--dpv2-violet-600);
    transform: translateY(-1px);
}

.dpv2-topbar-manage-btn i {
    font-size: 16px;
}

/* Inline (auto-width) variant of the sidebar donate button for the top bar */
.dpv2-donate-btn--topbar {
    width: auto;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

/* Share button — styled to sit alongside the language pill in the dark bar */
.dpv2-topbar-share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dpv2-gray-800);
    border: 1px solid var(--dpv2-gray-700);
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: var(--dpv2-shadow-xs);
    color: var(--dpv2-white);
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dpv2-topbar-share-btn:hover {
    background-color: var(--dpv2-gray-700);
    transform: translateY(-1px);
}

.dpv2-topbar-share-btn i {
    font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Layout                                                             */
/* ------------------------------------------------------------------ */
.dpv2-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1104px; /* 728 + 24 + 352 */
    margin: 0 auto;
    /*
     * The top bar is position: sticky, so it occupies ~72px of normal flow.
     * Figma places the content 112px from the page top, i.e. ~40px below the
     * bar — so the layout only needs 40px of top padding (not 112px, which
     * would stack on top of the bar's own height and double the gap).
     */
    padding: 40px 0 80px;
}

.dpv2-main {
    flex: 1 1 728px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.dpv2-sidebar {
    flex: 0 0 352px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 88px;
}

/* ------------------------------------------------------------------ */
/* Generic card                                                       */
/* ------------------------------------------------------------------ */
.dpv2-card {
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 16px;
    padding: 24px;
}

.dpv2-card--sidebar {
    padding: 20px;
}

/* ------------------------------------------------------------------ */
/* Hero + title                                                       */
/* ------------------------------------------------------------------ */
.dpv2-hero-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dpv2-hero {
    border: 1px solid var(--dpv2-gray-200);
    /* MDP-838: square corners on the campaign image and video, reversing the
       rounded frame MDP-643 introduced. overflow stays hidden so the 16:9
       iframe is still clipped to the frame. */
    border-radius: 0;
    overflow: hidden;
    /* MDP-699: 16:9, so height tracks width instead of being pinned to a fixed
       340px (which made the media too short at wide viewports). */
    aspect-ratio: 16 / 9;
    width: 100%;
    background-color: var(--dpv2-gray-200);
}

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

.dpv2-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--dpv2-gray-500);
}

.dpv2-hero-placeholder i {
    font-size: 48px;
}

/* Hero media (image <-> video) + Watch Video toggle.
   The .dpv2-hero frame itself is left untouched; the image and video are
   stacked layers inside it and swapped via the .dpv2-hidden utility. */
.dpv2-hero-media-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dpv2-hero-layer {
    width: 100%;
    height: 100%;
}

/* The hero frame is 16:9 and so is the player, so the iframe simply fills it;
   the hero's overflow:hidden clips it to the frame.
   No JS scaling: a crop would clip the player's own control bar. */
#dpv2HeroVideo {
    position: relative;
    overflow: hidden;
}

#dpv2HeroVideo iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.dpv2-hidden {
    display: none !important;
}

.dpv2-hero-actions {
    display: flex;
    justify-content: center;
}

.dpv2-watch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--dpv2-white);
    color: var(--dpv2-gray-700);
    border: 1px solid var(--dpv2-gray-300);
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
    box-shadow: var(--dpv2-shadow-xs);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dpv2-watch-btn i {
    color: var(--dpv2-brand-600);
    font-size: 16px;
}

.dpv2-watch-btn:hover {
    background-color: var(--dpv2-gray-50);
    border-color: var(--dpv2-gray-400);
    transform: translateY(-1px);
}

/* MDP-837: centered and hard-clamped to one line. Replaces MDP-739's fluid
   font scaling, which kept long titles on one line by shrinking them. */
.dpv2-title {
    font-weight: 500;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.96px;
    color: var(--dpv2-gray-900);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpv2-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.dpv2-author .dpv2-identity-name {
    color: var(--dpv2-gray-900);
}

.dpv2-author .dpv2-identity-grade {
    color: var(--dpv2-gray-500);
}

.dpv2-author .dpv2-dot {
    background-color: var(--dpv2-gray-300);
}

/* ------------------------------------------------------------------ */
/* Metric / goal card                                                 */
/* ------------------------------------------------------------------ */
.dpv2-metric {
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dpv2-metric--plain {
    background-color: transparent;
}

.dpv2-metric-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-800);
}

.dpv2-goal-amounts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Collected + target on one line beneath the bar (MDP-740). */
.dpv2-goal-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
}

.dpv2-goal-collected {
    font-weight: 600;
    color: var(--dpv2-violet-600);
}

.dpv2-goal-target {
    font-weight: 500;
    color: var(--dpv2-gray-500);
}

/* Progress bar */
.dpv2-progress {
    position: relative;
    width: 100%;
    /*
     * MDP-740: the tooltip is anchored to the fill's right edge, so at low
     * percentages it drifts left over whatever sits above the bar. The amounts
     * now live on one line below the bar; this padding reserves the band the
     * tooltip floats up into so it clears the metric title too.
     */
    padding-top: 28px;
}

.dpv2-progress-track {
    position: relative;
    height: 8px;
    width: 100%;
    background-color: var(--dpv2-gray-200);
    border-radius: 4px;
}

.dpv2-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 8px;
    background-color: var(--dpv2-brand-600);
    border-radius: 4px;
    max-width: 100%;
    transition: width 0.6s ease;
}

.dpv2-progress-tooltip {
    position: absolute;
    top: -42px;
    transform: translateX(50%);
    right: 0;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: var(--dpv2-shadow-lg);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: var(--dpv2-gray-700);
    white-space: nowrap;
}

/* Green "acts of kindness" badge */
.dpv2-kindness {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--dpv2-green-50);
    border: 1px solid var(--dpv2-green-200);
    border-radius: 8px;
    padding: 8px 16px 8px 12px;
    width: fit-content;
}

.dpv2-kindness--full {
    width: 100%;
}

.dpv2-kindness i {
    color: var(--dpv2-green-600);
    font-size: 18px;
    flex-shrink: 0;
}

/* Exact Figma "hearts" icon (replaces the Font Awesome heart) */
.dpv2-kindness-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.dpv2-kindness-text {
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-green-900);
    font-weight: 500;
}

.dpv2-kindness-text strong {
    font-weight: 600;
    font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Leaderboard card (Top participants / groups / acts)                */
/* ------------------------------------------------------------------ */
.dpv2-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dpv2-lb-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* MDP-781: rows past the 10th stay hidden until the group is expanded. Same
   rule on every viewport (no media query) -- desktop and mobile fold alike. */
.dpv2-lb-group:not(.dpv2-lb-group--expanded) .dpv2-row--extra {
    display: none;
}

.dpv2-lb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 0;
    margin-top: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-violet-600);
}

.dpv2-lb-toggle i {
    font-size: 12px;
    transition: transform 0.15s ease;
}

.dpv2-lb-group--expanded .dpv2-lb-toggle i {
    transform: rotate(180deg);
}

.dpv2-lb-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.dpv2-lb-heading-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-800);
}

.dpv2-medal {
    width: 24px;
    height: 24px;
    border-radius: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dpv2-medal i {
    font-size: 13px;
    color: var(--dpv2-white);
}

.dpv2-medal--gold {
    background: linear-gradient(180deg, #ddbb11 0%, #a36103 100%);
}

.dpv2-medal--silver {
    background: linear-gradient(180deg, #7e7e7e 0%, #535353 100%);
}

.dpv2-medal--blue {
    background: linear-gradient(180deg, #4b84ff 0%, #00258a 100%);
}

/* Exact Figma gradient medals (gold / silver / blue) — the SVG already
   contains the gradient circle, inner ring and star, so no wrapper bg. */
.dpv2-medal-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.dpv2-row {
    background-color: var(--dpv2-gray-25);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dpv2-row-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.dpv2-rank {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-900);
    flex-shrink: 0;
}

.dpv2-row-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dpv2-row-name .dpv2-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpv2-row-name .dpv2-sub {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
}

.dpv2-row-value {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-violet-600);
    white-space: nowrap;
    flex-shrink: 0;
}

.dpv2-row-value--kindness {
    color: var(--dpv2-green-600);
    font-weight: 500;
    font-size: 14px;
}

.dpv2-row-value--kindness strong {
    font-weight: 600;
    font-size: 16px;
}

/* Center-aligned row variant (donation leaderboard uses laurel rank medallions) */
.dpv2-row-left--center {
    align-items: center;
}

/* Gold laurel-wreath rank medallion (donation leaderboard) */
.dpv2-rank-laurel {
    position: relative;
    width: 42px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dpv2-yellow-600, #ca8504);
}

.dpv2-rank-laurel svg,
.dpv2-rank-laurel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.dpv2-rank-laurel-num {
    position: relative;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    color: var(--dpv2-yellow-400, #fac515);
}

.dpv2-empty {
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
    padding: 8px 0;
}

/* Leaderboard empty state — shown when a leaderboard is enabled but no
   donations exist yet, so the card reads as intentional instead of blank. */
.dpv2-lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--dpv2-gray-300);
    border-radius: 12px;
    background-color: var(--dpv2-gray-50);
}

.dpv2-lb-empty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--dpv2-green-50);
    margin-bottom: 4px;
}

.dpv2-lb-empty-badge img {
    width: 28px;
    height: 28px;
    display: block;
}

.dpv2-lb-empty-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-800);
}

.dpv2-lb-empty-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
    max-width: 320px;
}

/* ------------------------------------------------------------------ */
/* Prose sections (welcome, how it works)                             */
/* ------------------------------------------------------------------ */
.dpv2-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dpv2-section-heading {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--dpv2-gray-900);
}

.dpv2-section-sub {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-500);
}

.dpv2-prose {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-500);
}

.dpv2-prose p {
    margin: 0 0 16px;
}

.dpv2-prose p:last-child {
    margin-bottom: 0;
}

.dpv2-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

.dpv2-prose iframe,
.dpv2-prose video {
    max-width: 100%;
    border-radius: 8px;
    margin: 16px 0;
}

/* How it works steps */
.dpv2-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

/* Faint vertical connector running through the step number circles */
.dpv2-steps::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background-color: var(--dpv2-gray-200);
}

.dpv2-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dpv2-step-num {
    width: 36px;
    height: 36px;
    border-radius: 200px;
    border: 0.75px solid var(--dpv2-gray-200);
    background-color: var(--dpv2-gray-25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-500);
    flex-shrink: 0;
    z-index: 1;
}

.dpv2-step-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.dpv2-step-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: var(--dpv2-gray-900);
}

.dpv2-step-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-500);
}

.dpv2-step-text strong {
    font-weight: 600;
    color: var(--dpv2-gray-900);
}

/* ------------------------------------------------------------------ */
/* Prizes & incentives table                                          */
/* ------------------------------------------------------------------ */
.dpv2-prizes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 540px;
}

.dpv2-prize-table {
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 15px;
    overflow: hidden;
}

.dpv2-prize-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--dpv2-gray-200);
}

.dpv2-prize-row:last-child {
    border-bottom: none;
}

.dpv2-prize-tier {
    width: 180px;
    flex-shrink: 0;
    padding: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-900);
    display: flex;
    align-items: center;
}

.dpv2-prize-desc {
    flex: 1 1 auto;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-600);
}

.dpv2-prize-desc i {
    color: var(--dpv2-gray-600);
    font-size: 14px;
    flex-shrink: 0;
}

.dpv2-bonus {
    background-color: var(--dpv2-violet-100);
    border: 1px solid var(--dpv2-violet-300);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.dpv2-bonus-label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-neutral-900);
    white-space: nowrap;
}

.dpv2-bonus-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-neutral-900);
}

.dpv2-bonus-text strong {
    font-weight: 600;
    font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Sidebar cards                                                      */
/* ------------------------------------------------------------------ */
.dpv2-sidebar-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--dpv2-gray-900);
    text-align: center;
}

.dpv2-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dpv2-lb-heading--center {
    justify-content: center;
}

.dpv2-thanks {
    background-color: var(--dpv2-brand-100);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-violet-900);
    text-align: center;
}

/* Donate button — MDP-847: green, so the primary call to action reads apart
   from the violet non-donate controls (Manage, Share, Submit, Invite VIPs). */
.dpv2-donate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background-color: var(--dpv2-green-700);
    color: var(--dpv2-white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    box-shadow: var(--dpv2-shadow-xs);
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.dpv2-donate-btn:hover {
    background-color: var(--dpv2-green-800);
    transform: translateY(-1px);
}

.dpv2-donate-btn:focus-visible {
    outline: 2px solid var(--dpv2-green-800);
    outline-offset: 2px;
}

.dpv2-donate-btn:active {
    background-color: var(--dpv2-green-900);
    transform: none;
}

.dpv2-donate-btn:disabled,
.dpv2-donate-btn.dpv2-donate-btn--disabled {
    background-color: var(--dpv2-gray-400);
    cursor: not-allowed;
    transform: none;
}

/* MDP-743: secondary Share button below Make a Donation, same footprint. */
.dpv2-donate-btn--outline {
    background-color: var(--dpv2-white);
    color: var(--dpv2-gray-700);
    border: 1px solid var(--dpv2-gray-300);
}

.dpv2-donate-btn--outline i {
    color: var(--dpv2-brand-600);
}

.dpv2-donate-btn--outline:hover {
    background-color: var(--dpv2-gray-50);
    border-color: var(--dpv2-gray-400);
}

.dpv2-note {
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
    text-align: center;
}

/* Share card */
.dpv2-share-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dpv2-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--dpv2-gray-50);
    border: 1px solid var(--dpv2-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dpv2-gray-700);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.dpv2-share-btn:hover {
    background-color: var(--dpv2-gray-200);
    transform: translateY(-1px);
}

/* Exact Figma share icons (Gmail / QR / Facebook / X / Pinterest / LinkedIn) */
.dpv2-share-btn img {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
}

.dpv2-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 8px;
    padding: 8px 8px 8px 12px;
}

.dpv2-copy-url {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

.dpv2-copy-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background-color: var(--dpv2-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dpv2-gray-500);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dpv2-copy-btn:hover {
    background-color: var(--dpv2-gray-50);
    color: var(--dpv2-gray-900);
}

.dpv2-copy-btn.dpv2-copied {
    color: var(--dpv2-green-600);
}

/* Copy button: Figma copy icon by default, swap to a check on success */
.dpv2-copy-btn img {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

.dpv2-copy-btn .dpv2-copy-check {
    display: none;
}

.dpv2-copy-btn.dpv2-copied .dpv2-copy-img {
    display: none;
}

.dpv2-copy-btn.dpv2-copied .dpv2-copy-check {
    display: inline-block;
    color: var(--dpv2-green-600);
}

/* ------------------------------------------------------------------ */
/* Footer fundraiser CTA                                              */
/* ------------------------------------------------------------------ */
.dpv2-fundraiser {
    text-align: center;
    padding: 24px 0 40px;
}

.dpv2-fundraiser a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: var(--dpv2-brand-600);
    color: var(--dpv2-white);
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    box-shadow: var(--dpv2-shadow-xs);
    transition: transform 0.2s ease;
}

.dpv2-fundraiser a:hover {
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/* "Share In Person" QR modal (Figma node 2287:6060)                  */
/* Blue accent is intentional and scoped to this modal only — the      */
/* rest of the page uses the purple brand token.                       */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* "Share <First>'s Page" popup (top-bar Share button)                */
/* ------------------------------------------------------------------ */
.dpv2-share-modal {
    font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.dpv2-share-modal .modal-dialog {
    max-width: 440px;
}

.dpv2-share-modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: var(--dpv2-shadow-lg);
    overflow: hidden;
    padding: 0;
}

.dpv2-share-modal-content * {
    box-sizing: border-box;
}

.dpv2-share-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dpv2-gray-200);
}

.dpv2-share-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--dpv2-gray-900);
}

.dpv2-share-modal-icon {
    font-size: 20px;
    color: var(--dpv2-brand-600);
}

.dpv2-share-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ------------------------------------------------------------------ */
/* Facebook "Your post is ready!" interstitial (fb_share_modal.html)   */
/* ------------------------------------------------------------------ */
.dpv2-fb-modal {
    font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.dpv2-fb-modal .modal-dialog {
    max-width: 480px;
}

.dpv2-fb-modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--dpv2-shadow-lg);
    overflow: hidden;
    padding: 0;
}

.dpv2-fb-modal-content * {
    box-sizing: border-box;
}

.dpv2-fb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--dpv2-gray-50);
}

.dpv2-fb-body {
    padding: 32px 24px 40px;
    text-align: center;
}

.dpv2-fb-check {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: var(--dpv2-gray-900);
    color: var(--dpv2-white);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dpv2-fb-title {
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 26px;
    line-height: 34px;
    color: var(--dpv2-gray-900);
}

.dpv2-fb-sub {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-700);
}

.dpv2-fb-sub strong {
    font-weight: 600;
    color: var(--dpv2-gray-900);
}

.dpv2-fb-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    background-color: var(--dpv2-gray-50);
    font-size: 15px;
    line-height: 22px;
    color: var(--dpv2-gray-700);
}

.dpv2-fb-foot-icon {
    width: 24px;
    height: 24px;
    display: block;
}

.dpv2-fb-open-link {
    color: var(--dpv2-gray-900);
    text-decoration: underline;
    font-weight: 500;
}

.dpv2-qr-modal {
    --dpv2-qr-blue: #1570ef;
    --dpv2-qr-blue-hover: #175cd3;
    --dpv2-qr-blue-icon: #2e90fa;
    --dpv2-qr-blue-50: #eff8ff;
    --dpv2-qr-blue-100: #d1e9ff;
    font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.dpv2-qr-modal .modal-dialog {
    max-width: 440px;
}

.dpv2-qr-modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: var(--dpv2-shadow-lg);
    overflow: hidden;
    padding: 0;
}

.dpv2-qr-modal-content * {
    box-sizing: border-box;
}

/* Header */
.dpv2-qr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dpv2-gray-200);
}

.dpv2-qr-head-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--dpv2-gray-900);
}

.dpv2-qr-head-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.dpv2-qr-close {
    border: none;
    background: transparent;
    color: var(--dpv2-gray-400);
    font-size: 18px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dpv2-qr-close:hover {
    background-color: var(--dpv2-gray-50);
    color: var(--dpv2-gray-700);
}

/* Body */
.dpv2-qr-body {
    padding: 20px;
}

.dpv2-qr-subtitle {
    margin: 0 0 16px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--dpv2-gray-500);
}

.dpv2-qr-code-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.dpv2-qr-code {
    display: inline-flex;
    padding: 12px;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 12px;
    line-height: 0;
}

.dpv2-qr-code img,
.dpv2-qr-code canvas {
    display: block;
    width: 180px !important;
    height: 180px !important;
}

/* Steps */
.dpv2-qr-steps {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    background-color: var(--dpv2-qr-blue-50);
    border: 1px solid var(--dpv2-qr-blue-100);
    border-radius: 12px;
    padding: 16px 12px;
}

.dpv2-qr-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

.dpv2-qr-step-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-qr-blue-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dpv2-qr-blue-icon);
    font-size: 20px;
}

.dpv2-qr-step-num {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--dpv2-qr-blue);
    color: var(--dpv2-white);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--dpv2-qr-blue-50);
}

.dpv2-qr-step-text {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--dpv2-gray-700);
}

.dpv2-qr-step-arrow {
    align-self: center;
    color: var(--dpv2-qr-blue);
    font-size: 12px;
    padding-top: 18px;
    flex: 0 0 auto;
}

/* Footer */
.dpv2-qr-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 20px;
}

.dpv2-qr-back-btn {
    border: none;
    background-color: var(--dpv2-qr-blue);
    color: var(--dpv2-white);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: var(--dpv2-shadow-xs);
    transition: background-color 0.15s ease;
}

.dpv2-qr-back-btn:hover {
    background-color: var(--dpv2-qr-blue-hover);
}

/* ------------------------------------------------------------------ */
/* Countdown timer                                                    */
/* ------------------------------------------------------------------ */
.dpv2-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dpv2-countdown-label {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-800);
}

.dpv2-countdown-boxes {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.dpv2-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 72px;
    padding: 12px 10px;
    background: linear-gradient(180deg, var(--dpv2-brand-600) 0%, var(--dpv2-violet-600) 100%);
    border-radius: 12px;
    box-shadow: var(--dpv2-shadow-xs);
}

.dpv2-countdown-value {
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--dpv2-white);
}

.dpv2-countdown-unit {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.dpv2-countdown-sep {
    align-self: center;
    font-weight: 700;
    font-size: 24px;
    color: var(--dpv2-violet-300);
    padding-top: 8px;
}

.dpv2-countdown-ended {
    background-color: var(--dpv2-brand-100);
    border: 1px solid var(--dpv2-violet-300);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--dpv2-violet-900);
    text-align: center;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Top houses leaderboard (flag heading + accent-color swatch)        */
/* ------------------------------------------------------------------ */
.dpv2-lb-flag {
    width: 24px;
    height: 24px;
    border-radius: 56px;
    background: linear-gradient(180deg, var(--dpv2-green-500) 0%, var(--dpv2-green-600) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dpv2-lb-flag i {
    font-size: 12px;
    color: var(--dpv2-white);
}

.dpv2-house-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------------ */
/* Suggested-goal marker (beneath the personal progress bar)          */
/* ------------------------------------------------------------------ */
.dpv2-progress--marked {
    padding-bottom: 36px;
}

.dpv2-progress-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.dpv2-progress-marker-line {
    width: 2px;
    height: 14px;
    background-color: var(--dpv2-gray-400);
    border-radius: 1px;
}

/*
 * MDP-740: absolute so the label never widens the marker column — the tick line
 * stays exactly on the suggested position no matter how wide the label is.
 * Centred by default; the --start/--end variants anchor it inward when the
 * marker is close enough to an edge that a centred label would spill out of
 * the card (it used to clip off at 100%).
 */
.dpv2-progress-marker-label {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    color: var(--dpv2-gray-500);
    text-align: center;
    white-space: nowrap;
}

.dpv2-progress-marker--start .dpv2-progress-marker-label {
    left: 0;
    transform: none;
    text-align: left;
}

.dpv2-progress-marker--end .dpv2-progress-marker-label {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
}

/* ------------------------------------------------------------------ */
/* Mobile SMS share icon (Font Awesome, sized like the SVG icons)     */
/* ------------------------------------------------------------------ */
.dpv2-share-sms i {
    font-size: 20px;
    color: var(--dpv2-gray-700);
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* "Fundraiser has ended" notice (replaces the donate button)         */
/* ------------------------------------------------------------------ */
.dpv2-ended-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background-color: var(--dpv2-brand-100);
    border: 1px solid var(--dpv2-violet-300);
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-violet-900);
}

.dpv2-ended-note i {
    color: var(--dpv2-violet-600);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1140px) {
    .dpv2-topbar {
        padding: 16px 24px;
    }

    .dpv2-layout {
        padding: 40px 24px 60px;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .dpv2-layout {
        flex-direction: column;
    }

    .dpv2-main,
    .dpv2-sidebar {
        flex: 1 1 100%;
        width: 100%;
    }

    .dpv2-sidebar {
        position: static;
        order: 2;
    }
}

/* ------------------------------------------------------------------ */
/* Manage modal (VIP / Activity Tracker / T-Shirt)                    */
/* Bootstrap modal rendered inside .dpv2-page so the design tokens    */
/* cascade in. We theme the chrome (header, tabs, primary button) to  */
/* the dpv2 brand and leave the functional internals to Bootstrap.    */
/* ------------------------------------------------------------------ */
.dpv2-manage-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--dpv2-shadow-lg);
}

.dpv2-manage-modal .modal-header {
    background: linear-gradient(135deg, var(--dpv2-brand-600), var(--dpv2-violet-600));
    color: var(--dpv2-white);
    border-bottom: none;
    padding: 18px 24px;
    /* MDP-846: Bootstrap's .modal-header wraps by default. With a nowrap title
       and a nowrap actions group that pushes the actions onto their own row and
       lets them overflow the header box. One row, title shrinks. */
    flex-wrap: nowrap;
    gap: 12px;
}

.dpv2-manage-modal .modal-title {
    font-weight: 600;
    letter-spacing: -0.2px;
    flex: 1 1 auto;
    /* MDP-846: the title now carries the participant's first name, so it has to
       give way rather than push Donate and Close off-screen on a narrow phone. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MDP-846: Donate + labelled Close, replacing the bare X. */
.dpv2-manage-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    /* The template newlines between these two buttons render as an anonymous flex
       item ~690px wide, which shoved Close off-screen at 360px. Zero here, and each
       button sets its own 14px back. */
    font-size: 0;
}

/* On a narrow phone the title, Donate and Close cannot all keep their labels.
   Donate drops to its heart icon; Close keeps its word, which is the whole
   point of replacing the bare X. */
@media (max-width: 575.98px) {
    .dpv2-manage-modal .modal-header {
        padding: 14px 16px;
        gap: 8px;
    }

    .dpv2-manage-modal-actions .dpv2-donate-btn--topbar span {
        display: none;
    }

    .dpv2-manage-modal-actions .dpv2-donate-btn--topbar {
        padding: 8px 12px;
    }
}

.dpv2-manage-modal-actions .dpv2-donate-btn--topbar {
    height: 40px;
    /* The mobile top-bar rule stretches .dpv2-donate-btn--topbar to width:100% so
       the bar's controls stack full-width. In this header that blew the button out
       to 400px and squeezed the title to nothing, so pin it back to its content. */
    width: auto;
    flex: 0 0 auto;
}

.dpv2-manage-modal-close {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 8px 14px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--dpv2-white);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dpv2-manage-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

.dpv2-manage-modal-close:focus-visible {
    outline: 2px solid var(--dpv2-white);
    outline-offset: 2px;
}

.dpv2-manage-modal .nav-tabs {
    border-bottom-color: var(--dpv2-gray-200);
}

.dpv2-manage-modal .nav-tabs .nav-link {
    color: var(--dpv2-gray-600);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
}

.dpv2-manage-modal .nav-tabs .nav-link:hover {
    color: var(--dpv2-brand-600);
    border-bottom-color: var(--dpv2-violet-300);
}

.dpv2-manage-modal .nav-tabs .nav-link.active {
    color: var(--dpv2-brand-600);
    background: transparent;
    border-bottom-color: var(--dpv2-brand-600);
}

.dpv2-manage-modal .btn-primary {
    background-color: var(--dpv2-brand-600);
    border-color: var(--dpv2-brand-600);
}

.dpv2-manage-modal .btn-primary:hover {
    background-color: var(--dpv2-violet-600);
    border-color: var(--dpv2-violet-600);
}

.dpv2-manage-modal .btn-outline-primary {
    color: var(--dpv2-brand-600);
    border-color: var(--dpv2-brand-600);
}

.dpv2-manage-modal .btn-outline-primary:hover {
    background-color: var(--dpv2-brand-600);
    border-color: var(--dpv2-brand-600);
}

.dpv2-manage-modal .progress-ring-circle {
    stroke: var(--dpv2-brand-600);
}

@media (max-width: 640px) {
    .dpv2-topbar {
        padding: 12px 16px;
    }

    .dpv2-layout {
        padding: 24px 16px 40px;
        gap: 24px;
    }

    .dpv2-main {
        gap: 28px;
    }

    .dpv2-title {
        /* MDP-837: fixed size again. The base rule's nowrap + ellipsis is what
           keeps a long title on one line now, so MDP-739's clamp() scaling is
           gone — a title that no longer fits truncates instead of shrinking. */
        font-size: 28px;
        line-height: 1.25;
        letter-spacing: -0.6px;
    }

    .dpv2-section-heading,
    .dpv2-sidebar-title {
        font-size: 20px;
        line-height: 28px;
    }

    /* MDP-699: no fixed height override here either — the 16:9 aspect-ratio
       already shrinks the hero proportionally on small screens. */

    .dpv2-card {
        padding: 16px;
    }

    .dpv2-prize-tier {
        width: 130px;
    }

    /* MDP-741: fit-content badge is left-aligned by default inside its
       flex-column parent; center it on mobile. */
    .dpv2-kindness {
        margin: 0 auto;
    }

    /* MDP-738: two clean rows instead of a cramped stack. Row 1 is identity
       (truncates) + a flag-only language pill; row 2 is Manage/Donate/Share
       as an even, full-width, labeled action bar — the "isolated" button row
       called for in the ticket, not icons crammed beside the language pill. */
    .dpv2-topbar {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .dpv2-lang {
        order: 2;
        margin-left: auto;
    }

    .dpv2-lang-toggle .dpv2-lang-label {
        display: none;
    }

    .dpv2-lang-toggle {
        padding: 8px;
    }

    .dpv2-topbar-actions {
        order: 3;
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .dpv2-topbar-actions > form,
    .dpv2-topbar-actions > .dpv2-topbar-manage-btn,
    .dpv2-topbar-actions > .dpv2-topbar-share-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .dpv2-donate-btn--topbar,
    .dpv2-topbar-share-btn,
    .dpv2-topbar-manage-btn {
        width: 100%;
        justify-content: center;
    }

    .dpv2-countdown-box {
        min-width: 56px;
        padding: 8px 6px;
    }

    .dpv2-countdown-value {
        font-size: 20px;
    }

    .dpv2-countdown-unit {
        font-size: 10px;
    }

    .dpv2-countdown-sep {
        font-size: 18px;
        padding-top: 6px;
    }

    /* Secondary CTA gets the same full-width tap target as Donate/Share
       rather than staying a small centered pill, with a little breathing
       room before the footer instead of sitting flush against it. */
    .dpv2-fundraiser {
        padding-bottom: 24px;
    }

    .dpv2-fundraiser a {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* MDP-836: public fundraiser landing page                            */
/* Same design system, one column. The participant page's sidebar     */
/* exists to hold the Donate button; this page has no participant to  */
/* donate to yet, so the participant search takes that role inline.   */
/* ------------------------------------------------------------------ */
.dpv2-layout--single {
    max-width: 728px;
}

.dpv2-layout--single .dpv2-main {
    flex-basis: 100%;
}

/* The legacy landing page centered its title, and the organization line below it
   has no avatar to anchor it left, so both center here. MDP-837 centers
   .dpv2-title everywhere, at which point the first rule becomes redundant. */
.dpv2-layout--single .dpv2-title {
    text-align: center;
}

.dpv2-author--center {
    justify-content: center;
}

/* The top bar avatar carries the fundraiser image here rather than an initial. */
.dpv2-topbar .dpv2-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Participant search ------------------------------------------------ */
.dpv2-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dpv2-search-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--dpv2-gray-900);
    text-align: center;
    margin: 0;
}

.dpv2-search-sub {
    font-size: 14px;
    line-height: 20px;
    color: var(--dpv2-gray-500);
    text-align: center;
    margin: 0 0 8px;
}

.dpv2-search-field {
    position: relative;
}

.dpv2-search-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-300);
    border-radius: 8px;
    box-shadow: var(--dpv2-shadow-xs);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    color: var(--dpv2-gray-900);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dpv2-search-input::placeholder {
    color: var(--dpv2-gray-400);
}

.dpv2-search-input:focus {
    outline: none;
    border-color: var(--dpv2-brand-600);
    box-shadow: 0 0 0 4px var(--dpv2-brand-100);
}

.dpv2-search-input.is-navigating {
    opacity: 0.5;
}

.dpv2-search-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--dpv2-gray-400);
    pointer-events: none;
}

/* Results are absolutely positioned so a long list overlays the leaderboard
   below instead of shoving the whole page down on every keystroke. */
.dpv2-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background-color: var(--dpv2-white);
    border: 1px solid var(--dpv2-gray-200);
    border-radius: 10px;
    box-shadow: var(--dpv2-shadow-lg);
    z-index: 20;
}

.dpv2-search-results.is-open {
    display: block;
}

.dpv2-search-result {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 22px;
    color: var(--dpv2-gray-800);
    cursor: pointer;
}

.dpv2-search-result:hover,
.dpv2-search-result.is-selected {
    background-color: var(--dpv2-brand-100);
    color: var(--dpv2-gray-900);
}

.dpv2-search-result.is-empty {
    color: var(--dpv2-gray-500);
    cursor: default;
}

.dpv2-search-result.is-empty:hover {
    background-color: transparent;
}

@media (max-width: 767px) {
    .dpv2-search-title {
        font-size: 18px;
        line-height: 26px;
    }
}