/* ============================================
       Online Donation Page
       ============================================ */

    .donation-page {
        background-color: #E8E1D9;
        padding: 60px 0;
        min-height: 70vh;
    }

    .donation-page-title {
        font-size: 48px;
        line-height: 1;
        color: #18988B;
        font-family: "DarkerGrotesque-semibold";
        margin-bottom: 10px;
    }

    .donation-page-subtitle {
        font-family: "Roboto-Regular";
        font-size: 16px;
        color: #4E4B44;
        margin-bottom: 40px;
    }

    .donation-card {
        background: #E1D8CE;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    /* --- Auth Prompt (for non-logged in) --- */
    .auth-prompt {
        background: #003057;
        border-radius: 10px;
        padding: 20px 24px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }

    .auth-prompt p {
        color: rgba(255, 255, 255, 0.85);
        font-family: "Roboto-Regular";
        font-size: 14px;
        margin: 0;
    }

    .auth-prompt .auth-links {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .auth-prompt .auth-links a {
        display: inline-block;
        padding: 8px 20px;
        background-color: #18988B;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        border-radius: 20px;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
    }

    .auth-prompt .auth-links a:hover {
        background-color: #147a70;
        color: #ffffff;
    }

    .auth-prompt .auth-links a.btn-outline-light {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #ffffff;
    }

    .auth-prompt .auth-links a.btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #ffffff;
    }

    /* --- Balance Box (for logged in) --- */
    .balance-box {
        background: #003057;
        border-radius: 10px;
        padding: 20px 24px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .balance-box .balance-label {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 2px;
    }

    .balance-box .balance-amount {
        font-family: "DarkerGrotesque-bold";
        font-size: 32px;
        color: #ffffff;
        line-height: 1;
    }

    .balance-box .balance-currency {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        margin-left: 4px;
    }

    /* --- Section Divider --- */
    .section-divider {
        font-family: "DarkerGrotesque-semibold";
        font-size: 18px;
        color: #003057;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid rgba(0, 48, 87, 0.15);
    }

    /* --- Form Labels --- */
    .donation-card label {
        font-family: "Roboto-Regular";
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #4E4B44;
        margin-bottom: 6px;
        display: block;
    }

    /* --- Form Controls --- */
    .donation-card .form-control,
    .donation-card .form-select {
        border: 1px solid rgba(0, 48, 87, 0.15);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 14px;
        font-family: "Roboto-Regular";
        color: #003057;
        background-color: #E8E1D9;
        transition: all 0.3s ease-in-out;
        height: 44px;
    }

    .donation-card .form-control:focus,
    .donation-card .form-select:focus {
        border-color: #18988B;
        box-shadow: 0 0 0 3px rgba(24, 152, 139, 0.15);
        background-color: #ffffff;
        outline: none;
    }

    .donation-card .form-control::placeholder {
        color: #9e978d;
    }

    .donation-card .form-control[readonly] {
        background-color: rgba(0, 48, 87, 0.04);
        cursor: default;
    }

    /* --- Amount Input Group --- */
    .amount-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .amount-group .form-control {
        flex: 1;
    }

    .amount-group .currency-badge {
        font-family: "DarkerGrotesque-bold";
        font-size: 16px;
        color: #003057;
        background: rgba(0, 48, 87, 0.08);
        padding: 10px 16px;
        border-radius: 8px;
        white-space: nowrap;
        height: 44px;
        display: flex;
        align-items: center;
    }

    /* --- Checkbox Custom --- */
    .donation-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
    }

    .donation-check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-top: 2px;
        accent-color: #18988B;
        cursor: pointer;
    }

    .donation-check span {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #4E4B44;
        line-height: 1.5;
    }

    /* --- Textarea --- */
    .donation-card textarea {
        border: 1px solid rgba(0, 48, 87, 0.15);
        border-radius: 8px;
        padding: 12px 14px;
        font-size: 14px;
        font-family: "Roboto-Regular";
        color: #003057;
        background-color: #E8E1D9;
        resize: vertical;
        transition: all 0.3s ease-in-out;
        width: 100%;
        height: 120px;
    }

    .donation-card textarea:focus {
        border-color: #18988B;
        box-shadow: 0 0 0 3px rgba(24, 152, 139, 0.15);
        background-color: #ffffff;
        outline: none;
    }

    .donation-card textarea::placeholder {
        color: #9e978d;
    }

    /* --- Right Column Divider --- */
    .donation-right-col {
        border-left: 2px solid rgba(0, 48, 87, 0.08);
        padding-left: 30px;
    }

    /* --- Confirm Checkbox --- */
    .confirm-check {
        background: rgba(24, 152, 139, 0.06);
        border-radius: 10px;
        padding: 16px;
        border: 1px solid rgba(24, 152, 139, 0.15);
    }

    .confirm-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        accent-color: #18988B;
        cursor: pointer;
    }

    .confirm-check .confirm-text {
        font-family: "Roboto-Regular";
        font-size: 13px;
        color: #4E4B44;
        line-height: 1.6;
    }

    /* --- Submit Button --- */
    .btn-donate {
        display: inline-block;
        padding: 14px 50px;
        background-color: #003057;
        color: #ffffff;
        font-family: "DarkerGrotesque-bold";
        font-size: 16px;
        border-radius: 30px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
    }

    .btn-donate:hover {
        background-color: #18988B;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(24, 152, 139, 0.3);
        color: #ffffff;
    }

    .btn-donate:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* --- Form Group Spacing --- */
    .donation-card .form-group {
        margin-bottom: 16px;
    }

    /* --- Error/Success Messages --- */
    .donation-page .alert {
        border-radius: 8px;
        font-family: "Roboto-Regular";
        font-size: 14px;
        padding: 12px 18px;
        margin-bottom: 20px;
    }

    .donation-page .alert-success {
        background: rgba(24, 152, 139, 0.1);
        border: 1px solid rgba(24, 152, 139, 0.3);
        color: #147a70;
    }

    .donation-page .alert-danger {
        background: rgba(212, 82, 115, 0.1);
        border: 1px solid rgba(212, 82, 115, 0.3);
        color: #b33d57;
    }

    .ermsg .alert {
        border-radius: 8px;
        font-family: "Roboto-Regular";
        font-size: 14px;
        padding: 12px 18px;
        margin-bottom: 0;
    }

    /* --- Select2 Override --- */
    .select2-container--default .select2-selection--single {
        border: 1px solid rgba(0, 48, 87, 0.15) !important;
        border-radius: 8px !important;
        height: 44px !important;
        background-color: #E8E1D9 !important;
        padding: 6px 14px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #003057 !important;
        font-family: "Roboto-Regular" !important;
        font-size: 14px !important;
        padding-left: 0 !important;
        line-height: 32px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #9e978d !important;
    }

    .select2-container--focus .select2-selection--single {
        border-color: #18988B !important;
        box-shadow: 0 0 0 3px rgba(24, 152, 139, 0.15) !important;
        background-color: #ffffff !important;
    }

    .select2-dropdown {
        border: 1px solid rgba(0, 48, 87, 0.15) !important;
        border-radius: 8px !important;
        overflow: hidden;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #18988B !important;
    }

    /* --- Required Star --- */
    .required-star {
        color: #d45273;
        margin-left: 2px;
    }

    /* ============================================
       Responsive
       ============================================ */

    @media (max-width: 991px) {
        .donation-page-title {
            font-size: 36px;
            margin-bottom: 8px;
        }

        .donation-page-subtitle {
            margin-bottom: 30px;
        }

        .donation-card {
            padding: 30px;
        }

        .donation-right-col {
            border-left: none;
            padding-left: 0;
            margin-top: 30px;
            padding-top: 30px;
            border-top: 2px solid rgba(0, 48, 87, 0.08);
        }

        .balance-box .balance-amount {
            font-size: 26px;
        }
    }

    @media (max-width: 767px) {
        .donation-page {
            padding: 40px 0;
        }

        .donation-page-title {
            font-size: 28px;
            margin-bottom: 6px;
        }

        .donation-page-subtitle {
            font-size: 14px;
            margin-bottom: 24px;
        }

        .donation-card {
            padding: 20px;
        }

        .balance-box,
        .auth-prompt {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            padding: 16px;
        }

        .balance-box .balance-amount {
            font-size: 24px;
        }

        .auth-prompt .auth-links {
            width: 100%;
        }

        .auth-prompt .auth-links a {
            flex: 1;
            text-align: center;
        }

        .btn-donate {
            width: 100%;
            text-align: center;
            padding: 14px 30px;
            font-size: 15px;
        }

        .section-divider {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .donation-page-title {
            font-size: 24px;
        }

        .amount-group {
            flex-direction: column;
            align-items: stretch;
        }

        .amount-group .currency-badge {
            justify-content: center;
        }
    }


        .stripe-modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .stripe-modal-overlay.active {
        display: flex !important;
    }
    .stripe-modal-box {
        background: #E1D8CE;
        border-radius: 14px;
        max-width: 460px;
        width: 100%;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        animation: stripeModalIn 0.3s ease-out;
    }
    @keyframes stripeModalIn {
        from { opacity: 0; transform: translateY(20px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .stripe-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 28px 0;
    }
    .stripe-modal-header h3 {
        font-family: "DarkerGrotesque-bold";
        color: #003057;
        margin: 0;
        font-size: 20px;
    }
    .stripe-close-btn {
        background: none;
        border: none;
        font-size: 26px;
        color: #6A757C;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        transition: color 0.2s;
    }
    .stripe-close-btn:hover { color: #d45273; }
    .stripe-modal-body { padding: 20px 28px 24px; }
    .stripe-summary {
        background: #003057;
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 24px;
    }
    .stripe-summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .stripe-summary-row + .stripe-summary-row { margin-top: 8px; }
    .stripe-summary-row span {
        font-family: "Roboto-Regular";
        font-size: 13px;
        color: rgba(255, 255, 255, 0.65);
    }
    .stripe-summary-row strong {
        font-family: "DarkerGrotesque-bold";
        font-size: 15px;
        color: #ffffff;
    }
    .stripe-amount-highlight {
        color: #18988B !important;
        font-size: 22px !important;
    }
    .stripe-card-section { margin-bottom: 4px; }
    .stripe-card-label {
        display: block;
        font-family: "Roboto-Regular";
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #4E4B44;
        margin-bottom: 8px;
    }
    .stripe-card-element {
        border: 1.5px solid rgba(0, 48, 87, 0.15);
        border-radius: 8px;
        padding: 14px;
        background: #E8E1D9;
        transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    }
    .stripe-card-element.StripeElement--focus {
        border-color: #18988B;
        box-shadow: 0 0 0 3px rgba(24, 152, 139, 0.15);
        background-color: #ffffff;
    }
    .stripe-card-element.StripeElement--invalid {
        border-color: #d45273;
        background-color: #fff5f5;
    }
    .stripe-card-errors {
        font-family: "Roboto-Regular";
        font-size: 13px;
        color: #d45273;
        margin-top: 8px;
        min-height: 18px;
        padding: 0 2px;
    }
    .stripe-modal-footer {
        display: flex;
        gap: 12px;
        padding: 0 28px 24px;
    }
    .stripe-btn-cancel {
        flex: 1;
        padding: 13px 20px;
        border: 1.5px solid rgba(0, 48, 87, 0.2);
        border-radius: 8px;
        background: transparent;
        color: #003057;
        font-family: "DarkerGrotesque-bold";
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .stripe-btn-cancel:hover {
        border-color: #003057;
        background: rgba(0, 48, 87, 0.05);
    }
    .stripe-btn-pay {
        flex: 1.5;
        padding: 13px 24px;
        border: none;
        border-radius: 8px;
        background: #18988B;
        color: #ffffff;
        font-family: "DarkerGrotesque-bold";
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .stripe-btn-pay:hover:not(:disabled) {
        background: #147a70;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(24, 152, 139, 0.3);
    }
    .stripe-btn-pay:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    .balance-box { position: relative; }
    .balance-badge {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #18988B;
        background: rgba(24, 152, 139, 0.15);
        padding: 6px 14px;
        border-radius: 20px;
        display: none;
        align-items: center;
        gap: 6px;
    }
    .balance-badge.show { display: flex; }
    .balance-badge.use-stripe {
        color: #d45273;
        background: rgba(212, 82, 115, 0.12);
    }
    .page-loader {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9999;
    }
    .page-loader .spinner-box {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    @media (max-width: 480px) {
        .stripe-modal-box { margin: 10px; }
        .stripe-modal-header,
        .stripe-modal-body,
        .stripe-modal-footer { padding-left: 20px; padding-right: 20px; }
        .stripe-modal-footer { flex-direction: column-reverse; }
        .stripe-btn-cancel, .stripe-btn-pay { width: 100%; }
    }