/* ==========================================================
   PROJECT : QatarLotto V2
   FILE    : hero.css
   VERSION : 2.0
   STEP    : Hero Dashboard Final
==========================================================*/

.hero-dashboard{

    display:grid;

    grid-template-columns:minmax(0,2.8fr) 420px;

    gap:22px;

    padding:28px;

    align-items:stretch;

}

/*==========================================================
LIVE CARD
==========================================================*/

.hero-live-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:480px;

    border-radius:24px;

    padding:50px;

    background:#09111F;

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.45);

}

/*==================================
HERO DECORATION
==================================*/

.hero-bg-glow{

    position:absolute;

    left:50%;

    bottom:-120px;

    transform:translateX(-50%);

    width:650px;

    height:220px;

    background:
        radial-gradient(circle,
        rgba(255,201,46,.45),
        transparent 72%);

    filter:blur(45px);

    z-index:1;

}

.hero-particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.35;

    z-index:2;

    pointer-events:none;

}

.hero-flag{

    position:absolute;

    top:0;

    left:0;

    width:320px;

    z-index:3;

    pointer-events:none;

}

.hero-ball-left{

    position:absolute;

    left:-55px;

    bottom:-45px;

    width:240px;

    z-index:4;

    pointer-events:none;

}

.hero-ball-right{

    position:absolute;

    right:-55px;

    bottom:-35px;

    width:230px;

    z-index:4;

    pointer-events:none;

}


.hero-live-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        115deg,
        rgba(255,255,255,.05),
        transparent 35%,
        transparent 65%,
        rgba(255,255,255,.02)
    );

    pointer-events:none;

    z-index:1;

}


.hero-ball-left{

    position:absolute;

    left:-45px;

    bottom:-35px;

    width:240px;

    z-index:3;

}

.hero-ball-right{

    position:absolute;

    right:-45px;

    bottom:-20px;

    width:210px;

    z-index:3;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(10,16,34,.18),
            rgba(5,10,25,.45));

    z-index:5;

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:20;

    width:100%;

    max-width:760px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 26px;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    #B01447,
    #E71F63);

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:

    0 10px 25px rgba(176,20,71,.35);

}

.hero-content h2{

    margin:22px 0 12px;

    font-size:58px;

    font-weight:900;

    line-height:1.05;

    color:#fff;

    letter-spacing:-1px;

    text-shadow:0 8px 30px rgba(0,0,0,.45);

}

.hero-content p{

    margin-top:14px;

    max-width:640px;

    color:#D7DFED;

    font-size:18px;

    line-height:1.7;

}

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

.hero-countdown{

    margin:38px 0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

}

.count-box{

    width:105px;

    height:105px;

    background:linear-gradient(
        180deg,
        #1A2438,
        #101827
    );

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

    border-radius:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transition:.25s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 30px rgba(0,0,0,.30);

}

.count-box span{

    font-size:46px;

    color:#FFD54F;

    font-weight:700;

    line-height:1;

}

.count-box small{

    margin-top:10px;

    color:#8F9BB3;

    font-size:13px;

}

.count-box:hover{

    transform:translateY(-4px);

    border-color:#FFD54F;

}

.dots{

    font-size:46px;

    color:#FFD54F;

    font-weight:bold;

}

/*==========================================================
WINNING NUMBER
==========================================================*/

.winning-title{

    margin-top:26px;

    margin-bottom:18px;

    font-size:18px;

    font-weight:600;

    color:#FFF;

}

.winning-number{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:24px;

}

.ball{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    font-weight:800;

    color:#111;

    background:

    radial-gradient(circle at 30% 30%,

    #FFF8CF,

    #FFD84D 45%,

    #E3A600);

    box-shadow:

    0 0 25px rgba(255,210,70,.35),

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

    transition:.25s;

}

.ball:hover{

    transform:translateY(-5px) scale(1.08);

}

/*==========================================================
RIGHT CARD
==========================================================*/

.hero-info-card{

    background:linear-gradient(
        180deg,
        rgba(20,30,46,.98),
        rgba(13,20,34,.98)
    );

    border:1px solid rgba(255,215,90,.10);

    border-radius:24px;

    padding:30px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35);

    backdrop-filter:blur(10px);

    height:100%;

}

.hero-info-card h3{

    margin:0 0 24px;

    font-size:24px;

    font-weight:700;

    color:#FFFFFF;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.info-row span{

    font-size:14px;

    color:#9FAEC5;

}

.live{

    color:#22C55E !important;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.hero-dashboard{

grid-template-columns:1fr;

}

.hero-live-card{

min-height:390px;

}

}

@media(max-width:768px){

.hero-content{

padding:30px;

}

.hero-content h2{

font-size:38px;

}

.hero-countdown{

flex-wrap:wrap;

}

.count-box{

width:90px;

height:90px;

}

.ball{

width:60px;

height:60px;

font-size:26px;

}

}

/* ===============================
   HERO DECORATION
================================ */

.hero-flag{

    position:absolute;

    top:25px;

    left:25px;

    width:260px;

    z-index:2;

    opacity:.95;

    pointer-events:none;

}

.hero-particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.30;

    z-index:1;

    pointer-events:none;

}

.hero-ball-left{

    position:absolute;

    left:-45px;

    bottom:-25px;

    width:250px;

    z-index:3;

    pointer-events:none;

}

.hero-ball-right{

    position:absolute;

    right:-35px;

    bottom:-10px;

    width:220px;

    z-index:3;

    pointer-events:none;

}