/* Retro Flip Counter Badge Component Styles */

.flip-counter-badge {
    display: inline-block;
    text-decoration: none;
    background-color: var(--button-purchase-bg); /* Use purchase green */
    color: var(--button-text); /* Use button text color */
    border-radius: 12px; /* Match card border radius */
    padding: 1rem 2rem; /* Adjust padding */
    box-shadow: 0 4px 12px var(--player-shadow); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Needed for potential future animations */
}

.flip-counter-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--player-shadow), 0 0 15px rgba(var(--card-bg-color-rgb), 0.1); /* Slightly larger shadow and subtle glow on hover */
}

.flip-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'monospace', sans-serif; /* Monospace font for digits */
    font-size: 2.5rem; /* Large font size for numbers */
    font-weight: bold;
    margin-bottom: 0.5rem; /* Space between counter and label */
    perspective: 1000px; /* Increased perspective for better 3D effect */
}

.digit-container {
    position: relative;
    width: 1.2em; /* Fixed width for digits */
    height: 1.2em; /* Fixed height */
    transform-style: preserve-3d; /* Enable 3D space for children */
    line-height: 1.2em;
    text-align: center;
    margin: 0 2px; /* Space between digits */
    border-radius: 4px; /* Small border radius for digit segments */
    background-color: #333; /* Dark background for segments */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Inset shadow for depth */
    overflow: hidden; /* Hide overflow during flip */
    color: white; /* White text for digits */
}

.digit-segment {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #444;
    color: white;
    box-sizing: border-box;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    overflow: hidden;
}

.digit-segment.top {
    top: 0;
    border-bottom: 1px solid #222;
}

.digit-segment.bottom {
    bottom: 0;
    border-top: 1px solid #222;
}

.current-digit, .flip-digit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
    color: white;
    box-sizing: border-box;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    border-radius: 4px;
    transition: all 1.5s ease-in-out;
}

.current-digit {
    z-index: 2;
}

.flip-digit {
    z-index: 3;
    opacity: 0;
    transform: scale(0.5) rotateY(180deg);
}

/* Animation states */
.digit-container.flipping .flip-digit {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
    z-index: 4;
}

.digit-container.flipping .current-digit {
    transform: scale(0.5) rotateY(-180deg);
    opacity: 0;
    z-index: 1;
}

.decimal, .percent, .currency-symbol {
    font-size: 1.5rem; /* Smaller size for symbols */
    font-weight: bold;
    margin: 0 2px;
    align-self: flex-end; /* Align with the bottom of digits */
    margin-bottom: 0.2em; /* Fine tune alignment */
    color: white; /* White color for symbols */
}

.counter-label {
    font-size: 1rem; /* Smaller font size for label */
    font-weight: 600;
    color: var(--button-text); /* Use button text color */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}