#city-selector-popup {

    display: flex;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 999999;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s, visibility 0.3s;

}



#city-selector-popup .popup-content {
background: #F9F9F9;
    padding: 0;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    position: relative;
    border: 4px solid #000;
    padding-block-end: 30px;

}

#city-selector-popup .popup-content .popup-top{
background: #f7da8f;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    text-align: center;
    padding-block-start: 15px;
    padding-block-end: 20px;
    margin-block-end: 40px;
}

#city-selector-popup .popup-content .popup-top h3{
    font-size: 31px;
    font-weight: bold;
    background: url(../images/popup-imogi.png) top center no-repeat;
    padding-block-start: 45px;
    margin-block-end: 10px;
}

#city-selector-popup .popup-content .popup-top p{
    font-size: 21px;
    line-height: 24px;
    margin: 0;
}

#city-selector-popup.is-visible {

    opacity: 1;

    visibility: visible;

}



#city-selector-popup .close-popup {

    position: absolute;

    right: 10px;

    top: 10px;

    cursor: pointer;

    font-size: 33px;

    line-height: 1;

}



/* Spinning Loader Styles */

.spinner-loader {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 9999999;

    justify-content: center;

    align-items: center;

}



.spinner-loader.is-visible {

    display: flex;

}



.spinner {

    width: 50px;

    height: 50px;

    border: 4px solid #f3f3f3;

    border-top: 4px solid #007cba;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



.spinner-text {

    color: white;

    margin-top: 20px;

    text-align: center;

    font-size: 16px;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Loader overlay for popup content */

.popup-content.loading {

    position: relative;

    pointer-events: none;

}



.popup-content.loading::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.8);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;

}



.popup-content.loading::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 30px;

    height: 30px;

    border: 3px solid #f3f3f3;

    border-top: 3px solid #007cba;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    z-index: 11;

}



#city-change-confirm-popup {

    display: flex;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    z-index: 999999;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s, visibility 0.3s;

}



#city-change-confirm-popup .popup-content {

    background: white;

    padding: 20px;

    border-radius: 5px;

    max-width: 500px;

    width: 90%;

    position: relative;

}



#city-change-confirm-popup.is-visible {

    opacity: 1;

    visibility: visible;

}



#city-change-confirm-popup .close-popup {

    position: absolute;

    right: 10px;

    top: 10px;

    cursor: pointer;

    font-size: 20px;

    line-height: 1;

}



/* Additional styles for the confirmation popup buttons */

#city-change-confirm-popup .popup-buttons {

    margin-top: 20px;

    display: flex;

    justify-content: flex-end;

    gap: 10px;

}



#city-change-confirm-popup .confirm-change,

#city-change-confirm-popup .cancel-change {

    padding: 8px 15px;

    border-radius: 4px;

    cursor: pointer;

}



#city-change-confirm-popup .confirm-change {

    background: #007cba;

    color: white;

    border: none;

}



#city-change-confirm-popup .cancel-change {

    background: #f0f0f0;

    border: 1px solid #ddd;

}

.delivery-type-selector{

    display:flex;
    gap:0;
    justify-content: center;
    position: relative;
}

.delivery-type-selector:after{
    content: "";
    background-color: #000;
    height: 55%;
    width: 1px;
    display: block;
    right: 50%;
    position: absolute;
    top: 14px;
    z-index: 1;
}

.delivery-type-selector label{
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: #f7da8f;
    margin: 0;
    height: 70px;
    padding-inline: 0;
    font-size: 20px;
    position: relative;
    width: 40%;
    justify-content: center;
    z-index: 1;
}

.delivery-type-selector label input[type=radio]{
    display:none
}

.delivery-type-selector label.flat_rate{
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.delivery-type-selector label.local_pickup{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.delivery-type-selector label:after{
    content: "";
    position: absolute;
    background-color: #925075;
    width: calc(100% - 20px);
    height: 75%;
    display: none;
    border-radius: 50px;
    z-index: -1;
}

.delivery-type-selector label:has(> input[type="radio"]:checked),
.delivery-type-selector label:hover{
    color:#fff;
}

.delivery-type-selector label:has(> input[type="radio"]:checked):after,
.delivery-type-selector label:hover::after{
    display:block;
}

.city-selector,
.branch-selector{
    padding: 30px;
}

body.rtl .select2-container--default .select2-selection--single{
    border-radius: 50px;
}

.checkout-shipping-change .button{
    width: 90px;
    text-align: center;
}

@media (max-width: 767px){
    .delivery-type-selector label{
        width: 47%;
        font-size: 17px;
    }

    .city-selector, .branch-selector{
        padding: 30px 15px 10px;
    }
}