/* =============================================================================
   Driving Donations — Public Donation Form Styles
   ============================================================================= */

.dd-auth-tab-link.dd-auth-tab-active { display:none; }


.dd-donate-form h1, .dd-donate-form h2, .dd-donate-form h3, .dd-donate-form h4, .dd-donate-form h5, .dd-donate-form h6  { padding-top:30px; }

/* ---- Registration options wrapper ---- */
.dd-registration-options, .dd-donation-options-section {
    margin: 48px 0 24px 0;
}

/* ---- Individual field wrapper ---- */
.dd-opt-field {
    margin-bottom: 16px;
}

/* ---- Labels ---- */
.dd-opt-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.dd-opt-checkbox-label,
.dd-opt-radio-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 4px;
}

/* ---- Price hint (checkbox / radio labels) ---- */
.dd-opt-price {
    color: #555;
    font-weight: 400;
    font-size: 0.9em;
}

/* ---- "Sold Out" / unavailable badge — options, choices, and group headings ---- */
.dd-opt-unavailable-badge {
    display: inline-block;
    color: #8a6d00;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
}

/* ---- "Waitlist" badge/note — blue/neutral, unlike Sold Out's amber, since
   selecting a waitlisted field is still a real, encouraged action, not a
   dead end ---- */
.dd-opt-waitlist-badge {
    display: inline-block;
    color: #0a4a7a;
    background: #e6f2fb;
    border: 1px solid #b9dcf3;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
}
.dd-opt-waitlist-note {
    margin: 2px 0 8px;
    font-size: 0.88em;
    color: #0a4a7a;
}

/* ---- "Admin Only" badge — only ever shown on the admin Edit Donation
   screen (the field itself never renders on the donor-facing form at all),
   so this is purely a staff-awareness marker, not a donor-facing state ---- */
.dd-opt-admin-only-badge {
    display: inline-block;
    color: #4a4a4a;
    background: #ececec;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
}

/* ---- "Last n spots" / "Last n hour(s)"/"minute(s)" badges — Capacity and
   Deadline limits' own countdown badges, display only, never cascaded to
   descendants (same box model as the badges above, new colors: orange for
   capacity urgency, red for time urgency) ---- */
.dd-opt-capacity-badge {
    display: inline-block;
    color: #8a4b00;
    background: #ffe8d6;
    border: 1px solid #ffb877;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
}
.dd-opt-deadline-badge {
    display: inline-block;
    color: #8a1f1f;
    background: #fde8e8;
    border: 1px solid #f5b5b5;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 4px;
}

/* ---- Number field inline price calc  [ qty ]  ×  $unit  =  $sub ---- */
.dd-num-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
/* Override the generic .dd-opt-field input[type="number"] block/100% rule so
   the input sits inline beside the price row rather than spanning the full row. */
.dd-num-input-wrap input[type="number"] {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
}
.dd-num-price-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: #555;
    font-size: 0.9em;
    white-space: nowrap;
}
.dd-num-x,
.dd-num-eq {
    color: #999;
}
.dd-num-unit-price {
    font-weight: 500;
}
.dd-num-subtotal {
    font-weight: 600;
    color: #222;
}

/* ---- Required marker ---- */
.dd-required {
    color: var(--dd-color-danger, #c0392b);
    font-weight: 700;
    margin-left: 2px;
}

/* ---- Description text ---- */
.dd-opt-desc {
    margin: 4px 0 0;
    font-size: 0.875em;
    color: #666;
}

/* ---- Radio group ---- */
.dd-opt-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* ---- Standard inputs ---- */
.dd-opt-field input[type="text"],
.dd-opt-field input[type="number"],
.dd-opt-field textarea,
.dd-opt-field select {
    display: block;
    width: 100%;
    /* max-width: 400px; */
    box-sizing: border-box;
    padding: var(--dd-input-padding-y, 6px) var(--dd-input-padding-x, 10px);
    border: 1px solid var(--dd-input-border, #ccc);
    border-radius: var(--dd-radius, 4px);
    background: var(--dd-input-bg, #fff);
    color: var(--dd-input-text, inherit);
    font-size: 1em;
    line-height: 1.4;
}

.dd-opt-field textarea {
    min-height: 80px;
    resize: vertical;
}

.dd-opt-field input[type="number"] {
    max-width: 120px;
}

/* ---- Group — base reset (clears fieldset browser defaults) ---- */
.dd-opt-group {
    border: none;
    padding: 0;
    margin: 0;
}

/* ---- Top-level group: h3 heading, no border box ---- */
x.dd-opt-group--top .dd-opt-group-heading {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 8px;
    padding: 0;  /* override .dd-donate-form h3 { padding-top: 30px } */
}

/* ---- Nested group: outlined fieldset ---- */
.dd-opt-group--nested {
    border: 1px solid #ccd0d4;
    border-radius: var(--dd-radius, 4px);
    padding: 16px 20px;
}
.dd-opt-group--nested legend {
    font-weight: 600;
    font-size: 1.05em;
    padding: 0 6px;
}

/* ---- Repeating group instance ---- */
.dd-group-instance {
    position: relative;
    margin-bottom: 16px;
    /* leave room for the remove button sitting in the top-right corner */
    /* padding-top: 28px; */
}

.dd-group-instance + .dd-group-instance {
    border-top: 1px solid #e2e4e7;
    padding-top: 28px;
}

.dd-instance-label {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: #787c82;
}

/* Remove-instance button — absolute top-right within its own instance only */
.dd-remove-instance {
    position: absolute;
    top: 4px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: none;
    border: 1px solid var(--dd-input-border, #ccc);
    border-radius: 3px;
    cursor: pointer;
    color: var(--dd-color-danger, #c0392b);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.dd-remove-instance::before {
    content: "✕";
    font-size: 10px;
}
.dd-remove-instance:hover {
    background: #fce4e4;
    border-color: var(--dd-color-danger, #c0392b);
}
.dd-remove-instance:focus {
    outline: 2px solid var(--dd-color-danger, #c0392b);
    outline-offset: 1px;
}

/* ---- Empty group placeholder ---- */
.dd-opt-empty {
    color: #a7aaad;
    font-size: 0.875em;
}

/* ---- Amounts section (Registration Amount → Donation → Subtotal → Fee → Total) ---- */
.dd-amounts-section {
    margin-top: 24px;
    border-top: 1px solid #e2e4e7;
    padding-top: 20px;
}

/* ---- Donation prompt text ---- */
.dd-donation-prompt {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: #555;
}

/* ---- Donation amount section spacing ---- */
.dd-donation-amount-section {
    margin-bottom: 20px;
}

/* ---- Donation amount presets (buttons above the custom amount input) ---- */
.dd-amount-preset-row {
    margin-bottom: 10px;
}
.dd-amount-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}
.dd-amount-preset-btn {
    width: 100%;
    text-align: center;
}
@media (max-width: 480px) {
    .dd-amount-presets {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Donation amount input with leading $ prefix ---- */
.dd-amount-input-wrapper {
    display: block;
    position: relative;
    width: 100%;
}
.dd-amount-currency {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.dd-amount-input-wrapper input[type="number"] {
    width: 100%;
    text-align: right;
    padding-left: 22px;
    -moz-appearance: textfield;
}
.dd-amount-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.dd-amount-input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ---- Amount rows (Registration Amount, Subtotal, Fee, Total) ---- */
.dd-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
}

.dd-amount-label {
    color: #333;
}

.dd-amount-value {
    font-variant-numeric: tabular-nums;
    color: #333;
}

/* ---- Processing fee row (checkbox + amount side-by-side) ---- */
.dd-processing-fee-section {
    margin: 4px 0;
}

#dd_payment_method_row { padding-bottom:14px; }

.dd-fee-row {
    gap: 12px;
    /* border-top: 1px solid #ccc; */
}

.dd-fee-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
}

/* ---- Total row emphasis ---- */
.dd-total-row {
    border-top: 1px solid #999;
    margin-top: 4px;
    padding-top: 8px;
    font-size: 1.1em;
}

/* ---- Donor identity section (display mode, message, photos) ---- */
.dd-donor-identity-section {
    margin: 24px 0 16px;
    padding: 16px 0 0;
    border-top: 1px solid #e0e0e0;
}
.dd-donor-identity-section h3 {
    margin-top: 0;
}
.dd-field-optional {
    font-size: 0.85em;
    color: #888;
    font-weight: normal;
}
/* Textarea rows get top-padding on the label to sit flush with the first line */
.dd-textarea-row > label:first-child {
    padding-top: 6px;
}

/* Photo upload widget */
.dd-donor-photo-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.dd-donor-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dd-donor-photo-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f5f5f5;
}
.dd-donor-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dd-donor-photo-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dd-donor-photo-remove:hover {
    background: rgba(0,0,0,0.8);
}

.dd-submit-buttons { padding-top:30px; }

/* ---- Options snapshot (confirmation page) ---- */
x.dd-options-snapshot {
    margin: 20px 0;
}

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

x.dd-snapshot-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    align-items: baseline;
}

x.dd-snapshot-list dt {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #555;
}

x.dd-snapshot-list dd {
    margin: 0;
}

x.dd-snapshot-group {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: #f8f9fa;
    border-left: 3px solid var(--dd-color-primary, #2271b1);
    border-radius: 0 3px 3px 0;
}

x.dd-snapshot-group-label {
    font-weight: 700;
    color: var(--dd-color-primary, #2271b1);
    margin: 0 0 8px;
}

x.dd-snapshot-instance {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e4e7;
}

x.dd-snapshot-instance:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

x.dd-snapshot-instnum {
    font-size: 0.8em;
    font-weight: 600;
    color: #787c82;
    margin: 0 0 4px;
}

/* ---- Terms & Conditions ---- */
.dd-terms-section {
    margin: 24px 0 16px;
}

.dd-terms-box {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccd0d4;
    border-radius: var(--dd-radius, 4px);
    padding: 12px 16px;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 300;
    font-size: 0.875em;
    line-height: 1.6;
    color: #444;
    background: #fafafa;
    margin-bottom: 10px;
}

.dd-terms-box:focus {
    outline: 2px solid var(--dd-color-primary, #2271b1);
    outline-offset: 2px;
}

.dd-terms-box p  { display:block; margin: 0; line-height:110%; }
.dd-terms-box p:last-child { margin-bottom: 0; }
.dd-terms-box ul,
.dd-terms-box ol { margin: 0 0 0.75em; padding-left: 1.75em; line-height:110%; }
.dd-terms-box ul { list-style: disc; }
.dd-terms-box ol { list-style: decimal; }
.dd-terms-box li { margin-bottom: 0.2em; }
.dd-terms-box strong { font-weight:500; }

.dd-terms-acknowledgment {
    margin: 0;
    font-size: 0.875em;
    line-height: 1.5;
    color: #444;
}

/* "Terms & Conditions" inline link — styled as text, not a button */
.dd-terms-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.dd-terms-link:hover,
.dd-terms-link:focus {
    opacity: 0.7;
    outline: none;
}

/* T&Cs content rendered inside the modal */
.dd-terms-content p  { margin: 0 0 0.75em; }
.dd-terms-content p:last-child { margin-bottom: 0; }
.dd-terms-content ul,
.dd-terms-content ol { margin: 0 0 0.75em; padding-left: 1.75em; }
.dd-terms-content ul { list-style: disc; }
.dd-terms-content ol { list-style: decimal; }
.dd-terms-content li { margin-bottom: 0.2em; }

/* ---- Inline CAPTCHA error (shown when widget not completed on submit) ---- */
.dd-captcha-inline-error {
    color: var(--dd-color-danger, #c0392b);
    font-weight: 600;
    font-size: 0.9em;
    margin: 0 0 10px;
    padding: 6px 10px;
    background: #fdf2f2;
    border-left: 3px solid var(--dd-color-danger, #c0392b);
    border-radius: 0 3px 3px 0;
}

/* ---- General form error messages ---- */
.dd-error {
    color: var(--dd-color-danger, #c0392b);
    font-weight: 600;
}

/* =============================================================================
   Vehicle Picker
   ============================================================================= */

/* ---- Garage selection list ---- */
.dd-garage-list {
    margin-bottom: 12px;
}

.dd-garage-list-label {
    margin: 0 0 6px;
    font-size: 0.95em;
}

.dd-garage-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid #ddd;
    border-radius: var(--dd-radius, 4px);
    cursor: pointer;
    font-size: 0.95em;
    transition: background 0.15s;
}

.dd-garage-option:hover {
    background: #f5f5f5;
}

.dd-garage-option input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
}

.dd-garage-option-new {
    border-style: dashed;
    color: #555;
    font-style: italic;
}

/* ---- Vehicle entry rows ---- */
.dd-vf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.dd-vf-label {
    flex: 0 0 90px;
    font-weight: 600;
    font-size: 0.9em;
    color: #444;
}

/* ---- Combobox ---- */
.dd-combobox {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.dd-combobox-input {
    flex: 1;
    min-width: 0;
    /* right padding fixed at 32px to clear the toggle arrow; left/top/bottom use tokens */
    padding: var(--dd-input-padding-y, 6px) 32px var(--dd-input-padding-y, 6px) var(--dd-input-padding-x, 8px);
    border: 1px solid var(--dd-input-border, #ccc);
    border-radius: var(--dd-radius, 4px);
    background: var(--dd-input-bg, #fff);
    color: var(--dd-input-text, inherit);
    font-size: 0.95em;
    line-height: 1.4;
    box-sizing: border-box;
}

.dd-combobox-input:focus {
    outline: 2px solid var(--dd-color-primary, #2271b1);
    outline-offset: 1px;
    border-color: var(--dd-color-primary, #2271b1);
}

.dd-combobox-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    font-size: 0.8em;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-combobox-toggle:hover {
    color: #333;
}

.dd-combobox-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--dd-input-border, #ccc);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.dd-combobox-list li {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.3;
}

.dd-combobox-list li:hover,
.dd-combobox-list li.dd-cb-active {
    background: #e8f0fb;
    color: #1a3a6c;
}

/* ---- Save status indicator (eager AJAX save) ---- */
.dd-vf-save-status {
    margin-left: 12px;
    font-size: 0.85em;
    color: #2a7a2a;
    font-style: italic;
}

/* ---- Save-to-garage row ---- */
.dd-vf-save-row label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9em;
    cursor: pointer;
    color: #555;
}

.dd-vf-save-row input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

/* =============================================================================
   Compact vehicle picker (donation form)
   ============================================================================= */

.dd-vp-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Wrapper gives the select its flex sizing and anchors the custom arrow */
.dd-vp-select-wrap {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
    /* max-width: 420px; */
}

/* Triangle arrow — matches .dd_selectlist::after */
.dd-vp-select-wrap::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-vp-select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    /* right padding fixed at 30px to clear the custom arrow; left/top/bottom use tokens */
    padding: var(--dd-input-padding-y, 6px) 30px var(--dd-input-padding-y, 6px) var(--dd-input-padding-x, 10px);
    border: 1px solid var(--dd-input-border, #ccc);
    border-radius: var(--dd-radius, 4px);
    font-size: 0.95em;
    height: 36px;
    background-image: none;
    background-color: var(--dd-input-bg, #fff);
    color: var(--dd-input-text, inherit);
    box-sizing: border-box;
}

/* The "Edit" (pencil) and "+ Add vehicle" buttons are styled together, as
   one explicit rule, instead of the edit button trying to copy whatever
   look the add button happens to have. The add button's own look used to
   come from .dd-btn (dd-styles.css, front-end only) on the client and from
   wp-admin's bare default <button> chrome on the Edit Donation admin screen
   (dd-styles.css isn't loaded there) — two different, uncontrolled sources
   that don't match each other in size or shade, so copying either one only
   ever matched half the picture. Declaring both buttons' full look here
   instead — in dd-form.css, the one stylesheet loaded in both contexts —
   makes them identical to each other and consistent between contexts. The
   .dd-vp-selector ancestor in these selectors exists only to outrank
   .dd-btn's equal-specificity single-class selector on the front end, so
   this rule wins no matter which stylesheet happens to load second. */
.dd-vp-selector .dd-vp-add-btn,
.dd-vp-selector .dd-vp-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    background: #e9e9e9;
    border: 1px solid #ccc;
    border-radius: var(--dd-radius, 4px);
    color: #333;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}
.dd-vp-selector .dd-vp-add-btn:hover,
.dd-vp-selector .dd-vp-add-btn:focus,
.dd-vp-selector .dd-vp-edit-btn:hover,
.dd-vp-selector .dd-vp-edit-btn:focus {
    opacity: 0.85;
    outline: none;
}
.dd-vp-selector .dd-vp-edit-btn {
    padding: 0 10px;
    font-size: 1.1em;
}

.dd-vp-inline-error {
    color: var(--dd-color-danger, #c0392b);
    font-weight: 600;
    font-size: 0.9em;
    margin: 6px 0 0;
    padding: 6px 10px;
    background: #fdf2f2;
    border-left: 3px solid var(--dd-color-danger, #c0392b);
    border-radius: 0 3px 3px 0;
}

/* =============================================================================
   Vehicle modal
   ============================================================================= */

.dd-modal {
    position: fixed;
    inset: 0;
    z-index: 100002; /* above WP admin bar (100001), site headers, and all theme elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd-modal[hidden] {
    display: none;
}

.dd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.dd-modal-box {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 28px 32px 24px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
}

.dd-modal-title {
    margin: 0 0 20px;
    font-size: 1.2em;
    font-weight: 700;
}

.dd-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.dd-vm-error {
    color: var(--dd-color-danger, #c0392b);
    font-size: 0.9em;
    margin: 8px 0 0;
}

/* Prevent body scroll while modal is open */
body.dd-modal-open {
    overflow: hidden;
}

/* ---- Year out-of-range confirmation panel ---- */
.dd-vm-year-confirm {
    background: #fff8e1;
    border-left: 3px solid #e6a817;
    border-radius: 0 3px 3px 0;
    padding: 10px 14px;
    margin-top: 16px;
}

.dd-vm-year-confirm-msg {
    margin: 0 0 10px;
    font-size: 0.95em;
    color: #444;
}

.dd-vm-year-confirm-actions {
    display: flex;
    gap: 10px;
}

/* ---- Plain modal inputs (year, color, license plate, notes) ---- */
/* Explicit styles so appearance is consistent regardless of the host page's
   theme. These match the .dd-combobox-input sizing/border/radius. */
.dd-vm-year,
.dd-vm-color,
.dd-vm-license-plate,
.dd-vm-notes {
    flex: 1;
    min-width: 0;
    padding: var(--dd-input-padding-y, 6px) var(--dd-input-padding-x, 8px);
    border: 1px solid var(--dd-input-border, #ccc);
    border-radius: var(--dd-radius, 4px);
    background: var(--dd-input-bg, #fff);
    color: var(--dd-input-text, inherit);
    font-size: 0.95em;
    line-height: 1.4;
    box-sizing: border-box;
    font-family: inherit;
}
.dd-vm-notes {
    resize: vertical;
    align-self: flex-start; /* prevent label from centering against full textarea height */
}
.dd-vm-year:focus,
.dd-vm-color:focus,
.dd-vm-license-plate:focus,
.dd-vm-notes:focus {
    outline: 2px solid var(--dd-color-primary, #2271b1);
    outline-offset: 1px;
    border-color: var(--dd-color-primary, #2271b1);
}
/* Type select stretches to match combobox inputs in the same flex row */
.dd-vm-type {
    flex: 1;
    min-width: 0;
}
/* Align the Notes label to the top of its row, not vertically centred */
.dd-vm-notes-row {
    align-items: flex-start;
}
.dd-vm-notes-row .dd-vf-label {
    padding-top: 7px; /* optical alignment with first text line */
}

/* ── Invalid-field highlight ──────────────────────────────────────────────
   Two complementary triggers, same visual treatment:

   .dd-field-invalid  — added by JS on validation failure (vehicle year,
                        CAPTCHA, required option fields, contact/amount
                        fields as a belt-and-suspenders fallback).

   :user-invalid      — CSS-native; fires after the user has interacted with
                        a field that fails HTML5 validation (required,
                        type=email, min, etc.).  Only modern browsers support
                        it — older ones fall back to their own native styling.

   Both use --dd-color-danger so the colour follows the Appearance setting.
   color-mix() gives a subtle tinted glow for the outline; the border-color
   is always the full danger colour.
   ──────────────────────────────────────────────────────────────────────── */
.dd-field-invalid,
.dd-donate-form input:user-invalid,
.dd-donate-form select:user-invalid,
.dd-donate-form textarea:user-invalid {
    border-color: var(--dd-color-danger, #c0392b) !important;
    outline: 2px solid color-mix(in srgb, var(--dd-color-danger, #c0392b) 25%, transparent);
    outline-offset: 0;
}

/* ---- Combobox loading state ---- */
.dd-combobox.dd-cb-loading {
    position: relative;
}
.dd-combobox.dd-cb-loading .dd-combobox-toggle {
    visibility: hidden;   /* keep space; hide the ▾ arrow */
}
.dd-combobox.dd-cb-loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top-color: #555;
    border-radius: 50%;
    animation: dd-spin 0.6s linear infinite;
    pointer-events: none;
}
@keyframes dd-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* =============================================================================
   Inline auth zone (email-first flow)
   ============================================================================= */

.dd-inline-auth-inner {
    display: inline-block;
    width:100%;
}
.dd-inline-auth-inner p:first-child {
    margin-top: 0;
}
.dd-inline-auth-inner p:last-child {
    margin-bottom: 0;
}

.dd-inline-auth-msg {
    x-margin: 0 0 12px;
    color: #333;
}

.dd-inline-auth-success {
    margin: 0;
    color: #1e7e34;
    font-weight: 600;
}
.dd-auth-done-links {
    font-weight: normal;
    color: #555;
    font-size: .92em;
}
.dd-auth-done-links a {
    color: var(--dd-color-primary, #2271b1);
}

/* Unsaved-changes leave modal */
.dd-leave-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dd-leave-modal-box {
    background: #fff;
    border-radius: 6px;
    padding: 28px 32px;
    max-width: 420px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.dd-leave-modal-msg {
    margin: 0 0 20px;
    font-size: 1em;
    line-height: 1.5;
}
.dd-leave-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.dd-inline-auth-error {
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #fff3f3;
    border-left: 3px solid #c0392b;
    color: #c0392b;
    border-radius: 3px;
}

.dd-inline-auth-actions {
    margin: 12px 0 4px;
}

/* Inline server-error line (timeout / network failure) */
.dd-inline-auth-error-msg {
    color: #c0392b;
    font-size: .9em;
}
.dd-inline-auth-error-msg a {
    color: inherit;
    font-weight: 600;
}

.dd-inline-auth-alt {
    margin: 8px 0 0;
    color: #555;
}
.dd-inline-auth-alt a {
    color: var(--dd-color-primary, #2271b1);
}

.dd-inline-auth-opt-toggle {
    margin: 0 0 4px;
}

/* Inline "Checking…" spinner (plain rotation, no translateY offset) */
@keyframes dd-spin-plain {
    to { transform: rotate(360deg); }
}
.dd-ia-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: #555;
    border-radius: 50%;
    animation: dd-spin-plain 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* Pulse animation for required-mode submit without auth */
@keyframes dd-auth-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,115,232,.0); }
    50%       { box-shadow: 0 0 0 5px rgba(26,115,232,.35); }
}
.dd-inline-auth-pulse {
    animation: dd-auth-pulse .55s ease-in-out;
    border-radius: 6px;
}

/* Profile conflict table */
.dd-conflict-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88em;
    margin: 0 0 12px;
}
.dd-conflict-table th,
.dd-conflict-table td {
    text-align: left;
    padding: 4px 10px 4px 0;
    vertical-align: top;
}
.dd-conflict-table thead th {
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
}
.dd-conflict-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0;
}
.dd-conflict-table tfoot td {
    padding-top: 10px;
}
.dd-ct-field   { color: #666; width: 22%; white-space: nowrap; }
.dd-ct-saved   { font-weight: 500; }
.dd-ct-entered { color: #555; }

/* Auth bar — logged-in state */
.dd-auth-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.dd-auth-bar .dd-auth-name { flex: 1; }
.dd-auth-bar .dd-auth-links { margin-left: auto; }
.dd-auth-bar .dd-auth-links a { margin-left: 12px; }