/* ======================================================
   SEAN B SHOP
   DEALS PAGE
   assets/css/pages/deals.css
====================================================== */



/* ======================================================
   PAGE WRAPPER
====================================================== */


.deals-page{

    background:#f5f7fa;

    min-height:100vh;

    padding-bottom:50px;

}



/* ======================================================
   DEAL HERO
====================================================== */


.deals-hero{

    margin-top:0;

    background:

    linear-gradient(
    135deg,
    #0b1f3a,
    #152f55
    );

    color:#fff;

    padding:45px 0;

}



.deals-hero-content{

    text-align:center;

}



.deal-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e60000;

    color:#fff;

    padding:7px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    margin-bottom:15px;

}



.deals-hero h1{

    font-size:42px;

    font-weight:800;

    margin-bottom:12px;

}



.deals-hero p{

    font-size:16px;

    opacity:.9;

    margin-bottom:30px;

}





/* ======================================================
   COUNTDOWN
====================================================== */


.deal-countdown{

    display:flex;

    justify-content:center;

    gap:15px;

}



.deal-countdown div{

    width:80px;

    height:75px;

    background:#fff;

    color:#0b1f3a;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

    0 8px 20px rgba(0,0,0,.15);

}



.deal-countdown strong{

    font-size:25px;

    font-weight:800;

}



.deal-countdown span{

    font-size:12px;

    color:#777;

}





/* ======================================================
   FLASH DEAL SECTION
====================================================== */


.flash-deals{

    padding:40px 0;

}



.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.section-tag{

    color:#e60000;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}



.section-header h2{

    margin:5px 0 0;

    color:#0b1f3a;

    font-size:28px;

}



.section-header a{

    color:#e60000;

    font-size:14px;

    font-weight:600;

}





/* ======================================================
   DEAL GRID
====================================================== */


.deal-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:15px;

}





/* ======================================================
   DEAL CARD
====================================================== */


.deal-card{

    position:relative;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    transition:.25s ease;

    border:1px solid #eee;

}



.deal-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 12px 25px rgba(0,0,0,.12);

}





/* ======================================================
   DISCOUNT BADGE
====================================================== */


.discount-badge{

    position:absolute;

    top:10px;

    left:10px;

    z-index:2;

    background:#e60000;

    color:#fff;

    padding:5px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}





/* ======================================================
   IMAGE
====================================================== */


.deal-image{

    display:flex;

    height:170px;

    align-items:center;

    justify-content:center;

    padding:15px;

}



.deal-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}





/* ======================================================
   PRODUCT INFO
====================================================== */


.deal-content{

    padding:15px;

}



.deal-category{

    font-size:11px;

    color:#777;

    margin-bottom:8px;

}



.deal-content h3{

    font-size:14px;

    line-height:1.4;

    height:40px;

    overflow:hidden;

    margin-bottom:12px;

}



.deal-content h3 a{

    color:#222;

}



.deal-content h3 a:hover{

    color:#e60000;

}





/* ======================================================
   PRICE
====================================================== */


.price-row{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

}



.current-price{

    color:#e60000;

    font-size:16px;

    font-weight:800;

}



.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:12px;

}





.saving{

    background:#fff2f2;

    color:#e60000;

    padding:5px;

    border-radius:6px;

    font-size:11px;

    font-weight:600;

    margin-bottom:12px;

}





/* ======================================================
   STOCK BAR
====================================================== */


.stock-progress span{

    font-size:11px;

    color:#666;

}



.progress{

    height:6px;

    background:#eee;

    border-radius:10px;

    overflow:hidden;

    margin-top:6px;

}



.progress span{

    display:block;

    width:70%;

    height:100%;

    background:#e60000;

}





/* ======================================================
   CART BUTTON
====================================================== */


.deal-cart-btn{

    margin-top:15px;

    width:100%;

    height:36px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    background:#0b1f3a;

    color:#fff;

    font-size:12px;

    font-weight:700;

    transition:.25s ease;

}



.deal-cart-btn:hover{

    background:#e60000;

}





/* ======================================================
   EMPTY STATE
====================================================== */


.empty-products{

    background:#fff;

    padding:50px;

    text-align:center;

    border-radius:15px;

}





/* ======================================================
   PROMO BANNER
====================================================== */


.deal-banner{

    padding:20px 0;

}



.banner-box{

    background:#0b1f3a;

    color:white;

    border-radius:18px;

    padding:35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.banner-box h2{

    font-size:28px;

}



.banner-box p{

    opacity:.8;

}



.banner-box a{

    background:#e60000;

    color:white;

    padding:12px 25px;

    border-radius:25px;

    font-weight:700;

}





/* ======================================================
   TABLET
====================================================== */


@media(max-width:1200px){


.deal-grid{

    grid-template-columns:repeat(4,1fr);

}


}





/* ======================================================
   MOBILE
====================================================== */


@media(max-width:768px){


.deals-hero{

    padding:30px 0;

}



.deals-hero h1{

    font-size:30px;

}



.deal-countdown div{

    width:65px;

    height:65px;

}



.deal-grid{

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}



.deal-image{

    height:130px;

}



.section-header h2{

    font-size:22px;

}



.banner-box{

    flex-direction:column;

    gap:20px;

    text-align:center;

}


}

/* ======================================================
   DARK MARKETPLACE DEALS TEXT VISIBILITY FIX
====================================================== */


/* ======================================================
   DEAL SECTION DARK MODE
====================================================== */


.flash-deals{

    background:#0b1f3a;

}



.section-header h2{

    color:#ffffff;

}



.section-header a{

    color:#ffb400;

}



.section-tag{

    color:#ffb400;

}





/* ======================================================
   PRODUCT CARDS
====================================================== */


.deal-card{

    background:#132b4d;

    border:1px solid rgba(255,255,255,.12);

}



.deal-card:hover{

    box-shadow:

    0 15px 35px rgba(0,0,0,.35);

}




/* ======================================================
   IMAGE AREA
====================================================== */


.deal-image{

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

}



.deal-image img{

    filter:

    drop-shadow(
    0 10px 18px rgba(0,0,0,.35)
    );

}





/* ======================================================
   PRODUCT INFORMATION
====================================================== */


.deal-content{

    color:#ffffff;

}



.deal-category{

    color:#b8c7dc;

}



.deal-content h3 a{

    color:#ffffff;

    font-weight:700;

}



.deal-content h3 a:hover{

    color:#ffb400;

}





/* ======================================================
   PRICES
====================================================== */


.current-price{

    color:#ff4d4d;

}



.old-price{

    color:#b8c7dc;

}



.saving{

    background:rgba(230,0,0,.15);

    color:#ff6b6b;

}





/* ======================================================
   STOCK BAR
====================================================== */


.stock-progress span{

    color:#d7e2f0;

}



.progress{

    background:rgba(255,255,255,.15);

}



.progress span{

    background:#ffb400;

}





/* ======================================================
   EMPTY STATE
====================================================== */


.empty-products{

    background:#132b4d;

    color:white;

}



.empty-products h3{

    color:white;

}



.empty-products p{

    color:#cbd5e1;

}





/* ======================================================
   DEAL IMAGE BADGES
====================================================== */


.discount-badge{

    background:#e60000;

    color:white;

    box-shadow:

    0 5px 15px rgba(0,0,0,.35);

}





/* ======================================================
   CART BUTTON
====================================================== */


.deal-cart-btn{

    background:#e60000;

    color:white;

}



.deal-cart-btn:hover{

    background:#ffb400;

    color:#0b1f3a;

}





/* ======================================================
   PROMO BANNER
====================================================== */


.banner-box{

    background:

    linear-gradient(
    135deg,
    #0b1f3a,
    #152f55
    );

}



.banner-box h2{

    color:white;

}



.banner-box p{

    color:#d7e2f0;

}



.banner-box a{

    background:#e60000;

    color:white;

}



.banner-box a:hover{

    background:#ffb400;

    color:#0b1f3a;

}

/* ======================================================
   DEAL HERO TEXT VISIBILITY ENHANCEMENT
====================================================== */


.deals-hero{

    position:relative;

    overflow:hidden;

}



/* Dark overlay for better contrast */

.deals-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(11,31,58,.95),
        rgba(21,47,85,.90)
    );

    z-index:0;

}



.deals-hero .container{

    position:relative;

    z-index:1;

}



.deals-hero-content{

    color:#ffffff;

}



/* Small badge */

.deal-tag{

    background:#e60000;

    color:#ffffff;

    box-shadow:

    0 8px 20px rgba(0,0,0,.35);

}





/* Main heading */

.deals-hero h1{

    color:#ffffff;

    font-size:46px;

    font-weight:900;

    letter-spacing:.5px;

    text-shadow:

    0 4px 12px rgba(0,0,0,.45);

}



/* Description */

.deals-hero p{

    color:#f1f5f9;

    font-size:17px;

    font-weight:500;

    max-width:650px;

    margin-left:auto;

    margin-right:auto;

    line-height:1.6;

    text-shadow:

    0 3px 8px rgba(0,0,0,.45);

}



/* Countdown cards */

.deal-countdown div{

    background:rgba(255,255,255,.96);

    border:1px solid rgba(255,255,255,.4);

}



.deal-countdown strong{

    color:#0b1f3a;

}



.deal-countdown span{

    color:#475569;

    font-weight:600;

}