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

/* ---- Flash notices ---- */
.dd-notice {
    padding: 10px 14px;
    border-radius: var(--dd-radius, 4px);
    margin-bottom: 16px;
    font-size: 0.95em;
}
.dd-notice-success {
    background: #edfaed;
    border: 1px solid #7bc47b;
    color: #2a6a2a;
}
.dd-notice-error {
    background: #fdf2f2;
    border: 1px solid #e88;
    color: #a00;
}

/* ---- 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-danger {
    background: var(--dd-color-danger, #c0392b);
    color: #fff;
}
.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 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;
}
/* 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;
}
.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;
}

@media (min-width:769px) {
    .dd-donate-form > p { display:grid; grid-template-columns:130px auto; align-items:center; }
    .dd-donate-form .dd-terms-section p { display:block; }
    .dd-donate-form p > *:first-child { margin-right:10px; text-align:right; }
    .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:769px) {
    .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;
}

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