/**
 * Charitable Universal Modal Styles
 *
 * MATCHES existing charitable modal system for visual consistency.
 * Uses exact same styles from modal.scss to ensure identical appearance.
 *
 * @package Charitable Pro
 * @since   1.8.12.1
 */

/* ================================
   SHARED LEAN OVERLAY (matches existing system exactly)
   ================================ */
#lean_overlay {
    position: fixed;
    z-index: 99999;
    top: 0px;
    left: 0px;
    height: 100%;   /* fallback for browsers without dvh */
    height: 100dvh;
    width: 100%;
    background: #000;
    display: none;
}

/* ================================
   MODAL BASE STYLES (matches existing .charitable-modal)
   ================================ */
.charitable-modal {
    box-sizing: border-box;   /* fold padding into the max-height budget */
    width: 80%;
    max-width: 600px;
    max-height: 90vh;   /* fallback for browsers without dvh */
    max-height: 90dvh;
    padding: 0;
    background-color: #fff;
    overflow-y: auto;
    position: relative;
}

/* Donation modal specific styling (matches existing charitable-modal-donation) */
.charitable-modal.charitable-modal-donation {
    box-sizing: border-box;   /* fold the calc(1em + 10px) padding into the max-height budget */
    width: 80%;
    max-width: 800px;
    max-height: 90vh;   /* fallback for browsers without dvh */
    max-height: 90dvh;
    padding: calc(1em + 10px);
    background-color: #fff;
    overflow-y: auto;
}

/* Campaign Showcase modal only: remove outer padding from modal, add it to form wrapper */
.charitable-modal.charitable-modal-donation.charitable-modal-from-showcase {
    padding: 0;
}

.charitable-modal-from-showcase .donation-form-wrapper {
    padding: calc(1em + 10px);
}

/* Campaign name header (with or without thumbnail) */
.charitable-modal-campaign-name {
    min-height: 240px;
    padding: 15px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

/* No thumbnail: collapse height and show title at top */
.charitable-modal-campaign-name.no-thumbnail {
    min-height: 0;
    padding: 0 0 20px 0;
    align-items: flex-start;
    background-image: none;
}

.charitable-modal-campaign-name span {
    font-size: 24px;
    line-height: 32px;
}

/* White text + shadow for readability on background image */
.charitable-modal-campaign-name.has-thumbnail span {
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 1),
                 0 0 4px rgba(0, 0, 0, 0.9),
                 0 1px 3px rgba(0, 0, 0, 0.8),
                 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Darken the lower portion of the featured image so the campaign name stays legible. */
.charitable-modal-campaign-name.has-thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.40) 45%,
        rgba(0, 0, 0, 0.12) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.charitable-modal-campaign-name.has-thumbnail > span {
    position: relative;
    z-index: 1;
}

.charitable-modal .donation-form-wrapper {
    text-align: center;
}

.charitable-modal #charitable-donation-form,
.charitable-modal .charitable-visual-donation-form,
.charitable-modal [id^="charitable-visual-donation-form-"] {
    text-align: left;
    padding-top: 0;
}

.charitable-modal .charitable-fieldset {
    padding: 0 0 1em;
    border-width: 0 0 1px 0;
}

.charitable-modal .charitable-fieldset:last-of-type {
    border: none;
}

/* ================================
   MODAL CLOSE BUTTON (matches existing modal-close exactly)
   ================================ */
.charitable-modal > .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 1;
    /* This is emitted as a <button> rather than the href-less <a> it used to be,
       because an anchor with no href is not focusable - the close control could not
       be reached by keyboard at all (WCAG 2.1.1 / 4.1.2, 1.8.19.1). These resets
       keep a button visually identical to the old anchor; the selector matches
       both, so markup that kept the <a> is unaffected. */
    padding: 0;
    margin: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
}

.charitable-modal > .modal-close:hover {
    background-color: rgba(255, 255, 255, 1);
    opacity: 1;
}

/* Visible focus ring, since Charitable suppresses :focus outlines widely (WCAG 2.4.7).
   :focus-visible keeps it off mouse clicks. 1.8.19.1 */
.charitable-modal > .modal-close:focus-visible {
    outline: 2px solid #1e1515;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 1);
}

.charitable-modal > .modal-close::before {
    content: '×';
    font-size: 28px;
    line-height: 1;
    color: #333;
    font-weight: 300;
}

.charitable-modal > .modal-close:hover::before {
    color: #000;
}

/* ================================
   MODAL HEADER (matches existing charitable-modal-header)
   ================================ */
.charitable-modal .charitable-modal-header {
    background-color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

.charitable-modal .charitable-modal-header h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 21px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.charitable-modal .charitable-modal-header .modal-close {
    z-index: 10;
    cursor: pointer;
    filter: brightness(1.5);
}

.charitable-modal .charitable-modal-header .modal-close img {
    filter: brightness(1.5);
}

/* ================================
   FORM STYLING (matches existing charitable-modal-standard)
   ================================ */
.charitable-modal.charitable-modal-standard .charitable-modal-body {
    padding: 30px;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body label,
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset div label,
.charitable-modal.charitable-modal-standard .charitable-modal-body div label {
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.1px;
    margin-bottom: 10px;
    display: block;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="text"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="email"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="tel"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="number"] {
    width: 100%;
    padding: 10px;
    margin: 0;
    border: 1px solid rgba(57, 57, 67, 0.14);
    border-radius: 3px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(90, 90, 90, 1);
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    box-sizing: border-box;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body textarea {
    width: 100%;
    padding: 10px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    line-height: 14px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    box-sizing: border-box;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body textarea[name="donor_email_content"] {
    min-height: 220px;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body select {
    width: 100%;
    max-width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset {
    border: none;
    padding: 0;
    margin: 0 0 30px 0;
    width: 100%;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset:first-child select {
    margin-bottom: 20px;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset p.help {
    margin: 10px 0 0 0;
    padding: 0;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div {
    display: flex;
    margin-top: -1px;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 20px;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div label {
    margin-bottom: 0;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.no-flex {
    display: block;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb input {
    margin: 0;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb p {
    margin: 0;
}

.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset:last-child {
    margin-bottom: 0;
}

/* ================================
   DONATION FORM SPECIFIC STYLES (matches existing charitable form styling)
   ================================ */

/* Campaign selector integration */
.charitable-modal .charitable-campaign-selector-wrapper {
    margin-bottom: 20px;
}

.charitable-modal .charitable-campaign-selector-wrapper select,
.charitable-modal .charitable-campaign-selector {
    width: 100%;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(57, 57, 67, 0.14);
    border-radius: 3px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(90, 90, 90, 1);
    font-family: Inter, sans-serif;
    font-weight: 500;
    background-color: #fff;
    box-sizing: border-box;
}

.charitable-modal .charitable-campaign-selector-wrapper fieldset:first-child select {
    margin-bottom: 20px;
}

.charitable-modal .charitable-campaign-selector-wrapper label {
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.1px;
    margin-bottom: 10px;
    display: block;
}

/* ================================
   CAMPAIGN SELECTOR TOOLTIP (copied from campaign-selector CSS)
   ================================ */
.charitable-modal .charitable-campaign-selector-tooltip {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.charitable-modal .charitable-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: #f0f0f0;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-left: 8px;
}

.charitable-modal .charitable-campaign-selector-tooltip:hover .charitable-tooltip-icon {
    background: #0073aa;
    color: #fff;
}

.charitable-modal .charitable-tooltip-text {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 10px 14px;
    min-width: 200px;
    max-width: 300px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background: #1e1e1e;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100001; /* Higher than modal z-index */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.charitable-modal .charitable-tooltip-text::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1e1e1e;
}

.charitable-modal .charitable-campaign-selector-tooltip:hover .charitable-tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* Donation amount fields */
.charitable-modal .charitable-form-field-donation-amount {
    margin-bottom: 20px;
}

.charitable-modal .charitable-donation-amount-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.charitable-modal .donation-amount {
    padding: 10px;
    border: 1px solid rgba(57, 57, 67, 0.14);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.charitable-modal .donation-amount:hover {
    border-color: #0073aa;
    background-color: #f0f6fc;
}

.charitable-modal .donation-amount.selected {
    /* Follow the site highlight colour instead of hardcoded admin blue, and take the paired
       label colour with it. These are the same properties charitable.css uses for the inline
       form, so the selected amount now looks and reads the same in both; without this the
       modal bypassed the 1.8.19.1 contrast pairing entirely (WCAG 1.4.3). 1.8.19.1 */
    border-color: var(--charitable-form-amount-selected-bg, #0073aa);
    background-color: var(--charitable-form-amount-selected-bg, #0073aa);
    color: var(--charitable-form-amount-selected-text, white);
}

/* Payment gateway styles */
.charitable-modal .charitable-payment-methods {
    margin-bottom: 20px;
}

.charitable-modal .charitable-payment-methods ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.charitable-modal .charitable-payment-methods li {
    margin-bottom: 10px;
}

.charitable-modal .charitable-payment-methods input[type="radio"] {
    margin-right: 10px;
}

/* Stripe specific styling */
.charitable-modal #charitable_stripe_card_field {
    padding: 10px;
    border: 1px solid rgba(57, 57, 67, 0.14);
    border-radius: 3px;
    margin-bottom: 15px;
    min-height: 40px;
}

/* Submit button styling */
.charitable-modal .charitable-submit-field input[type="submit"],
.charitable-modal .charitable-submit-field button[type="submit"] {
    /* Follow the site highlight colour, with the label paired to it, rather than hardcoding
       WordPress-admin blue. This selector is (0,3,1) and so out-specified the highlight colour's
       own `.donate-button` rule (0,1,0), which made the same button orange on the page and blue
       in the modal and ignored the setting. #0073aa stays as the fallback. 1.8.19.1 */
    background-color: var(--charitable-modal-submit-bg, #0073aa);
    color: var(--charitable-modal-submit-text, white);
    border: none;
    padding: 12px 24px;
    border-radius: 3px;
    font-size: 16px;
    /* 700, not 600: this rule is (0,3,1) and so wins over the `.donate-button` weight set in
       custom-styles.css.php, which would otherwise leave the modal's button lighter than the
       page's. Bolded for the same reason as there — the label is ink now, not white. 1.8.19.1 */
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.charitable-modal .charitable-submit-field input[type="submit"]:hover,
.charitable-modal .charitable-submit-field button[type="submit"]:hover {
    /* Darken whatever the resolved background is. The literal comes first as the fallback for
       browsers without color-mix(), which simply keeps the pre-1.8.19.1 hover. */
    background-color: #005a87;
    background-color: color-mix(in srgb, var(--charitable-modal-submit-bg, #0073aa) 88%, #000);
}

/* Notice styling */
.charitable-modal .charitable-notice {
    padding: 12px;
    border-radius: 3px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.charitable-modal .charitable-notice.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.charitable-modal .charitable-notice.error,
.charitable-modal .charitable-notice.errors {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Loading state styling */
.charitable-modal-loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.charitable-modal-loading img {
    display: block;
    margin: 0 auto 20px;
    width: 32px;
    height: 32px;
}

.charitable-modal-loading p {
    margin: 0;
    font-size: 16px;
}

/* Error state styling */
.charitable-modal-error {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    margin: 20px 0;
}

.charitable-modal-error p {
    margin: 0;
    font-size: 14px;
}

/* ================================
   BODY LOCK WHEN MODAL OPEN (matches existing lean-modal behavior)
   ================================ */
body.charitable-modal-open {
    overflow: hidden;
}

/* ================================
   RESPONSIVE DESIGN (matches existing modal responsive behavior)
   ================================ */
@media (max-width: 768px) {
    .charitable-modal {
        width: 95%;
        max-width: none;
    }

    /* Group both selectors so the mobile height override actually reaches the
       donation modal. A media query adds no specificity, so a lone
       .charitable-modal rule (0,1,0) loses to
       .charitable-modal.charitable-modal-donation (0,2,0): the donation modal
       would otherwise keep 90dvh and push the donate button below the viewport. */
    .charitable-modal,
    .charitable-modal.charitable-modal-donation {
        /* charitable-universal-modal.js sets an inline top:100px on the modal. On
           short mobile viewports that pushes the box (and the donate button, the
           last element) below the fold even at calc(100dvh - 5vh). Override the
           inline value here (a stylesheet !important beats a non-important inline
           style) so the modal is top-anchored and the whole form stays reachable. */
        top: 2.5vh !important;
        margin: 2.5vh auto;
        max-height: 95vh;   /* fallback for browsers without dvh */
        max-height: calc(100dvh - 5vh);   /* room for the 2.5vh top + bottom margins */
    }

    .charitable-modal > .modal-close {
        top: 10px;
        right: 15px;
        width: 35px;
        height: 35px;
    }

    .charitable-modal > .modal-close::before {
        font-size: 24px;
    }

    .charitable-modal.charitable-modal-standard .charitable-modal-body {
        padding: 20px;
    }

    .charitable-modal .charitable-donation-amount-wrapper {
        flex-direction: column;
    }
}

/* Short viewports (landscape phones, very short windows). These can be WIDER
   than 768px, so the max-width block above does not catch them. Apply the same
   top-anchor and height cap so the donate button stays reachable there too. */
@media (max-height: 500px) {
    .charitable-modal,
    .charitable-modal.charitable-modal-donation {
        top: 2.5vh !important;   /* override the JS inline top:100px */
        margin: 2.5vh auto;
        max-height: 95vh;   /* fallback for browsers without dvh */
        max-height: calc(100dvh - 5vh);
    }
}

/* ================================
   ACCESSIBILITY SUPPORT
   ================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    #lean_overlay {
        background: rgba(0, 0, 0, 0.9);
    }

    .charitable-modal {
        border: 2px solid #000;
    }

    .charitable-modal > .modal-close {
        background-color: rgba(255, 255, 255, 1);
        border: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .charitable-modal > .modal-close {
        transition: none;
    }

    .charitable-modal .donation-amount {
        transition: none;
    }
}

/* Focus management */
.charitable-modal:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Print styles - hide modal */
@media print {
    .charitable-modal,
    #lean_overlay {
        display: none !important;
    }
}

/* Theme compatibility: fixed <select> height clips the selected option text.
   Several themes (e.g. Blocksy, Astra) force a fixed height on form controls
   (select { height: var(--theme-form-field-height, 40px) }). Combined with the
   donation form's vertical padding, the content box is shorter than the line
   height, which clips the selected option text in <select> menus (e.g. Country).
   Let selects grow to fit their content while keeping parity with inputs. This
   is theme-agnostic: themes that already size selects correctly just gain a
   40px min-height, matching the text inputs. */
.charitable-universal-modal .charitable-donation-form select {
    height: auto;
    min-height: 40px;
}