*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    outline: 0;
}


body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 14px;
    color: #333232;
}

:root {
    --main-color: #4d84ff;
    --second-color: #00ad69;
}

::placeholder{
    color: #aaa !important;
}

a {
    text-decoration: none;
    cursor: pointer;
}

.main-logo{
    max-width: 200px;
}

.gift-type-main{
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    padding: 0px;
}
.gift-type-main .gift-type-lable input{
    box-sizing: border-box;
    padding: 0;
    position: absolute;
    left: -9000px;
    opacity: 0;
}
.gift-type-main .gift-type-lable.is-active {
    background-color: #DBE6FF;
    border-color: #DBE6FF;
    color: #4d84ff;
}
.gift-type-main .gift-type-lable.is-active svg{
    fill: #fff;
}
.gift-type-lable{
    width: 100%;
    border: 1px solid #d3d4da;
    background-color: white;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 7px;
}
.gift-type-lable.gift-type-lable-1, .gift-type-lable.frequency-type-lable-1, .gift-type-lable.user-account-type-lable-1{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.gift-type-lable.gift-type-lable-2, .gift-type-lable.frequency-type-lable-2, .gift-type-lable.user-account-type-lable-2{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

/* payment method radio start */

.payment-method{
    list-style: none outside;
    padding: 0;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: #fff;
}

.payment-method li{
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    clear: both;
    flex-wrap: nowrap;
    list-style-type: none !important;
    margin: 0 !important;
    text-indent: 0;
    width: 100%;
}

.payment-method li .pm-icon{
    font-size: 18px;
}

.payment-method li label.main_radio{
    background: #FFFFFF;
    padding: 15px 15px;
    transition: border 0.2s ease-in-out;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.payment-method li label .large{
    flex-grow: 1;
    margin: 0;
    align-items: center;
    gap: 10px;
}


.payment-method li label input.input-radio{
    background-image: none;
    vertical-align: middle;
    width: 18px;
    height: 18px;
}

.info-msg{
    padding: 8px 15px;
    background-color: #fff3cd;
    color: #856404;
    font-weight: 500;
    font-size: 14px;
    border-left: 5px solid #856404;
    border-radius: 5px;
}

.saved_card{
    display: flex;
    gap: 15px;
    padding: 5px 15px;
    border: 1px solid #d3d4da;
    align-items: center;
    border-radius: 5px;
    background-color: #f8f9fa;
    cursor: pointer;
    margin-bottom: 15px;
}

.saved_card .card_type{
    max-width: 40px;
}

.saved_card .card_type img{
    max-width: 35px;
}

.saved_card p{
    line-height: 1;
}

.edit_ach_btn{
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 1;
}

.bank_card{
    padding: 15px;
}

.add_new_card_btn{
    background-color: #4d84ff;
    border-color:#4d84ff;
    color: #fff;
    padding: 7px 15px;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    width: 100%;
}
.add_new_card_btn:hover{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}


.card-type-list{
    display: flex;
    gap: 5px;
}

.card-type-list img{
    width: 25px;
}

/* payment method radio end */


.payment-btn{
    display: block;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    padding: 8px 15px;
    border-radius: 10px;
    background-color: #4d84ff;
    transition: all 300ms ease;
    height: 48px;
    /* box-shadow: 0px 10px 10px 10px rgba(0,0,0,0.3); */
}


.payment-btn:hover{
    /* color: #fff;
    background-color: #4d84ff; */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.card{
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3);
}

.card-title{
    font-size: 20px;
    margin-bottom: 0px;
    padding: 5px 0px;
}

/***************** new ******************/

.main-wrapper{
    display: flex;
    align-items: center;
    height: 100vh;
}

.payment-wrap{
    width: 600px;
    margin: auto;
    background: #fff;
    border: 1px solid #e3e3e3;
    padding: 25px;
    box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.2);
    border-radius: 20px;
}

.amount-box{
    font-size: 38px;
    text-align: center;
    border: none;
    width: 100%;
}

label{
    font-weight: 500;
    color: #aaa;
}

.form-control{
    border-radius: 10px;
}

.payment_methods{
    margin-bottom: 15px;

}
.payment_methods input{
    display: none;
}
.payment_methods label{
    border: 1px solid #d3d4da;
    padding: 7px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.payment_methods input[type="radio"]:checked+label {
    border-color: #333232;
    color: #333232;
}

.account-type-box{
    border-radius: 0;
    border: 1px solid #4d84ff;
}
.btn-check+.btn:hover{
    border: 1px solid #4d84ff;
}
.leftside-type-box{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.rightside-type-box{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: #4d84ff;
    color: #fff;
    border-color: #4d84ff;
}

@media (max-width: 1280px) {
    .payment-wrap{
        width: 40%;
    }
}
@media (max-width: 1025px) {
    .payment-wrap{
        width: 50%;
    }
}
@media (max-width: 767px) {
    .main-wrapper{
        padding: 15px;
    }
    .payment-wrap{
        width: 100%;
    }
}

.nextBtn {
    border: 0;
    background-color: #4d84ff;
    padding: 10px 15px;
    border-radius: 10px;
    outline: none;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    transition: all 300ms ease;
    min-width: 50px;
    display: block;
    text-align: center;
}
.nextBtn:disabled{
    opacity: 0.7;
}

.nextBtn:hover,
.prevBtn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.badge.rounded-circle{
    background-color: #4d84ff;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    line-height: 40px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.badge.rounded-circle-sm{
    background-color: #4d84ff;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 100%;
}

.user_drop .dropdown-menu{
    padding: 0px;
    width: 190px;
}

.user_drop .title{
    font-size: 16px;
    font-weight: bold;
}

.user_drop .dropdown-item{
    font-size: 14px;
}
.user_drop .dropdown-item:hover{
    color: #4d84ff;
}


.user_drop .card-header{
    background-color: #4d84ff;
}

.user_drop .card{
    border: none;
}
.user_drop .dropdown-toggle{
    background-color: #fff;
    padding: 0px !important;
    border:none !important;
}

.user_drop .dropdown-toggle.show{
    border:none !important;
}


.select2-container{
    display: block !important;
}

.select2-container--default .select2-selection--single{
    border: 1px solid #d3d4da;
    height: auto !important;
    border-bottom: 0px !important;
}
.select2-selection__rendered{
    line-height: 48px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 48px;
    right : 12px ;
}
.select2-dropdown{
    border: 1px solid #d3d4da;
}

.top-border
{
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius : 10px !important;
}
.bottom-border
{
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom: 0px !important;
    border-top-right-radius : 10px !important;
}
.border-none
{
    border-radius: 0px !important;
    border-bottom : 0;
}
.top-left-border
{
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom : 0;
    border-right : 0 ;
}
.top-left-border:focus{
    border-bottom: 0px !important;
    border-right: 0px !important;
}
.top-right-border
{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom : 0;
}
.top-right-border:focus{
    border-bottom : 0px !important;
}
.bottom-left-border
{
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-right: 0;
}
.bottom-right-border
{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

/* Custom border-radius for country select */
.select2-container--default.country-select2 .select2-selection--single {
    border-top-left-radius : 10px !important;
    border-top-right-radius : 10px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* Custom border-radius for state select */
.select2-container--default.state-select2 .select2-selection--single {
    border-radius: 0px;
}
.select2-container--default.state-select2 {
    width: 100% !important;
}
.select2-container--default.country-select2 {
    width: 100% !important;
}

.ach-btn{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-icon-wrapper input {
    width: 100%;
    padding-right: 150px; /* Enough space for all icons */
    /* height: 40px; Adjust height as needed */
    box-sizing: border-box;
}

.card-icons {
    position: absolute;
    top: 25px;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}
.card-icons img {
    height: 27px;
    width: auto;
}

.cvv-input-wrapper {
  position: relative;
}

.cvv-input-wrapper input {
  width: 100%;
  padding-right: 40px; /* Adjust based on icon width */
  box-sizing: border-box;
}

.cvv-icon {
  position: absolute;
  top: 25px;
  right: 10px;
  transform: translateY(-50%);
  height: 25px;
  pointer-events: none; 
}
.form-control:focus{
    border : 1px solid #dee2e6; ;
    box-shadow : none !important;
}
.bottom-left-border:focus{
    border-right: 0 !important;
}
.border-none{
    border-bottom : 0 !important;
}
.payment-type-label{
    width: 100%;
    /* border: 1px solid #d3d4da; */
    background-color: white;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    justify-content: left;
    padding-left: 20px;
    padding-right: 20px;
    border-radius : 10px;
    display: inline-flex;
    color: black ;
    font-weight: 400;
}
.payment-method-wrap{
    border: 1px solid #d3d4da;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    /* padding-left: 20px;
    padding-right: 20px; */
    border-radius : 10px;
}
.card_wrap, .ach_wrap{
    padding-left: 20px;
    padding-right: 20px;
    padding-top : 15px;
    padding-bottom: 15px;     
}
.payment-type-lable-2{
    border-top: 1px solid #d3d4da;
    border-radius: 0;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
}
.form-check-input{
    margin-top: 0px !important;
    margin-right: 18px !important;
    width : 1.4em !important;
    height: 1.4em !important;
    border-color: #a3a3a3;
}