/* WEB Dynamiq Frontend Styles - Kidify Theme Compatible */

/* ========================================
   RESET DEFAULT WOOCOMMERCE BADGE
======================================== */
.woocommerce span.onsale {
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.3 !important;
    border-radius: 3px !important;
}

/* ========================================
   SALE HEADER & TITLE
======================================== */
.wd-wsc-sale-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0;
    background: transparent;
    clear: both;
}

.wd-wsc-sale-title {
    margin: 20px auto;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4 !important;
    padding: 15px 35px !important;
    background: #e74c3c !important;
    border-radius: 8px;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    border: none !important;
}

/* ========================================
   COUNTDOWN TIMER
======================================== */
.wd-wsc-countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-family: 'Arial', sans-serif;
}

.wd-wsc-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    min-width: 70px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.wd-wsc-timer-box:hover {
    transform: translateY(-3px);
}

.wd-wsc-timer-number {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.wd-wsc-timer-label {
    font-size: 11px;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.wd-wsc-timer-separator {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
}

.wd-wsc-countdown-timer.urgency-24h .wd-wsc-timer-box {
    background: #f39c12;
}

.wd-wsc-countdown-timer.urgency-1h .wd-wsc-timer-box {
    background: #c0392b;
    animation: urgentPulse 1s infinite;
}

@keyframes urgentPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ========================================
   PRICE STYLING
======================================== */
.wd-wsc-price-wrapper {
    display: inline-block;
}

.wd-wsc-original-price {
    text-decoration: line-through;
    color: #999999 !important;
    margin-right: 8px;
    font-size: 0.9em;
}

.wd-wsc-discounted-price {
    text-decoration: none;
    color: #27ae60 !important;
    font-weight: 700;
    font-size: 1.1em;
}

/* ========================================
   SALE BADGES - BASE STYLES
======================================== */
.woocommerce span.onsale.wd-wsc-sale-badge {
    position: absolute;
    z-index: 999;
    background-color: #e74c3c;
    color: #ffffff !important;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 1.2 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    white-space: normal;
}

/* ========================================
   BADGE POSITIONS
======================================== */
.woocommerce span.onsale.wd-wsc-badge-top-left {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
}

.woocommerce span.onsale.wd-wsc-badge-top-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
}

.woocommerce span.onsale.wd-wsc-badge-bottom-left {
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
}

.woocommerce span.onsale.wd-wsc-badge-bottom-right {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
    left: auto !important;
}

/* ========================================
   BADGE STYLES - CIRCLE (FIXED)
======================================== */
.woocommerce span.onsale.wd-wsc-badge-circle {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    padding: 10px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
}

/* ========================================
   BADGE STYLES - RECTANGLE (FIXED PADDING)
======================================== */
.woocommerce span.onsale.wd-wsc-badge-ribbon {
    padding: 10px 20px !important;
    border-radius: 3px !important;
    max-width: 150px;
    min-width: 80px;
    min-height: auto;
}

/* ========================================
   BADGE STYLES - SQUARE
======================================== */
.woocommerce span.onsale.wd-wsc-badge-pill {
    padding: 12px 20px !important;
    border-radius: 4px !important;
    max-width: 120px;
    min-width: 70px;
    min-height: auto;
}

/* ========================================
   BADGE STYLES - HEXAGON
======================================== */
.woocommerce span.onsale.wd-wsc-badge-hexagon {
    width: 90px;
    height: 90px;
    padding: 18px !important;
    font-size: 8px;
    line-height: 1.2 !important;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    border-radius: 0 !important;
}

/* ========================================
   BADGE STYLES - SHIELD (FIXED SIZE)
======================================== */
.woocommerce span.onsale.wd-wsc-badge-badge {
    width: 80px !important;
    height: 90px !important;
    padding: 15px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
    border-radius: 0 !important;
}

/* ========================================
   BADGE STYLES - BURST
======================================== */
.woocommerce span.onsale.wd-wsc-badge-burst {
    width: 90px;
    height: 90px;
    padding: 18px !important;
    font-size: 8px;
    line-height: 1.2 !important;
    clip-path: polygon(50% 0%, 65% 35%, 100% 35%, 75% 55%, 85% 90%, 50% 70%, 15% 90%, 25% 55%, 0% 35%, 35% 35%);
    border-radius: 0 !important;
}

/* ========================================
   BADGE STYLES - TAG (FIXED SHAPE)
======================================== */
.woocommerce span.onsale.wd-wsc-badge-tag {
    padding: 10px 25px 10px 15px !important;
    max-width: 110px;
    min-width: 70px;
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    border-radius: 0 !important;
}

/* ========================================
   BADGE ANIMATIONS
======================================== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.wd-wsc-badge-pulse {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.wd-wsc-badge-bounce {
    animation: bounce 2s infinite ease-in-out;
}

@keyframes swing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.wd-wsc-badge-swing {
    animation: swing 2s infinite ease-in-out;
    transform-origin: top center;
}

@keyframes tada {
    0%, 100% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

.wd-wsc-badge-tada {
    animation: tada 3s infinite ease-in-out;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(1.08); }
    20%, 40% { transform: scale(1); }
}

.wd-wsc-badge-heartbeat {
    animation: heartbeat 1.5s infinite ease-in-out;
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

.wd-wsc-badge-flash {
    animation: flash 1.5s infinite ease-in-out;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wd-wsc-badge-rotate {
    animation: rotate 4s infinite linear;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.wd-wsc-badge-shake {
    animation: shake 3s infinite ease-in-out;
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
    }
    50% { 
        box-shadow: 0 0 25px rgba(231, 76, 60, 1), 0 0 40px rgba(231, 76, 60, 0.9);
    }
}

.wd-wsc-badge-glow {
    animation: glow 1.5s infinite ease-in-out;
}

@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

.wd-wsc-badge-flip {
    animation: flip 3s infinite ease-in-out;
}

.wd-wsc-badge-none {
    animation: none;
}

/* ========================================
   FIX ADD TO CART BUTTONS - KIDIFY THEME
======================================== */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce .related ul.products li.product .button,
.woocommerce .related ul.products li.product a.button,
.woocommerce .upsells ul.products li.product .button,
.related.products ul.products li.product .button,
.related.products ul.products li.product a.button,
section.related ul.products li.product .button,
section.related ul.products li.product a.button {
    width: auto !important;
    max-width: 180px !important;
    min-width: 100px !important;
    display: inline-block !important;
    padding: 8px 15px !important;
    margin: 8px auto 0 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* ========================================
   RELATED PRODUCTS FIXES
======================================== */
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product,
.related.products ul.products li.product,
section.related ul.products li.product {
    position: relative !important;
}

/* ========================================
   ENSURE BADGES SHOW ON ALL PRODUCTS
======================================== */
.woocommerce span.onsale {
    display: flex !important;
}

/* Kidify theme specific fixes */
.products .product span.onsale,
.related .product span.onsale,
section.related .product span.onsale {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */
@media (max-width: 768px) {
    .wd-wsc-sale-title {
        font-size: 20px !important;
        padding: 10px 20px !important;
    }
    
    .wd-wsc-countdown-timer {
        gap: 5px;
    }
    
    .wd-wsc-timer-box {
        padding: 8px 12px;
        min-width: 55px;
    }
    
    .wd-wsc-timer-number {
        font-size: 22px;
    }
    
    .wd-wsc-timer-label {
        font-size: 9px;
    }
    
    .wd-wsc-timer-separator {
        font-size: 22px;
    }
    
    .woocommerce span.onsale.wd-wsc-badge-circle {
        width: 65px !important;
        height: 65px !important;
        font-size: 8px !important;
        padding: 8px !important;
    }
    
    .woocommerce span.onsale.wd-wsc-badge-hexagon,
    .woocommerce span.onsale.wd-wsc-badge-burst {
        width: 70px;
        height: 70px;
        font-size: 7px;
        padding: 14px !important;
    }
    
    .woocommerce span.onsale.wd-wsc-badge-badge {
        width: 65px !important;
        height: 75px !important;
        font-size: 7px !important;
        padding: 12px !important;
    }
}