@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   INSANE LABAN — DEALS & PROMOTIONS
   Same design system as the rest of the customer pages.
   Class names, layout and breakpoints unchanged — this is a reskin.
========================================================= */

:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;
    --violet-light:#c3aeff;

    --line:rgba(255,255,255,.12);
    --surface:rgba(255,255,255,.05);
    --surface-hi:rgba(255,255,255,.08);
    --text-mute:rgba(255,255,255,.7);
    --text-dim:rgba(255,255,255,.5);

    --display:"Playfair Display",Georgia,serif;
    --script:"Great Vibes",cursive;
    --sans:"DM Sans",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}


/* =========================================================
   GLOBAL / SCROLL
========================================================= */

html{
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--navy-900);
    color:#fff;
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
}

a{-webkit-tap-highlight-color:transparent}

:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;border-radius:6px}


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

.deals-page{
    width:calc(100% - 165px);
    min-height:100vh;
    margin-left:145px;
    margin-right:20px;
    padding-top:55px;
    padding-bottom:100px;
}


/* =========================================================
   HEADER
========================================================= */

.deals-header{margin-bottom:38px}

.deals-eyebrow{
    display:block;
    margin-bottom:14px;
    color:var(--gold);
    font-family:var(--sans);
    font-size:10px;
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
}

.deals-header h1{
    margin:0;
    color:#fff;
    font-family:var(--display);
    font-size:clamp(40px,5vw,70px);
    font-weight:800;
    line-height:1.03;
    letter-spacing:-1px;
}

.deals-header p{
    max-width:600px;
    margin-top:18px;
    color:var(--text-mute);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   FEATURED DEAL
========================================================= */

.featured-deal{
    position:relative;
    min-height:330px;
    overflow:hidden;
    display:flex;
    align-items:center;
    margin-bottom:32px;
    border:1px solid rgba(232,189,104,.26);
    border-radius:30px;
    background:
        radial-gradient(circle at 78% 25%,rgba(64,131,192,.45),transparent 55%),
        linear-gradient(125deg,#0a2a50,#062038);
    box-shadow:0 25px 55px rgba(3,16,40,.5);
}

.featured-content{
    position:relative;
    z-index:2;
    width:50%;
    padding:44px;
    color:#fff;
}

.featured-content span{
    color:var(--gold-soft);
    font-family:var(--sans);
    font-size:10px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
}

.featured-content h2{
    margin:14px 0;
    font-family:var(--display);
    font-size:52px;
    font-weight:800;
    line-height:1.02;
    letter-spacing:-1px;
}

.featured-content p{
    max-width:360px;
    color:var(--text-mute);
    font-size:15px;
    line-height:1.6;
}

.featured-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    padding:14px 26px;
    border-radius:30px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    box-shadow:0 14px 30px -12px rgba(84,48,210,.95);
    transition:background .2s ease,transform .2s ease;
}

.featured-content a:hover{
    background:var(--violet-hi);
    transform:translateY(-2px);
}


/* IMAGE */

.featured-image{
    position:absolute;
    right:0;
    top:0;
    width:55%;
    height:100%;
}

.featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* keeps the headline legible where it overlaps the photo */
.featured-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#062038 0%,rgba(6,32,56,.6) 35%,transparent 75%);
}


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

.deal-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}


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

.deal-card{
    position:relative;
    overflow:hidden;
    min-height:360px;
    padding:32px;
    border:1px solid var(--line);
    border-radius:26px;
    background:var(--surface);
    box-shadow:0 16px 38px rgba(3,16,40,.38);
    transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}

.deal-card:hover{
    transform:translateY(-7px);
    background:var(--surface-hi);
    box-shadow:0 26px 55px rgba(3,16,40,.55);
}


/* TAG */

.deal-tag{
    position:absolute;
    top:22px;
    right:22px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 15px;
    border-radius:30px;
    background:var(--violet);
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.deal-tag.gold{
    background:rgba(232,189,104,.16);
    border:1px solid rgba(232,189,104,.45);
    color:var(--gold-soft);
}


/* ICON */

.deal-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    border:1px solid rgba(232,189,104,.4);
    border-radius:20px;
    background:rgba(232,189,104,.1);
    color:var(--gold-soft);
    font-size:24px;
}


/* TEXT */

.deal-card h2{
    margin:0;
    max-width:280px;
    color:#fff;
    font-family:var(--display);
    font-size:28px;
    font-weight:800;
    line-height:1.15;
}

.deal-card p{
    max-width:270px;
    margin:14px 0;
    color:var(--text-mute);
    font-size:14px;
    line-height:1.6;
}

.deal-card h3{
    margin:20px 0;
    color:var(--gold-soft);
    font-family:var(--display);
    font-size:34px;
    font-weight:800;
    line-height:1.1;
}

.deal-card a{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 24px;
    border-radius:30px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    box-shadow:0 12px 26px -10px rgba(84,48,210,.9);
    transition:background .2s ease,transform .2s ease;
}

.deal-card a:hover{
    background:var(--violet-hi);
    transform:translateY(-2px);
}


/* CARD IMAGE */

.deal-image{
    position:absolute;
    right:-25px;
    bottom:-30px;
    z-index:1;
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:30px;
    opacity:.5;
    pointer-events:none;
}


/* =========================================================
   FOOTER STRIP
========================================================= */

.deals-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:32px;
    padding:22px;
    border:1px solid rgba(232,189,104,.22);
    border-radius:20px;
    background:
        radial-gradient(circle at 85% 20%,rgba(64,131,192,.3),transparent 55%),
        linear-gradient(125deg,#0a2a50,#062038);
    color:var(--text-mute);
    font-size:14px;
}

.deals-footer i{color:var(--gold-soft)}


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

@media (max-width:1100px){

    .deal-grid{grid-template-columns:repeat(2,1fr)}

    .featured-content h2{font-size:42px}
}


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

@media (max-width:700px){

    /* top padding clears the fixed top bar */
    .deals-page{
        width:calc(100% - 30px);
        margin-left:15px;
        margin-right:15px;
        padding-top:88px;
    }

    .featured-deal{
        min-height:0;
        flex-direction:column;
        align-items:stretch;
    }

    /* photo first, copy below — no more text over a faded image */
    .featured-image{
        position:relative;
        order:-1;
        width:100%;
        height:200px;
        top:auto;
        right:auto;
    }

    .featured-image::after{
        background:linear-gradient(180deg,transparent 40%,#062038 100%);
    }

    .featured-content{
        width:100%;
        padding:26px;
    }

    .featured-content h2{font-size:36px}

    .featured-content a{width:100%;justify-content:center}

    .deal-grid{grid-template-columns:1fr}

    .deal-card{
        min-height:0;
        padding:26px;
    }

    .deal-card h2,
    .deal-card p{max-width:none}

    .deal-image{
        right:-30px;
        bottom:-35px;
        width:150px;
        height:150px;
        opacity:.35;
    }

    .deals-footer{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }
}


/* =========================================================
   MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}