/* =============================================================================
   Design Tokens
   Override any of these via Driving Donations → Appearance in wp-admin.
   The generated override file is loaded after this one, so :root values
   defined there win automatically via the CSS cascade.
   ============================================================================= */
:root {
    --dd-color-primary:    #2271b1; /* Primary action colour: buttons, focus rings   */
    --dd-color-danger:     #c0392b; /* Danger/error colour: errors, delete buttons   */
    --dd-radius:           4px;     /* Border radius for inputs, buttons, cards      */
    --dd-input-border:     #bbb;    /* Form input border colour                      */
    --dd-input-bg:         #fff;    /* Input background colour                       */
    --dd-btn-primary-text: #fff;    /* Primary button text colour                    */
    /* --dd-input-text, --dd-input-padding-y, --dd-input-padding-x are intentionally
       omitted here so each element's var() fallback value remains in effect unless
       the admin explicitly sets an override in Appearance → Design Tokens.         */
}

/* =============================================================================
   My Garage — account portal tab (/dd-account/vehicles/)
   ============================================================================= */

/* ---- Inactive page preview banner ---- */
.dd-inactive-notice {
    background: #fff8e1;
    border: 1px solid #f5c518;
    color: #5a4a00;
    padding: 10px 16px;
    border-radius: var(--dd-radius, 4px);
    margin: 0 0 16px;
    font-size: 0.9em;
}
.dd-inactive-notice a {
    color: inherit;
    text-decoration: underline;
    margin-left: 8px;
}

/* ---- Flash notices ---- */
.dd-notice {
    padding: 10px 14px;
    border-radius: var(--dd-radius, 4px);
    margin-bottom: 16px;
    font-size: 0.95em;
    line-height: 1.5;
}
.dd-notice-success {
    background: #edfaed;
    border: 1px solid #7bc47b;
    color: #2a6a2a;
}
.dd-notice-error,
.dd-notice-warning {
    background: color-mix(in srgb, var(--dd-color-danger, #c0392b) 8%, #fff);
    border: 1px solid var(--dd-color-danger, #c0392b);
    color: var(--dd-color-danger, #c0392b);
}
.dd-notice-info {
    background: #eef5ff;
    border: 1px solid #91b9f5;
    color: #1a4a8a;
}

/* ---- Shared button styles (used across portal) ---- */
.dd-btn {
    display: inline-block;
    padding: 7px 16px;
    border: none;
    border-radius: var(--dd-radius, 4px);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.15s;
}
.dd-btn:hover { opacity: 0.85; }

.dd-btn-primary {
    background: var(--dd-color-primary, #2271b1);
    color: var(--dd-btn-primary-text, #fff);
}
.dd-btn-secondary {
    background: transparent;
    border: 1px solid #aaa;
    color: #444;
}
.dd-btn-secondary:hover { opacity: 1; background: #f0f0f0; }
.dd-btn-danger {
    background: var(--dd-color-danger, #c0392b);
    color: #fff;
}
.dd-btn-success {
    background: #2a7a2a;
    color: #fff;
}
.dd-btn-success:hover { opacity: 0.85; }
.dd-btn-sm {
    padding: 4px 10px;
    font-size: 0.82em;
}

/* ---- "Add a Vehicle" collapsible ---- */
.dd-garage-add-details {
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: visible;
}

.dd-garage-add-summary {
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border-radius: 6px;
    user-select: none;
}
.dd-garage-add-summary::-webkit-details-marker { display: none; }
.dd-garage-add-details[open] .dd-garage-add-summary {
    border-bottom: 1px solid #ddd;
    border-radius: 6px 6px 0 0;
}
.dd-garage-add-summary:hover { background: #f9f9f9; }

.dd-garage-add-form {
    padding: 16px 20px;
}

.dd-garage-add-submit {
    margin-top: 14px;
}

/* ---- Vehicle type group heading (only shown when multiple types present) ---- */
.dd-garage-type-heading {
    font-size: 1.05em;
    font-weight: 600;
    margin: 24px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e0e0e0;
}
.dd-garage-type-heading:first-of-type {
    margin-top: 8px;
}

/* ---- Vehicle list table ---- */
.dd-garage-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95em;
}

.dd-garage-table th,
.dd-garage-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
}

.dd-garage-table thead th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
}

.dd-garage-table tbody tr:last-child td { border-bottom: none; }
.dd-garage-table tbody tr:hover { background: #fafafa; }

.dd-gt-year    { width: 70px; }
.dd-gt-saved   { width: 110px; }
.dd-gt-actions { width: 90px; text-align: right; }
.dd-gt-actions-cell { text-align: right; }
.dd-gt-saved-cell   { color: #888; font-size: 0.88em; }

/* ---- Empty state ---- */
.dd-garage-empty {
    color: #777;
    font-style: italic;
    margin-top: 20px;
}

/* --------------------------------------------------------
   Campaign page two-column layout
   -------------------------------------------------------- */
.dd-campaign-top {
    width: 100%;
}
.dd-cover-photo img {
    width: 100%;
    height: auto;
    display: block;
}
/* Boxed 3:2 cover/logo treatment — currently only campaign-page.php (the
   non-P2P front-end page, matching the front-end page editor's own preview
   box). Own classes, not .dd-cover-photo/.dd-campaign-logo above, so
   campaign-index.php and the P2P team/member page templates (which still
   render a plain <img>) are unaffected. */
/* Never crops a wide image at the sides — the image is shown at its full
   width, with height following its own natural ratio (so a wide/panoramic
   cover photo just ends up shorter, not side-cropped). `container-type`
   makes `cqw` units below resolve against THIS element's own width, which
   is what makes "max-height = 2/3 of width" possible — a plain percentage
   height can't reference an element's own width. Only a narrower/taller
   image (natural height > 2/3 of its width) ever gets cropped, and then
   only top/bottom (object-fit: cover), never at the sides. */
.dd-campaign-cover-box {
    width: 100%;
    container-type: inline-size;
}
.dd-campaign-cover-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 66.6667cqw;
    object-fit: cover;
    border-radius: var(--dd-radius, 4px);
}
.dd-campaign-logo-box {
    flex: 0 0 auto;
    width: 140px;
    max-width: 30%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: var(--dd-radius, 4px);
}
/* Header band: titles (flex-grow) + logo (shrink-to-fit), vertically centred */
.dd-campaign-header-band {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 1rem;
}
.dd-campaign-titles {
    flex: 1 1 auto;
    min-width: 0;
}
/* Subheadline: an <h3> supporting line under the headline/strapline — reset
   the theme's default heading top margin so it sits tight under the titles,
   and lighten it slightly so it reads as secondary to the strapline. */
.dd-subhead {
    margin: 0.35rem 0 0;
    line-height: 1.4;
    opacity: 0.85;
}
.dd-campaign-logo {
    flex: 0 0 auto;
    max-width: 30%;
}
.dd-campaign-logo img {
    display: block;
    height: auto;
    max-height: 120px;
    width: auto;
}

/* Two-column layout (page text present) */
.dd-campaign-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}
@media ( max-width: 768px ) {
    .dd-campaign-two-col {
        grid-template-columns: 1fr;
    }
}
.dd-campaign-info-col,
.dd-campaign-form-col {
    min-width: 0; /* prevent grid blowout */
}

/* Full-width form (no page text) */
.dd-campaign-form-full {
    margin-top: 1.5rem;
}

/* Full-width confirmation — spans both columns, no page text beside it */
.dd-campaign-confirmation-full {
    margin-top: 1.5rem;
}

.dd-page-topper,
.dd-page-footer {
    width: 100%;
    margin-top: 1.5rem;
}

.dd-donate-form > div.p { padding-bottom:18px; }


/* Validation: fields marked invalid after a submission attempt */
.dd-invalid {
    border-color: #c0392b !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2);
}

/* Login-required: dim the form body until the donor authenticates */
#dd-form-body.dd-form-body-dimmed {
    opacity: 0.3;
    transition: opacity 0.4s ease;
}
#dd-form-body {
    transition: opacity 0.4s ease;
}
@media (min-width:581px) and (max-width:768px), (min-width:1081px) {
    .dd-donate-form > p,
    .dd-donate-form #dd-form-body > p,
    .dd-donate-form > div.p,
    .dd-donate-form #dd-form-body > div.p,
    .dd-donate-form .dd-donation-amount-section > p,
    .dd-donate-form #dd_tax_entity_section > p,
    .dd-donate-form .dd-donor-identity-section > p,
    .dd-donate-form .dd-cpe-panel > p.dd-cpe-field,
    .dd-donate-form .dd-cpe-panel > div.dd-cpe-field.p { display:grid; grid-template-columns:130px auto; align-items:center; }

    /* Textarea and photo-upload rows: align label to top of the control, not centre */
    .dd-donate-form .dd-donor-identity-section > p.dd-textarea-row,
    .dd-donate-form .dd-donor-identity-section > div.dd-textarea-row { align-items:start; }

    /* Page editor rows are mostly multi-line (wp_editor, stacked radios,
       file uploads) — top-align the label against all of them, not just the
       few single-line fields. Scoped to .dd-cpe-field specifically so plain
       .description notices (also direct children of .dd-cpe-panel) are left
       as ordinary full-width text, not squeezed into the label column. */
    .dd-donate-form .dd-cpe-panel > p.dd-cpe-field,
    .dd-donate-form .dd-cpe-panel > div.dd-cpe-field.p { align-items:start; }

    .dd-donate-form > p > label:first-child,
    .dd-donate-form #dd-form-body > p > label:first-child,
    .dd-donate-form div.p > label:first-child,
    .dd-donate-form #dd-form-body div.p > label:first-child,
    .dd-donate-form #dd_tax_entity_section > p > label:first-child,
    .dd-donate-form .dd-donation-amount-section > p > label:first-child,
    .dd-donate-form .dd-donor-identity-section > p > label:first-child,
    .dd-donate-form .dd-donor-identity-section > div.dd-textarea-row > label:first-child,
    .dd-donate-form .dd-cpe-panel > p.dd-cpe-field > label:first-child,
    .dd-donate-form .dd-cpe-panel > div.dd-cpe-field.p > label:first-child { margin-right:10px; text-align:right; }

    .dd-donate-form .dd-terms-section p { display:block; }

    .dd-donate-form p.dd-terms-acknowledgment > *:first-child { margin-right:0px; }
}

.dd-campaign-page input[type="text"],
.dd-campaign-page input[type="number"],
.dd-campaign-page input[type="email"],
.dd-campaign-page input[type="phone"],
.dd-campaign-page input[type="tel"],
.dd-campaign-page select,
.dd-campaign-page input[type="password"],
.dd-campaign-page button.dd_submit {
    -webkit-appearance: none;
    display: block;
    width: 100%;
    border-radius: var(--dd-radius, 4px);
    padding: var(--dd-input-padding-y, 8px) var(--dd-input-padding-x, 8px);
    border: 1px solid var(--dd-input-border, #bbb);
    background: var(--dd-input-bg, #fff);
    color: var(--dd-input-text, inherit);
    font-size: 110%;
}

.dd_selectlist { position:relative; display:inline-block; width:100%; }
.dd_selectlist select { -webkit-appearance:none; appearance:none; width:100%; padding-right:30px; border-radius:4px; background-image:none; }
.dd_selectlist::after { content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #666; pointer-events:none; }
.dd_selectlist.dd-no-arrow::after { display:none; }

@media (min-width:581px) and (max-width:768px), (min-width:1081px) {
    .dd-campaign-page input[type="text"], .dd-campaign-page input[type="number"], .dd-campaign-page input[type="email"], .dd-campaign-page input[type="phone"], .dd-campaign-page input[type="tel"], .dd-campaign-page input[type="password"], input[type="submit"], .dd-campaign-page select, .dd-campaign-page button.dd_submit, .dd-campaign-page select { font-size:100%; }
}

.dd-donation-instruction-wide { grid-template-columns:auto!important; }

.form-table table tr th { padding-top:0!important; padding-bottom:0!important; }
.form-table table tr td { }

/* --------------------------------------------------------
   Password strength indicator (registration form)
   -------------------------------------------------------- */
.dd-password-strength {
    margin: -6px 0 14px;
}

/* Four labelled segments */
.dd-strength-segments {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
}
.dd-strength-seg {
    flex: 1;
    text-align: center;
}
.dd-strength-seg-bar {
    height: 7px;
    border-radius: var(--dd-radius, 4px);
    background-color: #e0e0e0;
    margin-bottom: 5px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.dd-strength-seg-label {
    display: block;
    font-size: 0.72em;
    font-weight: 500;
    color: #bbb;
    transition: color 0.3s ease, opacity 0.3s ease;
}
/* Bold label on the current (active) level */
.dd-strength-seg.is-active .dd-strength-seg-label {
    font-weight: 700;
}

/* Improvement hints */
.dd-strength-hints {
    list-style: disc;
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 0.82em;
    color: #666;
    line-height: 1.5;
}

/* --------------------------------------------------------
   Password requirements checklist (replaces segment bar)
   -------------------------------------------------------- */
.dd-pw-requirements {
    margin: -4px 0 12px;
}
.dd-pw-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82em;
    line-height: 1.5;
}
.dd-pw-req {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 1px 0;
    color: #888;
    transition: color 0.15s;
}
.dd-pw-req-ok   { color: #27ae60; }
.dd-pw-req-fail { color: #c0392b; }
.dd-pw-req-icon {
    width: 12px;
    flex-shrink: 0;
    text-align: center;
}

/* --------------------------------------------------------
   ddModal — reusable modal / floating message
   -------------------------------------------------------- */

/* Semi-opaque overlay behind the box */
.dd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dd-modal-overlay[hidden] { display: none; }

/* Floating message box */
.dd-modal-box {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 28px 32px 22px;
    max-width: 480px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.22);
}

/* × close button — top-right corner */
.dd-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 6px;
}
.dd-modal-close:hover { color: #333; }

/* =============================================================================
   Options Snapshot — confirmation page (web/CSS path)
   ============================================================================= */

.dd-options-snapshot { margin: 16px 0; }

.dd-snapshot-heading {
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e2e4e7;
}

/* Each option or group-instance row */
.dd-snapshot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    gap: 12px;
}

.dd-snapshot-row-label { flex: 1; }

.dd-snapshot-row-price {
    white-space: nowrap;
    text-align: right;
    min-width: 52px;
}

/* Total row */
.dd-snapshot-total {
    font-weight: 700;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid #ccd0d4;
}

/* Separator row — light top border between sections (e.g. options → financial) */
.dd-snapshot-sep {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #e2e4e7;
}

/* Full-width metadata row — no two-column flex, text can wrap freely.
   Used for Payment Processor and Transaction ID lines. */
.dd-snapshot-row-full {
    padding: 3px 0;
}

.dd-snapshot-from-garage { color: #777; }

/* =============================================================================
   Confirmation / Thank-You Page
   ============================================================================= */

.dd-confirmation { /* max-width: 640px; */ margin: 0 auto; }
.dd-confirmation-header,
.dd-confirmation-footer { margin: 20px 0; }

.dd-confirmation-status {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: var(--dd-radius, 4px);
    background: #edfaed;
    border: 1px solid #7bc47b;
    color: #2a6a2a;
}
.dd-confirmation-status.dd-status-pending {
    background: #fff8e5;
    border-color: #e6c44a;
    color: #6b5200;
}
.dd-confirmation-meta { font-size: 0.9em; color: #555; margin: 16px 0; }

/* Financial summary table */
.dd-confirmation-amounts { border-collapse: collapse; min-width: 260px; margin: 16px 0; }
.dd-ca-label { padding: 4px 20px 4px 0; color: #555; }
.dd-ca-value { padding: 4px 0; text-align: right; }
.dd-ca-separator td { padding-top: 8px; border-top: 1px solid #e2e4e7; }
.dd-ca-total td { padding-top: 8px; border-top: 2px solid #ccd0d4; font-weight: 700; }

/* Title */
.dd-modal-title {
    margin: 0 0 14px;
    padding-right: 28px; /* don't overlap the × */
    font-size: 1.1em;
}

/* Body copy */
.dd-modal-body {
    font-size: 0.95em;
    line-height: 1.6;
}
.dd-modal-body p:first-child { margin-top: 0; }
.dd-modal-body p:last-child  { margin-bottom: 0; }

/* Button row */
.dd-modal-footer {
    margin-top: 20px;
    text-align: right;
}
.dd-modal-footer .dd-btn { margin-left: 8px; }

/* Inline "What's this?" trigger — looks like a text link, sits inline */
/* --------------------------------------------------------
   Page text — restore standard prose formatting that themes often reset
   -------------------------------------------------------- */
.dd-page-text p  { margin: 0 0 1em; }
.dd-page-text ul,
.dd-page-text ol { margin: 0 0 1em; padding-left: 2em; }
.dd-page-text ul { list-style: disc; }
.dd-page-text ol { list-style: decimal; }
.dd-page-text li { margin-bottom: 0.25em; }

.dd-whats-this {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 80%;
    font-family: inherit;
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    white-space: nowrap;
}

/* ---- Donation status badges (My Donations table) ---- */
.dd-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
}
.dd-status-complete   { background: #edfaed; color: #2a6a2a; }
.dd-status-pending    { background: #fff8e5; color: #6b5200; }
.dd-status-incomplete,
.dd-status-cancelled  { background: #fdf2f2; color: #a00; }
.dd-status-refunded   { background: #f0f0ff; color: #444; }

/* ---- Muted placeholder (e.g. "—" in optional columns) ---- */
.dd-muted { color: #aaa; }



/* ---- PhotoSwipe lightbox trigger hint ---- */
.dd-page-text a.dd-pswp-trigger { display: inline-block; cursor: zoom-in; }
.dd-page-text a.dd-pswp-trigger img { display: block; }

/* ---- My Account Tabs ---- */
.dd-account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 20px;
}

/* Base tab */
.dd-account-tabs .dd-tab {
    display: inline-block;
    padding: 10px 16px;
    text-decoration: none;
    color: #555;
    background: #f7f7f7;
    border: 1px solid #d0d0d0;
    border-bottom: none;
    margin-bottom: -1px; /* pulls active tab into content border */
    transition: background 0.2s ease, color 0.2s ease;
}

/* Space between tabs visually (optional subtle separation) */
.dd-account-tabs .dd-tab + .dd-tab {
    border-left: none;
}

/* Hover state */
.dd-account-tabs .dd-tab:hover {
    background: #ffffff;
    color: #222;
}

/* Active tab */
.dd-account-tabs .dd-tab-active {
    background: #ffffff;
    color: #111;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

/* Top corners only */
.dd-account-tabs .dd-tab:first-child {
    border-top-left-radius: var(--dd-radius, 4px);
}

.dd-account-tabs .dd-tab:last-child {
    border-top-right-radius: var(--dd-radius, 4px);
}

/* Optional: make ALL tabs have top radius feel when wrapped */
.dd-account-tabs .dd-tab {
    border-top-left-radius: var(--dd-radius, 4px);
    border-top-right-radius: var(--dd-radius, 4px);
}

/* Log Out link — sits at the far right of the tab bar, plain text style */
.dd-account-tabs .dd-account-logout {
    margin-left: auto;
    padding: 10px 4px;
    text-decoration: none;
    font-size: .88em;
    color: #666;
    align-self: center;
}
.dd-account-tabs .dd-account-logout:hover {
    color: #111;
    text-decoration: underline;
}

/* ---- Read-only email field (logged-in donors) ---- */
.dd-email-readonly {
    background: #f6f7f7;
    color: #3c434a;
    cursor: default;
    border-color: #dcdcde !important;
}

/* ---- Near-match email suggestion banner ---- */
.dd-near-match-banner {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dd-near-match-msg {
    flex: 1 1 auto;
}
.dd-near-match-use,
.dd-near-match-dismiss {
    background: none;
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
}
.dd-near-match-use {
    color: #1a6496;
    border-color: #1a6496;
    font-weight: 600;
}
.dd-near-match-dismiss {
    color: #666;
    border-color: #bbb;
}

/* ---- Inline auth — known-account three-option buttons ---- */

/* Button row: three equal-width flex children */
.dd-ia-auth-options {
    display: flex;
    gap: 8px;
}
.dd-ia-auth-options .dd-btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

/* Forced line breaks — hidden by default, activated on small screens */
br.dd-ia-btn-br { display: none; }

@media (max-width: 480px) {
    br.dd-ia-btn-br { display: block; }
    .dd-ia-auth-options .dd-btn {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* X close icon next to Log In button — not styled as a button */
.dd-ia-pw-close {
    cursor: pointer;
    color: #bbb;
    font-size: 1.25em;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 2px;
    user-select: none;
    transition: color .15s;
}
.dd-ia-pw-close:hover,
.dd-ia-pw-close:focus { color: #444; outline: none; }

/* ---- Shared auth / account form utilities ---- */

/* Invisible credential field inserted for password-manager compatibility.
   Visually hidden and non-interactive; screen readers skip it (aria-hidden). */
.dd-hidden-credential {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

/* Inline validation error shown below a password field pair. */
.dd-pw-match-error {
    color: #c0392b;
    font-size: .85em;
    margin-top: 4px;
}

/* ---- My Account — Branded Login Page ---- */
.dd-account-login h2 { margin-top: 0; }

.dd-login-intro {
    color: #555;
    margin-bottom: 20px;
}

.dd-login-form {
    max-width: 460px;
}

.dd-login-email-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Email input + Continue button side-by-side */
.dd-login-email-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.dd-login-email-row input[type="email"] {
    flex: 1 1 auto;
    /* sizing handled by .dd-campaign-page input rule */
}
.dd-login-email-row .dd-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* =============================================================================
   Circular fundraising progress ring
   Used on campaign pages and (later) team/member P2P pages.

   Modes
   ─────
   • Goal set, under 100%  — arc fills to actual %, percentage in centre
   • Goal set, over  100%  — arc fills to 100%, real % shown (e.g. 230%)
   • No goal               — full solid ring, dollar amount in centre
   ============================================================================= */

/* Sits at the top-right of the page-text column, with the page text
   wrapping around it — see .dd-progress-top-right below. */
.dd-progress-top-right {
    float: right;
    margin: 0 0 16px 20px;
}
.dd-progress-top-right .dd-ring-wrap {
    margin-top: 0;
}
@media (max-width: 480px) {
    .dd-progress-top-right {
        float: none;
        margin: 0 0 16px;
    }
}

.dd-ring-wrap {
    position: relative;
    display:  inline-block;
    width:    140px;
    height:   140px;
    margin:   16px 0 4px;
}

.dd-ring-svg {
    width:  100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Track — light gray full circle */
.dd-ring-track {
    fill:         none;
    stroke:       #e4e4e4;
    stroke-width: 9;
}

/* Progress arc — brand primary colour */
.dd-ring-arc {
    fill:             none;
    stroke:           var(--dd-color-primary, #2271b1);
    stroke-width:     9;
    stroke-linecap:   round;
    /* dashoffset animated by JS from circumference → target */
}

/* Centre label overlay */
.dd-ring-center {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
    line-height:     1.1;
}

.dd-ring-pct {
    font-size:   1.6rem;
    font-weight: 700;
    color:       var(--dd-color-primary, #2271b1);
}

.dd-ring-amount {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--dd-color-primary, #2271b1);
}

.dd-ring-sublabel {
    font-size:  0.72rem;
    color:      #666;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Raised / Goal text below the ring */
.dd-ring-meta {
    font-size:   0.88rem;
    color:       #555;
    margin:      0 0 12px;
    max-width:   140px;   /* match ring width so text wraps under it */
    text-align:  center;
}

/* Progress ring + index content side-by-side on tablet/desktop */
.dd-campaign-index__progress-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}
.dd-campaign-index__progress {
    flex: 0 0 auto;
}
.dd-campaign-index__content {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 600px) {
    .dd-campaign-index__progress-row {
        flex-direction: column;
    }
}

/* =============================================================================
   P2P Team page
   ============================================================================= */

.dd-team-breadcrumb {
    margin: 12px 0 0;
    font-size: .9em;
    color: #666;
}
.dd-team-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.dd-team-breadcrumb a:hover { text-decoration: underline; }

.dd-team-captain-byline {
    margin: 4px 0 0;
    font-size: .9em;
    color: #555;
}

/* Member list */
.dd-team-members {
    margin-top: 24px;
}

.dd-team-members__heading {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #444;
}

.dd-team-members__count {
    font-weight: 400;
    color: #888;
}

.dd-team-members__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dd-team-members__item {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.dd-team-members__item:last-child { border-bottom: none; }

.dd-team-members__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.dd-team-members__link:hover .dd-team-members__name {
    color: var(--dd-color-primary, #2271b1);
}

.dd-team-members__name  { font-weight: 600; }
.dd-team-members__raised { font-size: .9em; color: #555; white-space: nowrap; margin-left: 12px; }

/* Avatar in the team member list rows */
.dd-member-list-avatar {
    flex-shrink:   0;
    width:         40px;
    height:        40px;
    border-radius: 50%;
    overflow:      hidden;
    background:    #e8e8e8;
    margin-right:  10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #aaa;
}
.dd-member-list-avatar__img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    border-radius: 50%;
}
.dd-member-list-avatar--placeholder svg {
    width:  28px;
    height: 28px;
}

.dd-team-no-members { color: #888; font-size: .9em; margin-top: 16px; }

/* Account profile photo field */
.dd-profile-photo-field {
    display:     flex;
    align-items: center;
    gap:         16px;
}
.dd-profile-photo-preview {
    flex-shrink:   0;
    width:         80px;
    height:        80px;
    border-radius: 50%;
    object-fit:    cover;
    background:    #e8e8e8;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         #aaa;
}
.dd-profile-photo-preview svg { width: 48px; height: 48px; }
.dd-profile-photo-controls { display: flex; flex-direction: column; gap: 6px; }
.dd-photo-drop-zone {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 12px;
    border:        2px dashed #ccc;
    border-radius: 6px;
    cursor:        pointer;
    transition:    border-color .15s, background .15s;
    font-size:     .9em;
    color:         #555;
}
.dd-photo-drop-zone:hover,
.dd-photo-drop-zone.dd-drop-active { border-color: #888; background: #f5f5f5; }
.dd-photo-drop-zone input[type="file"] { display: none; }

/* Owner toolbar — Edit / Invite buttons shown to page owner / admin */
.dd-owner-toolbar {
    display: flex;
    gap: 8px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

/* Invite link panel */
.dd-invite-panel {
    background: #f6f7f7;
    border: 1px solid #ddd;
    border-radius: var(--dd-radius, 4px);
    padding: 12px 14px;
    margin-bottom: 8px;
    max-width: 560px;
}

.dd-invite-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dd-invite-url-input {
    flex: 1 1 auto;
    font-size: .85em;
    font-family: monospace;
    padding: 5px 8px;
    border: 1px solid var(--dd-input-border, #bbb);
    border-radius: var(--dd-radius, 4px);
    background: #fff;
    color: #333;
}

/* My Fundraising Pages — account tab */
.dd-my-pages__section-heading {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
    margin: 20px 0 8px;
    font-weight: 700;
}

.dd-my-pages__list {
    border: 1px solid #e0e0e0;
    border-radius: var(--dd-radius, 4px);
    overflow: hidden;
}

.dd-my-pages__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.dd-my-pages__row:last-child { border-bottom: none; }
.dd-my-pages__row:nth-child(even) { background: #fafafa; }

/* Honoree/member pages nested directly under their Team Page row on the
   My Fundraising Pages list — reuses .dd-team-member-row's own styling
   (already defined below for team-members.php), just indented and
   visually separated as a sub-section of the team's row above it. */
.dd-team-honorees {
    padding: 4px 16px 14px 40px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.dd-team-honorees:last-child { border-bottom: none; }
.dd-team-honorees .dd-team-member-row { padding: 10px 0; }
.dd-team-honorees[hidden] { display: none; }

/* Collapse/expand toggle for a team's nested honoree list */
.dd-team-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 0.85em;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dd-team-toggle:hover { color: #222; }
.dd-team-toggle .dd-team-toggle-icon {
    display: inline-block;
    transition: transform 0.15s ease;
}
.dd-team-toggle[aria-expanded="false"] .dd-team-toggle-icon { transform: rotate(-90deg); }

.dd-my-pages__collapse-all {
    margin: -4px 0 12px;
    font-size: 0.85em;
}
.dd-my-pages__collapse-all button {
    background: none;
    border: none;
    color: var(--dd-color-primary, #2271b1);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.dd-my-pages__collapse-all button:hover { color: #135e96; }

.dd-my-pages__info {
    flex: 1 1 200px;
    min-width: 0;
}

.dd-my-pages__name {
    display: block;
    font-size: 1em;
    margin-bottom: 2px;
}
.dd-my-pages__name a {
    color: inherit;
    text-decoration: none;
}
.dd-my-pages__name a:hover { color: var(--dd-color-primary, #2271b1); }

.dd-my-pages__meta {
    font-size: .85em;
    color: #666;
}

.dd-my-pages__raised {
    font-size: .9em;
    color: #444;
    white-space: nowrap;
}

.dd-my-pages__actions {
    display: flex;
    gap: 6px;
}

/* Member page — portrait avatar in the header band */
.dd-member-avatar {
    flex-shrink:     0;
    width:           80px;
    height:          80px;
    border-radius:   50%;
    overflow:        hidden;
    background:      #e8e8e8;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #bbb;
    border:          2px solid #fff;
    box-shadow:      0 1px 4px rgba(0,0,0,.15);
    margin-right:    16px;
    align-self:      flex-start;
    margin-top:      4px;
}
.dd-member-avatar__img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    display:      block;
    border-radius: 50%;
}
.dd-member-avatar--placeholder svg {
    width:  48px;
    height: 48px;
}

/* Portrait preview in the edit form */
.dd-photo-preview--portrait {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    object-fit:    cover;
}
.dd-photo-preview-placeholder--portrait {
    width:           90px;
    height:          90px;
    border-radius:   50%;
    background:      #f0f0f1;
    border:          1px solid #ddd;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #bbb;
}

/* Member page — "Fundraising for [Team]" bylines */
.dd-member-team-byline {
    margin: 4px 0 0;
    font-size: .9em;
    color: #555;
}
.dd-member-team-byline a,
.dd-member-team-link a {
    color: var(--dd-color-primary, #2271b1);
    text-decoration: none;
}
.dd-member-team-byline a:hover,
.dd-member-team-link a:hover { text-decoration: underline; }

.dd-member-team-link {
    margin-top: 20px;
    font-size: .9em;
    color: #666;
}

/* =============================================================================
   Team / Peer-to-Peer fundraising — Start a Team form
   ============================================================================= */

.dd-p2p-form-wrap,
.dd-p2p-auth-gate {
    max-width: 560px;
}

.dd-p2p-form-wrap h3,
.dd-p2p-auth-gate h3 {
    margin: 0 0 8px;
    font-size: 1.4em;
}

.dd-p2p-field {
    margin-bottom: 18px;
}
.dd-p2p-name-row { display: flex; gap: 16px; }
.dd-p2p-name-col { flex: 1; }
@media (max-width: 480px) {
    .dd-p2p-name-row { flex-direction: column; gap: 0; }
}

.dd-p2p-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.dd-field-optional {
    font-weight: 400;
    color: #888;
    font-size: .88em;
}

.dd-p2p-input,
.dd-p2p-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--dd-input-border, #bbb);
    border-radius: var(--dd-radius, 4px);
    background: var(--dd-input-bg, #fff);
    font-size: 1em;
    line-height: 1.4;
}

.dd-p2p-input:focus,
.dd-p2p-textarea:focus {
    outline: none;
    border-color: var(--dd-color-primary, #2271b1);
    box-shadow: 0 0 0 2px rgba(34, 113, 177, .15);
}

.dd-p2p-goal-input {
    max-width: 140px;
}

.dd-p2p-currency-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dd-p2p-currency-symbol {
    font-size: 1em;
    color: #555;
}

.dd-p2p-submit {
    margin-top: 8px;
}

/* ── Page-link slug input ── */
.dd-slug-input-row {
    display:     flex;
    align-items: center;
    gap:         0;
    width:   100%;
    border: 1px solid var(--dd-input-border, #bbb);
    border-radius: 3px 0 0 3px;
}

.dd-slug-prefix {
    flex-shrink:      0;
    padding:          6px 0px 6px 8px;
    x-background:       #f0f0f1;
    x-border:           1px solid #8c8f94;
    border-right:     none;
    border-radius:    3px 0 0 3px;
    font-size:        0.85em;
    color:            #999;
    white-space:      nowrap;
    line-height:      1.4;
    user-select:      none;
}

.dd-slug-input {
    flex:          1 1 auto;
    min-width:     0;
    padding-left: 3px!important;
    border:none!important;
}

.dd-slug-status {
    min-height: 1.3em;
    font-size:  0.875em;
    margin-top: 3px;
}
.dd-slug-ok       { color: #3d8b40; font-weight: 500; }
.dd-slug-error    { color: #d63638; font-weight: 500; }
.dd-slug-checking { color: #787c82; }


/* Confirmation / status panels */
.dd-p2p-panel {
    padding: 16px 20px;
    border-radius: var(--dd-radius, 4px);
    border: 1px solid #7bc47b;
    background: #edfaed;
    color: #1a5a1a;
    max-width: 560px;
}

.dd-p2p-panel h3 {
    margin: 0 0 6px;
    font-size: 1.2em;
}

.dd-p2p-panel p {
    margin: 0;
}

.dd-p2p-panel.dd-p2p-pending {
    background: #fff8e5;
    border-color: #f0c040;
    color: #6b5200;
}

.dd-p2p-panel.dd-p2p-existing {
    background: #f0f4ff;
    border-color: #90aee0;
    color: #1a2a6a;
}

/* Small button variant */
.dd-btn.dd-btn-sm {
    font-size: .88em;
    padding: 5px 12px;
}

/* P2P "Start a Team" CTA on campaign index */
.dd-p2p-index-cta {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

/* Cancel link on the creation form */
.dd-p2p-cancel {
    margin-left: 16px;
    color: #666;
    font-size: .9em;
    text-decoration: none;
}
.dd-p2p-cancel:hover { text-decoration: underline; }

/* =============================================================================
   P2P — Edit page button (visible to page owner / admin on front end)
   ============================================================================= */

.dd-page-edit-bar {
    text-align: right;
    padding: 6px 0 4px;
}

.dd-btn-outline {
    display:          inline-block;
    padding:          6px 14px;
    border:           2px solid var(--dd-color-primary, #2271b1);
    border-radius:    var(--dd-radius, 4px);
    color:            var(--dd-color-primary, #2271b1);
    background:       transparent;
    font-size:        0.83rem;
    font-weight:      600;
    text-decoration:  none;
    transition:       background .15s, color .15s;
    line-height:      1.4;
}
.dd-btn-outline:hover {
    background: var(--dd-color-primary, #2271b1);
    color: #fff;
    text-decoration: none;
}

/* =============================================================================
   P2P — Edit page form — photo upload / preview
   ============================================================================= */

.dd-photo-upload-row {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    flex-wrap:   wrap;
}

.dd-photo-preview {
    width:        90px;
    height:       90px;
    border-radius: 50%;
    object-fit:   cover;
    border:       2px solid #ddd;
    flex-shrink:  0;
    display:      block;
}

.dd-photo-preview-placeholder {
    width:         90px;
    height:        90px;
    border-radius: 50%;
    background:    #ebebeb;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     2.2rem;
    color:         #bbb;
    flex-shrink:   0;
}

.dd-photo-upload-controls {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding-top:    4px;
}

.dd-photo-remove-label {
    font-size: 0.85em;
    color: #666;
    cursor: pointer;
}

/* =============================================================================
   Campaign Index — P2P two-section layout
   ============================================================================= */

/* "Start a Team" call-to-action row */
.dd-ci-start-cta {
    margin: 28px 0 36px;
    text-align: right;
}

/* Each section (Teams / Team Members) */
.dd-ci-section {
    margin-bottom: 48px;
}

/* Section header: title + controls on one row */
.dd-ci-section__header {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             12px 20px;
    margin-bottom:   18px;
    border-bottom:   2px solid #e0e4ec;
    padding-bottom:  14px;
}

.dd-ci-section__title {
    margin:      0;
    font-size:   1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}

.dd-ci-section__controls {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         10px 16px;
    margin-left: auto;
}

/* Tab bar */
.dd-ci-tabbar {
    display: flex;
    gap:     4px;
}

.dd-ci-tab {
    padding:       6px 14px;
    border:        1px solid #c8cdd8;
    border-radius: 20px;
    background:    transparent;
    color:         #555;
    font-size:     0.85rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, color .15s, border-color .15s;
    white-space:   nowrap;
}

.dd-ci-tab:hover {
    background:   #f0f2f6;
    border-color: #a0a8b8;
    color:        #333;
}

.dd-ci-tab.is-active {
    background:   var(--dd-color-primary, #2271b1);
    border-color: var(--dd-color-primary, #2271b1);
    color:        #fff;
}

/* Search input */
.dd-ci-search-wrap {
    position: relative;
}

.dd-ci-search {
    padding:       6px 12px 6px 32px;
    border:        1px solid #c8cdd8;
    border-radius: 20px;
    font-size:     0.85rem;
    color:         #333;
    background:    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.415l-3.868-3.833zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 10px center / 14px 14px;
    width:         200px;
    transition:    border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance:    none;
}

.dd-ci-search:focus {
    outline:      none;
    border-color: var(--dd-color-primary, #2271b1);
    box-shadow:   0 0 0 2px rgba(34, 113, 177, 0.18);
}

/* Panels */
.dd-ci-panel.is-hidden {
    display: none;
}

/* Card grid */
.dd-ci-grid {
    display: grid;
    gap:     18px;
}

/* Team cards — vertical layout, portrait-ish proportions */
.dd-ci-section[data-type="team"] .dd-ci-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Member cards — horizontal layout (avatar + name + meta), need more width */
.dd-ci-section[data-type="member"] .dd-ci-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Base card */
.dd-ci-card {
    display:         flex;
    flex-direction:  column;
    border:          1px solid #dde1ea;
    border-radius:   8px;
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
    background:      #fff;
    transition:      box-shadow .15s, transform .12s;
}

.dd-ci-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform:  translateY(-2px);
}

/* Team card: landscape thumbnail */
.dd-ci-card--team .dd-ci-card__thumb {
    width:      100%;
    height:     130px;
    overflow:   hidden;
    flex-shrink: 0;
    background: #e8eaf0;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.dd-ci-card--team .dd-ci-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.dd-ci-thumb-ph {
    width:  100%;
    height: 100%;
}

/* Member card: circular avatar */
.dd-ci-card--member {
    flex-direction: row;
    align-items:    center;
    padding:        12px 14px;
    gap:            14px;
}

.dd-ci-card--member .dd-ci-card__avatar {
    width:       56px;
    height:      56px;
    border-radius: 50%;
    overflow:    hidden;
    flex-shrink: 0;
    background:  #e8eaf0;
}

.dd-ci-card--member .dd-ci-card__img--avatar {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    border-radius: 50%;
}

.dd-ci-avatar-ph {
    width:  100%;
    height: 100%;
    display: block;
}

/* Card body */
.dd-ci-card__body {
    padding:        12px 14px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
    min-width:      0;
}

.dd-ci-card--member .dd-ci-card__body {
    padding: 0;
}

.dd-ci-card__name {
    font-size:     0.95rem;
    font-weight:   700;
    line-height:   1.3;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    display:       block;
}

.dd-ci-card__team {
    font-size: 0.8rem;
    color:     #777;
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    display:   block;
}

.dd-ci-card__raised {
    font-size:   0.82rem;
    color:       var(--dd-color-primary, #2271b1);
    font-weight: 600;
    display:     block;
}

/* Empty / status states */
.dd-ci-empty,
.dd-ci-searching {
    padding:     24px 0;
    color:       #888;
    font-size:   0.9rem;
    text-align:  center;
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         8px;
}

/* Shared CSS spinner — used on the campaign index search state and anywhere
   dd-form.css is not loaded.  dd-form.css defines .dd-ia-spinner with the
   same visual; both share the dd-spin-plain keyframe. */
@keyframes dd-spin-plain {
    to { transform: rotate(360deg); }
}
.dd-spinner {
    display:       inline-block;
    width:         14px;
    height:        14px;
    border:        2px solid #ccc;
    border-top-color: #666;
    border-radius: 50%;
    animation:     dd-spin-plain 0.6s linear infinite;
    flex-shrink:   0;
}

/* Responsive: member grid single column on small screens */
@media (max-width: 500px) {
    .dd-ci-grid {
        grid-template-columns: 1fr;
    }
    .dd-ci-section__controls {
        width: 100%;
    }
    .dd-ci-search {
        width: 100%;
    }
    .dd-ci-start-cta {
        text-align: center;
    }
}

/* =============================================================================
   P2P Team Moderation — badge on Members button + members management page
   ============================================================================= */

/* Notification badge on the Members button */
.dd-moderation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 5px;
    background: #c0392b;
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1;
    vertical-align: middle;
}

.dd-badge-error {
    background: #fdf2f2;
    color: #a00;
    border: 1px solid #e88;
}

/* Team members list */
.dd-team-members-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dd-team-member-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
}
.dd-team-member-row:last-child { border-bottom: none; }
.dd-team-member-row--pending { background: #fffbf0; margin: 0 -12px; padding: 14px 12px; border-radius: 4px; }

.dd-team-member-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    min-width: 0;
}

.dd-team-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dd-team-member-details {
    display: flex;
    flex-direction: column;
}
.dd-team-member-name { font-size: 1em; }
.dd-team-member-name a { color: inherit; text-decoration: none; }
.dd-team-member-name a:hover { text-decoration: underline; }
.dd-team-member-meta { font-size: 0.85em; color: #555; margin-top: 2px; }

.dd-team-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Expand-in-place moderation form — forced onto its own full-width line
   within the .dd-team-member-row flex container (flex-basis:100%), rather
   than trying to squeeze in beside the info/actions blocks. */
.dd-moderate-form {
    flex: 1 1 100%;
    margin-top: 10px;
    padding: 12px 14px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.dd-moderate-form__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9em;
    color: #444;
    margin-bottom: 10px;
}
.dd-moderate-form__textarea {
    width: 100%;
    min-height: 70px;
    padding: 6px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.95em;
    resize: vertical;
    box-sizing: border-box;
}
.dd-moderate-form__buttons {
    display: flex;
    gap: 8px;
}

/* =============================================================================
   P2P Leaderboard Shortcodes
   [dd_p2p_teams], [dd_p2p_fundraisers], [dd_p2p_progress],
   [dd_p2p_stats], [dd_p2p_donors], [dd_p2p_start_button]
   ============================================================================= */

/* ---- Card grid layout ---- */
.dd-p2p-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-p2p-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--dd-radius, 4px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Team card: rectangular cover photo */
.dd-p2p-team-card .dd-p2p-card__photo-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}
.dd-p2p-team-card .dd-p2p-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dd-p2p-team-card .dd-p2p-card__photo--placeholder {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

/* Fundraiser card: circular avatar centred above body */
.dd-p2p-fundraiser-card .dd-p2p-card__avatar-link {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.dd-p2p-fundraiser-card .dd-p2p-card__avatar,
.dd-p2p-fundraiser-card .dd-p2p-card__avatar--placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    display: block;
}
.dd-p2p-fundraiser-card .dd-p2p-card__avatar--placeholder svg {
    width: 72px;
    height: 72px;
}

.dd-p2p-card__body {
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dd-p2p-card__name {
    margin: 0 0 4px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
}
.dd-p2p-card__name a {
    color: inherit;
    text-decoration: none;
}
.dd-p2p-card__name a:hover { text-decoration: underline; }

.dd-p2p-card__meta {
    margin: 0 0 6px;
    font-size: 0.85em;
    color: #666;
}
.dd-p2p-card__meta a { color: inherit; }
.dd-p2p-card__meta a:hover { text-decoration: underline; }

.dd-p2p-card__raised {
    margin: 4px 0 8px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
}

/* ---- List layout ---- */
.dd-p2p-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.dd-p2p-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}
.dd-p2p-list-item:last-child { border-bottom: none; }

/* Small rectangular photo in list rows (teams) */
.dd-p2p-list-photo {
    flex-shrink: 0;
    display: block;
}
.dd-p2p-list-photo img {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--dd-radius, 4px);
    display: block;
}

/* Small circular avatar in list rows (fundraisers) */
.dd-p2p-list-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}
.dd-p2p-list-avatar img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    display: block;
}
.dd-p2p-list-avatar svg {
    width: 36px;
    height: 36px;
    display: block;
}

.dd-p2p-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dd-p2p-list-name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dd-p2p-list-name:hover { text-decoration: underline; }

.dd-p2p-list-meta {
    font-size: 0.82em;
    color: #666;
}
.dd-p2p-list-meta a { color: inherit; }
.dd-p2p-list-meta a:hover { text-decoration: underline; }

.dd-p2p-list-raised {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
    font-size: 0.95em;
}
.dd-p2p-list-goal {
    font-weight: 400;
    color: #888;
    font-size: 0.85em;
}

/* Progress bar sits below the list-item flex row */
.dd-p2p-list-item .dd-p2p-bar {
    flex-basis: 100%;
    margin-top: 4px;
}

/* ---- Shared progress bar ---- */
.dd-p2p-bar {
    height: 6px;
    background: #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}
.dd-p2p-bar__fill {
    height: 100%;
    background: var(--dd-color-primary, #2271b1);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* ---- Stats tiles [dd_p2p_stats] ---- */
.dd-p2p-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dd-p2p-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 90px;
}
.dd-p2p-stat__value {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dd-color-primary, #2271b1);
}
.dd-p2p-stat__label {
    font-size: 0.85em;
    color: #555;
    margin-top: 3px;
}

/* ---- Progress ring shortcode [dd_p2p_progress] ---- */
.dd-p2p-progress {
    display: inline-block;
}

/* ---- Donor grid [dd_p2p_donors] ---- */
.dd-p2p-donors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.dd-p2p-donor-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: var(--dd-radius, 4px);
    padding: 12px;
    text-align: center;
}
.dd-p2p-donor__name {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 0.9em;
    word-break: break-word;
}
.dd-p2p-donor__amount {
    margin: 0 0 2px;
    font-size: 1em;
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
}
.dd-p2p-donor__date {
    margin: 0;
    font-size: 0.78em;
    color: #888;
}

/* ---- Top-N donor leaderboard [dd_leaderboard] ---- */
.dd-leaderboard__title {
    margin: 0 0 10px;
}
.dd-leaderboard__list {
    margin: 0;
    padding-left: 1.6em;
    counter-reset: none;
}
.dd-leaderboard__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.dd-leaderboard__item::marker {
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
}
.dd-leaderboard__item:last-child {
    border-bottom: none;
}
.dd-leaderboard__name {
    font-weight: 600;
    word-break: break-word;
}
.dd-leaderboard__amount {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
    white-space: nowrap;
}

/* ---- Start button wrapper [dd_p2p_start_button] ---- */
.dd-p2p-start-button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ---- Responsive ---- */
@media (max-width: 500px) {
    .dd-p2p-cards {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .dd-p2p-donors {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .dd-p2p-stats {
        justify-content: center;
    }
}