* { margin: 0; padding: 0; box-sizing: border-box; /* Optional: simplifies width/height calculations */ }
body { font-family: Arial, sans-serif; background-color: #f4f4f4 !important; margin: 0; }
form { background: #fff; border-radius: 20px; }
fieldset { border: 1px solid #ccc; margin-bottom: 15px; padding: 10px; border-radius: 8px; }
    fieldset.category-fieldset { background-color: #F7F7F7; }
button.submit { background-color: #28a745; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
    button.submit:hover { background-color: #218838; }

.remove-btn { background-color: #dc3545; padding: 0px; margin: 0px; font-size: 12px; height: 100%; max-height: 36px; }
    .remove-btn:hover { background-color: #c82333; }

.text-align-right { text-align: right; }

/*header and banner styles */
.page-container { max-width: 1040px; margin: 0 auto; padding: 10px; min-width: 360px; }
.header-banner { background: #59820A; border-radius: 20px; width: 100%; }
.small-logo { display: none; }
.big-logo { display: block; }
.header-images { display: flex; justify-content: space-around; width: 100%; padding: 0px; align-items: center; }
.slogon { display: block; }
    .slogon img { max-height: 90px; }

.hadees-container { display: flex; justify-content: center; align-items: center; padding: 10px; }
.hadees { background: #64A317; padding: 5px; border-radius: 20px; text-align: center; border: 2px dashed #79BF23; color: white }
    .hadees .caption { font-size: 1.2rem; margin-bottom: 4px; }
    .hadees .hadees-text { margin-bottom: 4px; }

.page-content { /* margin-top: 5px; */ }

.special-button { border-radius: 32px; background: #F2F2F2; padding: 10px; text-decoration: none; font-weight: bold; color: black; }

.bordered-card { border: 1px solid #ccc; border-radius: 12px; position: absolute; top: 30px; right: 0; z-index: 1050; width: 300px; }

.converter-content { /*color:white;*/ }
.donation-panel { padding: 10px; background: #f7f7f7; margin-bottom: 10px; border-radius: 6px; }
#widget-container input, #widget-container select { margin-top: 5px; padding: 5px; border-radius: 6px; }
/* Adds a little space between the text and the caret */
.dropdown-toggle::after { margin-left: 0.5em; vertical-align: 0.255em; }

/* Optional: Rotate the caret when the converter is active */
#converterToggle.active::after { transform: rotate(180deg); transition: transform 0.2s ease-in-out; }

@media (min-width: 768px) {
    .donation-row { flex-direction: row; /* Side-by-side on desktop */ }
    fieldset.two-column-fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .section-heading { margin-top: 10px; /* Adds breathing room since the summary is now floating right */ }
}

@media (max-width: 950px) {
    .slogon { display: none; }
}

@media (max-width: 767px) {
    .small-logo { display: block; }
    .big-logo { display: none; }
    .slogon { display: none; }
}

@media (max-width: 400px) {
    .quran-for-all { display: none; }
}


.nav-tabs { border: 0px none transparent; /* margin-bottom: 8px!important; */ /* align-items:center; */ /* justify-content:center; */ margin-top: 8px; margin-bottom: 10px; }
    .nav-tabs .nav-item { display: flex !important; justify-content: center !important; }
.nav-link { border: 0px none transparent; border-radius: 32px !important; background: #e0e0e0; color: black; margin: 0px; width: 90% !important; }
    .nav-link.active { background: #64A317 !important; border-radius: 32px; color: white !important; }


.payment-box { border: 1px solid #ced4da; border-radius: 15px; padding: 10px; cursor: pointer; /* Shows the hand icon anywhere in the box */ }

    /* Hover effect to show interactivity */
    .payment-box:hover { border-color: #adb5bd; background-color: #fdfdfd; }

    /* Highlight style for the selected fieldset */
    .payment-box:has(input:checked) { background-color: #e5fde8; border: 2px solid #53B114; }

    /* Legend styling */
    .payment-box legend { float: none; font-size: 1rem; margin-bottom: 0; }

/* Ensure the radio (square) stays on top of the clickable link */
.form-check-input { z-index: 2; position: relative; border-radius: 4px !important; }

.section-heading { font-weight: bold; font-size: 1.1rem; }


/* Force native validation UI to be visible even with Bootstrap */
#donationForm input:invalid,
#donationForm select:invalid { box-shadow: none !important; /* Prevents Bootstrap's glow from "eating" the tooltip */ }

/* Chrome/Safari specific fix to ensure bubbles aren't clipped */
#donationForm { overflow: visible !important; }

.card-logo { max-width: 64px; }

.form-check-input:checked { background-color: #53B114; border-color: #53B114; }

.grant-total { color: #53B114; }

.btn-submit-payment { background: #53B114 !important; color: white !important; font-weight: bold; }

.text-sm { font-size: 0.875rem; color: #6c757d; margin: 0px; }

.btn-popover { border-radius: 32px; padding: 8px 20px; background: #d2eeba; border: 2px solid #c4dab2; }
    .btn-popover:hover { background: #b7d89b; transition: all 0.3s ease-in-out; }

.content-placeholder { background: white !important; padding: 10px; border-radius: 8px; padding-left: 20px; padding-right: 20px; }

.page-heading { font-weight: bold; }

#converterBox, #converterBox table { background: #edf9e3 !important; }

.table-responsive th { background-color: #ffffff; }

.red-text { color: #dc3545 !important; }

.invalid-feedback { font-size: 0.75rem; }

/* Mobile Tab Fixes */
@media (max-width: 767px) {
    .nav-tabs { flex-wrap: nowrap; /* Prevent wrapping to a second line */ overflow-x: auto; /* Allow horizontal swipe */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ justify-content: flex-start !important; /* Align to left for scrolling */ padding-bottom: 5px; }

        .nav-tabs .nav-item { flex: 0 0 auto; /* Don't force them to shrink */ margin-right: 8px; }

    .nav-link { width: auto !important; /* Let text define width */ white-space: nowrap; /* Keep text on one line */ padding: 8px 16px !important; font-size: 0.8rem; }

    /* Hide scrollbar but keep functionality */
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs { -ms-overflow-style: none; scrollbar-width: none; }
}

/* Adjust button layout for Donation Items on Mobile */
@media (max-width: 576px) {
    .donation-row .col-8 { width: 70%; /* Give more space to Rs input */ }
    .donation-row .col-4 { width: 30%; /* Space for the remove button */ }
    .btn-popover { font-size: 0.8rem; padding: 5px 12px; }
    .payment-content .gap-3 { gap: 0.5rem !important; }
    .payment-content img { max-width: 48px }
}

#whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.whatsapp-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
/* 
#zero-fee-message {height:100%;background:green!important; padding:10px; height:100%;}
.processing-fee-info-container {flex-direction:row;}
.processing-fee-info-container .message-container {flex:2; margin-right:1rem; height:100%; background:yellow!important;}
.processing-fee-info-container .processing-fee-info {flex:1; height:100%;} */