/* --- Promotions Page Styles (Based on Screenshots) --- */

:root {
    --brand-red: #d32f2f;
    --brand-red-dark: #b71c1c;
    --brand-blue: #1a365d;
    --brand-blue-dark: #0f172a;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --bg-page: #fafafa;
    --border-color: #e5e7eb;
}

/* 1. Hero Red Banner */
.promo-hero-red {
    background-color: #d81b3c;
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
    text-align: center;
    color: white;
}
.promo-floating-circles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
.rcircle {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.rcircle-1 { width: 300px; height: 300px; top: -100px; left: 10%; }
.rcircle-2 { width: 150px; height: 150px; bottom: 20px; left: 30%; }
.rcircle-3 { width: 250px; height: 250px; top: 20%; right: 15%; }
.rcircle-4 { width: 100px; height: 100px; bottom: 40px; right: 5%; }

.promo-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.promo-hero-subtitle {
    color: #fef08a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.promo-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 15px 0;
    color: white;
}
.promo-hero-title .text-yellow {
    color: #fbbf24;
}
.promo-hero-desc {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 40px;
    color: rgba(255,255,255,0.9);
}

.promo-category-boxes {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cat-box {
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    background: rgba(255,255,255,0.1);
}
.cat-box span { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; }
.cat-box strong { font-size: 1.3rem; font-weight: 800; }

.promo-hero-form-wrapper {
    background: rgba(255,255,255,0.95);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}
.hero-red-form {
    display: flex;
    gap: 10px;
}
.red-form-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
}
.red-form-submit {
    background: var(--brand-red);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.red-form-submit:hover { background: var(--brand-red-dark); }
.revealed-coupon-box {
    color: var(--brand-red);
}
.revealed-coupon-box p { margin:0 0 5px 0; font-weight:bold; }
.revealed-coupon-box h2 { font-size:2.5rem; font-weight:900; margin:0; letter-spacing:3px; }

/* Main Content Layout */
.promotions-main-content {
    margin-top: 40px;
}
.promo-section {
    margin-bottom: 50px;
}

/* Headers */
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #fee2e2;
    padding-bottom: 15px;
}
.header-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
.icon-red-box {
    width: 40px; height: 40px;
    background: var(--brand-red);
    color: white;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.header-title-group h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text-main); }
.header-title-group p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

.countdown-timer {
    background: var(--brand-blue-dark);
    color: white;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: bold;
    display: flex; align-items: center; gap: 8px;
}

.section-header-simple {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
.section-header-simple h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Grids */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.coupons-grid-clean {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Ventes Flash Cards (Red Theme) */
.product-card-clean {
    background: white;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: transform 0.2s;
}
.product-card-clean:hover { box-shadow: 0 5px 15px rgba(211, 47, 47, 0.1); transform: translateY(-3px); }
.card-badges {
    position: absolute; top: 15px; left: 15px; right: 15px;
    display: flex; justify-content: space-between; z-index: 2;
}
.badge-red {
    background: var(--brand-red); color: white; padding: 4px 10px; border-radius: 20px; font-weight: bold; font-size: 0.8rem;
}
.badge-stock {
    background: #f1f5f9; color: #475569; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 0.8rem; border: 1px solid #e2e8f0;
}
.product-img-clean img { width: 100%; height: auto; margin-bottom: 15px; }
.product-info-clean h3 { font-size: 1rem; color: var(--text-main); font-weight: 600; margin: 0 0 15px 0; min-height: 40px; }
.price-block-red { margin-bottom: 10px; }
.price-block-red .price-new { color: var(--brand-red); font-size: 1.4rem; font-weight: 800; margin-right: 10px; }
.price-block-red .price-old { color: #9ca3af; text-decoration: line-through; font-size: 0.9rem; }
.stock-text { color: var(--brand-red); font-size: 0.75rem; margin-bottom: 15px; }
.btn-add-cart-red {
    background: var(--brand-red); color: white; border: none; width: 100%; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.3s;
}
.btn-add-cart-red:hover { background: var(--brand-red-dark); }

/* Coupons Cards */
.coupon-box-clean {
    background: white;
    border: 2px dashed #bfdbfe;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.coupon-box-clean::before, .coupon-box-clean::after {
    content: ''; position: absolute; top: 50%; width: 20px; height: 20px; background: var(--bg-page); border-radius: 50%; transform: translateY(-50%);
}
.coupon-box-clean::before { left: -12px; border-right: 2px dashed #bfdbfe; }
.coupon-box-clean::after { right: -12px; border-left: 2px dashed #bfdbfe; }
.coupon-box-inner { text-align: left; }
.c-value { color: var(--brand-red); font-size: 1.8rem; font-weight: 800; margin: 0 0 5px 0; }
.c-desc { font-size: 0.85rem; color: var(--text-main); margin-bottom: 15px; font-weight: 500; }
.c-desc small { color: #9ca3af; display: block; margin-top: 3px; font-weight: normal; }
.c-code-wrap {
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc; padding: 10px 15px; border-radius: 6px; border: 1px solid #e2e8f0;
}
.c-code { color: var(--brand-blue); font-weight: 700; font-family: monospace; font-size: 1.1rem; }
.c-code-wrap i { color: #94a3b8; cursor: pointer; }

/* Produits en Promotion Cards (Blue Theme) */
.product-card-blue {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.product-card-blue:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.08); }
.badge-red-small { background: var(--brand-red); color: white; padding: 3px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }
.badge-icon-right { background: #f1f5f9; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.product-info-blue .brand-text { color: #9ca3af; font-size: 0.75rem; text-transform: uppercase; margin: 0 0 5px 0; font-weight: 600; }
.product-info-blue h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 10px 0; color: var(--text-main); min-height: 38px; }
.stars { font-size: 0.8rem; margin-bottom: 15px; }
.stars span { color: #9ca3af; }
.price-action-flex { display: flex; justify-content: space-between; align-items: flex-end; }
.price-block-blue .price-new { color: var(--text-main); font-size: 1.2rem; font-weight: 800; display: block; }
.price-block-blue .price-old { color: #9ca3af; text-decoration: line-through; font-size: 0.8rem; display: block; margin-top: 2px; }
.btn-add-cart-blue {
    background: var(--brand-blue); color: white; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.btn-add-cart-blue:hover { background: #1e3a8a; }

/* Marquee Animation (Added back) */
.marquee-section {
    padding: 15px 0;
    background: var(--brand-red);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.2);
}
.marquee-content {
    display: inline-block;
    animation: marquee 25s linear infinite;
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.marquee-item i {
    color: #fef08a;
    font-size: 1.4rem;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }