/* BAC Donations — form styles (ported from the approved BAC design). */

.donation-form select option[value=""] { display: none; }

/* ========== LOADER (pure CSS) ========== */
.bac-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}
.bac-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid #f3cdd3;
    border-top-color: #E7364D;
    border-radius: 50%;
    animation: bac-spin 0.8s linear infinite;
}
@keyframes bac-spin { to { transform: rotate(360deg); } }

/* ========== TWO-COL LAYOUT ========== */
body.donation-step-postpayment .donation-faq-col { display: none !important; }
body.donation-step-postpayment .donation-form-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* ========== AMOUNT BUTTONS ========== */
.button-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    width: 100% !important;
    margin: 0 auto 8px;
    padding-bottom: 0;
}
.button-section.full-width { grid-column: auto; width: 100%; }
span.error-text.donation-error { text-align: right; display: block; margin-top: 6px; padding-right: 5px; }

.button-section.full-width:has(#otherAmount:focus) { background-color: #e7364d; }
.button-section.full-width:has(#otherAmount:focus) .rupee-icon,
.button-section.full-width:has(#otherAmount:focus) #otherAmount,
.button-section.full-width:has(#otherAmount:focus) #otherAmount::placeholder { color: #fff; }
#otherAmount { color: #0F0F0F; -webkit-text-fill-color: #0F0F0F; }
#otherAmount:focus { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ========== ERRORS / BASE ========== */
.donation-form .row.d-flex .col-md-6 input.fill_inited.error,
.donation-form .row.d-flex .col-12 input.fill_inited.error,
.donation-form .row.d-flex .col-12 textarea.fill_inited.error,
#adv-field input.fill_inited.error,
#adv-field textarea.fill_inited.error,
.donation-form .row.d-flex .col-md-6 select.fill_inited.error { border-color: #ff5b4a !important; }
.text-center { text-align: center !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.d-none { display: none !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.fw-bold { font-weight: 700 !important; }
.donation-form .error-text label.error { color: red !important; font-size: 13px !important; line-height: 25px !important; font-weight: 400 !important; }

/* ========== FORM CONTAINER ========== */
.donation-form { width: 100%; margin: 0 auto; }

/* ========== AMOUNT BUTTONS UI ========== */
.button-section { border-radius: 50px; overflow: hidden; border: 2px solid #e7364d; }
.button-wrapper .button-section .button { width: 100%; height: 40px; position: relative; }
.input-btn input:focus { border: none; border-radius: 0; color: #ffffff; background-color: #e7364d; }
.input-btn input:focus::placeholder { color: #ffffff; }
.button-wrapper .button-section .button input[type="radio"] { opacity: 0.011; z-index: 100; }
.button-wrapper .button-section .button label,
.button-wrapper .button-section .button input {
    width: 100%; height: 40px; display: block; position: absolute;
    font-family: DM Sans; font-weight: 600; font-size: 14px; line-height: 100%;
    text-align: center; padding: 12px 0;
}
.button-wrapper .button-section .button label { padding-left: 0; color: #0F0F0F; }
.rupee-icon {
    width: 30px; height: 40px; display: flex; justify-content: end; align-items: center;
    font-family: DM Sans; font-weight: 600; font-size: 14px; line-height: 100%; text-align: center;
}
.button-section .input-btn input {
    width: 100%; height: 40px; border: none; outline: none; background-color: transparent;
    padding: 0px 10px 0px 0px; font-family: DM Sans; font-weight: 600; font-size: 12px !important;
    line-height: 100%; padding-left: 5px;
}
.button-wrapper .button-section .button input[type="text"]:focus::placeholder { color: #ffffff; }
.button-wrapper .button-section .button:has(input[type="text"]:focus) { background-color: #e7364d; color: #ffffff; }
.br-pink { border: 1px solid #e7364d; border-radius: 8px; overflow: hidden; }
.button-section input[type="checkbox"]:checked { accent-color: #e7364d; color: #ffffff; }
.button-wrapper .button-section .button input[type="radio"]:checked + label,
.button-wrapper .button-section .button input[type="text"]:focus,
.button-wrapper .button-section .button input[type="text"]:focus-visible {
    background: #e7364d; color: #ffffff; border-radius: 0px; border-bottom: none;
}
.button-section input[type="radio"] + label:before { display: none; }

/* ========== FIELDS ========== */
.donation-form .row.d-flex { display: flex !important; flex-flow: row wrap !important; gap: 14px; margin-top: 30px; width: 100%; }
.donation-form .row.d-flex .col-md-6 {
    width: calc(50% - 15px) !important; max-width: calc(50% - 15px) !important;
    flex: 0 0 calc(50% - 15px) !important; min-width: 0 !important; box-sizing: border-box !important;
}
.donation-form .row.d-flex .col-12 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; box-sizing: border-box !important; }
.donation-form .row.d-flex .col-md-6 label.norm-label,
.donation-form .row.d-flex .col-12 label,
#adv-field label.norm-label {
    display: block; font-family: DM Sans; font-weight: 600; font-size: 16px; line-height: 100%;
    color: #000000E5; margin-bottom: 6px;
}
.donation-form .form-item label[for="message_donor"] { margin-top: 12px; }
.donation-form .row.d-flex .col-md-6 input.fill_inited,
.donation-form .row.d-flex .col-12 input.fill_inited,
.donation-form .row.d-flex .col-12 textarea.fill_inited,
#adv-field input.fill_inited,
#adv-field textarea.fill_inited {
    width: 100%; border: 1px solid #D0D0D0; border-radius: 50px; background: #fff; height: 40px;
    padding: 0 0 0 15px; font-family: DM Sans; font-weight: 500; font-size: 16px; line-height: 100%;
    color: #000; align-content: center;
}
.donation-form .row.d-flex .col-md-6 label.norm-label span,
.donation-form .row.d-flex .col-12 label.norm-label span { color: #E7364D; }
.donation-form textarea.fill_inited { min-height: 40px; }
.donation-form .row.d-flex .col-12 textarea#message_donor { height: 100px; border-radius: 20px; align-content: baseline; padding: 15px; }
.donation-form .row.d-flex .col-12 textarea#address { border-radius: 50px; padding: 0 0 0 15px; height: 40px; align-content: center; }
.donation-form input[type="checkbox"] + label::before { border-color: #939393E5 !important; border-radius: 50px; background: #fff; top: 1px; }
.donation-form input[type="checkbox"] + label { font-family: DM Sans; font-weight: 700; font-size: 15px !important; line-height: 22px !important; color: #565D6D; }
.donation-form input[type="checkbox"] + label.promoting_image { margin-bottom: 0; }
.donation-form label.label-title { margin-bottom: 18px; }
.donation-form p.note { margin-bottom: 0; font-family: DM Sans; font-weight: 400; font-size: 13px; line-height: 16px; color: #565D6D; }
#adv-field .form-group:last-child { margin-top: 20px; }
.donation-form .form-group button[type="submit"],
.donor-wall-form button[type="submit"] {
    display: inline-block; margin: 25px auto 0; font-family: DM Sans; font-weight: 700 !important;
    font-size: 15px !important; line-height: 1; text-align: center; padding: 18px 48px !important;
    border-radius: 14px; background: #E7364D; color: #fff; border: none; outline: none; box-shadow: none;
    -webkit-appearance: none; cursor: pointer; letter-spacing: 0.2px;
}
.donation-form .form-group button[type="submit"]:disabled { opacity: 0.6; cursor: wait; }
.donor-wall-form button.skip-btn { background: #fff; color: #565D6D; border: 1px solid #D0D0D0; margin-left: 8px; }

/* ========== FILE UPLOAD ========== */
.donation-form .custom-file-box { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.custom-file-box input[type="file"] { border: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; width: auto !important; cursor: pointer; }
.custom-file-box input[type="file"]::-webkit-file-upload-button,
.custom-file-box input[type="file"]::file-selector-button {
    background: #E7364D !important; color: #fff !important; font-weight: 600; font-size: 14px;
    padding: 10px 28px !important; border: none !important; border-radius: 50px !important;
    transition: all 0.3s ease; margin-right: 12px; cursor: pointer;
}
.custom-file-box input[type="file"]::-webkit-file-upload-button:hover,
.custom-file-box input[type="file"]::file-selector-button:hover { background: rgb(233 67 88 / 75%) !important; }
.donation-form .remove-file-btn { background: transparent; border: 1px solid #ccc; padding: 4px 10px; font-size: 12px; cursor: pointer; border-radius: 4px; }
.donation-form .remove-file-btn:hover { background: #f5f5f5; }
.donation-form .file-name-text { font-size: 12px; color: #6d7373; pointer-events: none; }
.donation-form .row.d-flex .col-12 input#donor_image { border: 0; background: transparent; color: transparent; padding: 0; border-radius: 0; width: fit-content; }

/* ========== POST-PAYMENT ========== */
#donorWallContainer .donation-form,
#thankyouContainer .donation-form { background: #fff; padding: 40px 30px; margin-top: 20px; border-radius: 20px; box-shadow: 0 0 8px 1px rgba(150, 105, 200, 0.35); }
.thankyou-banner p { font-size: 22px; line-height: 28px; font-weight: 500; margin-bottom: 8px; }
.thankyou-banner p.text-small { font-size: 14px; line-height: 18px; font-weight: 400; color: #565D6D; margin-top: 16px; }
.donor-wall-form h4 { font-family: DM Sans; font-weight: 700; font-size: 22px; margin-bottom: 6px; color: #0F0F0F; }
.donor-wall-form .subtitle { font-family: DM Sans; font-size: 14px; color: #565D6D; margin-bottom: 20px; }

/* ========== CUSTOM CAUSE DROPDOWN ========== */
.donation-form .cause-select-wrap select#cause,
.cause-select-wrap select#cause { display: none !important; }
.cause-select-wrap .cause-arrow-cover { display: none !important; }
.cause-select-wrap { position: relative; width: 100%; }
.donation-form .cause-select-wrap .cause-dd { position: relative; width: 100%; }
.donation-form .cause-select-wrap .cause-dd-toggle {
    width: 100% !important; height: 40px !important; min-height: 40px !important; display: flex !important;
    align-items: center !important; justify-content: space-between !important; gap: 10px;
    border: 1px solid #D0D0D0 !important; border-radius: 50px !important; background: #fff !important;
    background-image: none !important; padding: 0 16px !important; margin: 0 !important; cursor: pointer;
    font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; font-size: 16px !important;
    line-height: 1 !important; color: #000 !important; text-align: left !important; text-transform: none !important;
    letter-spacing: normal !important; box-shadow: none !important; -webkit-appearance: none !important;
    appearance: none !important; transition: border-color .15s ease;
}
.donation-form .cause-select-wrap .cause-dd-toggle:hover { background: #fff !important; color: #000 !important; }
.donation-form .cause-select-wrap .cause-dd-toggle:focus { outline: none; border-color: #E7364D !important; }
.donation-form .cause-select-wrap .cause-dd.open .cause-dd-toggle { border-color: #E7364D !important; }
.donation-form .cause-select-wrap .cause-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000 !important; }
.donation-form .cause-select-wrap .cause-dd-label.placeholder { color: #6d7373 !important; }
.donation-form .cause-select-wrap .cause-dd-caret {
    width: 0 !important; height: 0 !important; flex-shrink: 0;
    border-left: 6px solid transparent !important; border-right: 6px solid transparent !important;
    border-top: 7px solid #565D6D !important; border-bottom: 0 !important; background: transparent !important;
    transition: transform .2s ease;
}
.cause-dd.open .cause-dd-caret { transform: rotate(180deg); }
.donation-form .cause-select-wrap .cause-dd-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; margin: 0 !important;
    padding: 6px !important; list-style: none !important; background: #fff !important; border: 1px solid #D0D0D0 !important;
    border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 260px; overflow-y: auto; display: none;
}
.donation-form .cause-select-wrap .cause-dd.open .cause-dd-list { display: block; }
.donation-form .cause-select-wrap .cause-dd-option {
    list-style: none !important; margin: 0 !important; padding: 10px 14px !important; border-radius: 10px; cursor: pointer;
    font-family: 'DM Sans', sans-serif !important; font-weight: 500; font-size: 15px !important; line-height: 1.3 !important;
    color: #0F0F0F !important; background: #fff; transition: background .12s ease, color .12s ease;
}
.donation-form .cause-select-wrap .cause-dd-option::before { display: none !important; content: none !important; }
.donation-form .cause-select-wrap .cause-dd-option:hover,
.donation-form .cause-select-wrap .cause-dd-option.active { background: #E7364D !important; color: #fff !important; }
.donation-form .cause-select-wrap .cause-dd-option.selected { font-weight: 700; }
.donation-form .cause-select-wrap.dd-error .cause-dd-toggle { border-color: #ff5b4a !important; }

/* ========== reCAPTCHA ========== */
.recaptcha-wrap-visible { margin-top: 20px; margin-bottom: 10px; }
.recaptcha-wrap-visible .g-recaptcha { display: inline-block; }
.recaptcha-error { display: block; color: red; font-size: 14px; margin-top: 8px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
    .donation-faq-col, .donation-form-col { width: 100% !important; }
}
@media (max-width: 767px) {
    .button-wrapper { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .button-section.full-width { grid-column: 1 / -1; }
    .donation-form .row.d-flex .col-md-6 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .donation-form .row.d-flex .col-12 { width: 100% !important; }
    .donation-form input[type="checkbox"] + label { font-size: 14px; }
    #donorWallContainer .donation-form, #thankyouContainer .donation-form { padding: 25px 18px; }
    .thankyou-banner p { font-size: 20px; line-height: 24px; }
}
@media (max-width: 480px) {
    .custom-file-box input[type="file"]::-webkit-file-upload-button,
    .custom-file-box input[type="file"]::file-selector-button { padding: 8px 20px !important; font-size: 13px; }
}

/* ========== DEDICATION MESSAGE COUNTER ========== */
.bac-char-counter { text-align: right; font-size: 12px; color: #9CA3AF; margin-top: 6px; font-family: DM Sans; }