/* ============================================================
   DISCOUNTS PAGE
   File: /static/css/discounts.css
============================================================ */

/* ------------------------------------------------------------
   HERO / INTRO
------------------------------------------------------------ */
.discounts-hero{
    text-align:center;
    max-width:780px;
}

.discounts-meta{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:18px;
}

.discounts-meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.84);
    font-size:13px;
    font-weight:700;
}

@media (max-width:767px){
    .discounts-meta span{
        width:100%;
    }
}

/* ------------------------------------------------------------
   SECTION INTRO
------------------------------------------------------------ */
.discounts-list-section .section-header{
    max-width:820px;
    margin:0 auto 28px;
    text-align:center;
}

.discounts-list-section .section-lead{
    max-width:720px;
    margin:0 auto;
}

/* ------------------------------------------------------------
   GRID
------------------------------------------------------------ */
.offer-grid{
    margin-top:8px;
}

/* ------------------------------------------------------------
   OFFER CARD
------------------------------------------------------------ */
.offer-card{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
}

.offer-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
}

.offer-card h3{
    margin:0;
}

.offer-subtitle{
    margin:0;
    font-weight:700;
    color:rgba(255,255,255,0.92);
    line-height:1.6;
}

.offer-description{
    margin:0;
    color:var(--text-muted);
    line-height:1.75;
    font-size:15px;
}

/* ------------------------------------------------------------
   IMAGE
------------------------------------------------------------ */
.offer-image{
    margin:-28px -28px 18px;
    overflow:hidden;
    background:rgba(255,255,255,0.03);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.offer-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:transform 0.45s ease;
}

.offer-card:hover .offer-image img{
    transform:scale(1.04);
}

@media (max-width:640px){
    .offer-image{
        margin:-28px -28px 16px;
    }

    .offer-image img{
        height:200px;
    }
}

/* ------------------------------------------------------------
   VALUE / PRICE
------------------------------------------------------------ */
.offer-price-block{
    margin:4px 0 0;
}

.offer-value{
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:0.02em;
}

.offer-code{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    align-self:flex-start;
    padding:0.5rem 0.8rem;
    min-height:34px;
    border-radius:999px;
    font-size:0.82rem;
    font-weight:700;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
}

.offer-dates{
    margin-top:0.25rem;
}

.info-note{
    color:rgba(255,255,255,0.62);
    line-height:1.65;
    font-size:0.92rem;
}

/* ------------------------------------------------------------
   ACTIONS
------------------------------------------------------------ */
.offer-actions,
.info-actions{
    margin-top:auto;
    padding-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}

@media (max-width:640px){
    .offer-actions .cta-btn,
    .info-actions .cta-btn{
        width:100%;
        justify-content:center;
    }
}

/* ------------------------------------------------------------
   EMPTY STATE
------------------------------------------------------------ */
.discounts-page .empty-state{
    margin-top:10px;
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (max-width:767px){
    .offer-card{
        border-radius:18px;
    }

    .offer-body{
        gap:10px;
    }
}

/* ------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
    .offer-image img,
    .offer-card,
    .offer-actions .cta-btn,
    .info-actions .cta-btn{
        transition:none !important;
    }
}