/**
 * Tunisia COD Theme - Urgency Components Styles
 * Countdown timer, stock counter, and delivery badge
 * Version: 4.0
 */

/* ===========================================
   URGENCY SECTION CONTAINER
   =========================================== */

.tunisia-urgency-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
    margin: var(--space-md, 16px) 0;
}

/* ===========================================
   COUNTDOWN TIMER
   =========================================== */

.countdown-timer {
    display: flex;
    align-items: center;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 16px);
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border: 2px solid var(--urgency-red, #e53e3e);
    border-radius: var(--radius-lg, 14px);
    animation: countdown-pulse 2s ease-in-out infinite;
}

.countdown-icon {
    font-size: 24px;
}

.countdown-label {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #636e72);
    font-weight: var(--font-weight-medium, 500);
}

.countdown-time {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.countdown-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    background: var(--urgency-red, #e53e3e);
    color: var(--text-white, #fff);
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    border-radius: var(--radius-sm, 6px);
    font-family: 'Roboto Mono', 'SF Mono', monospace;
}

.countdown-separator {
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--urgency-red, #e53e3e);
}

.countdown-timer.expired {
    opacity: 0.7;
    animation: none;
}

.countdown-timer.expired .countdown-digit {
    background: var(--text-muted, #b2bec3);
}

.countdown-timer.urgent-pulse {
    animation: countdown-pulse 0.5s ease-in-out infinite;
}

/* RTL Support */
.rtl .countdown-time {
    margin-left: 0;
    margin-right: auto;
}

/* ===========================================
   STOCK COUNTER
   =========================================== */

.stock-counter {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 12px) var(--space-md, 16px);
    background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
    border: 2px solid var(--urgency-orange, #ed8936);
    border-radius: var(--radius-md, 10px);
}

.stock-icon {
    font-size: 20px;
}

.stock-message {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #636e72);
    font-weight: var(--font-weight-medium, 500);
}

.stock-number {
    font-weight: var(--font-weight-bold, 700);
    color: var(--urgency-red, #e53e3e);
    font-size: var(--font-size-md, 16px);
}

.stock-counter.low-stock {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-color: var(--urgency-red, #e53e3e);
    animation: stock-shake 0.5s ease;
}

.stock-counter.low-stock .stock-number {
    animation: blink 1s linear infinite;
}

.stock-counter.medium-stock {
    animation: pulse 2s ease-in-out infinite;
}

/* Critical stock shake every 5 seconds */
.stock-counter.critical-stock {
    animation: stock-shake 0.5s ease infinite;
    animation-delay: 5s;
}

/* ===========================================
   DELIVERY BADGE
   =========================================== */

.delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 10px) var(--space-md, 16px);
    background: linear-gradient(135deg, #e8f5e8 0%, #fff 100%);
    border: 2px solid var(--success-color, #00b894);
    border-radius: var(--radius-full, 100px);
    margin: var(--space-sm, 8px) 0;
}

.delivery-badge .truck-icon {
    font-size: 20px;
    display: inline-block;
}

.delivery-badge.animated .truck-icon {
    animation: truck-bounce 1.5s ease-in-out infinite;
}

.delivery-text {
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--success-color, #00b894);
}

@keyframes truck-bounce {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }
}

/* ===========================================
   PRODUCT IMAGE SHINE EFFECT
   =========================================== */

.woocommerce-product-gallery__image,
.product-image-wrapper {
    position: relative;
    overflow: hidden;
}

.woocommerce-product-gallery__image::after,
.product-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: skewX(-25deg);
    animation: shine-sweep 4s ease-in-out infinite;
    pointer-events: none;
}

/* ===========================================
   PRICE DISPLAY ENHANCEMENTS
   =========================================== */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--primary-color, #667eea);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-2xl, 28px);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--text-muted, #b2bec3);
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-normal, 400);
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    background: none;
    text-decoration: none;
}

/* Sale Badge */
.woocommerce span.onsale {
    background: var(--urgency-red, #e53e3e);
    color: var(--text-white, #fff);
    font-weight: var(--font-weight-bold, 700);
    border-radius: var(--radius-full, 100px);
    padding: 8px 16px;
    min-height: auto;
    line-height: 1.2;
    font-size: var(--font-size-sm, 14px);
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 480px) {
    .countdown-timer {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .countdown-label {
        width: 100%;
    }

    .countdown-time {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .countdown-digit {
        min-width: 32px;
        height: 32px;
        font-size: var(--font-size-md, 16px);
    }
}

/* ===========================================
   RTL SUPPORT
   =========================================== */

.rtl .delivery-badge {
    flex-direction: row-reverse;
}

.rtl .delivery-badge.animated .truck-icon {
    animation: truck-bounce-rtl 1.5s ease-in-out infinite;
}

@keyframes truck-bounce-rtl {

    0%,
    100% {
        transform: translateX(0) scaleX(-1);
    }

    25% {
        transform: translateX(-3px) scaleX(-1);
    }

    75% {
        transform: translateX(3px) scaleX(-1);
    }
}