/* =====================================================
   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 ===== */
/* ===== FLASH SALE HEADER ===== */
.flash-sale-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 8px 15px;
    border-radius  : 4px 4px 0 0;
    gap            : 10px;
}

.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;
    height       : fit-content;
}

/* ===== 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;
    }

    .puramu-flash-sale-stats {
        font-size: 10px;
    }
}

@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;
    color      : #333533;
}

.flash-sale-end-text {
    font-weight: 600;
    font-size  : 20px;
    color      : #333533;
}

@media (max-width: 768px) {
    .puramu-flash-sale-countdown-item {
        font-size: 16px;
    }

    .flash-sale-end-text {
        font-size: 18px;
    }
}

.puramu-flash-sale-countdown-item-text {
    display: none;
}

/* ===== SLIDER CONTAINER ===== */
.flash-sale-slider-container {
    margin             : 0 auto;
    max-width          : 100%;
    border-radius      : 20px;
    overflow           : hidden;
    background-image   : url('../image/Rectangle 24.jpg');
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
}

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

/* ===== 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       : 20px 20px 10px 20px;
        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: 0 20px 20px 20px;
}

.flash-sale-slider-content>div>.swiper-wrapper {
    padding-bottom: 5px;
}

.flash-sale-slider-content .swiper-button-next,
.flash-sale-slider-content .swiper-button-prev {
    width     : 50px;
    height    : 50px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3),
        0px 2px 6px 2px rgba(60, 64, 67, 0.15);
    border-radius  : 9999px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.flash-sale-slider-content .swiper-button-next::after,
.flash-sale-slider-content .swiper-button-prev::after {
    font-size: 20px;
    color    : #000;
}

.puramu-flash-sale-progress-container {
    padding: 12px 20px 0 20px;
}

.puramu-flash-sale-product-detail {
    padding: 20px 0 0 0;
}

@media (max-width: 1024px) {

    .flash-sale-slider-content .swiper-button-next,
    .flash-sale-slider-content .swiper-button-prev {
        width : 36px;
        height: 36px;
    }

    .flash-sale-slider-content .swiper-button-next::after,
    .flash-sale-slider-content .swiper-button-prev::after {
        font-size: 16px;
    }

    .puramu-flash-sale-product-detail {
        padding: 10px 0px;
    }

    .puramu-flash-sale-progress-container {
        padding: 6px 10px 0 10px;
    }
}


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

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

.price-group {
    display    : flex;
    align-items: center;
    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;
}

.flash-sale-slider-container>.flash-sale-slider-content>.mySwiper>.swiper-wrapper>.swiper-slide>div>.loop-shop-price>span:first-child {
    color: #D00000 !important;
}

.flash-sale-slider-container>.flash-sale-slider-content>.mySwiper>.swiper-wrapper>.swiper-slide>div>.loop-shop-price>span:last-child {
    text-decoration-line: line-through !important;
    color               : #B2A496 !important;
}

.puramu-flash-sale-product-detail>.flash-sale-price>.price-row {
    display       : flex;
    flex-direction: column;
    gap           : 10px !important;
}

.puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.sale-price .woocommerce-Price-amount.amount {
    color    : #D00000 !important;
    font-size: 48px !important;
}

.puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.price-group>.regular-price,
.puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.price-group>.regular-price .woocommerce-Price-amount.amount {
    color          : unset !important;
    text-decoration: unset !important;
    font-weight    : unset !important;
    font-size      : unset !important;
}

.puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.price-group>.regular-price .woocommerce-Price-amount.amount>bdi {
    color          : #333533 !important;
    font-size      : 30px !important;
    font-weight    : 400 !important;
    text-decoration: line-through !important;
}

@media (max-width: 768px) {
    .puramu-flash-sale-product-detail>.flash-sale-price>.price-row {
        gap: 5px !important;
    }

    .puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.sale-price .woocommerce-Price-amount.amount {
        font-size: 30px !important;
    }

    .puramu-flash-sale-product-detail>.flash-sale-price>.price-row>.price-group>.regular-price .woocommerce-Price-amount.amount>bdi {
        font-size: 24px !important;
    }
}