/* --- ОСНОВНОЙ КОНТЕЙНЕР --- */
.mc-counter-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 15px;
    font-family: 'Prosto One', sans-serif; /* Или ваш шрифт */
}

.mc-digits-container {
    display: flex;
    gap: 4px;
    perspective: 400px; /* Важно для 3D эффекта */
}

.mc-label {
    font-family: "Nunito";
    margin-top: 15px;
    color: #ffffff;
    text-transform: lowercase;
    font-size: 20px;
    line-height: 113%;
    letter-spacing: 0;

}

/* --- КАРТОЧКА ЦИФРЫ --- */
.mc-digit {
    position: relative;
    width: 60px;
    height: 80px;
    background-color: #262626;
    border-radius: 6px;
    font-size: 50px;
    
    line-height: 80px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Красный модификатор */
.mc-counter-wrapper.mc-red .mc-digit,
.mc-counter-wrapper.mc-red .mc-digit .mc-flap {
    color: #ff3333;
}

/* --- СТРУКТУРА ПЕРЕЛИСТЫВАНИЯ --- */

/* Общие стили для половинок */
.mc-flap {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden; /* Скрываем изнанку при вращении */
    background-color: #222;
    box-sizing: border-box;
}

/* Линия разреза */
.mc-flap::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.6);
    z-index: 5;
}

/* ВЕРХНЯЯ ПОЛОВИНА */
.mc-flap.top {
    top: 0;
    border-radius: 6px 6px 0 0;
    transform-origin: 50% 100%; /* Вращаем за нижнюю грань */
    border-bottom: 0.5px solid rgba(255,255,255,0.1);
}
.mc-flap.top::before { bottom: 0; }

/* НИЖНЯЯ ПОЛОВИНА */
.mc-flap.bottom {
    bottom: 0;
    border-radius: 0 0 6px 6px;
    transform-origin: 50% 0%; /* Вращаем за верхнюю грань */
    border-top: 0.5px solid rgba(0,0,0,0.4);
    line-height: 0; /* Смещаем текст вверх для нижней половины */
}
.mc-flap.bottom::before { top: 0; }

/* --- АНИМАЦИЯ --- */

/* Статические (фоновые) слои */
.mc-flap.static { z-index: 1; }

/* Анимируемые слои (сверху) */
.mc-flap.anim { z-index: 2; }

/* Классы для JS анимации */
.mc-digit.animating .mc-flap.top.anim {
    animation: flipTop 0.3s ease-in forwards;
}
.mc-digit.animating .mc-flap.bottom.anim {
    animation: flipBottom 0.3s ease-out 0.3s forwards; /* Задержка равна половине времени */
}

@keyframes flipTop {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(-90deg); }
}

@keyframes flipBottom {
    from { transform: rotateX(90deg); }
    to { transform: rotateX(0deg); }
}


@media screen and (max-width:768px){
    .mc-flap{
        font-size: 30px;
        line-height: 37px;
    }

    .mc-digit{
        width: 40px;
        height: 40px;
        line-height: 40px;
    } 
}