/* * ===================================================================
         * Custom CSS Styles
         * ===================================================================
        */
        .quantity-input::-webkit-outer-spin-button,
        .quantity-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .quantity-input {
            -moz-appearance: textfield;
            text-align: center;
            font-weight: 600;
        }
        .custom-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }
        .payment-tab.active {
            border-color: #14B8A6;
            background-color: #F0FDFA;
        }

        /* Styles for the new frequency section */
        .frequency-tab {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .frequency-tab.active {
            background-color: #0d9488; /* A darker teal for active state */
            color: white;
            border-color: #0d9488;
        }
        .frequency-tab.active .icon-container {
            filter: brightness(0) invert(1);
        }


        /* Progress Bar Styles */
        .progress-step {
            display: flex;
            align-items: center;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }
        .progress-step .step-number {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #E5E7EB; /* brand-border */
            color: #4B5563; /* brand-text-medium */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border: 2px solid #E5E7EB;
            transition: all 0.3s ease;
        }
        .progress-step .step-label {
            margin-top: 8px;
            font-weight: 600;
            color: #4B5563; /* brand-text-medium */
            transition: all 0.3s ease;
        }
        .progress-step.active .step-number {
            background-color: #FFFFFF;
            border-color: #1F2937; /* brand-dark */
        }
        .progress-step.active .step-label {
            color: #1F2937; /* brand-dark */
        }
        .progress-step.completed .step-number {
            background-color: #14B8A6; /* brand-teal */
            border-color: #14B8A6; /* brand-teal */
            color: #FFFFFF;
        }
        .progress-bar-line {
            position: absolute;
            top: 18px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #E5E7EB; /* brand-border */
            z-index: 0;
        }
        .progress-bar-line-active {
            position: absolute;
            top: 18px;
            left: 0;
            height: 2px;
            background-color: #1F2937; /* brand-dark */
            z-index: 0;
            width: 0;
            transition: width 0.3s ease;
        }



/* Checkout Layout One*/
/* Checkout Form */
.bg-color-green {
    background-color: #01ad61;
}
.checkout-form-wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 999;
    background: #fff;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

.checkout-form-wrapper.active {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
}


.progress-step-wrapper .progress-step {
    flex-direction: row;
}

.progress-step-wrapper .progress-step.active .icon {
    background-color: #1362e1;
    color: #ffffff;
}
/* Select Field */
.custom-select-wrapper {
    position: relative;
    width: 250px;
    font-family: sans-serif;
}

.custom-select-display {
    cursor: pointer;
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 4px;
    z-index: 100;
}

.frequency-tab {
    padding: 10px 12px;
    cursor: pointer;
}

.frequency-tab:hover {
    background: #f3f3f3;
}

.frequency-tab.active {
    background: #1362e1;
    color: #fff;
}


#quick-donate-form .selected-product {
    width: 200px;
}

/* Checkout Layout 2 */
/*.checkout-cart-item .cart-qty-btn-one {*/
/*    display: block !important;*/
/*}*/
/*.checkout-cart-item .cart-qty-btn-two {*/
/*    display: none !important;*/
/*}*/
/*.cart-qty-btn-two {*/
/*    display: none !important;*/
/*}*/

/* Checkout Layout 3 */
.amount-btn.selected {
    background-color: #f0fdf4;
    color: #009a44;
}
.donation-form-amount-btn.selected {
    border-color: #009a44 !important;
}
#quick-donate-form #singleBtn.active,
#quick-donate-form #monthlyBtn.active
{
    background-color: #009a44 !important;
    color: #fff !important;
}
#donor-info-form .iti {
    width: 100%;
}