.first-section {
background: linear-gradient(to right, #f0f0f0 0%, #fff 100%);
}
.second-section {
background: linear-gradient(to right, #e5eff2 0%, #ffffff 100%);
}
.bg-gt-gold-100 {
background-color: #bad7f0;
}
.bg-pp-gold-800 {
background-color: transparent;
}
.input-container {
position: relative;
margin-bottom: 20px;
}
input {
width: 100%;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
position: relative;
}
.checkmark-icon {
width: 30px;
height: 30px;
vertical-align: middle;
margin-left: 5px;
display: none;
/* Hidden by default */
position: absolute;
right: 4px;
top: 10px;
}
.bg-pp-gold-600 {
background-color: #eef5f7;
}
.text-pp-yellow-300 {
color: #e11919;
}
.focus\:ring-pp-yellow-300:focus {
--tw-ring-color: #e11919;
}
label[for="billing_phone"] .checkmark-icon {
right: 35px;
}
label[for="bump_offer"] .checkmark-icon {
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.clearfix {
clear: both;
}
.just-validate-error-label {
background: #fbd6d6;
padding: 4px 12px;
}
#checkout-submit-button {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eec900+0,d79600+100 */
background: linear-gradient(to bottom, #eec900 0%, #d79600 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: #000;
}
.intl-tel-input .selected-flag {
display: none;
/* Hide the dropdown button */
}
.iti--separate-dial-code .iti__selected-flag {
background-color: transparent;
padding-top: 12px;
}
.intl-tel-input .iti__flag-container {
display: none;
/* Hide the country code container */
}
.iti.iti--allow-dropdown.iti--separate-dial-code {
width: 94%;
}
#email-suggestion a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.p-CardBrandIcon,
.p-CardErrorIcon svg {
display: block;
height: auto;
width: 1.95em;
}
#card_number,
#expiry_date,
#code_cvc {
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
#card_number:focus,
#expiry_date:focus,
#code_cvc:focus {
border: 2px solid #bad7f0 !important;
}
.p-CardIcons.Input,
.p-CardCvcIcons-group {
position: absolute;
right: 0;
top: 5px;
}
.p-CardBrandIcons-item {
display: inline-block;
margin: 0 2px;
}
.p-CardCvcIcons-svg {
margin-right: 7px;
}
#card_number+.checkmark-icon {
top: 30px;
right: 9rem;
}
#expiry_date+.checkmark-icon {
top: 30px;
}
#code_cvc+.checkmark-icon {
top: 30px;
right: 2rem;
}
#creditCardInfo.hidden {
opacity: 0;
height: 0;
pointer-events: none;
}
@media (max-width:768px) {
.xs-full-edit {
flex-direction: column;
}
}
svg {
width: 25px;
margin: 2px;
}
/* Parent container */
.p-Grid {
display: grid;
grid-template-columns: 1fr;
/* One column for the first div */
grid-template-rows: auto auto;
/* Two rows: one for the first div, one for the other two */
gap: 10px;
/* Adjust gap between the divs */
}
/* First div takes the full space in the first row */
.p-Grid>.first-div {
grid-column: 1 / -1;
/* Spans across both columns of the first row */
}
/* Second and Third divs will take half space each on the second row */
.p-Grid>.second-div,
.p-Grid>.third-div {
grid-column: span 1;
/* Each div takes up one column */
width: 44%;
}
/* Responsive design for small screens */
@media screen and (max-width: 768px) {
.p-Grid {
grid-template-columns: 1fr;
/* Stack all divs vertically */
}
#mobile_summary_toggle{ 
padding: 0px;
}
/* Stack each div on a new row */
.p-Grid>.first-div,
.p-Grid>.second-div,
.p-Grid>.third-div {
grid-column: 1 / -1;
/* Make all divs take up the full row */
}
}
#iframe-container {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: 50%;
z-index: 111111111111111111111111111111;
transform: translate(-50%, -50%);
width: 25%;
height: 25%;
display: none;
}
#iframe-container>div {
width: 80%;
height: 80%;
border: 2px solid #ccc;
border-radius: 8px;
background: white;
}
@media screen and (max-width: 384px){
.desktop_head{ display:none }
}

#checkout-submit-button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
#loader {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 30px;
}
#button-text {
visibility: visible;
/* Text visible initially */
}
#checkout-submit-button .hidden {
visibility: hidden;
/* Hide loader or text */
}



    .error-message {
    position: absolute;
    top: 100%; /* Position below the input */
    left: 0;
    font-size: 12px;
    color: #dc3545;
    background-color: #f8d7da;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #f5c6cb;
    margin-top: 5px; /* Space between input and error */
    }

.w-80{width: 80%;}
.input-wrapper, .select-wrapper {
    position: relative;
}
.input-wrapper input {
    width: 100%;
    padding: 14px 10px 6px 10px; /* top padding so text does not overlap label */
    border: 1px solid #e5e7eb;
    min-height: 48px;
}
/* Label default position */
.input-wrapper label {
    position: absolute;
    left: 10px;
    top: 14px;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
    pointer-events: none;
    width: fit-content;
}
.select-wrapper select{padding: 14px 10px 6px 8px;border: 1px solid #e5e7eb;min-height: 48px;    appearance: auto;font-size: 14px;}
.select-wrapper select:focus{border: 1px solid #e5e7eb;}
.select-wrapper select.no-error, .select-wrapper select.has-error{appearance: none;}
.select-wrapper label {
    position: absolute;
    left: 10px;
    top: 4px;
    font-size: 11px;
    width: 100%;
}
.select-wrapper label img, .input-wrapper label img{
    top: 16px;
    right: 10px;
}
/* Float label on focus */
.input-wrapper input:focus{border: 1px solid #e5e7eb;box-shadow: none;}
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {
    top: 4px;
    font-size: 11px;
    color: #333;
}

input.phone-input:focus + label,
input.phone-input:not(:placeholder-shown) + label {
    top: 4px;
    font-size: 11px;
    color: #333;
}

/* Autofill support */
.input-wrapper input:-webkit-autofill + label {
    top: 4px;
    font-size: 11px;
}
.addbtn{
        padding-top: 23px;
    padding-bottom: 23px;
}
input.has-error, select.has-error {
    border: 1px solid orange !important;
}
input.no-error, select.no-error{
    border: 1px solid green !important;
}
.pay-method-box .paybtn{margin-top: 10px;}
.pay-method-box .paybtn button{
    padding: 0.6rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
}
.pay-method-box .paybtn button.paypal{
    background-color: #ffc43a;
    border: 1px solid #ffc43a;
}
.pay-method-box .paybtn button.klarna{
    background-color: #ffb3c7;
    border: 1px solid #ffb3c7;
}
.pay-method-box .paybtn button.gpay, .pay-method-box .paybtn button.apple-pay{
    background-color: #3c4043;
    border: 1px solid #3c4043;
}

.pay-method-box .paybtn button.paypal img{width: auto;max-height: 28px;}
.pay-method-box .paybtn button.klarna img{width: auto;max-height: 35px;}
.pay-method-box .paybtn button.gpay img{width: auto;max-height: 30px;}
.pay-method-box .paybtn button.apple-pay img{width: auto;max-height: 26px;}
.pay-method-box-active{
    background-color: #bad7f0;
}
.desk-hide{display: none !important;}
.has-error-cls{
        border: 1px solid orange !important;
} 

.phone-wrapper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.phone-wrapper select{    
    width: 100%;
    padding: 7px 5px 7px 5px;
    border: 1px solid #e5e7eb;
    min-height: 48px;
    font-size: 12px;}
    
.phone-number-field label{
    left:92px;
}
#phone_number {
  padding-left: 92px !important;
}
.phone-number-field .iti__selected-flag{padding-top: 5px;}
.iti.iti--separate-dial-code.iti--show-flags {
    width: 100%;
}

#terms_service:focus{
	outline: none !important;
	box-shadow: none !important;
}

@media only screen and (min-width:1024px){
.hide-desk{display: none !important;}

}
@media only screen and (max-width:1024px){
.desk-hide{display: block !important;} 
}
@media only screen and (max-width:767px){
  .mb-hide{display: none;} 
  
  .satisfaction-box h2 {
        font-size: 22px !important;
    }
  .satisfaction-box .w-28{
    width: 5rem;
  }
  /* body{
    width: 100%;
    overflow-x: hidden !important;
} */
.pp, .pp-text{font-size: 8px;}
}