/* =========================================================
   INSANE LABAN - LIVE DEALS
   =========================================================
   |
   | Styles only the two sections deals.php now builds from
   | the database: the reduced-items banner and the loyalty
   | reward cards.
   |
   | Kept separate from css/deals.css, which still handles the
   | page header, the hero and the footer. Every class here is
   | new, so nothing in this file can collide with a rule in
   | that one - which matters, because these sections had to
   | be written without seeing it.
   |
========================================================= */

.deals-page .live-offers,
.deals-page .promo-section{
    --dl-navy:#04102a;
    --dl-navy-700:#0d2a55;
    --dl-gold:#d9a441;
    --dl-gold-soft:#e8bd68;
    --dl-violet:#6b3df5;
    --dl-violet-hi:#7f57ff;
    --dl-line:rgba(255,255,255,.12);
    --dl-surface:rgba(255,255,255,.05);
    --dl-surface-hi:rgba(255,255,255,.09);
    --dl-mute:rgba(255,255,255,.68);
    --dl-dim:rgba(255,255,255,.45);
}


/* =========================================================
   REDUCED RIGHT NOW
   =========================================================
   |
   | A scrolling rail rather than a grid. The number of items
   | on offer is whatever the client decided this morning -
   | one, or nine - and a rail copes with both without
   | leaving a row three-quarters empty.
   |
========================================================= */

.live-offers{
    margin:0 0 44px;
}


.live-offers-head{
    margin-bottom:18px;
}


.live-offers-flag{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 13px;
    border-radius:30px;
    background:var(--dl-violet);
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
}


.live-offers-flag i{
    font-size:11px;
}


.live-offers-head h2{
    margin:12px 0 0;
    font-size:clamp(20px,4.6vw,30px);
    font-weight:800;
    line-height:1.2;
    color:#fff;
}


.live-offers-rail{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:4px 2px 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.live-offers-rail::-webkit-scrollbar{display:none}


.live-offer-card{
    flex:0 0 230px;
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--dl-line);
    border-radius:18px;
    background:var(--dl-surface);
    color:#fff;
    text-decoration:none;
    transition:transform .22s ease,border-color .22s ease,background .22s ease;
}


.live-offer-card:hover{
    transform:translateY(-4px);
    border-color:rgba(232,189,104,.55);
    background:var(--dl-surface-hi);
}


/* ---------------------------------------------------------
   IMAGE
   ---------------------------------------------------------
   |
   | contain, not cover. A bottle is tall and narrow against
   | a plain background and cover takes the cap off it. The
   | dessert photography survives either way, so contain is
   | the safe single choice for a rail holding both.
   |
--------------------------------------------------------- */

.live-offer-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:158px;
    padding:12px;
    background:var(--dl-navy-700);
}


.live-offer-media img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}


.live-offer-noimage{
    font-size:34px;
    color:var(--dl-dim);
}


.live-offer-save{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:5px 11px;
    border-radius:30px;
    background:var(--dl-violet);
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

.live-offer-body{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 15px 16px;
}


.live-offer-kind{
    font-size:10px;
    font-weight:800;
    letter-spacing:.9px;
    text-transform:uppercase;
    color:var(--dl-dim);
}


.live-offer-body strong{
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}


.live-offer-saving{
    font-size:12px;
    font-weight:700;
    color:var(--dl-gold-soft);
}


/* =========================================================
   LOYALTY REWARDS
========================================================= */

.promo-section{
    margin:46px 0 40px;
}


.promo-section-head{
    margin-bottom:24px;
    text-align:center;
}


.promo-section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 15px;
    border:1px solid rgba(232,189,104,.5);
    border-radius:30px;
    color:var(--dl-gold-soft);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.1px;
}


.promo-section-head h2{
    margin:14px 0 8px;
    font-size:clamp(21px,5vw,32px);
    font-weight:800;
    line-height:1.2;
    color:#fff;
}


.promo-section-head p{
    margin:0;
    font-size:14px;
    color:var(--dl-mute);
}


.promo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
    gap:18px;
}


.promo-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:26px 22px 22px;
    border:1px solid var(--dl-line);
    border-radius:20px;
    background:var(--dl-surface);
    color:#fff;
    transition:transform .22s ease,border-color .22s ease;
}


.promo-card:hover{
    transform:translateY(-3px);
    border-color:rgba(232,189,104,.45);
}


/*
| The easiest reward to reach is highlighted rather than the
| largest. A customer with four points is not helped by a
| reward costing fifty.
*/

.promo-card.is-featured{
    border-color:rgba(107,61,245,.6);
    background:linear-gradient(
        160deg,
        rgba(107,61,245,.16),
        rgba(255,255,255,.04)
    );
}


.promo-flag{
    position:absolute;
    top:-11px;
    left:20px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:30px;
    background:var(--dl-violet);
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.7px;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
}


.promo-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:14px;
    background:rgba(232,189,104,.14);
    color:var(--dl-gold-soft);
    font-size:19px;
}


.promo-card h3{
    margin:0;
    font-size:18px;
    font-weight:800;
    line-height:1.3;
}


.promo-card p{
    margin:0;
    font-size:13.5px;
    line-height:1.6;
    color:var(--dl-mute);
}


/* ---------------------------------------------------------
   POINTS -> DISCOUNT
--------------------------------------------------------- */

.promo-maths{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:4px;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
}


.promo-points,
.promo-discount{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    font-size:19px;
    font-weight:800;
}


.promo-points{
    color:var(--dl-gold-soft);
}


.promo-points i{
    font-size:13px;
}


.promo-discount{
    color:#fff;
}


.promo-points small,
.promo-discount small{
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    opacity:.7;
}


.promo-arrow{
    font-size:12px;
    color:var(--dl-dim);
}


.promo-minimum{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:var(--dl-dim);
}


.promo-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding:11px 18px;
    border-radius:30px;
    background:var(--dl-violet);
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:background .2s ease;
}


.promo-cta:hover{
    background:var(--dl-violet-hi);
}


/* =========================================================
   NOTHING RUNNING
   =========================================================
   |
   | An honest empty state. The page used to fill this space
   | with a "Coming Soon" card that was always there, which
   | told a customer nothing and never changed.
   |
========================================================= */

.promo-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:11px;
    padding:48px 26px;
    border:1px dashed var(--dl-line);
    border-radius:20px;
    background:var(--dl-surface);
    text-align:center;
    color:#fff;
}


.promo-empty i{
    font-size:30px;
    color:var(--dl-dim);
}


.promo-empty strong{
    font-size:17px;
    font-weight:800;
}


.promo-empty span{
    max-width:420px;
    font-size:13.5px;
    line-height:1.65;
    color:var(--dl-mute);
}


.promo-empty a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    padding:11px 20px;
    border:1px solid rgba(232,189,104,.55);
    border-radius:30px;
    color:var(--dl-gold-soft);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}


.promo-empty a:hover{
    background:var(--dl-gold);
    color:#08203c;
}


/* =========================================================
   NARROW SCREENS
========================================================= */

@media (max-width:700px){

    .live-offer-card{
        flex-basis:63%;
    }

    .live-offer-media{
        height:132px;
    }

    .promo-grid{
        grid-template-columns:1fr;
    }

    .promo-card{
        padding:24px 18px 20px;
    }
}


@media (prefers-reduced-motion:reduce){

    .live-offer-card,
    .promo-card{
        transition:none;
    }
}