:root{
    --details-info-height: 812px; /* set in js at init to ensure mobile ui transition*/
}

#hero{
    height: 80vh;
    margin-bottom: 0;
}

#hero #hero-slideshow .slide{
    height: 100vh;
    object-position: bottom;
    filter: brightness(70%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    background-size: 100vw;
}

#hero #hero-text{
    left: var(--gap-xxl);
    bottom: var(--gap-xxl);
    top: unset;
    transform: translate(0, 0);
    gap: 0;
}

#hero #hero-text *{
    text-align: left;
}

#hero #hero-text .share-package{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-m);
    padding: var(--gap-m);
    margin-top: var(--gap-s);
    width: 100%;
    background-color: rgba(var(--black-rgb), 0.04);
    backdrop-filter: blur(0.25rem);
}

#hero #hero-text .share-package .share-package-share{
    font-family: "LexendDeca" !important;
}

@media only screen and (min-width: 860px) {
    #hero #hero-text{
        max-width: calc(100vw - 40rem);
    }
}

@media only screen and (max-width: 2275px) {
    #hero #hero-slideshow .slide{
        background-size: cover;
    }
}

@media only screen and (max-width: 860px) {
    #hero{
        overflow: visible;
    }

    /* Nav 20% smaller so button and intro text move up */
    #hero #hero-slideshow #hero-slideshow-nav{
        right: unset;
        left: 50%;
        bottom: 4rem;
        transform: translate(-50%, 100%);
        width: 20rem;
    }

    #hero #hero-text{
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: calc(3 * calc(17.5 * var(--gap-factor))) !important;
        top: unset !important;
    }

    #hero #hero-text *{
        text-align: center;
    }

    /* Reserve space for slideshow nav + Read more button; intro text starts just below */
    #intro{
        padding-top: 8rem;
    }

    /* Booking section button inside hero-slideshow-nav, with space below slideshow */
    #hero #hero-slideshow #hero-slideshow-nav #intro-scroll-down-wrapper{
        display: flex;
        justify-content: center;
        margin-top: var(--gap-m);
        margin-bottom: var(--gap-m);
        position: relative;
        z-index: 2;
    }
}

@media only screen and (max-width: 680px) {
    #hero #hero-slideshow #hero-slideshow-nav{
        width: 18rem;
    }
}

@media only screen and (max-width: 500px){
    #hero #hero-slideshow #hero-slideshow-nav{
        width: 16rem;
    }

    #details-fill-info #details-fill-info-h1{
        font-size: 2.25rem;
    }
}

/* details start */

/* Hide scroll-down button on desktop; show only in mobile block below */
@media only screen and (min-width: 861px) {
    #intro-scroll-down-wrapper{
        display: none !important;
    }
}

.intro-scroll-down-btn{
    background-color: rgba(var(--black-rgb), 0.04);
    backdrop-filter: blur(0.25rem);
}

.intro-scroll-down-btn:hover{
    background-color: var(--orange);
    color: var(--black);
}

.intro-scroll-down-btn:focus,
.intro-scroll-down-btn:active{
    background-color: rgba(var(--black-rgb), 0.04);
    color: var(--orange);
}

.intro-scroll-down-btn .arrow{
    transform: rotate(90deg);
}

#intro #intro-text{
    width: 70rem;
    margin: auto;
    position: relative;
    scroll-margin-top: 8rem;
}

@media only screen and (max-width: 1250px){
    #intro #intro-text{
        width: 100%;
    }
}

#details-section{
    overflow: visible; /* only visible for checkinout-cal => gets hidden after [step="1"] */
    width: calc(40rem + 32.5rem + var(--gap-xxl));
    padding-left: 0;
    padding-right: 0;
    margin: auto;
    position: relative;
    transition: height 1s;
}

#details{
    display: grid;
    grid-template-columns: min-content min-content min-content;
    width: min-content;
    gap: var(--gap-xxl);
    justify-content: space-around;
    transition: transform 1s;
    /* background-color: blue; */
}

#details[step="2"],
#details[step="3"]{
    transform: translateX(calc(0rem - 40rem - var(--gap-xxl)));
}

h1{
    font-size: 2.5rem;
    letter-spacing: normal;
    margin-bottom: var(--gap-xl);
    text-align: left;
}

#details-info{
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-xxl);
    width: 40rem;
}

#details-about-desc{
    line-height: 2;
    display: block;
}

#details-rooms-house-wrapper{
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-xl);
}

#details-rooms .details-rooms-house{
    display: flex;
    flex-direction: row;
    gap: var(--gap-l);
    row-gap: var(--gap-m);
    flex-wrap: wrap;
    align-items: flex-end;
}

#details-rooms .details-rooms-house .details-rooms-house-name{
    white-space: nowrap;
    line-height: 1;
    letter-spacing: normal;
    font-size: 1.5rem;
    flex-basis: 100%;
    text-align: left;
    margin-bottom: var(--gap-m);
}

#details-rooms .details-rooms-house span{
    white-space: nowrap;
}

#details-features #details-features-ul{
    display: grid;
    grid-template-columns: repeat(2, calc(50% - calc(var(--gap-xl) / 2)));
    column-gap: var(--gap-xl);
    row-gap: var(--gap-xl);
    list-style-type: none;
    padding-inline-start: 0;
}

#details-features #details-features-ul li{
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-m);
    align-items: center;
}

#details-features #details-features-ul .material-symbols-rounded{
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
}

#details-booking{
    height: fit-content;
    width: 32.5rem;
    background-color: rgba(var(--orange-rgb), .3);
    backdrop-filter: blur(1rem);
    transform: translateZ(0);
    border-radius: var(--gap-m);
    padding: calc(var(--gap-xl) + var(--gap-m)) var(--gap-xxl) calc(var(--gap-xl) + var(--gap-m)) var(--gap-xxl);
    border: .1rem solid transparent;
    box-sizing: border-box;
    overflow: visible;  /* only visible for checkinout-cal => gets hidden after [step="1"] */
    transition: 1s;
    scroll-margin-top: 8rem;
}

#details-booking #details-booking-hitbox{
    position: relative;
    z-index: -1;
    transition: height 1s;
}

#details[step="2"] #details-booking,
#details[step="3"] #details-booking{
    /* background-color: transparent;
    backdrop-filter: blur(1rem) brightness(60%);
    border-color: rgba(var(--white-rgb), .5); */
    background-color: rgba(var(--white-rgb), .8);
    backdrop-filter: blur(1rem);
    border-color: var(--black);
}

/* details-booking-inpinfo styling start */

#details-booking #details-booking-inpinfo{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    position: absolute;
    width: calc(100% - 2 * var(--gap-xxl));
    left: var(--gap-xxl);
    transition: 1s;
    z-index: 2;
}

#details[step="2"] #details-booking #details-booking-inpinfo,
#details[step="3"] #details-booking #details-booking-inpinfo{
    left: 100%;
}

#details-booking #details-booking-inpinfo h1, #details-booking #details-booking-inpinfo h2{
    letter-spacing: normal;
    text-align: left;
    margin: 0;
}

#details-booking #details-booking-inpinfo section{
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-title-price-wrapper{
    display: flex;
    justify-content: space-between;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-title-price-wrapper span{
    display: flex;
    align-items: center;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-l) + var(--gap-m));
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-left,
#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-right{
    display: flex;
    gap: var(--gap-m);
    align-items: center;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-right{
    font-size: .9rem;
    color: rgba(var(--white-rgb), .7)
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-cb{
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: .0625rem solid var(--white);
    border-radius: var(--gap-s);
    cursor: pointer;
    position: relative;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-cb:checked{
    background-color: var(--white);
    color: var(--orange);
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-cb:checked:after{
    content: "\e5ca";
    font-family: "MaterialSymbolsRounded";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-title{
    font-weight: 300;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-div{
    height: 1.5rem;
    width: .0625rem;
    border-radius: 1rem;
    background-color: rgba(var(--white-rgb), .6);
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now{
    margin-top: 0;
    margin-bottom: var(--gap-m);
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now-btn{
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now-btn:hover,
#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now-btn.loading{
    color: var(--white);
    border-color: var(--white);
    background-color: rgba(var(--white-rgb), 0);
}

#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now-btn:hover .arrow::after,
#details-booking #details-booking-inpinfo #details-booking-inpinfo-book-room-now-btn.loading .arrow::after{
    color: var(--white);
}

/* details-booking-inpinfo styling end */

.details-chatbot-offer-banner{
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: rgba(201, 125, 61, 0.12);
    border: 1px solid rgba(201, 125, 61, 0.35);
    color: var(--dark-brown, #3d2914);
    font-size: 0.92rem;
    line-height: 1.45;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.details-chatbot-offer-banner strong{
    color: var(--orange, #c97d3d);
}

.details-chatbot-offer-banner.hidden{
    display: none;
}

/* details-booking-invoice styling start */

#details-booking #details-booking-invoice{
    position: absolute;
    width: calc(100% - 2 * var(--gap-xxl));
    right: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-xl);
    transition: 1s;
    color: var(--black);
    overflow: auto;
    padding-right: var(--gap-m);
    z-index: 1;
}

#details-booking #details-booking-invoice::-webkit-scrollbar {
    width: .4rem;
    height: .4rem;
}
  
#details-booking #details-booking-invoice::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1rem;
}

#details-booking #details-booking-invoice::-webkit-scrollbar-thumb {
    background: rgba(var(--black-rgb), .5);
    border-radius: 1rem;
    cursor: grab;
}

#details-booking #details-booking-invoice::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--black-rgb), 0.7);
}

#details[step="1"] #details-booking #details-booking-invoice::-webkit-scrollbar-thumb,
#details[step="1"] #details-booking #details-booking-invoice::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--black-rgb), 0);
    cursor: context-menu;
}

#details[step="1"] #details-booking #details-booking-invoice{
    color: transparent;
    pointer-events: none;
}

#details[step="1"] #details-booking #details-booking-invoice .tooltip-target{
    border-bottom-color: transparent;
}

#details[step="2"] #details-booking #details-booking-invoice,
#details[step="3"] #details-booking #details-booking-invoice{
    right: var(--gap-xxl);
}

#details-booking #details-booking-invoice b{
    font-weight: 400;
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout{
    display: flex;
    flex-direction: column;
    row-gap: calc(1.5 * var(--gap-l));
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout h3{
    opacity: 80%;
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout h2{
    font-size: 1.3rem;
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout *{
    text-align: left;
    letter-spacing: normal;
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout .checkinout{
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-m);
}

#details-booking #details-booking-invoice #details-booking-invoice-checkinout .checkinout .checkinout-time{
    display: flex;
    flex-wrap: nowrap;
    /* column-gap: var(--gap-l); */
    justify-content: space-between;
    align-items: center;
}

#details-booking #details-booking-invoice #details-booking-invoice-invoice > div{
    padding: calc(1.5 * var(--gap-m)) 0;
    display: flex;
    justify-content: space-between;
}

#details-booking #details-booking-invoice #details-booking-invoice-invoice > div:not(:last-of-type){
    border-bottom: .1rem solid rgba(var(--black-rgb), .5);
    transition: border-color 1s;
}



#details[step="1"] #details-booking #details-booking-invoice #details-booking-invoice-invoice > div:not(:last-of-type){
    border-color: transparent;
}

#details-booking #details-booking-invoice #details-booking-invoice-invoice > div > span:last-of-type{
    opacity: 80%;
}

#details-booking-invoice-invoice-pkg-incl-rooms-label-wrapper,
#details-booking-invoice-invoice-services-label-wrapper{
    border-bottom-style: dashed !important;
}

#details-booking-invoice-invoice-pkg-incl-rooms-wrapper{
    display: flex;
    gap: var(--gap-m) var(--gap-l);
    justify-content:start !important;
    flex-wrap: wrap ;
    width: 100%;
}

#details-booking-invoice-invoice-pkg-incl-rooms-wrapper span{
    white-space: nowrap;
}

#details-booking-invoice-invoice-pkg-incl-rooms-wrapper .br{
    width: 100%;
    height: 0;
}

#details-booking-invoice-invoice-pkg-incl-rooms-wrapper span:not(.house){
    opacity: 80%;
}

#details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service{
    padding: var(--gap-s) 0 !important;
    border-bottom-style: none !important;
    display: grid !important;
    grid-template-columns: max-content auto max-content max-content !important;
    column-gap: var(--gap-m);
    justify-content: stretch !important;
}

#details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service span:nth-of-type(2){
    text-align: center;
}

#details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service span:not(:first-of-type){
    opacity: 80%;
}

#details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service span{
    white-space: nowrap;
}

#details-booking-invoice-invoice-services-label-wrapper + .details-booking-invoice-invoice-service{
    padding-top: var(--gap-m) !important;
}

#details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service:has(+ #details-booking-invoice-invoice-services-charge-wrapper){
    border-bottom-style: dashed !important;
    padding-bottom: var(--gap-m) !important;
}

#details-booking-invoice-invoice-total{
    font-weight: 400;
    opacity: 100% !important;
}

#details-booking-invoice-invoice-down-payment{
    font-weight: 350;
    opacity: 100% !important;
}

/* details-booking-invoice styling end */

/* details-client-info styling start */

#details-client-info{
    width: 40rem;
    height: max-content;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: .5s;
    display: none; /* because overflow of details-section is visible on [step="1"] => changed when [step=""] */
    scroll-margin-top: 8rem;
}

#details-client-info #details-client-info-hitbox{
    transition: height 1s;
    position: relative;
    z-index: -1;
}

#details[step="2"] #details-client-info:has(#details-fill-info.verified),
#details[step="3"] #details-client-info:has(#details-fill-info.verified){
    padding: var(--gap-xxl);
    border-radius: var(--gap-m);
    border: .1rem solid rgba(var(--white-rgb), .5);
    backdrop-filter: blur(1rem) brightness(60%);
}

/* #details[step="3"] #details-client-info:has(#details-fill-info.verified){
    height: 100%; 
} */ /* already determined by the hitbox */

/* details-fill-info styling start */

#details-fill-info{
    position: absolute;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: flex-start;
    right: 0;
    transition: all .5s, right .5s, width .5s;
    width: 100%;
}

#details-fill-info #details-fill-info-h1{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
#details-fill-info #details-fill-info-h1 > span:first-of-type{
    white-space: nowrap;
    margin-right: var(--gap-l);
    display: inline-block;
}

#details-fill-info #details-fill-info-h1 #details-fill-info-details-above{
    font-size: 1.5rem;
    margin-left: auto;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap-m);
}

#details-fill-info #details-fill-info-h1 #details-fill-info-details-above span{
    width: fit-content;
}

#details-fill-info #details-fill-info-h1 #details-fill-info-details-above .material-symbols-rounded{
    line-height: 1;
}

#details[step="2"] #details-fill-info.verified{
    right: var(--gap-xxl);
    width: calc(100% - 2 * var(--gap-xxl));
}

#details[step="3"] #details-fill-info.verified{
    transition: all .5s, right 1s, width 1s;
    right: calc(100% + var(--gap-xxl));
}

#details-fill-info h1{
    grid-column: span 2;
    margin-bottom: 0;
}

#details-fill-info .details-fill-info-input{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--gap-m);
}

#details-fill-info label{
    opacity: 80%;
}

#details-fill-info #details-fill-info-name-wrapper,
#details-fill-info #details-fill-info-remark-wrapper{
    grid-column: span 1;
}

#details-fill-info #details-fill-info-remark::-webkit-scrollbar {
    width: .2rem;
}
  
#details-fill-info #details-fill-info-remark::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1rem;
}

#details-fill-info #details-fill-info-remark::-webkit-scrollbar-thumb {
    background: rgba(var(--orange-rgb), .5);
    border-radius: 1rem;
    cursor: grab;
}

#details-fill-info #details-fill-info-remark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--orange-rgb), 0.8);
}

#details-fill-info #details-fill-info-verify-booking,
#details-fill-info #details-fill-info-back,
#details-fill-info #details-fill-info-submit-booking,
#details-fill-info #details-fill-info-edit{
    width: 100%;
}

#details-fill-info:not(.verified) #details-fill-info-submit-booking,
#details-fill-info:not(.verified) #details-fill-info-edit{
    display: none;
}

#details-fill-info.verified #details-fill-info-verify-booking,
#details-fill-info.verified #details-fill-info-back{
    display: none;
}

#details-fill-info .details-fill-info-input > input,
#details-fill-info .details-fill-info-input > textarea,
#details-fill-info .input input{
    transition: 
        padding .5s, 
        left .5s,
        border-color .2s ease .3s;
    resize: none;
}

#details-fill-info.verified .details-fill-info-input > input,
#details-fill-info.verified .details-fill-info-input > textarea{
    border-color: transparent;
    padding: 0;
    font-weight: 400;
    transition: 
        padding .5s, 
        left .5s,
        border-color .2s ease 0s;
}

#details-fill-info .details-fill-info-input > input::placeholder,
#details-fill-info .details-fill-info-input > textarea::placeholder{
    color: var(--white);
    opacity: 0%;
    transition: .5s;
}

#details-fill-info.verified .details-fill-info-input > input::placeholder,
#details-fill-info.verified .details-fill-info-input > textarea::placeholder{
    opacity: 30%;
}

#details-fill-info .input{
    transition: 
        padding .5s, 
        left .5s,
        border-color .2s ease .3s;
}

#details-fill-info.verified .input{
    padding: 0;
    border-color: transparent;
    transition: 
        padding .5s, 
        left .5s,
        border-color .2s ease .0s;
}

#details-fill-info.verified .input input{
    left: 0;
    padding: 0;
    font-weight: 400;
}

#details-fill-info .input::after{
    transition: color .2s ease .3s;
}

#details-fill-info.verified .input::after{
    color: transparent;
    transition: color .2s ease 0s;
}

#details-fill-info-notes-wrapper{
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-m);
    font-size: .75rem;
    color: rgba(var(--white-rgb), .5);
}

#details-fill-info-notes-wrapper b{
    font-weight: 300;
    color: rgba(var(--white-rgb), .8);
}

/* details-fill-info styling end */

/* details-booking-submitted styling start */

#details-booking-submitted{
    position: absolute;
    top: var(--gap-xxl);
    left: 100%;
    width: calc(100% - 2 * var(--gap-xxl));
    transition: 1s;
    box-sizing: border-box;
}

#details[step="3"] #details-booking-submitted{
    left: var(--gap-xxl);
}

#details-booking-submitted{
    padding-right: var(--gap-l);
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-xl);
    height: calc(100% - 2 * var(--gap-xxl));
    overflow: auto;
}

#details-booking-submitted::-webkit-scrollbar {
    width: .4rem;
}
  
#details-booking-submitted::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1rem;
}

#details-booking-submitted::-webkit-scrollbar-thumb {
    background: rgba(var(--orange-rgb), .5);
    border-radius: 1rem;
    cursor: grab;
}

#details-booking-submitted::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--orange-rgb), 0.8);
}

#details-booking-submitted b{
    font-weight: 400;
}

#details-booking-submitted h2{
    letter-spacing: normal;
    text-align: left;
}

#details-booking-submitted h2 span,
#details-booking-submitted h3 span{
    font-size: 1rem;
    font-family: LexendDeca;
    font-weight: 300;
}

#details-booking-submitted h3{
    letter-spacing: normal;
    text-align: left;
    font-size: 1.25rem;
    margin-bottom: calc(var(--gap-m) + var(--gap-s));
}

#details-booking-submitted .orange{
    color: var(--orange);
}

#details-booking-submitted #details-booking-submitted-checkmark{
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: var(--gap-xxl);
    background-color: var(--orange);
    position: relative;
    transform: scale(0, 0);
    transition: transform .6s cubic-bezier(.64,1.77,.55,.74) .6s;
}

#details-booking-submitted #details-booking-submitted-checkmark span::before,
#details-booking-submitted #details-booking-submitted-checkmark span::after{
    content: "";
    border-radius: var(--gap-l);
    background-color: var(--black);
    position: absolute;
}

#details-booking-submitted #details-booking-submitted-checkmark span::before{
    height: 0;
    width: var(--gap-s);
    left: 0;
    top: 0;
    transition: height .3s ease 1s;
}

#details[step="3"] #details-booking-submitted #details-booking-submitted-checkmark span::before{
    height: 100%;
}

#details-booking-submitted #details-booking-submitted-checkmark span::after{
    width: 0;
    height: var(--gap-s);
    bottom: 0;
    left: 0;
    transition: width .3s ease 1.2s;
}

#details[step="3"] #details-booking-submitted #details-booking-submitted-checkmark span::after{
    width: 100%;
}

#details-booking-submitted #details-booking-submitted-checkmark span{
    display: block;
    position: absolute;
    width: 2rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
}

#details[step="3"] #details-booking-submitted #details-booking-submitted-checkmark{
    transform: scale(1, 1);
}

#details-booking-submitted #details-booking-submitted-heading{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

#details-booking-submitted #details-booking-submitted-heading h1{
    margin: 0;
}

#details-booking-submitted #details-booking-submitted-heading h2{
    font-family: LexendDeca;
    font-size: 1.5rem;
    font-weight: 200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--gap-m);
}

#details-booking-submitted #details-booking-submitted-heading h2 div{
    flex-grow: 1;
    border-bottom: .1rem dashed rgba(var(--white-rgb), .5);
}

#details-booking-submitted #details-booking-submitted-heading h2 > span{
    font-size: inherit;
    font-weight: inherit !important;
}

#details-booking-submitted-heading-booking-ref{
    white-space: nowrap;
}

#details-booking-submitted #details-booking-submitted-note{
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-m);
}

/* #details-booking-submitted #details-booking-submitted-note span:nth-child(2){
    text-align: right;
} */

#details-booking-submitted #details-booking-submitted-note a{
    text-align: right;
    width: 100%;
    position: relative;
}

#details-booking-submitted #details-booking-submitted-note a .button{
    padding: var(--gap-m);
    width: 100%;
}

#details-booking-submitted .label-value-table{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    column-gap: var(--gap-xxl);
}

#details-booking-submitted .label-value-table .info{
    padding: var(--gap-m) 0;
    display: flex;
    justify-content: space-between;
}

#details-booking-submitted .label-value-table .info:not(:last-of-type){
    border-bottom: .1rem dashed rgba(var(--white-rgb), .5);
}

#details-booking-submitted .label-value-table .info .label{
    opacity: 70%;
}

#details-booking-submitted .label-value-table .info .value{
    text-align: right;
    display: block;
    margin-left: var(--gap-xl);
}

#details-booking-submitted #details-booking-submitted-info .info .value.empty{
    opacity: 30%;
}

#details-booking-submitted #details-booking-submitted-info .info .label .coupon-validity{
    margin-left: var(--gap-m);
    font-size: .75rem;
}

#details-booking-submitted #details-booking-submitted-info .info .label .coupon-validity.valid{
    color: var(--orange);
}

#details-booking-submitted #details-booking-submitted-info .info .label .coupon-validity.invalid{
    color: var(--white);
}

#details-booking-submitted #details-booking-submitted-secondary-payment-methods-h2{
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding-right: var(--gap-xl);
}

#details-booking-submitted #details-booking-submitted-secondary-payment-methods-h2::after{
    content: "v";
    font-family: LexendDeca;
    font-size: 1rem;
    font-weight: 300;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(1.5, 1);
    transition: .2s;
    line-height: 0;
}

#details-booking-submitted #details-booking-submitted-secondary-payment-methods-h2.active::after{
    transform: translateY(-50%) scale(1.5, 1) rotate(180deg);
}

#details-booking-submitted #details-booking-submitted-scan-to-pay{
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: none;
}

#details-booking-submitted #details-booking-submitted-secondary-payment-methods-h2.active + #details-booking-submitted-scan-to-pay{
    display: flex;
}

#details-booking-submitted #details-booking-submitted-scan-to-pay div{
    display: flex;
    justify-content: center;
    flex-direction: column;
    row-gap: var(--gap-m);
    text-align: center;
}

#details-booking-submitted #details-booking-submitted-scan-to-pay > span{
    font-size: 1.5rem;
}

#details-booking-submitted #details-booking-submitted-scan-to-pay div:has( > img){
    width: 8rem;
    height: 8rem;
    position: relative;
    padding: var(--gap-m);
    background-color: var(--white);
    border-radius: var(--gap-m);
}

#details-booking-submitted #details-booking-submitted-scan-to-pay img{
    width: 100%;
}

#details-booking-submitted #details-booking-submitted-bank-acc-germany-wrapper{
    display: none;
}

#details-booking-submitted #details-booking-submitted-secondary-payment-methods-h2.active + #details-booking-submitted-scan-to-pay + #details-booking-submitted-bank-acc-germany-wrapper{
    display: block;
}

/* details-booking-submitted styling end */

/* details-client-info styling end */

@media only screen and (max-width: 1350px){
    #details-section{
        width: fit-content;
    }

    #details{
        grid-template-columns: 32.5rem;
        justify-content: center;
        margin: auto;
    }

    #details[step="2"],
    #details[step="3"]{
        transform: translateY(calc(0rem - var(--details-info-height) - var(--gap-xxl)));
    }

    #details-info{
        width: 32.5rem;
    }

    #details-client-info{
        width: 32.5rem;
    }

    #details-fill-info{
        gap: var(--gap-l);
    }

    #details-fill-info #details-fill-info-h1 #details-fill-info-details-above{
        display: flex;
    }

    /* #details-booking-submitted #details-booking-submitted-note span:nth-child(2){
        text-align: left;
        margin: auto;
        width: 75%;
    } */

    #details-booking-submitted #details-booking-submitted-note a{
        margin-left: auto;
    }

    #details-booking-submitted #details-booking-submitted-scan-to-pay{
        flex-wrap: wrap;
        row-gap: var(--gap-m);
    }

    #details-booking-submitted #details-booking-submitted-scan-to-pay h3{
        flex-basis: 100%; 
    }
    #details-booking #details-booking-invoice{
        padding-right: 0;
    }

    #details-booking-submitted #details-booking-submitted-checkmark{
        position: absolute;
        right: var(--gap-l);
        top: var(--gap-m);
    }
}

@media only screen and (max-width: 560px){
    #details{
        grid-template-columns: 1fr;
        width: calc(100% - 2 * calc(5 * var(--gap-factor)));
    }

    #details-booking{
        width: 100%;
    }

    #details-info{
        width: 100%;
    }

    #details-client-info{
        width: 100%;
    }

    #details-fill-info #details-fill-info-h1 #details-fill-info-details-above{
        font-size: 1.25rem;
    }

    #details-booking-submitted-heading{
        align-items: flex-start;
    }
}

@media only screen and (max-width: 540px){
    #details-booking{
        padding: calc(calc(10 * var(--gap-factor)) + calc(1 * var(--gap-factor))) calc(10 * var(--gap-factor));
    }

    #details-booking #details-booking-inpinfo{
        left: calc(10 * var(--gap-factor));
        width: calc(100% - 2 * calc(10 * var(--gap-factor)));
    }

    #details-booking #details-booking-invoice{
        width: calc(100% - 2 * calc(10 * var(--gap-factor)));
    }

    #details[step="2"] #details-booking #details-booking-invoice, #details[step="3"] #details-booking #details-booking-invoice{
        right: var(--gap-xl)
    }

    #details[step="2"] #details-client-info:has(#details-fill-info.verified), #details[step="3"] #details-client-info:has(#details-fill-info.verified){
        padding: var(--gap-xl);
    }

    #details[step="2"] #details-fill-info.verified{
        right: var(--gap-xl);
        width: calc(100% - 2 * var(--gap-xl));
    }

    #details-booking-submitted{
        top: var(--gap-xl);
        width: calc(100% - 2 * var(--gap-xl));
        height: calc(100% - 2 * var(--gap-xl));
    }

    #details[step="3"] #details-booking-submitted{
        left: var(--gap-xl);
    }

    #details-booking-submitted-heading-booking-ref-label-mob{
        display: block !important;
    }

    #details-booking-submitted-heading-booking-ref-label-desk{
        display: none;
    }
}

@media only screen and (max-width: 520px){
    #details-fill-info{
        row-gap: calc(5 * var(--gap-factor));
    }

    #details-fill-info *:not(button){
        grid-column: span 2 !important;
    }
}

@media only screen and (max-width: 490px){
    #details-booking{
        padding: calc(calc(5 * var(--gap-factor)) + calc(1 * var(--gap-factor))) calc(5 * var(--gap-factor));
    }

    #details-booking #details-booking-inpinfo{
        left: calc(5 * var(--gap-factor));
        width: calc(100% - 2 * calc(5 * var(--gap-factor)));
    }

    #details-booking #details-booking-invoice{
        width: calc(100% - 2 * calc(5 * var(--gap-factor)));
    }

    #details[step="2"] #details-booking #details-booking-invoice, #details[step="3"] #details-booking #details-booking-invoice{
        right: var(--gap-l)
    }

    #details[step="2"] #details-client-info:has(#details-fill-info.verified), #details[step="3"] #details-client-info:has(#details-fill-info.verified){
        padding: var(--gap-l);
    }

    #details[step="2"] #details-fill-info.verified{
        right: var(--gap-l);
        width: calc(100% - 2 * var(--gap-l));
    }

    #details-booking-submitted{
        top: var(--gap-l);
        width: calc(100% - 2 * var(--gap-l));
        height: calc(100% - 2 * var(--gap-l));
    }

    #details[step="3"] #details-booking-submitted{
        left: var(--gap-l);
    }
}

@media only screen and (max-width: 442px){
    h1{
        font-size: 2rem;
    }

    h2{
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 460px){
    #details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper{
        row-gap: calc(2.5 * var(--gap-factor));
    }
    #details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service{
        flex-direction: column;
        align-items: flex-start;
    }

    #details-booking #details-booking-inpinfo #details-booking-inpinfo-services-wrapper .service .service-right{
        margin-left: auto;
    }

    #details-fill-info #details-fill-info-h1 #details-fill-info-details-above{
        font-size: 1rem;
    }
}

@media only screen and (max-width: 445px){
    #details-booking-submitted #details-booking-submitted-scan-to-pay div:has( > img){
        width: 7rem;
        height: 7rem;
    }

    #details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service{
        grid-template-columns: auto max-content max-content !important;
    }

    #details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service span:nth-of-type(1){
        grid-column: span 3;
    }

    #details-booking-invoice-invoice-services-label-wrapper ~ .details-booking-invoice-invoice-service span:nth-of-type(2){
        text-align: right;
    }

    #details-fill-info #details-fill-info-h1{
        font-size: 1.75rem;
    }
}

@media only screen and (max-width: 420px){
    #details-booking #details-booking-invoice #details-booking-invoice-checkinout .checkinout .checkinout-time{
        flex-direction: column;
        align-items: flex-start;
    }

    #details-booking #details-booking-invoice #details-booking-invoice-checkinout .checkinout .checkinout-time h3{
        margin-left: auto;
    }
}

@media only screen and (max-width: 410px){
    #details-booking-submitted #details-booking-submitted-scan-to-pay div:has( > img){
        width: 6rem;
        height: 6rem;
    }

    #details-fill-info #details-fill-info-h1{
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 380px){
    h1{
        font-size: 1.75rem !important;
    }

    #details-booking-submitted-heading-booking-ref,
    #details-booking-submitted-heading-booking-ref-label-mob{
        font-size: 1.25rem !important;
    }

    h2{
        font-size: 1.5rem;
    }

    #details-rooms .details-rooms-house .details-rooms-house-name{
        font-size: 1.25rem;
    }

    #details-booking-submitted #details-booking-submitted-scan-to-pay div:has( > img){
        width: 5rem;
        height: 5rem;
    }

    #details-fill-info #details-fill-info-h1{
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 340px){
    #details-fill-info #details-fill-info-h1 #details-fill-info-details-above span{
        width: min-content;
    }
}