/* =====================================================
   PURAMU FLASH SALE - FRONTEND CSS
   Chỉ chứa CSS cấu trúc (layout, spacing, sizing)
   Màu sắc được quản lý bởi Customizer modules
   ===================================================== */

/* ===== PRODUCT DETAIL CONTAINER ===== */
.puramu-flash-sale-product-detail {
    margin-bottom: 20px;
}

/* ===== FLASH SALE HEADER ===== */
.flash-sale-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 8px 15px;
    border-radius  : 4px 4px 0 0;
}

.flash-sale-label {
    font-size  : 22px;
    font-weight: bold;
    display    : flex;
    align-items: center;
}

.flash-sale-divider-icon {
    width       : 100px;
    height      : auto;
    aspect-ratio: 50/50;
    object-fit  : contain;
}

.flash-icon {
    font-size: 18px;
    margin   : 0 2px;
}

/* ===== COUNTDOWN TIMER ===== */
.flash-sale-countdown {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.countdown-label {
    font-size     : 16px;
    font-weight   : bold;
    text-transform: uppercase;
}

.countdown-timer {
    display: flex;
    gap    : 5px;
}

.countdown-timer.countdown-expired,
.flash-sale-countdown.flash-sale-expired {
    opacity: 0.7;
}

.countdown-timer.countdown-expired .timer-block {
    opacity: 0.5;
}

.timer-block {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    border-radius  : 4px;
    padding        : 2px 5px;
    min-width      : 40px;
    aspect-ratio   : 1/1;
    text-align     : center;
    justify-content: center;
    transition     : background-color 0.3s ease;
}

.timer-value {
    font-size  : 18px;
    font-weight: bold;
    line-height: 1;
    transition : color 0.3s ease;
}

.timer-unit {
    font-size     : 10px;
    line-height   : 1;
    padding-bottom: 2px;
    transition    : color 0.3s ease;
}

/* ===== PRICE SECTION ===== */
.flash-sale-price {
    padding        : 10px 15px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    border-radius  : 0 0 4px 4px;
}

.stock.in-stock {
    display: none !important;
}

.sale-price {
    font-size  : 24px;
    font-weight: bold;
}

.regular-price {
    font-size      : 14px;
    font-weight    : 500;
    text-decoration: line-through;
}

/* Bỏ line-through cho giá gốc khi sản phẩm đã hết số lượng sale */
.flash-sale-sold-out .regular-price {
    text-decoration: none;
}

.discount-badge {
    font-size    : 14px;
    font-weight  : 500;
    padding      : 4px 8px;
    border-radius: 4px;
}

/* ===== PROGRESS BAR ===== */
.puramu-flash-sale-progress {
    height       : 15px;
    width        : 100%;
    border-radius: 10px;
    overflow     : hidden;
    position     : relative;
}

.puramu-flash-sale-progress-bar {
    height       : 100%;
    border-radius: 10px;
    transition   : width 0.3s ease;
}

.puramu-flash-sale-stats {
    display        : flex;
    justify-content: space-between;
    margin-top     : 5px;
    gap            : 10px;
    font-size      : 0.85em;
    font-weight    : bold;
}

.puramu-flash-sale-date {
    gap        : 10px;
    display    : flex;
    align-items: center;
}

.puramu-flash-sale-countdown {
    display: flex;
    gap    : 10px;
}

@media (max-width: 768px) {
    .puramu-flash-sale-countdown {
        gap: 5px;
    }
}

@media (max-width: 400px) {
    .puramu-flash-sale-countdown {
        gap: 3px;
    }
}

.puramu-flash-sale-progress-label {
    display    : flex;
    align-items: center;
    gap        : 5px;
    position   : relative;
}

.puramu-flash-sale-progress-icon {
    width       : 20px;
    height      : 20px;
    aspect-ratio: 1/1;
    object-fit  : contain;
    position    : absolute;
    z-index     : 10;
    bottom      : -1px;
    left        : -5px;
}

/* ===== COUNTDOWN ITEMS ===== */
.puramu-flash-sale-countdown-items {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    gap            : 0px;
    padding        : 5px;
    border-radius  : 5px;
    aspect-ratio   : 1/1;
    min-width      : 48px;
}

@media (max-width: 768px) {
    .puramu-flash-sale-countdown-items {
        min-width: 40px;
    }
}

.puramu-flash-sale-countdown-item {
    font-size  : 18px;
    font-weight: 600;
    line-height: 1;
}

.flash-sale-end-text {
    font-size     : 16px;
    font-weight   : bold;
    text-transform: uppercase;
}

.puramu-flash-sale-countdown-item-text {
    font-size: 12px;
}

/* ===== SLIDER CONTAINER ===== */
.flash-sale-slider-container {
    margin       : 0 auto;
    max-width    : 100%;
    border-radius: 10px;
    overflow     : hidden;
}

.flash-sale-header-container {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 20px;
}

/* ===== ANIMATIONS ===== */
@keyframes gradientFlash {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .flash-sale-header-container {
        flex-direction: column;
        padding       : 16px;
        gap           : 10px;
        align-items   : center;
    }
}

/* ===== TITLE & HEADING ===== */
.flash-sale-title-wrapper {
    font-family    : 'Arial', sans-serif;
    font-size      : 24px;
    font-weight    : bold;
    text-transform : uppercase;
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : 10px;
    position       : relative;
}

.flash-sale-heading {
    font-family   : sans-serif;
    font-size     : 20px;
    font-weight   : bold;
    text-transform: uppercase;
}

/* ===== TIMER WRAPPER ===== */
.flash-sale-timer-wrapper {
    display    : flex;
    align-items: center;
    gap        : 20px;
    flex-shrink: 0;
}

/* ===== INACTIVE & COMING SOON STATES ===== */
.flash-sale-inactive .flash-sale-label {
    opacity: 0.6;
}

.flash-sale-next {
    font-size    : 0.8em;
    padding      : 2px 5px;
    border-radius: 3px;
    margin-left  : 5px;
}

.countdown-label {
    margin   : 0 0 5px;
    font-size: 0.9em;
}

.flash-sale-coming-soon .sale-price.coming-soon {
    font-size      : 0.9em;
    text-decoration: none;
    font-weight    : normal;
}

.flash-sale-coming-soon .regular-price.active {
    font-weight    : bold;
    text-decoration: none;
    font-size      : 1.2em;
}

/* ===== FLASH SALE SCHEDULE ===== */
.flash-sale-schedule {
    margin-top   : 15px;
    padding      : 10px;
    background   : #f9f9f9;
    border-radius: 5px;
}

.flash-sale-schedule h4 {
    margin   : 0 0 10px;
    font-size: 1em;
}

.flash-sale-schedule ul {
    margin      : 0;
    padding-left: 20px;
}

.flash-sale-schedule li {
    margin-bottom: 5px;
}

.flash-sale-slider-content {
    padding: 20px;
}

@media (max-width: 768px) {
    .flash-sale-slider-content {
        padding: 10px;
    }
}

/* ===== TAB NAVIGATION ===== */

.price-group {
    display: flex;
    gap    : 5px;
}

.flash-sale-tabs-nav {
    display        : flex;
    gap            : 20px;
    justify-content: center;
    align-items    : center;
    padding        : 40px 0 20px 0;
    flex-wrap      : wrap;
}

@media (max-width: 768px) {
    .flash-sale-tabs-nav {
        gap    : 10px;
        padding: 20px 0 10px 0;
    }
}

.flash-sale-tab-btn {
    border-radius  : 8px;
    box-sizing     : border-box;
    cursor         : pointer;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 2px;
    padding        : 10px 20px;
    font-size      : 16px;
    font-weight    : 600;
    text-transform : uppercase;
    border         : 1px solid transparent;
    transition     : all 0.3s ease;
}

.flash-sale-tab-panel {
    display: none;
}

.flash-sale-tab-panel.active {
    display: block;
}

.flash-sale-coming-soon-price {
    width      : 100%;
    text-align : center;
    font-size  : 16px;
    font-weight: 600;
}

/* ===== TƯƠNG THÍCH VỚI THEME FLATSOME ===== */
/* Đảm bảo thanh tiến trình hiển thị đúng trong price-wrapper của Flatsome */
.price-wrapper .puramu-flash-sale-progress-container {
    margin-top: 8px;
    width     : 100%;
}

/* Đảm bảo thanh tiến trình không bị ẩn bởi CSS của theme */
.box-text .puramu-flash-sale-progress-container {
    display   : block;
    visibility: visible;
    opacity   : 1;
}

/* Đảm bảo stats hiển thị đúng */
.price-wrapper .puramu-flash-sale-stats {
    margin-top: 5px;
    font-size : 0.85em;
}

/* Ẩn giá mặc định trong trang chi tiết khi sản phẩm đang có flash sale để tránh hiển thị trùng lặp */
body.single-product.puramu-single-flash-sale-active .product-info .price-wrapper,
body.single-product.puramu-single-flash-sale-active .product-info .price.product-page-price {
    display: none !important;
}