/**
 * Flash Deals Section - Dedicated Responsive Styles
 * Loaded after style.css and responsive-layout-fixes.css
 * Provides fluid typography, adaptive promo panel, and safe slider arrows.
 */

/* ============================================
   FLASH DEALS SECTION - FLUID RESPONSIVE SYSTEM
   ============================================ */

/* Section base fluid padding */
.section-flash-deals {
    padding: clamp(40px, 6vw, 80px) clamp(12px, 2vw, 20px);
}

/* Container top offset — safer on mobile */
.flash-container {
    margin-top: clamp(-10px, -1.5vw, -30px);
}

/* ============================================
   PROMO PANEL (LEFT SIDE)
   ============================================ */

.flash-promo {
    padding: clamp(24px, 3.5vw, 48px) clamp(16px, 2.5vw, 32px);
}

.flash-title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    margin-bottom: clamp(10px, 1.5vw, 16px);
}

.flash-badge-white {
    font-size: clamp(9px, 1vw, 10px);
    padding: clamp(4px, 0.6vw, 6px) clamp(8px, 1vw, 12px);
    margin-bottom: clamp(14px, 2vw, 24px);
}

.flash-badge-red {
    font-size: clamp(13px, 1.4vw, 16px);
    padding: clamp(6px, 1vw, 8px) clamp(10px, 1.2vw, 16px);
    margin-bottom: clamp(20px, 2.5vw, 32px);
    /* Safer rotation on very small screens */
    transform: rotate(clamp(-2deg, -0.5vw, -4deg));
}

.flash-promo-text {
    font-size: clamp(15px, 1.6vw, 18px);
    margin-bottom: clamp(4px, 0.6vw, 8px);
}

.flash-promo-sub {
    font-size: clamp(10px, 1vw, 11px);
}

/* ============================================
   PRODUCTS PANEL (RIGHT SIDE)
   ============================================ */

.flash-products {
    padding: clamp(20px, 3vw, 40px);
}

.flash-products-header {
    margin-bottom: clamp(16px, 2vw, 24px);
    gap: clamp(10px, 1.5vw, 14px);
}

.flash-products-title {
    font-size: clamp(16px, 1.8vw, 20px);
    gap: clamp(6px, 0.8vw, 8px);
}

.flash-products-title i {
    font-size: clamp(18px, 2vw, 22px);
}

/* View All button */
.btn-view-all,
.btn-view-all-1 {
    padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1.2vw, 16px);
    font-size: clamp(11px, 1.1vw, 13px);
    gap: clamp(4px, 0.5vw, 6px);
}

/* ============================================
   SLIDER SHELL & ARROWS
   ============================================ */

.flash-slider-shell {
    padding: 0 clamp(14px, 2vw, 26px);
}

.flash-arrow {
    width: clamp(34px, 3.5vw, 42px);
    height: clamp(34px, 3.5vw, 42px);
}

.flash-arrow i {
    font-size: clamp(16px, 1.8vw, 22px);
}

.flash-arrow-prev {
    left: clamp(-2px, -0.5vw, -6px);
}

.flash-arrow-next {
    right: clamp(-2px, -0.5vw, -6px);
}

/* ============================================
   FLASH CARDS
   ============================================ */

.flash-card {
    padding: clamp(10px, 1.2vw, 16px);
    border-radius: clamp(12px, 1.2vw, 16px);
}

.flash-card-image {
    height: clamp(130px, 14vw, 180px);
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.flash-card-top {
    margin-bottom: clamp(8px, 1vw, 12px);
}

.flash-icon-heart {
    font-size: clamp(16px, 1.8vw, 20px);
}

.flash-card-badge {
    font-size: clamp(8px, 0.9vw, 9px);
    padding: clamp(3px, 0.4vw, 4px) clamp(6px, 0.7vw, 8px);
}

.flash-card-rating {
    font-size: clamp(10px, 1vw, 11px);
    margin-bottom: clamp(6px, 0.8vw, 8px);
}

.flash-card-name {
    font-size: clamp(14px, 1.5vw, 18px);
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.flash-card-price {
    margin-bottom: clamp(12px, 1.2vw, 16px);
    gap: clamp(6px, 0.8vw, 8px);
}

.price-current {
    font-size: clamp(16px, 1.8vw, 20px);
}

.price-old {
    font-size: clamp(11px, 1vw, 12px);
}

.btn-add-cart {
    padding: clamp(10px, 1.2vw, 12px);
    font-size: clamp(12px, 1.1vw, 14px);
    gap: clamp(6px, 0.8vw, 8px);
    border-radius: clamp(6px, 0.8vw, 8px);
}

/* ============================================
   TABLET ADJUSTMENTS (<= 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .flash-wrapper {
        grid-template-columns: 1fr;
    }

    .flash-promo {
        align-items: center;
        text-align: center;
        padding: 32px 20px;
    }

    .flash-products {
        padding: 28px 20px;
    }

    .flash-slider-shell {
        padding: 0 20px;
    }
}

/* ============================================
   SMALL TABLET / LARGE PHONE (<= 991px)
   ============================================ */
@media (max-width: 991px) {
    .flash-products-header {
        flex-wrap: wrap;
    }

    .flash-products-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .flash-card-image {
        height: clamp(150px, 18vw, 170px);
    }
}

/* ============================================
   MOBILE (<= 768px)
   ============================================ */
@media (max-width: 768px) {
    .section-flash-deals {
        padding: 36px 12px;
    }

    .flash-promo {
        padding: 24px 16px;
    }

    .flash-title {
        font-size: clamp(28px, 7vw, 36px);
    }

    .flash-badge-red {
        transform: rotate(-2deg);
    }

    .flash-products {
        padding: 20px 14px;
    }

    .flash-products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .flash-products-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .flash-slider-shell {
        padding: 0 16px;
    }

    .flash-arrow {
        width: 36px;
        height: 36px;
    }

    .flash-arrow-prev {
        left: -2px;
    }

    .flash-arrow-next {
        right: -2px;
    }

    .flash-card {
        padding: 12px;
    }

    .flash-card-image {
        height: clamp(140px, 28vw, 160px);
    }

    .flash-card-name {
        font-size: 14px;
    }

    .price-current {
        font-size: 16px;
    }

    .btn-add-cart {
        padding: 10px;
        font-size: 12px;
    }
}

/* ============================================
   SMALL MOBILE (<= 576px)
   ============================================ */
@media (max-width: 576px) {
    .flash-promo {
        padding: 20px 12px;
    }

    .flash-title {
        font-size: 26px;
    }

    .flash-badge-white {
        font-size: 9px;
    }

    .flash-badge-red {
        font-size: 13px;
        padding: 6px 12px;
    }

    .flash-products {
        padding: 16px;
    }

    .flash-products-title {
        font-size: 15px;
    }

    .flash-slider-shell {
        padding: 0 14px;
    }

    .flash-arrow {
        width: 32px;
        height: 32px;
    }

    .flash-arrow i {
        font-size: 14px;
    }

    .flash-card {
        padding: 10px;
        border-radius: 12px;
    }

    .flash-card-image {
        height: 150px;
    }

    .flash-card-name {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .flash-card-price {
        margin-bottom: 12px;
    }

    .price-current {
        font-size: 15px;
    }

    .price-old {
        font-size: 11px;
    }

    .btn-add-cart {
        padding: 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    .btn-view-all,
    .btn-view-all-1 {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (<= 375px)
   ============================================ */
@media (max-width: 375px) {
    .flash-title {
        font-size: 22px;
    }

    .flash-promo-text {
        font-size: 14px;
    }

    .flash-products {
        padding: 12px;
    }

    .flash-card-image {
        height: 130px;
    }

    .flash-card-name {
        font-size: 12px;
    }

    .price-current {
        font-size: 14px;
    }

    .btn-add-cart {
        font-size: 11px;
    }
}

/* ============================================
   SLICK CAROUSEL MOBILE OVERRIDES
   One full-width card per slide on phones/tablets.
   ============================================ */
@media (max-width: 767px) {
    .flash-deals-slider .slick-list {
        margin: 0 -8px !important;
        padding: 4px 0 10px !important;
        overflow: hidden;
    }

    .flash-slide {
        padding: 0 8px !important;
    }

    .flash-deals-slider .slick-track {
        display: flex;
        align-items: stretch;
    }

    .flash-deals-slider .slick-slide {
        height: inherit !important;
    }

    .flash-deals-slider .slick-slide > div {
        height: 100%;
    }

    .flash-slide .flash-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .flash-card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.35;
        word-break: break-word;
    }

    .flash-card-name a {
        display: block;
    }

    .flash-card-rating {
        flex-wrap: wrap;
    }

    .rating-count {
        font-size: 10px;
    }
}

@media (max-width: 375px) {
    .flash-deals-slider .slick-list {
        margin: 0 -6px !important;
    }

    .flash-slide {
        padding: 0 6px !important;
    }
}

/* ============================================
   FALLBACK: NO-JS / SLICK-FAILURE GRID LAYOUT
   If Slick carousel fails to load or init,
   flash cards fall back to a clean CSS grid.
   ============================================ */
.flash-deals-slider:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.flash-deals-slider:not(.slick-initialized) .flash-slide {
    padding: 0;
    height: auto;
}

@media (max-width: 991px) {
    .flash-deals-slider:not(.slick-initialized) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .flash-deals-slider:not(.slick-initialized) {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}