*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100vw;
    height:100vh;
    background:#111;
    overflow:hidden;
    font-family:Arial;
    background: linear-gradient(135deg, #111, #1a1a1a);
}

#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    backdrop-filter: blur(12px);

    /* 🖤 نخليها شبه سوداء لكن فيها حياة */
    background: rgba(10, 10, 10, 0.65);

    /* 🌈 خط سفلي خفيف multicolor */
    border-bottom: 2px solid transparent;

    border-image: linear-gradient(
        90deg,
        #ff3b30,   /* red */
        #ffcc00,   /* yellow */
        #34c759    /* green */
    ) 1;

    box-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

#header h1{
    font-size:22px;
    letter-spacing:3px;
    text-transform:uppercase;

    /* 🎯 لون أساسي أبيض + لمسة لونية */
    color: #f5f5f5;

    /* 🌈 gradient داخل النص (خفيف جداً) */
    background: linear-gradient(
        90deg,
        #ff3b30,
        #ffcc00,
        #34c759
    );


    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* ✨ glow خفيف جداً */
    text-shadow: 0 0 10px rgba(255,255,255,0.05);
}





#overlay{
    position:fixed;
    inset:0;
    background:black;
    opacity:0;
    transition:.7s ease;
    z-index:10;
    pointer-events:none;
}

#overlay.show{
    opacity:.85;
}

#viewer{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:50;
}

#bigImage{
    width:80vw;
    height:80vh;
    object-fit:contain;

    transform:scale(.3);
    opacity:0;

    transition:transform .8s ease, opacity .8s ease;
}

#bigImage.active{
    transform:scale(1);
    opacity:1;
}

#slider{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    width:100vw;

    display:flex;
    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    padding:0 calc(50vw - 120px);

    padding-bottom: 13px;
    padding-top: 13px;

    scroll-behavior:smooth;

    z-index:20;
    transition:opacity .5s ease, transform .5s ease;
}

#slider.hide{
    opacity:0;
    transform:translateY(50%);
    pointer-events:none;
}
#slider::-webkit-scrollbar{
    display:none;
}

.thumb{
    width:240px;
    height:160px;
    flex-shrink:0;
    border-radius:15px;
    overflow:hidden;
    transition:.4s ease;
    opacity:.6;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .4s ease;
}

.thumb.active{
    transform:scale(1.1);
    opacity:1;
    border:3px solid orange;
}

@media(max-width:700px){

.thumb{
    width:140px;
    height:100px;
}

#bigImage{
    width:95vw;
    height:65vh;
}

}