/**
 * Tệp CSS cho phần hiển thị (Public) của plugin Pricing Tiers Countdown.
 *
 * --- PHIÊN BẢN 5.5.2 - TỐI ƯU HIỆU ỨNG COVERFLOW SLIDER & NEO GIÁ ---
 *
 * @package     Pricing_Tiers_Countdown
 * @subpackage  Pricing_Tiers_Countdown/public/assets/css
 * @author      VŨ TRUNG KIÊN
 * @version     5.5.2
 */

/* ==========================================================================
   1. Container chính
   ========================================================================== */
.tkvdc-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 30px;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
}

/* ==========================================================================
   2. Trạng thái tải (Placeholder)
   ========================================================================== */
.tkvdc-loading-placeholder .tkvdc-timer-placeholder {
    height: 90px;
    width: 350px;
    background-color: #f0f0f0;
    border-radius: 6px;
    margin: 20px auto 25px;
}
.tkvdc-loading-placeholder .tkvdc-tiers-placeholder {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.tkvdc-loading-placeholder .tkvdc-tier-placeholder {
    height: 280px;
    width: 200px;
    background-color: #f0f0f0;
    border-radius: 6px;
}

/* ==========================================================================
   3. Header & Đồng hồ đếm ngược
   ========================================================================== */
.tkvdc-event-date-info {
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.tkvdc-timer-wrapper { margin-bottom: 25px; }
.tkvdc-timer-title { font-weight: 600; margin-bottom: 15px; }
.tkvdc-timer { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.tkvdc-timer-block { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.tkvdc-timer-number { font-size: 2.5em; font-weight: 700; line-height: 1.1; }
.tkvdc-timer-label { font-size: 0.875em; font-weight: 500; text-transform: uppercase; }
.tkvdc-timer-separator { font-size: 2.5em; font-weight: 700; line-height: 1.1; color: #cbd5e0; padding-top: 0; }
.tkvdc-timer-expired { font-size: 1.5em; font-weight: 700; color: #e53e3e; padding: 20px 0; }

/* ==========================================================================
   4. Các thông tin chung trong thẻ giá
   ========================================================================== */
.tkvdc-milestone-label { font-size: 0.8em; font-weight: 600; text-transform: uppercase; }
.tkvdc-milestone-date { font-size: 1.1em; font-weight: 700; margin-bottom: 12px; }
.tkvdc-original-price { font-size: 0.9em; }
.tkvdc-original-price .strikethrough { text-decoration: line-through; }
.tkvdc-discount-percent { font-size: 0.9em; font-weight: 600; color: #48bb78; margin-bottom: 12px; }
.tkvdc-discounted-price { font-size: 1.5em; font-weight: 800; transition: color 0.3s ease; }


/* ==========================================================================
   5. Nút CTA
   ========================================================================== */
.tkvdc-cta-wrapper { margin-top: auto; padding-top: 20px; }
.tkvdc-tier-cta {
    display: inline-block; padding: 12px 24px; border-radius: 5px; font-weight: 700;
    text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    border: none; cursor: pointer; width: 100%; box-sizing: border-box;
}
.tkvdc-tier-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.tkvdc-tier-cta.loading { cursor: wait; opacity: 0.7; }

/* ==========================================================================
   6. Nội dung sau khi hết giờ
   ========================================================================== */
.tkvdc-expired-content { padding: 20px; text-align: center; }

/* ==========================================================================
   7. Responsive chung (Mobile ≤480px)
   ========================================================================== */
@media (max-width: 480px) {
    .tkvdc-container { padding: 15px 10px; }
    .tkvdc-timer { gap: 4px; flex-wrap: wrap; justify-content: center; }
    .tkvdc-timer-block { min-width: 42px; }
    .tkvdc-timer-number { font-size: 1.5em; }
    .tkvdc-timer-separator { font-size: 1.5em; }
    .tkvdc-timer-label { font-size: 0.6em; }
}

/* ==========================================================================
   8. HIỆU ỨNG TRƯỢT COVERFLOW (MẶT ĐỒNG HỒ & DÂY ĐEO)
   ========================================================================== */

/* 8.1. Khung chứa các thẻ */
.tkvdc-countdown-wrapper .tkvdc-tiers-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    align-items: center !important;
    gap: 15px !important;
    padding-left: calc(50% - 140px) !important;
    padding-right: calc(50% - 140px) !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    border-top: none !important; 
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tkvdc-countdown-wrapper .tkvdc-tiers-container::-webkit-scrollbar {
    display: none !important;
}

/* 8.2. Style cho thẻ ở trạng thái thường (Dây đeo - Nhỏ và Mờ) */
.tkvdc-countdown-wrapper .tkvdc-tier {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    scroll-snap-align: center !important;
    padding: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transform: scale(0.85) !important; 
    opacity: 0.4 !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, box-shadow 0.4s ease !important;
    z-index: 1 !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* 8.3. Style cho thẻ khi ở TÂM ĐIỂM (Mặt đồng hồ - To và Rõ) */
.tkvdc-countdown-wrapper .tkvdc-tier.is-center {
    transform: scale(1.05) !important;
    opacity: 1 !important;
    z-index: 5 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
}

/* Ngăn bấm nhầm vào nút ở các thẻ "dây đeo" */
.tkvdc-countdown-wrapper .tkvdc-tier:not(.is-center) .tkvdc-tier-cta {
    pointer-events: none !important; 
}

/* 8.4. Thẻ ACTIVE (Đang áp dụng) và Tag */
.tkvdc-countdown-wrapper .tkvdc-tier.active {
    border-color: #ff6a00 !important;
}

.tkvdc-countdown-wrapper .tkvdc-ribbon-active {
    position: absolute !important;
    top: -16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ff6a00 !important;
    color: #fff !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 6px rgba(255, 106, 0, 0.3) !important;
    z-index: 10 !important;
}

/* 8.5. RESPONSIVE cho Slider trên Mobile */
@media (max-width: 768px) {
    .tkvdc-countdown-wrapper .tkvdc-tiers-container {
        padding-left: calc(50% - 120px) !important;
        padding-right: calc(50% - 120px) !important;
    }
    .tkvdc-countdown-wrapper .tkvdc-tier {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        min-width: 240px !important;
    }
}