* {
    --text-primary: #131531;
    --text-dark: #212529;
    --text-blue: #04A6F3;
    --text-grey: #F8F9FA;
    --text-white: #ffffff;
    --text-offwhite: #F1F8F7;
    --text-green: #2BDCBA;
    --text-light-grey: #F5F5F5;
    --text-dark-grey: #EDEFF1;
    --text-large: 20px!important;
    --text-extra-small: .75rem!important;
    --text-gradient: linear-gradient(90deg, #46CDD0 0%, #71AEEB 50%, #AC70EB 100%);
    --background-gradient: linear-gradient(180deg, rgba(189, 253, 243, 0.81) 0%, rgba(186, 228, 249, 0.81) 100%);
    --bg-gradient: linear-gradient(to right, #DA63BF, #1FA7F0);
    --border-grey: #E1E1E1;
    --phone-position: translateX(50%);
    --box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    --width-100-padded: calc(100% - 2rem);
}

html,
body{
    padding: 0;
    margin: 0;
    color: var(--text-dark);
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}
.font-lato{
    font-family: "Lato", sans-serif;
}

a:hover{ cursor: pointer; }
ul{ list-style: none; }
h2{ font-size: 2.5rem; line-height: 2.6rem; }
h3{ font-size: 2rem; line-height: 2.1rem; }
h4{ font-size: 1.5rem; line-height: 1.8rem;}
p{ font-size: 1rem; line-height: 1.4rem;}

.text-large{ font-size: 1.25rem; }
.text-small{ font-size: 13px; }

.bg-gradient{ background-image: var(--bg-gradient); }
.top-50{ top: calc(50% - 1rem); }

@media screen and (min-width: 768px) {
    .text-large{ font-size: 1.25rem; }
    .text-medium{ font-size: 1.2rem!important; font-weight: 500; }
}

@media screen and (max-width:768px) {
    h2{ font-size: 2rem; }
    h3{ font-size: 1.5rem; }
    h4{ font-size: 1rem; }
    .text-xs{ font-size: .75rem!important; }
    .text-medium{ font-weight: 500; }
}

@media screen and (max-width:450px) {
    h2{  line-height: 2rem; }
    h3{ font-size: 1.25rem; }
    .hero-masthead{ height: 300px; }
}

@media screen and (max-width:390px) {
    h2{ 
        font-size: 1.5rem; 
        line-height: 1.8rem;
    }
    h3{ font-size: 1rem; }
    h4{ 
        font-size: 1rem; 
        line-height: 1.25rem;
    }
    .hero-masthead{ height: 35vh; }
}

.stroke-white{ 
    fill: white;
 }

.logo:hover{ 
    opacity: .7; 
    transition: opacity 0.30s ease-in-out;
}
a:hover{ transition: border-color 0.30s ease-in-out; }
button{
    font-weight: 500;
    transition: color 0.30s ease-in-out, 
        background-color 0.30s ease-in-out, 
        background-image 0.30s ease-in-out, 
        border-color 0.30s ease-in-out, 
        box-shadow 0.30s ease-in-out;
}
button.font-bold{ font-weight: 600; }
button:hover{ cursor: pointer; }
a.disabled,
a:disabled,
button:disabled,
a.disabled:hover,
button:disabled:hover{
    background-color: var(--border-grey);
    border-color: var(--border-grey);
    color: #ffffff;
    pointer-events: none;
}
a.disabled:hover,
button:disabled:hover{ cursor:default }
/* a.disabled{ border: 3px solid transparent; } */

.button-white{ background-color: var(--text-white);}
.button-white:hover{ background-color: #EFEFEF; }
.button-green{ background-color: var(--text-green);}
.button-green:hover{ color: var(--text-white); background-color: var(--text-blue);}
.button-navy{  color: var(--text-white); background-color: var(--text-primary);}
.button-navy:hover{ background-image: linear-gradient(to right, #46CDD0, #71AEEB, #AC70EB); }
.button-red{ background-color: #CF142B; color: #ffffff; }
.button-red:hover{ opacity: .8; }

.language-image::after,
.dropdown::after,
.contact-dropdown::after,
.topup-dropdown::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: .5rem;
    right: .4rem;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #212529; 
}
.network-dropdown .dropdown::after{ top: 1.2rem; right: 0; }
.dropdown-menu.text-white .language-image::after,
.language-image.text-white::after{ 
    right: -1rem;
    top: .6rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ffffff;
}
.topup-dropdown::after{ 
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
 }
.dropdown-menu.text-dark .language-image::after,
.language-image.text-dark::after{ 
    right: -1rem;
    top: .6rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #212529;
}
.dropdown-menu:hover .dropdown-submenu{
    display: block;
}
.dropdown-submenu,
.dropdown-item{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}
.dropdown-submenu a,
.dropdown-item a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border: none!important
}
.dropdown-item{ 
    top: 3rem;
    left: 0;
    min-width: 75px ;
    background-color: #ffffff;
    border: 1px solid #F1F8F7;
}
.dropdown-item[data-country="true"]{ 
    width: 100%; 
    top: 3.5rem;
}
.dropdown-item .search-icon{
    color: var(--text-dark);
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
}
.dropdown-submenu a:hover,
.dropdown-item a:hover{background-color: #ddd;}
.dropdown-item.active{ display: block; }
.toggle-dropdown:hover{ cursor: pointer; }


/* width */
div.overflow-y-scroll::-webkit-scrollbar {
    width: 10px;
}
   
/* Handle */
div.overflow-y-scroll::-webkit-scrollbar-thumb {
    background: #D9D9D9; 
    border-radius: 10px;
}
  
/* Handle on hover */
div.overflow-y-scroll::-webkit-scrollbar-thumb:hover {
    background: #D9D9D9; 
}

.gradient-text {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    color: transparent;
}
.gradient-background{
    background: var(--background-gradient);
}

.dropdown-menu:hover .language-image,
.header-nav li > a:hover,
.footer-nav li > a:hover{
    opacity: .7;
}
.header-nav li > a,
.footer-nav li > a{ 
    font-weight: 500;
    transition: opacity 0.30s ease-in-out, 
}

.mobile-menu-items{ 
    display: none;
    position: absolute;
    top: 4rem;
    left: 0;
    opacity: 0;
    width: 100%;
    z-index: 1;
    max-height: 0;
    padding: 1rem 0;
    background: #ffffff;
    transition: max-height 0.15s ease-in-out, 
        opacity 0.15s ease-in-out;
}
.mobile-menu-items.active{
    display: block;
}
.mobile-menu-items li{ text-align: center;}

.custom-checkbox:has(input:checked){ 
    border-color: var(--text-dark); 
    color: var(--text-dark);
}
.custom-checkbox input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.custom-checkbox .checkmark{
    position: absolute;
    top: 50%;
    left: 0;
    height: 20px;
    width: 20px;
    transform: translateY(-50%);
    border: 2px solid #C8CFD6;
}
.custom-checkbox svg{ 
    position: absolute;
    top: 50%;
    right: 2rem;
    font-size: 1.4rem;
    transform: translateY(-50%);
}

.summary-section .edit-link{ display: none; color: var(--text-dark);}
.summary-section[mode="edit"] .edit-link{ display: inline-block; font-size: 1.2rem;}

.delivery-button{
    color: #757575;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 2px solid #DFDFDF
}
.delivery-button:hover{ cursor: pointer; }
.delivery-button .checkmark{ left: 1rem; }
.custom-checkbox input:checked + .checkmark,
.delivery-button input:checked + .checkmark{
    border: 6px solid var(--text-dark);
}

.payment-option{ 
    border: 2px solid var(--text-light-grey); 
    transition: border-color .15s ease-in-out;
}
.payment-option .checkmark{ left: 1rem; }
.payment-option:has(input:checked){ 
    border-radius: 5px 5px 0 0;
    border-color: var(--text-dark);
}

.payment-form{
    /* display: none; */
    /* max-height: 0; */
    border-radius: 0 0 5px 5px;
    border: 2px solid #C8CFD6;
    transition: max-height 0.15s ease-in-out, 
}
.payment-form.active{
    display: block;
    max-height: 900px;
    transition-delay: 100ms;
}

.input-outline{
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 14px 15px 10px 20px;
    background-color: #fff;
}
.input-outline input{
    width: 100%;
    outline: none;
}
.input-outline svg{
    position: absolute;
    font-size: 1.2rem;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

#enter_manually{ font-weight: 400; }

.modal{
    overflow-y: scroll;
    height: auto;
    max-height: 85dvh;
}
.modal,
.modal-backdrop{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    opacity: 0;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: opacity 300ms ease-in-out;
}
.modal-backdrop{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    background-color: rgba(0,0,0,0.4);
}
.modal.active,
.modal-backdrop.active{ display: block; }

.close-modal:hover{ cursor: pointer; }

.valid-check{ 
    display: none; 
    color: green;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.active + .valid-check{ display: block; }

.disabled .overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    z-index: 1;
    background: #ffffffb8;
    border-radius: 5px;
}

.topup-amount{ background-color: var(--border-grey); position: relative;}
.topup-amount:hover{ border-color: var(--text-blue); }
.topup-amount div{ background-color: var(--text-white); }
.topup-amount div.topup-amount-wrapper{ background-color: rgba(0,0,0,0.01); }
.topup-amount div.topup-amount-wrapper:hover{ transition: border-color 0.30s ease-in-out; }
.topup-amount.soldout{ opacity: .3; user-select: none; pointer-events: none;}
.topup-amount.popular{
    background-image: linear-gradient(to bottom,  var(--text-primary), var(--border-grey));
}

.info-box{ transition: opacity 300ms ease-in-out; }
.close-info-box:hover{ cursor: pointer; }

.contact-dropdown::after{
    top: .65rem;
    left: 11rem;
    right: auto;
    border-top: 6px solid #04A6F3; 
}

.email-wrapper{
    overflow: hidden;
    max-height: 0;
    padding: 0;
    transition: max-height 300ms ease-in-out;
}
.email-wrapper.active{
    padding: inherit;
    max-height: 150px;
}

#yes-btn,#no-btn{ border: 3px solid var(--border-grey);}
#yes-btn:hover, #no-btn:hover{ background-color: #EFEFEF; }
#yes-btn.active,#no-btn.active{
    border-color: var(--text-green);
    background-color: var(--text-green);
}
#yes-btn.active:hover,#no-btn.active:hover{
    border-color: var(--text-blue);
    color: var(--text-white);
    background-color: var(--text-blue);
}
#yes-content,
#no-content{
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 300ms ease-in-out 300ms;
}
#yes-content.active,
#no-content.active{
    opacity: 1;
    max-height: 1000px;
}
.accordion-content{
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    transition: max-height 200ms linear,padding 300ms ease-in-out;
}
.accordion-content.active{
    overflow: visible;
    padding: 16px 24px;
    max-height: 500px;
}
.accordion-content a{
    color: var(--text-blue);
    border-bottom: 1px solid var(--text-blue);
}

@media screen and (max-width: 768px) {
    .footer-nav div > ul li{
        margin: .25rem 0;
    }
    .summary-section[mode="edit"] .edit-link{ font-size: .8rem; }
    .accordion-content.active{
        max-height: 600px;
    }
    #yes-content.active,
    #no-content.active{
        max-height: 1200px;
    }
}