html:has(.widget-btn) {
    background: transparent;
}

body {
    background-color: hsl(0 0% 50%);
    display: flex;
    padding: 0rem;
}

/*#region SKINs*/
.text-bg-3 {
    color: rgb(var(--color-background-3));
}

/*.skin-quantity-selector {
	--color-primary: 105, 166, 117, 1;
	color: rgb(var(--color-background-3, var(--color-primary)));
	color: rgb(var(--btn-quantity-color, var(--color-primary)));
}*/

/*.skin-buttonColor {
	--color-primary: 105, 166, 117, 1;
	background-color: rgb(var(--color-background-3, var(--color-primary)));
	border-color: rgb(var(--color-background-3, var(--color-primary)));
}*/

/*#endregion SKINs*/

#app {
    --app-width: min(100vw, 1100px);
    margin-inline: auto;
    width: var(--app-width);
    background-color: hsl(0 0% 100%);
}

    /* WIDGET */
    body:has(#widget-btn),
    #app:has(#widget-btn) {
        background-color: transparent;
    }

    #app:has(.widget),
    #app:has(.wherever_login) {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

body:has(.widget) {
    background-color: var(--tokens-color-background-accent-gray-md);
}

    #app:has(#widget-btn) {
        display: flex;
    }

    #app:has(#widget-btn) > * {
        margin-block-start: auto;
    }


#SKIN-ROOT:has(.widget) {
    height: 100%;
}

@media only screen and (min-width: 768px) {
    :root {
        /*--booking-widget-logo: url();*/
        /*--booking-widget-background: url();*/
    }

    body:has(.widget) {
        padding-block: 3rem;
        padding-block-end: 3.75rem;
        padding-inline: 1rem;
        background-image: var(--booking-widget-background);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

        body:has(.widget) #app {
            --app-width: 525px;
            max-width: var(--app-width);
            background-color: transparent;
        }

    #SKIN-ROOT:has(.widget) {
        /*height: calc(max(100%, 600px) - 8rem);*/
        /*height: max(calc(100% - 6.75rem), min-content);*/
        height: calc(100% - 6.75rem);
    }

    /*.widget {*/
    /*height: max(fit-content, 600px);*/
    /*height: fit-content;*/
    /*}*/
}


/* WIDGET */

.wherever_login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .wherever_login > footer {
        margin-top: auto;
    }

#more-address-details:invalid:focus {
    border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-color: rgb(var(--color-danger) / var(--tw-ring-opacity));
    --tw-ring-opacity: 0.2;
    --tw-border-opacity: 0.4;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.placein-loader-1__container {
    background-color: rgba(var(--color-background-1));
    display: flex;
    height: 100vh;
    width: min(100vw, 1100px);
    top: 0;
    left: auto;
    right: auto;
    position: fixed;
    justify-content: center;
    align-items: center;
}

/*.pay-by-link-home__container {
	margin: 133px 16px 0px 16px
}*/

.pay-by-link-home__greeting {
    --tw-text-opacity: 1;
    color: rgb(var(--color-dark)/var(--tw-text-opacity));
    font-family: var(--font-primary),Figtree;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.pay-by-link-home__pay-message {
    line-height: 1.36rem;
    text-align: center;
    text-wrap: balance;
}

.pay-by-link-home__description-container {
    padding: 1.25rem 1rem;
    background: #F8F8F8;
}

    .pay-by-link-home__description-container > p {
        text-align: center;
    }

.pay-by-link-home__description-message {
    text-align: center;
    color: #303030;
    font-size: .875rem;
    line-height: 1.25rem
}

.pay-by-link-home__imager-container-container {
    border-radius: 0;
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 10rem;
}

.pay-by-link-restaurant-image {
    position: absolute;
    height: 100%;
    width: 100%;
    border: 1px solid #000;
    border-radius: 9999px;
    overflow: hidden;
}

    .pay-by-link-restaurant-image > img {
        height: 100%;
        width: 100%;
    }

.pay-by-link-success-image {
    position: absolute;
    width: 30%;
    height: 30%;
    bottom: 0;
    right: 0;
}

.pay-by-link-image-container {
    background: white;
    border-radius: 9999px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pay-by-link-image-container > img {
        height: 90%;
        width: 90%;
    }


.wherever_login__image {
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 35vh;
}

/* #region LOADER */
.main-page-loader__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    /*background: linear-gradient(125deg, color-mix(in srgb, #54A870 5%, #fff) 35%, color-mix(in srgb, #54A870 25%, #fff));*/
    /*background:
		rgb(255 255 255 / .5),*/
    /*radial-gradient(rgb(255 255 255 / .75), rgb(255 255 255 / .5)),*/
    /*linear-gradient(120deg, #F95F55 0 25%, #97A5DD 25% 50%, #F9E482 50% 75%, #7FC695 75% 100%);*/
    background-color: white;
    background: conic-gradient(rgb(255 255 255), rgb(245 245 245), rgb(255 255 255));
}
/* #97A5DD #F95F55 #F9E482 #7FC695 */
/* #54A870 */
.main-page-loader {
    height: 100%;
    width: 100%;
    display: flex;
    margin: auto;
}

.main-page-loader__svg {
    width: calc(80px + min(8vh, 8vw));
    margin: auto;
    aspect-ratio: 1/1;
    overflow: visible;
    animation: main-page-loader-animation 3400ms infinite ease-in-out;
}

@keyframes main-page-loader-animation {
    0% {
        transform: rotate(360deg);
    }

    20% {
        transform: rotate(320deg);
    }

    40% {
        transform: rotate(400deg);
    }

    60% {
        transform: rotate(300deg);
    }

    80% {
        transform: rotate(420deg);
    }

    90% {
        transform: rotate(-60deg);
    }

    93% {
        transform: rotate(40deg);
    }

    96% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
/* #endregion LOADER */