/**
 * This file has the CSS code for the public-facing aspects of the plugin.
 */

 /*    .wpcf7 hr {*/
/*    margin: 20px 0;*/
/*    border: 0;*/
/*    border-top: 1px dashed #999;*/
/*}*/

/*.wpcf7 h3 {*/
/*    margin-bottom: 15px;*/
/*}*/

/*.wpcf7 input[type="number"] {*/
/*    width: 100%;*/
/*}*/

/*.wpcf7 .wpcf7-radio .wpcf7-list-item {*/
/*    display: block;*/
/*    margin: 0 0 12px 0;*/
/*}*/

/*.wpcf7 p {*/
/*    margin-bottom: 20px;*/
/*}*/

/* =========================================================
   MAHARASHTRA FOUNDATION DONATION FORM
   ========================================================= */

.mfDonationForm{
    margin:0 auto;
    color:#232323;
}

.mfCard{
    background:#fff;
    border:1px solid #f1e6d4;
    border-radius:10px;
    padding:35px;
    margin-bottom:25px;
    color: #232323 !important;
}

.mfSectionTitle{
    font-size:20px;
    font-weight:600;
    margin-bottom:12px;
    color:#232323;
}

.mfInstruction{
    background:#fff3d9;
    border-radius:8px;
    padding:14px 18px;
    font-size:14px;
    line-height:1.6;
    color:#232323;
    margin-bottom:25px;
}

/* =========================================================
   GRID
   ========================================================= */

.mfGrid2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom: 20px;
}

.mfGrid3{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:20px;
    margin-top:20px;
}

/* =========================================================
   FIELDS
   ========================================================= */

.mfField{
    display:flex;
    flex-direction:column;
}

.mfField label{
    font-weight:600;
    margin-bottom:8px;
}

.mfField label span{
    color:#f74f22;
}

.mfInput,
.mfSelect,
.mfTextarea,
.mfAmountInput,
.wpcf7-form-control{
    width:100%;
    border:1px solid #f1e6d4;
    background:#fff;
    color:#232323;
    font-size:14px;
    box-shadow:none;
}
.select__field {
    margin-bottom: 0px;
}

.mfInput,
.mfSelect{
    height:50px!important;
    border-radius:999px!important;
    padding:0 16px!important;
    margin-bottom: 0px!important;
}

.mfTextarea{
    min-height:120px!important;
    border-radius:10px!important;
    padding:15px;
    resize:vertical!important;
    margin-bottom: 0px!important;
}

.mfInput:focus,
.mfSelect:focus,
.mfTextarea:focus,
.mfAmountInput:focus{
    outline:none!important;
    border-color:#f74f22!important;
}

/* Chrome, Safari, Edge, Opera */
.mfAmountInput::-webkit-outer-spin-button,
.mfAmountInput::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.mfAmountInput
{
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Placeholder */

.mfInput::placeholder,
.mfTextarea::placeholder,
.mfAmountInput::placeholder{
    color:#8a7d6d!important;
}

/* =========================================================
   MEMBERSHIP
   ========================================================= */

.mfMembershipList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mfMembershipCard{
    border:1px solid #f1e6d4;
    border-radius:8px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:.25s;
    background:#fff;
}

.mfMembershipCard.active, .mfMembershipCard:hover,.mfDonationCard:hover{
        background: #fff8e8;
    border-color: #ffe3a6;
}

.mfMembershipLeft{
    display:flex;
    align-items:flex-start;
    gap:14px;
    flex:1;
}

.mfMembershipText{
    font-size:14px;
    font-weight: 600;
    line-height:1.5;
}

.mfMembershipPrice{
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}

/* =========================================================
   CUSTOM RADIO
   ========================================================= */

.mfRadio{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #8c7d6c;
    position:relative;
    flex-shrink:0;
    margin-top:2px;
}

.mfRadio.active{
    border-color:#f74f22;
}

.mfRadio.active:after{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f74f22;
    position:absolute;
    top:3px;
    left:3px;
}

/* =========================================================
   DONATION CARDS
   ========================================================= */

.mfDonationList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mfDonationCard{
    border:1px solid #f1e6d4;
    border-radius:8px;
    padding:16px;
    display:grid;
    grid-template-columns:1fr 180px;
    gap:20px;
    align-items:center;
    background:#fff;
    transition:.25s;
}



.mfDonationLeft{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.mfDonationContent{
    flex:1;
}

.mfDonationTitle{
    font-weight:600;
    color:#232323;
}

.mfDonationSubtext{
    font-size:12px;
    color:#7c6d5d;
    margin-top:4px;
}

.mfAmountInput{
    height:50px!important;
    border-radius:999px!important;
    text-align:center;
    font-weight:500;
    margin-bottom: 0 !important;
}

/* =========================================================
   CUSTOM CHECKBOX
   ========================================================= */

.mfCheckbox{
    width:18px;
    height:18px;
    border-radius:4px;
    border:2px solid #8c7d6c;
    position:relative;
    flex-shrink:0;
    margin-top:2px;
}

.mfCheckbox.active{
    background:#f74f22;
    border-color:#f74f22;
}
.mfCheckbox.active:after{
        content: "✓";
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    position: absolute;
    left: 3px;
    top: -4px;
}

/* =========================================================
   NGO SECTION
   ========================================================= */

.mfNgoSection{
    background:#f7f1e8;
    border-radius:10px;
    padding:25px;
    margin-top:25px;
}

.mfFcraNotice{
    background:#fff1cc;
    padding:16px;
    border-radius:8px;
    line-height:1.7;
    font-size:14px;
}

.mfWarningNotice{
    background:#fff1cc;
    padding:16px;
    border-radius:8px;
    margin-top:20px;
    line-height:1.7;
    font-size:14px;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.mfSummaryWrapper{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:25px;
}

.mfSummaryItems{
    background:#fff3d9;
    padding:20px;
    border-radius:10px;
}

.mfSummaryRow{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    font-size:14px;
        font-weight: 600;
}

.mfSummaryTotalRow{
    border-top:1px solid #e4d5c3;
    margin-top:10px;
    padding-top:15px;
}

.mfTotalCard{
    background:#fff;
    border-radius:10px;
    border:1px solid #f1e6d4;
    padding:25px;
    text-align:center;
}

.mfTotalLabel{
    font-weight: 600;
}

.mfGrandTotal{
    font-size:42px;
    font-weight:700;
    margin:10px 0;
}

.mfTotalSubText{
    font-size:12px;
    /*color:#7c6d5d;*/
    background:#f7f1e8;
    display:inline-block;
    padding:6px 10px;
        font-weight: 600;
    border-radius:999px;
}

/* =========================================================
   PAYMENT
   ========================================================= */

.mfPaymentList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mfPaymentCard{
    border:1px solid #f1e6d4;
    border-radius:8px;
    padding:16px;
    cursor:pointer;
}

.mfPaymentCard.active{
    background:#fff3d9;
    border-color:#ffac00;
}

.mfPaymentLeft{
    display:flex;
    gap:14px;
}

.mfPaymentTitle{
    font-size:15px;
    font-weight:600;
    margin-bottom:4px;
}

.mfPaymentDescription{
    font-size:13px;
    color:#7c6d5d;
    line-height:1.6;
}

.mfPaymentNotice{
    background:#f7f1e8;
    border-radius:8px;
    padding:16px;
    margin-top:20px;
    font-size:14px;
    line-height:1.7;
}

/* =========================================================
   SUBMIT
   ========================================================= */
   
   .mfSubmitCard {
    margin-top: 20px;
}

.mfSubmitWrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.mfSubmitText{
    font-size:14px;
    line-height:1.7;
   font-weight: 600;
}

.mfSubmitButton{
    background:#f74f22 !important;
    border:none !important;
    color:#fff !important;
    border-radius:999px !important;
    min-width:180px;
    height:52px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.mfSubmitButton:hover{
    background:#e44419 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:991px){

    .mfGrid2,
    .mfGrid3,
    .mfSummaryWrapper{
        grid-template-columns:1fr;
    }

    .mfDonationCard{
        grid-template-columns:1fr;
    }

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

    .mfSubmitButton{
        width:100%;
    }
}

@media(max-width:767px){

    .mfCard{
        padding:20px;
    }

    .mfMembershipCard,
    .mfPaymentCard{
        align-items:flex-start;
    }

    .mfMembershipPrice{
        margin-left:15px;
    }

    .mfGrandTotal{
        font-size:32px;
    }
}
.mfMembershipCard,
.mfDonationCard,
.mfPaymentCard{
    cursor:pointer;
}

.mfMembershipCard.active,
.mfPaymentCard.active,.mfDonationCard.active{
       background: #fff8e8;
    border-color: #ffe3a6;
}

#mfNgoSection{
    display:none;
}

/* =========================================================
   VALIDATION / ERROR STATES
   ========================================================= */

.mfErrorText{
    display:none;
    color:#d92d20;
    font-size:12px;
    line-height:1.5;
    margin-top:6px;
}

.mfErrorText.show{
    display:block;
}

.mfField.mfHasError .mfInput,
.mfField.mfHasError .mfSelect,
.mfField.mfHasError .mfTextarea,
.mfDonationCard.mfHasError .mfAmountInput{
    border-color:#d92d20!important;
}

.mfAmountInput:disabled,
.mfInput:disabled{
    opacity:.55;
    cursor:not-allowed;
    background:#f7f1e8;
}

.mfConfirmationMessage{
    background:#e6f4ea;
    border:1px solid #b7dfc0;
    color:#1e6b34;
    border-radius:8px;
    padding:14px 18px;
    font-size:14px;
    line-height:1.6;
    margin-bottom:20px;
}

/*
   Contact Form 7's own native inline validation tips/response banner are
   suppressed here on purpose: this form implements a single, fully custom
   inline-validation layer (.mfErrorText) so donors never see two different
   error messages (CF7's + ours) stacked on the same field, and stale CF7
   tips can never linger on screen alongside a later success message.
   CF7 still runs its own required/format checks and blocks mail-sending
   as normal; only the visual tip/banner is hidden, not the validation.
*/
.wpcf7-not-valid-tip,
.wpcf7-response-output{
    display:none!important;
}