/**
 * Enhanced Coupon Countdown Swiper - Main Styles
 * Version: 2.8.2
 * Description: Universal CSS for coupon swiper (all modes)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
   :root { 
    --card-main-border-radius: 8px; 
    --card-left-width-desktop: 68px; 
    --notch-size: 24px; 
    --card-fixed-height: 220px; 
    --card-fixed-width: 310px;
    --font-family-specific: "FCIconic"; 
    --coupon-default-bg: #222222;
    --coupon-flashsale-bg: #E41D3D;
    --countdown-active-color: #E41D3D;
    --countdown-inactive-color: #B3B3B3;
    --countdown-normal-color: #777777;
}

/* ============================================
   BASE SECTION STYLES
   ============================================ */
.enhanced-coupon-section {
    background: #1DE6C1 !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-swiper-container-wrapper { 
    position: relative !important; 
    max-width: 1440px !important;
    width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 1140px) {
    .enhanced-coupon-section .coupon-swiper-container-wrapper {
        padding: 40px 20px !important;
    }
}

@media (max-width: 1023px) {
    .enhanced-coupon-section .coupon-swiper-container-wrapper {
        max-width: 100% !important;
        padding: 40px 20px !important;
    }
}

@media (max-width: 768px) {
    .enhanced-coupon-section .coupon-swiper-container-wrapper {
        padding: 30px 16px !important;
        gap: 8px !important;
    }
}

/* ============================================
   TITLE STYLES
   ============================================ */
.enhanced-coupon-section .coupon-swiper-main-title { 
    color: #222222 !important; 
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 40px !important;
    line-height: 60px !important;
    letter-spacing: 0.25px !important;
    margin: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-swiper-main-subtitle { 
    color: #222 !important; 
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 36px !important;
    letter-spacing: 0.15px !important;
    margin: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.swiper-slide:first-child {
    margin-left: 16px; 
}

/* Flash Sale mode styles */
.enhanced-coupon-section .coupon-swiper-main-title.flash-sale-mode {
    color: #222222 !important;
}

.enhanced-coupon-section .coupon-swiper-main-subtitle.flash-sale-mode {
    color: #333333 !important;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */
.enhanced-coupon-section .tabs-navigation-wrapper {
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-categories-tabs { 
    display: flex !important; 
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 0 !important;
    gap: 24px !important;
    width: 100% !important;
    min-width: max-content !important;
    height: 48px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid #DBDBDB !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-categories-tabs::-webkit-scrollbar { 
    display: none !important; 
}

.enhanced-coupon-section .category-tab { 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 0 !important;
    border-radius: 8px !important;
    flex: none !important;
    flex-grow: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.enhanced-coupon-section .category-tab.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: #222222 !important;
    z-index: 3 !important;
}

.enhanced-coupon-section .category-tab > span {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 0 !important;
    gap: 4px !important;
    border-radius: 8px 8px 0 0 !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    letter-spacing: 0.25px !important;
    color: #222222 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .category-tab.active > span {
    font-weight: 600 !important;
}

/* ============================================
   CONTENT AREAS
   ============================================ */
.enhanced-coupon-section .coupon-category-content { 
    display: none !important; 
    position: relative !important; 
    z-index: 1 !important; 
    width: 100% !important;
    overflow-x: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-category-content.active { 
    display: block !important; 
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   SWIPER BASE STYLES
   ============================================ */
.enhanced-coupon-section .coupon-swiper { 
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: 220px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .swiper-slide {
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   COUPON CARD STYLES
   ============================================ */
.enhanced-coupon-section .coupon-card { 
    width: 310px !important;
    height: 220px !important;
    min-width: 310px !important;
    border-radius: 8px !important; 
    overflow: hidden !important; 
    transition: all 0.3s ease !important; 
    display: flex !important; 
    flex-direction: row !important; 
    position: relative !important; 
    background-color: white !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-card.expired {
    opacity: 0.6 !important;
    filter: grayscale(80%) !important;
}

.enhanced-coupon-section .swiper-slide.coupon-expired-hiding {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.5s ease-out !important;
    pointer-events: none !important;
}

.enhanced-coupon-section .coupon-card::before, 
.enhanced-coupon-section .coupon-card::after { 
    content: "" !important;
    position: absolute !important;
    width: var(--notch-size) !important; 
    height: var(--notch-size) !important; 
    border-radius: 50% !important; 
    background-color: #1DE6C1 !important;
    left: calc(var(--card-left-width-desktop) - (var(--notch-size) / 9)) !important; 
    z-index: 3 !important; 
}

.enhanced-coupon-section .coupon-card::before { 
    top: calc((var(--notch-size) / 2.5) * -1) !important; 
}

.enhanced-coupon-section .coupon-card::after { 
    bottom: calc((var(--notch-size) / 2.5) * -1) !important; 
}

/* ============================================
   CARD LEFT SECTION
   ============================================ */
.enhanced-coupon-section .coupon-card-left { 
    width: 68px !important; 
    color: #FFFFFF !important; 
    padding: 12px 6px !important;
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    position: relative !important; 
    flex-shrink: 0 !important; 
    z-index: 2 !important; 
    margin-right: -1px !important; 
    font-family: var(--font-family-specific) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0.25px !important;
    background: #222 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-card-left::after { 
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 55% !important;
    width: 100% !important;
    height: 45% !important;
    transform: translateX(-50%) !important;
    background-image: var(--card-icon-svg, none) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    z-index: 1 !important;
}

.enhanced-coupon-section .coupon-category-on-card { 
    font-family: var(--font-family-specific) !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    line-height: 20px !important; 
    position: relative !important; 
    z-index: 2 !important; 
    margin-bottom: 2px !important; 
    color: #FFFFFF !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   CARD RIGHT SECTION
   ============================================ */
.enhanced-coupon-section .coupon-card-right { 
    flex: 1 !important; 
    padding: 12px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: flex-start !important; 
    position: relative !important; 
    background-color: #FFFFFF !important; 
    z-index: 1 !important; 
    min-width: 0 !important; 
    flex-grow: 1 !important; 
    font-family: var(--font-family-specific) !important; 
    width: 190px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-card-header { 
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .coupon-type { 
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.25px !important;
    color: #222222 !important;
    margin: 0 0 2px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Flashsale type: turn coupon title red to match type color */
.enhanced-coupon-section .card-type-flashsale .coupon-type {
    color: #E41D3D !important;
}

.enhanced-coupon-section .coupon-subtitle { 
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0.25px !important;
    color: #222 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   COUNTDOWN CONTAINER
   ============================================ */
.enhanced-coupon-section .countdown-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-end;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .normal-interest-rate {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
    width: 190px !important;
    border-radius: 6px !important;
    flex: none !important;
    flex-grow: 0 !important;
    justify-content: center !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    letter-spacing: 0.25px !important;
    text-align: left !important;
    color: #777;
}

.enhanced-coupon-section .card-type-normal .normal-interest-rate {
    color: #777 !important;
}

.enhanced-coupon-section .card-type-flashsale .normal-interest-rate {
    color: var(--coupon-flashsale-bg) !important;
}

/* ============================================
   COUNTDOWN TIMER
   ============================================ */
.enhanced-coupon-section .countdown-timer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    padding: 0 !important;
    width: 190px !important;
    height: 54px !important;
    border-radius: 6px !important;
    flex: none !important;
    flex-grow: 0 !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .hidden-timer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.enhanced-coupon-section .flashsale-timer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-coupon-section .normal-timer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.enhanced-coupon-section .countdown-status {
    width: 168px !important;
    height: 18px !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 9px !important;
    line-height: 18px !important;
    letter-spacing: 0.25px !important;
    color: #777777 !important;
    flex: none !important;
    order: 0 !important;
    align-self: stretch !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-content-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    width: 160px !important;
    height: 36px !important;
    flex: none !important;
    order: 1 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-labels {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 16px !important;
    width: 160px !important;
    height: 18px !important;
    flex: none !important;
    order: 0 !important;
    align-self: stretch !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-label-item {
    width: 40px !important;
    height: 18px !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    letter-spacing: 0.25px !important;
    flex: none !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 0.3s ease !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-label-item.active {
    color: var(--countdown-active-color) !important;
}

.enhanced-coupon-section .countdown-label-item.inactive {
    color: var(--countdown-inactive-color) !important;
}

.enhanced-coupon-section .countdown-numbers {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 4px !important;
    width: 160px !important;
    height: 18px !important;
    flex: none !important;
    order: 1 !important;
    align-self: stretch !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-number {
    width: 40px !important;
    height: 18px !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    letter-spacing: 0.25px !important;
    flex: none !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 0.3s ease !important;
    text-shadow: none !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-number.active {
    color: var(--countdown-active-color) !important;
}

.enhanced-coupon-section .countdown-number.inactive {
    color: var(--countdown-inactive-color) !important;
}

.enhanced-coupon-section .countdown-separator {
    width: 8px !important;
    height: 18px !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    letter-spacing: 0.25px !important;
    flex: none !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 0.3s ease !important;
    text-shadow: none !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .countdown-separator.active {
    color: var(--countdown-active-color) !important;
}

.enhanced-coupon-section .countdown-separator.inactive {
    color: var(--countdown-inactive-color) !important;
}

.enhanced-coupon-section .countdown-expired {
    font-family: var(--font-family-specific) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    color: #FFFFFF !important;
    text-align: center !important;
    background: #999999 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .card-type-flashsale .countdown-number.active {
    animation: pulse-number 1.5s infinite !important;
}

/* ✅ Normal timer styles */
.enhanced-coupon-section .normal-timer .countdown-label-item.active,
.enhanced-coupon-section .normal-timer .countdown-number.active,
.enhanced-coupon-section .normal-timer .countdown-separator.active {
    color: var(--countdown-normal-color) !important;
}

.enhanced-coupon-section .normal-timer .countdown-status {
    color: #777777 !important;
}

@keyframes pulse-number {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================
   DETAILS LINK
   ============================================ */
.enhanced-coupon-section .details-link {
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .details-link .details-button {
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    letter-spacing: 0.25px !important;
    color: #0076D6 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .details-link .details-button:hover {
    text-decoration: underline !important;
    color: #005bb5 !important;
}

/* ============================================
   COUPON ACTIONS
   ============================================ */
.enhanced-coupon-section .coupon-actions { 
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 8px !important;
    height: 32px !important;
    margin: 0 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .discount-code-wrapper { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    width: 75px !important;
    background: #FFFFFF !important;
    border: 1px solid #DBDBDB !important;
    border-radius: 6px !important;
    flex: none !important;
    order: 0 !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .discount-code { 
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 0.25px !important;
    color: #222222 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 59px !important;
    flex: none !important;
    order: 1 !important;
    flex-grow: 1 !important;
    text-align: center !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-transform: uppercase;
}

.enhanced-coupon-section .copy-button { 
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    background: var(--coupon-default-bg) !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex: none !important;
    order: 1 !important;
    flex-grow: 0 !important;
    font-family: var(--font-family-specific) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    text-align: center !important;
    letter-spacing: 0.25px !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-coupon-section .card-type-flashsale .copy-button {
    background: #222 !important; 
}

.enhanced-coupon-section .copy-button:hover { 
    color: #1DE6C1 !important;
    background: #222 !important; 
    transform: scale(1.02) !important;
}

/* ============================================
   CARD COLOR STYLES
   ============================================ */
.enhanced-coupon-section .card-color-black,
.enhanced-coupon-section .card-type-normal .coupon-card-left { 
    background: #222 !important;
}

.enhanced-coupon-section .card-color-red,
.enhanced-coupon-section .card-type-flashsale .coupon-card-left { 
    background: #E41D3D !important;
}

/* ============================================
   THEME OVERRIDES (independent from type)
   Apply a theme via card class: .coupon-card.card-color-*
   These rules override the type-based fallback above
   ============================================ */
.enhanced-coupon-section .coupon-card.card-color-black .coupon-card-left { background: #222 !important; }
.enhanced-coupon-section .coupon-card.card-color-red .coupon-card-left { background: #E41D3D !important; }
.enhanced-coupon-section .coupon-card.card-color-teal .coupon-card-left { background: #1DE6C1 !important; }
.enhanced-coupon-section .coupon-card.card-color-blue .coupon-card-left { background: #1976D2 !important; }
.enhanced-coupon-section .coupon-card.card-color-green .coupon-card-left { background: #2E7D32 !important; }
.enhanced-coupon-section .coupon-card.card-color-orange .coupon-card-left { background: #F57C00 !important; }
.enhanced-coupon-section .coupon-card.card-color-purple .coupon-card-left { background: #7B1FA2 !important; }

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */
.enhanced-coupon-section .coupon-swiper-button-prev, 
.enhanced-coupon-section .coupon-swiper-button-next { 
    position: absolute !important;
    top: 68% !important;
    transform: translateY(-60%) !important;
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
    border-radius: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.enhanced-coupon-section .coupon-swiper-button-prev {
    left: -50px !important;
    background: #FFF !important;
}

.enhanced-coupon-section .coupon-swiper-button-next {
    right: -50px !important;
    background: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
}

.enhanced-coupon-section .coupon-swiper-button-prev::after,
.enhanced-coupon-section .coupon-swiper-button-next::after {
    content: "" !important;
    font-size: 0 !important;
}

.enhanced-coupon-section .coupon-swiper-button-prev::before {
    content: "‹" !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #222 !important;
    line-height: 1 !important;
}

.enhanced-coupon-section .coupon-swiper-button-next::before {
    content: "›" !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #222222 !important;
    line-height: 1 !important;
}

.enhanced-coupon-section .coupon-swiper-button-prev.smart-show:hover {
    background: #1DB598 !important;
    border: none !important;
    transform: translateY(-60%) scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.enhanced-coupon-section .coupon-swiper-button-prev.smart-show:hover::before {
    color: #1DE6C1 !important;
}

.enhanced-coupon-section .coupon-swiper-button-next.smart-show:hover {
    background: #1DB598 !important;
    border: none !important;
    transform: translateY(-60%) scale(1.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.enhanced-coupon-section .coupon-swiper-button-next.smart-show:hover::before {
    color: #1DE6C1 !important;
}

/* ============================================
   RESPONSIVE STYLES - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .enhanced-coupon-section .coupon-swiper-container-wrapper {
        padding: 30px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .swiper-slide:first-child {
        margin-left: 0 !important;
    }
    
    .enhanced-coupon-section .coupon-swiper-main-title {
        font-size: 24px !important;
        line-height: 36px !important;
    }
    
    .enhanced-coupon-section .coupon-swiper-main-subtitle { 
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 24px !important;
    }
    
    .enhanced-coupon-section .coupon-type { 
        font-size: 14px !important;
        line-height: 18px !important;
    }
    
    .enhanced-coupon-section .normal-interest-rate {
        font-size: 12px !important;
        line-height: 18px !important;
        height: 44px !important;
        width: 100% !important;
        color: #777;
    }
    
    .enhanced-coupon-section .coupon-swiper {
        cursor: grab !important;
    }
    
    .enhanced-coupon-section .coupon-swiper:active {
        cursor: grabbing !important;
    }
    
    .enhanced-coupon-section .swiper-wrapper {
        padding-right: 16px !important;
    }
    
    .enhanced-coupon-section .swiper-slide {
        user-select: none !important;
        width: 310px !important;
        margin-right: 16px !important;
    }
    
    .enhanced-coupon-section .coupon-card {
        width: 310px !important;
        height: 220px !important;
        min-width: 310px !important;
    }
    
    .enhanced-coupon-section .coupon-swiper-button-prev, 
    .enhanced-coupon-section .coupon-swiper-button-next {
        display: none !important;
    }
    
    .enhanced-coupon-section .tabs-navigation-wrapper {
        overflow: scroll !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
        width: calc(100% + 32px) !important;
    }
}

/* ============================================
   RESPONSIVE STYLES - TABLET
   ============================================ */
@media (min-width: 769px) and (max-width: 1023px) {
    .enhanced-coupon-section .coupon-swiper-container-wrapper {
        padding: 35px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .enhanced-coupon-section .swiper-wrapper {
        padding-right: 20px !important;
    }
    
    .enhanced-coupon-section .swiper-slide {
        width: 310px !important;
        margin-right: 20px !important;
    }
    
    .enhanced-coupon-section .coupon-card {
        width: 310px !important;
        height: 220px !important;
        min-width: 310px !important;
    }
    
    .enhanced-coupon-section .coupon-swiper-button-prev, 
    .enhanced-coupon-section .coupon-swiper-button-next {
        display: none !important;
    }
}

/* ============================================
   ✅ SECTION TITLES (แทน Tabs)
   ============================================ */
.coupon-section-wrapper {
    margin-bottom: 40px;
    width: 100%;
}

.coupon-section-wrapper .section-title {
    font-family: 'FCIconic', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 24px 0;
    padding: 0;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.flashsale-section .section-title {
    color: #E41D3D;
}

.normal-section .section-title {
    color: #1DE6C1;
}

.category-section .section-title {
    color: #444;
}

/* ซ่อน tabs navigation (ไม่ใช้แล้ว) */
.tabs-navigation-wrapper,
.coupon-categories-tabs {
    display: none !important;
}

/* ============================================
   FLASHSALE PROGRESS BAR
   ============================================ */
.enhanced-coupon-section .flashsale-usage {
    margin-top: 8px !important;
}
.enhanced-coupon-section .flashsale-progress-track {
    width: 100% !important;
    height: 8px !important;
    background: #f1f1f1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.enhanced-coupon-section .flashsale-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ff5b5b, #ff8a8a) !important;
    width: 0% ;
    transition: width .35s ease, background .35s ease !important;
}
.enhanced-coupon-section .flashsale-progress-label {
    margin-top: 0px !important;
    font-family: var(--font-family-specific) !important;
    font-size: 12px !important;
    color: #E41D3D !important;
    font-weight: 600 !important;

}

/* Normal type: simple usage counter label */
.enhanced-coupon-section .normal-usage {
    margin-top: 8px !important;
}

/* Normal progress bar - same look as flashsale */
.enhanced-coupon-section .normal-progress-track {
    width: 100% !important;
    height: 8px !important;
    background: #f1f1f1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.enhanced-coupon-section .normal-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ff5b5b, #ff8a8a) !important;
    width: 0% ;
    transition: width .35s ease, background .35s ease !important;
}
.enhanced-coupon-section .normal-progress-label {
    margin-top: 0px !important;
    font-family: var(--font-family-specific) !important;
    font-size: 12px !important;
    color: #E41D3D !important;
    font-weight: 600 !important;
}