@import '../components/cart.css';

.carousel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height:100%;
    align-items: center;
}

.bloc-image {
    display: flex;
    flex-direction: row;
    height: 75vh;
    width: 55vh;
    transform: translate(0, 0);
}

.bloc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  z-index: 10;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-main);
  opacity:0.5;
  cursor: pointer;
}

.carousel-dot.active {
  opacity:1;
}


.pop-up{
    height:100%;
    width:100%;
    position:absolute;
    top:50%;
    left:50%;
    z-index:10;
    transform:translate(-50%, -50%);
    background-color: rgba(233, 232, 230, 0.7);
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: none;
    opacity: 0;
}

.pop-up.visible {
    display: flex;
}

.pop-up table{
    border-collapse: collapse;   
    background-color: var(--color-fourth);
    width:30vw;
}

.pop-up th{
    border:1px solid var(--color-main);
    padding:var(--spacing-medium-h) var(--spacing-medium-w);
}

.pop-up tr th:nth-child(2){
    white-space: pre;
}


@media screen and (max-width: 1080px) {

    section{
        width:calc(100vw - 5vw);
        padding: 4vh 2.5vw 0 2.5vw;
    }

    .carousel {
        position: relative;
        justify-content: flex-start;
        overflow: hidden;
        height: calc(100% - calc(var(--real-vh, 1vh) * 4));
    }

    .bloc-image {
        min-width: 100%;
        min-height:100%;
        transform: translate(0, 0);
        transition: transform 0.4s ease;
    }

    .bloc-image img {
        object-fit: cover;
    }

    .pop-up table{
        width:70vw;
    }
}