/**
 * Block Styles
 */

.wp-block-surge-blocks-countdown-timer {
    /* Default fallback colors if vars not set */
    --sb-label-color: #888888;
    --sb-sep-color: #888888;
    --sb-sec-color: #ff4444;
    
    /* Default padding if not set by supports */
    padding: 20px;
}

.wp-block-surge-blocks-countdown-timer .countdown-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
    font-family: inherit;
}

.wp-block-surge-blocks-countdown-timer .countdown-segment {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.2em;
}

.wp-block-surge-blocks-countdown-timer .countdown-number {
    font-size: 3em;
    font-weight: 700;
    line-height: 1;
    color: inherit; /* Inherit from block support text color */
    font-variant-numeric: tabular-nums; /* Keeps numbers monospaced to prevent jitter */
}

.wp-block-surge-blocks-countdown-timer .countdown-number-seconds {
    color: var(--sb-sec-color);
}

.wp-block-surge-blocks-countdown-timer .countdown-label {
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--sb-label-color);
}

.wp-block-surge-blocks-countdown-timer .countdown-separator {
    font-size: 2em;
    font-weight: 300;
    color: var(--sb-sep-color);
    align-self: center;
    margin-bottom: 0.2em; /* Visual alignment adjustment */
}

.wp-block-surge-blocks-countdown-timer .countdown-expired {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: inherit;
}

.wp-block-surge-blocks-countdown-timer .countdown-placeholder {
    text-align: center;
    padding: 20px;
    border: 1px dashed #ccc;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .wp-block-surge-blocks-countdown-timer .countdown-container {
        gap: 0.2em;
    }
    
    .wp-block-surge-blocks-countdown-timer .countdown-number {
        font-size: 2em;
    }
    
    .wp-block-surge-blocks-countdown-timer .countdown-separator {
        font-size: 1.5em;
    }
    
    .wp-block-surge-blocks-countdown-timer .countdown-label {
        font-size: 0.8em;
    }
}