body {
    margin: 0;
    background-color: var(--white-bg);
    overflow: hidden;
}

#titles-container {
    margin-top: 25vh;
    line-height: 0.95;
    display: flex;
    flex-flow: column;
}

#title1 {
    margin: 0;
    text-align: center;
    font-size: 5rem;
    color: var(--text-dark);
    font-weight: bold;
}
#title2 {
    margin: 0;
    text-align: center;
    font-size: 6rem;
    color: var(--primary);
    font-weight: bold;
}
#title3 {
    margin: 0;
    text-align: center;
    font-size: 4rem;
    color: var(--text-light);
    font-weight: bold;
}

#starring-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.star-icon {
    color: var(--primary);
    width: 2rem;
}

#rate-text-value {
    color: var(--primary);
    font-size: 2rem;
    margin: 0;
}

#rate-text {
    color: var(--text-light);
    font-size: 2rem;
    margin: 0;
}

@media only screen and (max-width: 600px) {
    #title1 {
        font-size: 3rem;
    }
    #title2 {
        font-size: 4rem;
    }
    #title3 {
        font-size: 2rem;
    }

    #starring-container {
        gap: 5px;
    }

    .star-icon {
        width: 1rem;
    }
    #rate-text-value {
        font-size: 1.5rem;
    }
    #rate-text {
        font-size: 1.5rem;
    }
}


#photo-cards-container {
    display: flex;
    overflow-x: scroll;
    padding: 30px 3vw;
    gap: 5vw;
    margin-top: 10vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    background-color: #33333320;
}

#photo-cards-container::-webkit-scrollbar {
    display: none;
}

.card-container {
    min-width: 15vw;
    width: 18vw;
    height: 22vw;
    border: solid 5px white;
    border-radius: 20px;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 600px) {
    .card-container {
        width: 35vw;
        min-width: 35vw;
        height: 45vw;
        min-height: 45vw;
        border: solid 3px white;
    }
}

#description-view-container {
    width: 100vw;
    height: 100vh;
    margin-top: 10vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#description-container {
    position: initial;
    z-index: 2;
}

#description-title {
    color: var(--text-dark);
    margin: 0;
    font-weight: bold;
    font-size: 4rem;
    text-align: center;
}

#description-body {
    color: var(--text-light);
    text-align: center;
    font-size: 2rem;
    max-width: 70vw;
}

.wine-bg-image {
    position:absolute;
    scale: 1.3;
    z-index: 1;
}

#wine-bg-image-left {
    left: 0;
    bottom: 0;
    transform: translate(-30%, 10%) rotate(-10deg);
}
#wine-bg-image-right {
    right: 0;
    bottom: 0;
    transform: translate(30%, 10%) rotate(-50deg);
}


@media only screen and (max-width: 890px) {
    #description-title {
        font-size: 3rem;
    }
    #description-body {
        font-size: 1.5rem;
    }



    #wine-bg-image-left {
        transform:  scale(70%) translate(-50%);
        opacity: 0.5;
    }

    #wine-bg-image-right {
        transform:  scale(70%) translate(50%) rotate(-58deg);
        opacity: 0.5;
    }
}

@media only screen and (max-width: 600px) {
    .wine-bg-image {
        display: none;
    }

    #time-title {
        display: none;
    }
}


#booking-view-container {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#booking-background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    filter: blur(7px);
    -webkit-filter: blur(7px);
}

#booking-blurred-container {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
}

#booking-title {
    color: var(--white-bg);
    margin: 0;
    font-weight: bold;
    font-size: 4rem;
    text-align: center;
    margin-top: 15vh;
}

#date-time-container {
    display: flex;
    justify-content: center;
    margin-top: 5vh;
    gap: 10vw;
}

#date-container, #time-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

#date-title {
    color: var(--white-bg);
    margin: 0;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

#time-title {
    color: var(--white-bg);
    margin: 0;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    opacity: 0.7;
}

#time-title-selected {
    opacity: 1;
}

#avaiabilities-container {
    display: flex;
    flex-flow: column;
    gap: 30px;
    margin-top: 20px;
    opacity: 0;
    transition-duration: 0.5s;
}

.avaiability-container {
    display:flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    background-color: var(--white-bg);
    padding: 5px 40px;
    border-radius: 10px;
    cursor: pointer;
    transition-duration: 0.3s;
}

.avaiability-container-selected {
    background-color: var(--primary);
}

.avaiability-container-selected p {
    color: white !important;;
}

.avaiability-container:hover {
    scale: 1.05;
}

.avaiability-container-full {
    background-color: var(--text-light);
    opacity: 0.8;
    cursor: initial;
    pointer-events: none;
}

.avaiability-container-full:hover {
    scale: 1;
}

.avaiability-time {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.avaiability-spots {
    margin: 0;
    font-size: 0.8rem;
}

.avaiability-spots-low {
    color: #FF6D6D;
}

.avaiability-spots-high {
    color: #49C346;
}



#continue-button {
    color: var(--white-bg);
    font-size: 1.2rem;
    font-weight: bold;
    border: solid 3px var(--white-bg);
    padding: 10px 50px;
    cursor: pointer;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
    opacity: 0;
    margin-top: 20px;
}

#continue-button:hover {
    color: var(--text-dark);
    background-color: var(--white-bg);
}

@media only screen and (max-width: 600px) {
    #booking-title {
        font-size: 3rem;
    }

    #date-time-container {
        flex-flow: column;
    }

    #booking-view-container {
        height: 150vh;
    }
}


#black-overlay {
    width: 100vw;
    height: 100vh;
    background-color: rgba(35,35,35,0.7);
    position: fixed;
    top: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.5s;
}

#confirm-black-overlay {
    width: 100vw;
    height: 100vh;
    background-color: rgba(35,35,35,0.7);
    position: fixed;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.5s;
}

#booking-popup-container {
    background-color: #d9d9d9;
    width: 60vw;
    height: 70vh;
    border-radius: 20px;
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#booking-popup-title {
    color: var(--text-dark);
    margin: 0;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
}

#booking-popup-info-container {
    background-color: var(--white-bg);
    width: 100%;
    height: 100%;
    gap: 30px;
    border-radius: 15px;
    display: flex;
    flex-flow: column;
}

.booking-popup-info-col {
    width: 50%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.booking-popup-info-row {
    display: flex; justify-content: center; gap: 10vw;
}

.booking-popup-value-container {
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 20vw;
}

.booking-popup-info-title {
    color: var(--text-dark);
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
}

.booking-popup-fixed-info-value {
    color: var(--text-light);
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
}

.booking-popup-info-input {
    background-color: #d9d9d9;
    -webkit-appearance: none;
    border: none;
    text-align: center;
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.2rem;
    margin-left: 40px;
    margin-right: 40px;
    padding-top:5px;
    padding-bottom: 5px;
    border-radius: 5px;
    font-family: 'Judson', serif;
}

#booking-popup-stepper-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.stepper-icon {
    width: 30px;
    color: var(--text-light);
    cursor: pointer;
    transition-duration: 0.4s;
}

.stepper-icon:hover {
    scale: 1.2;
    opacity: 0.7;
}

#booking-popup-stepper-value-container {
    background-color: #d9d9d9;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#booking-popup-stepper-value {
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.5rem;
}

#booking-popup-price {
    color: var(--primary);
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
    font-size: 1.7rem;
    margin: 0;
    transition: 0.3s;
}

#booking-popup-price::before {
    content: "€ ";
}

#booking-popup-buttons-container {
    display: flex;
    justify-content: end;
    align-items: center;
    flex: 1;
    gap: 20px;
    padding-right: 20px;
}

#booking-popup-dismiss-button {
    cursor: pointer;
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.2rem;
    transition-duration: 0.4s;
}

#booking-popup-dismiss-button:hover {
    opacity: 0.7;
    scale: 1.1;
}

#booking-popup-confirm-button {
    cursor: pointer;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
    border: solid 2px var(--primary);
    padding: 10px 20px;
    transition-duration: 0.4s;
}

#booking-popup-confirm-button:hover {
    background-color: var(--primary);
    color: var(--white-bg);
}

.booking-popup-error-text {
    color: #FF6D6D;
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}






#confirm-info-container {
    background-color: var(--white-bg);
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    flex-flow: column;
}

#confirm-privacy-title {
    color: var(--text-dark);
    font-weight: bold;
    font-size: 2em;
    margin: 0;
    text-align: center;
}

#confirm-privacy-text {
    color: var(--text-light);
}

#checkout-button {
    background-color: transparent;
    border: solid 2px var(--primary);
    color: var(--primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition-duration: 0.5s;
    margin-left: auto;
    padding: 5px 10px;
}

#checkout-button:hover {
    background-color: var(--primary);
    color: var(--white-bg);
}

#confirm-buttons-container {
    display: flex;
    justify-content: end;
    gap: 15px;
}

#confirm-dismiss-button {
    cursor: pointer;
    color: var(--text-light);
    font-weight: bold;
    font-size: 1rem;
    transition-duration: 0.4s;
    margin-bottom: auto;
    margin-top: auto;
}

#confirm-dismiss-button:hover {
    opacity: 0.7;
    scale: 1.1;
}

#confirm-text-separator {
    border: none;
    border-top: 1px solid var(--text-light);
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

#description-body {
    padding: 0 150px;
}

@media only screen and (max-width: 600px) {
    #booking-popup-container {
        width: 90vw;
        height: 75vh;
        padding: 10px 10px 10px 20px;
    }

    #booking-popup-title {
        font-size: 2rem;
    }

    #booking-popup-info-container {
        overflow-y: scroll;
    }

    .booking-popup-info-title {
        font-size: 1.2rem;
    }

    .booking-popup-info-input {
        font-size: 1rem;
        margin: 0;
    }

    .booking-popup-info-row {
        flex-flow: column;
        align-items: center;
    }

    .booking-popup-info-col {
        padding: 20px 0 20px 0;
    }

    .booking-popup-value-container {
        width: 60vw;
    }

    #booking-popup-buttons-container {
        flex-flow: column;
        align-items: center;
        gap: 15px;
        padding-right: 0;
    }

    #booking-popup-dismiss-button {
        margin-bottom: 0;
    }

    #booking-popup-confirm-button {
        white-space: nowrap;
        margin-top: 0;

    }

    #confirm-info-container {
        width: 80vw;
    }

    #description-view-container {
        height: fit-content;
        margin-top: 0;
        padding: 100px 0;
    }

    #description-body {
        padding: 0 20px;
    }
}


#reviews-container {
    display: flex;
    justify-content: start;
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 30px 30px;
    overflow: scroll;
}

.review-container {
    background-color: var(--white-bg);
    /*soft shadow*/
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 5px 10px;
    max-width: 35vw;
}

.review-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.review-title-container > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-title-container img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.review-title-container > div > p {
    color: var(--text-dark);
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
}

.review-title-container > p {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}

.review-container > p {
    color: var(--text-light);
    width: 30vw;
}


@media only screen and (max-width: 600px) {
    .review-container > p {
        width: 70vw;
    }

    .review-container {
        max-width: 70vw;
    }

}