/* ===========================================
   BWA Counter - Flip Clock
   =========================================== */

.bwa-counter-widget {
    display        : inline-flex;
    flex-direction : column;
    align-items    : center;
    width          : 100%;
    max-width      : 180px;
}

.bwa-counter-container {
    width       : 100%;
    perspective : 400px;
}

/* Card principale */
.bwa-counter-card {
    position      : relative;
    overflow      : hidden;
    width         : 100%;
    height        : 96px;
    border        : 3px solid #750031;
    border-radius : 20px;
    background    : linear-gradient(180deg, #B3205D 0%, #750031 100%);
}

/* Partie haute et basse - affichent le nombre */
.bwa-counter-card__top,
.bwa-counter-card__bottom {
    font-family : 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size   : 42px;
    font-weight : 500;
    line-height : 88px;
    color       : #FFF9FB;
    text-align  : center;
    position    : absolute;
    left        : 0;
    overflow    : hidden;
    width       : 100%;
    height      : 50%;
}

.bwa-counter-card__top {
    top           : 0;
    border-radius : 17px 17px 0 0;
    background    : linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(117, 0, 49, 0.2) 100%), #66062E;
}

.bwa-counter-card__bottom {
    line-height   : 0;
    bottom        : 0;
    border-radius : 0 0 17px 17px;
    background    : linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #750031;
}

.bwa-counter-card__bottom::after {
    content : attr(data-value);
}

/* Ligne du milieu */
.bwa-counter-card::after {
    position   : absolute;
    top        : 50%;
    right      : 0;
    left       : 0;
    transform  : translateY(-50%);
    z-index    : 20;
    height     : 2px;
    content    : "";
    background : #B3205D;
    box-shadow : 0 0 15px 2px rgba(117, 0, 49, 0.75);
}

/* Back - éléments pour l'animation */
.bwa-counter-card__back {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
}

/* Partie haute qui flip (ancien nombre) */
.bwa-counter-card__back::before {
    font-family         : 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size           : 42px;
    font-weight         : 500;
    line-height         : 88px;
    color               : #FFF9FB;
    text-align          : center;
    position            : absolute;
    top                 : 0;
    left                : 0;
    transform-origin    : bottom center;
    z-index             : 10;
    overflow            : hidden;
    box-sizing          : border-box;
    width               : 100%;
    height              : 50%;
    content             : attr(data-value);
    border-radius       : 17px 17px 0 0;
    background          : linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(117, 0, 49, 0.2) 100%), #66062E;
    transform-style     : preserve-3d;
    backface-visibility : hidden;
}

/* Partie basse qui apparaît (nouveau nombre) */
.bwa-counter-card__back .bwa-counter-card__bottom {
    font-family      : 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size        : 42px;
    font-weight      : 500;
    line-height      : 0;
    color            : #FFF9FB;
    text-align       : center;
    position         : absolute;
    bottom           : 0;
    left             : 0;
    transform        : rotateX(90deg);
    transform-origin : top center;
    z-index          : 10;
    overflow         : hidden;
    box-sizing       : border-box;
    width            : 100%;
    height           : 50%;
    border-radius    : 0 0 17px 17px;
    background       : linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%), #750031;
}

.bwa-counter-card__back .bwa-counter-card__bottom::after {
    content : attr(data-value);
}

/* Animation */
.bwa-counter-widget.flip .bwa-counter-card__back::before {
    animation : flipTop 0.3s cubic-bezier(.37, .01, .94, .35) forwards;
}

.bwa-counter-widget.flip .bwa-counter-card__back .bwa-counter-card__bottom {
    animation : flipBottom 0.6s cubic-bezier(.15, .45, .28, 1) forwards;
}

@keyframes flipTop {
    0% {
        transform : rotateX(0deg);
    }
    100% {
        transform : rotateX(-90deg);
    }
}

@keyframes flipBottom {
    0%, 50% {
        transform : rotateX(90deg);
    }
    100% {
        transform : rotateX(0deg);
    }
}

/* Label */
.bwa-counter-label {
    font-family : 'Gotham Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size   : 14px;
    font-weight : 700;
    color       : #750031;
    text-align  : center;
    margin-top  : 8px;
}


/* Dev controls */
.bwa-counter-dev-controls {
    text-align    : center;
    width         : 100%;
    max-width     : 300px;
    margin-top    : 20px;
    padding       : 15px;
    border        : 2px dashed #CCCCCC;
    border-radius : 8px;
    background    : #F5F5F5;
}

.bwa-counter-dev-trigger,
.bwa-counter-dev-reset {
    font-size     : 12px;
    font-weight   : 600;
    color         : white;
    margin        : 5px;
    padding       : 8px 15px;
    cursor        : pointer;
    border        : none;
    border-radius : 5px;
    background    : #750031;
}

.bwa-counter-dev-trigger:hover,
.bwa-counter-dev-reset:hover {
    background : #B3205D;
}

.bwa-counter-dev-reset {
    background : #333333;
}

.bwa-counter-dev-info {
    font-family   : monospace;
    font-size     : 11px;
    margin-top    : 10px;
    padding       : 8px;
    border-radius : 4px;
    background    : white;
}

/* Responsive */
@media (min-width : 1024px) and (max-width : 1500px) {
    .bwa-counter-label {
        padding       : 2px 5px;
        border-radius : 5px;
        background    : white;
    }
}

@media (max-width : 768px) {
    .bwa-counter-widget {
        transform        : scale(0.7);
        transform-origin : center center;
    }
}