/* Timer Base Styling */
.daycart-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--paswoo-typography, inherit);
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin: 10px 0;
    width: 100%;
}

.daycart-countdown .label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.daycart-countdown.paswoo-layout-row .label {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.paswoo-timer-blocks {
    display: flex;
    align-items: center;
    gap: var(--paswoo-spacing, 15px);
    justify-content: center;
    flex-wrap: wrap;
}

.paswoo-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.paswoo-timer-val {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.paswoo-timer-label {
    margin-top: 8px;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Alignments */
.daycart-countdown.paswoo-align-left { justify-content: flex-start; text-align: left; }
.daycart-countdown.paswoo-align-left .label { align-items: flex-start; text-align: left; justify-content: flex-start; }
.daycart-countdown.paswoo-align-left .paswoo-timer-blocks { justify-content: flex-start; }

.daycart-countdown.paswoo-align-center { justify-content: center; text-align: center; }
.daycart-countdown.paswoo-align-center .label { align-items: center; text-align: center; justify-content: center; }
.daycart-countdown.paswoo-align-center .paswoo-timer-blocks { justify-content: center; }

.daycart-countdown.paswoo-align-right { justify-content: flex-end; text-align: right; }
.daycart-countdown.paswoo-align-right .label { align-items: flex-end; text-align: right; justify-content: flex-end; }
.daycart-countdown.paswoo-align-right .paswoo-timer-blocks { justify-content: flex-end; }

/* Sizes */
.daycart-countdown.paswoo-size-small { font-size: 0.85em; }
.daycart-countdown.paswoo-size-medium { font-size: 1em; }
.daycart-countdown.paswoo-size-large { font-size: 1.25em; }

/* 
 * Style 1: Flip Clock (from image 1)
 * Dark rounded boxes with a horizontal line in the middle.
 */
.daycart-countdown.paswoo-timer-style-1 .paswoo-timer-box {
    gap: 0;
}
.daycart-countdown.paswoo-timer-style-1 .paswoo-timer-val {
    background: var(--paswoo-bg, #222);
    color: var(--paswoo-text, #fff);
    border-radius: var(--paswoo-radius, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--paswoo-box-width, 3em);
    height: var(--paswoo-box-height, 4em);
    font-size: calc(min(var(--paswoo-box-width, 3em), var(--paswoo-box-height, 4em)) * 0.8);
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    overflow: hidden;
}
/* Simulate flip clock middle line */
.daycart-countdown.paswoo-timer-style-1 .paswoo-timer-val::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
.daycart-countdown.paswoo-timer-style-1 .paswoo-timer-label {
    color: var(--paswoo-accent, #ff9900);
    font-weight: 500;
}

/* 
 * Style 2: Glowing Rings (from image 2)
 * Circular borders using conic-gradient for progress.
 */
.daycart-countdown.paswoo-timer-style-2 .paswoo-timer-box {
    position: relative;
}
.daycart-countdown.paswoo-timer-style-2 .paswoo-timer-val {
    background: transparent;
    color: var(--paswoo-text, #fff);
    width: var(--paswoo-box-width, 3.5em);
    height: var(--paswoo-box-height, 3.5em);
    border-radius: 50%;
    font-size: calc(min(var(--paswoo-box-width, 3.5em), var(--paswoo-box-height, 3.5em)) * 0.55);
    font-weight: 300;
    /* Base ring */
    background: conic-gradient(
        var(--paswoo-accent, #ff9900) var(--paswoo-progress, 0%), 
        var(--paswoo-bg, rgba(255,255,255,0.1)) var(--paswoo-progress, 0%)
    );
    /* Inner mask to make it a ring */
    position: relative;
    z-index: 1;
}
.daycart-countdown.paswoo-timer-style-2 .paswoo-timer-val::before {
    content: '';
    position: absolute;
    inset: 3px;
    background-color: var(--paswoo-ring-inner-bg, #222); /* Ideally page background */
    border-radius: 50%;
    z-index: -1;
}
.daycart-countdown.paswoo-timer-style-2 .paswoo-timer-label {
    color: var(--paswoo-text, #fff);
}

/* 
 * Style 3: Solid Badge (from image 3)
 * Simple solid circles.
 */
.daycart-countdown.paswoo-timer-style-3 .paswoo-timer-val {
    background: var(--paswoo-bg, #2a3136);
    color: var(--paswoo-text, #ffffff);
    width: var(--paswoo-box-width, 3em);
    height: var(--paswoo-box-height, 3em);
    border-radius: var(--paswoo-radius, 50%); /* Users can override to squares */
    font-size: calc(min(var(--paswoo-box-width, 3em), var(--paswoo-box-height, 3em)) * 0.73);
    font-weight: 300;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.daycart-countdown.paswoo-timer-style-3 .paswoo-timer-label {
    color: var(--paswoo-text, #ffffff);
    opacity: 0.9;
}

/* Loop timers adjustments */
.products .daycart-countdown,
.product-category .daycart-countdown {
    width: auto;
    max-width: 100%;
}
.products .daycart-countdown.paswoo-size-small .paswoo-timer-val,
.product-category .daycart-countdown.paswoo-size-small .paswoo-timer-val {
    font-size: 1.5em; /* Make them reasonably sized in loops */
}
