/* ===================================================================================== */
/*                                      GLOBAL RESET                                      */
/* ===================================================================================== */

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

body {
    font-family: 'Orbitron', sans-serif;
    background: #ffffff;
    color: #000000;
}

/* ===================================================================================== */
/*                                     BLUE OCEAN THEME                                   */
/* ===================================================================================== */

:root {
    --ocean-dark: #002b4d;      /* Navy Ocean */
    --ocean-mid: #006aa6;       /* Deep Ocean Blue */
    --ocean-light: #3cc7ff;     /* Ocean Aqua */
    --ocean-light-soft: #7bdfff;
    --ocean-shadow: 0 0 15px rgba(60, 199, 255, 0.55);
    --ocean-glow: rgba(60, 199, 255, 0.7);
}



/* ===================================================================================== */
/*                                       LOGO BOX                                         */
/* ===================================================================================== */

.logo-icon {
    width: 45px;
    height: 45px;
    background: var(--ocean-light);
    border-radius: 10px;
    box-shadow: var(--ocean-shadow);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo span {
    color: white;
    font-size: 18px;
    font-weight: 700;
}



/* ===================================================================================== */
/*                                    NAVBAR CONTAINER                                    */
/* ===================================================================================== */

.nav {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 16px 40px;

    /* تم استبدال الأحمر بالكامل بـ Blue Ocean */
    background: linear-gradient(
        90deg,
        #000000 0%,
        var(--ocean-dark) 40%,
        var(--ocean-light) 100%
    );

    border-bottom: 2px solid rgba(60, 199, 255, 0.4);
    box-shadow: 0 4px 15px rgba(60, 199, 255, 0.25);
}

.nav-spacer {
    flex: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}



/* ===================================================================================== */
/*                                        MENU LINKS                                      */
/* ===================================================================================== */

.menu-links {
    display: flex;
    list-style: none;
    gap: 10px;
}

.menu-links li a {
    padding: 8px 10px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.menu-links li a:hover {
    color: var(--ocean-light);
    text-shadow: 0 0 8px var(--ocean-light);
}



/* ===================================================================================== */
/*                                      ICON BUTTONS                                      */
/* ===================================================================================== */

.nav-icons {
    display: flex;
    gap: 10px;
}

.icon-btn {
    width: 45px;
    height: 45px;
    background: #000000;

    /* كان أحمر → أصبح Blue Ocean */
    border: 2px solid var(--ocean-light);

    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.icon-btn img {
    width: 22px;
    height: 22px;
}

.icon-btn:hover {
    box-shadow: var(--ocean-shadow);
    transform: translateY(-2px);
}



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

.sidebar {
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100%;

    /* كان أحمر غامق → Ocean Navy */
    background: #001b2d;

    padding: 60px 20px;
    transition: 0.3s ease-in-out;
    z-index: 2000;
}

.sidebar.open {
    right: 0;
}

.close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

.sidebar ul {
    list-style: none;
    margin-top: 30px;
}

.sidebar ul li {
    margin: 18px 0;
}

.sidebar ul li a {
    color: white;
    font-size: 20px;
    text-decoration: none;
}



/* ===================================================================================== */
/*                                        OVERLAY                                          */
/* ===================================================================================== */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 1500;
}

.overlay.show {
    display: block;
}



/* ===================================================================================== */
/*                                        HERO SECTION                                    */
/* ===================================================================================== */

.hero {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 {
    font-size: 80px;
    font-weight: 800;
    color: var(--ocean-light);
    text-shadow: var(--ocean-shadow);
}

.hero h2 {
    font-size: 24px;
    margin-top: 8px;
    color: #000000; 
    text-shadow: none; 
}


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

.footer {
    text-align: center;
    padding: 25px;
    font-size: 14px;
}



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

.desktop-nav {
    display: flex;
}

.mobile-nav {
    display: none;
}

@media (max-width: 768px) {

    .desktop-nav {
        display: none;
    }

    .mobile-nav {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 16px 6px;
    }

    .mobile-nav .nav-icons {
        margin-left: auto;
        display: flex;
        gap: 10px;
    }

    .menu-links {
        display: none;
    }
}

/* ===================================================================================== */
/*                                     TOP INFO BAR                                      */
/* ===================================================================================== */

.top-bar {
    width: 100%;
    background: linear-gradient(90deg, var(--ocean-dark), #000000);
    padding: 12px 20px;

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

    border-bottom: 2px solid var(--ocean-light);
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}

/* Country Box */
.country-box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.country-box select {
    background: #001b2d;
    color: white;
    border: 1px solid var(--ocean-light);
    padding: 6px 10px;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--ocean-shadow);
}

/* Clock Box */
.clock-box {
    text-align: right;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

#clockTime {
    display: block;
    font-size: 20px;
    font-weight: 800;
    text-shadow: var(--ocean-shadow);
}

#clockDate {
    font-size: 12px;
    opacity: 0.9;
}


/* ===================================================================================== */
/*                                      SEARCH BAR                                       */
/* ===================================================================================== */

.search-bar {
    width: 100%;
    padding: 20px 20px;
    background: #001624;
    display: flex;
    justify-content: center;
    gap: 10px;

    border-bottom: 2px solid var(--ocean-light);
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}

.search-bar input {
    width: 70%;
    padding: 12px 16px;

    background: #001b2d;
    border: 2px solid var(--ocean-light);
    border-radius: 10px;

    font-size: 16px;
    color: white;
    outline: none;

    box-shadow: 0 0 10px rgba(60, 199, 255, 0.3);
    transition: 0.2s;
}

.search-bar input::placeholder {
    color: white ;
    opacity: 0.5;
}

.search-bar input:focus {
    box-shadow: 0 0 18px var(--ocean-light);
    border-color: var(--ocean-light);
}

.search-bar button {
    width: 50px;
    height: 50px;
    background: #000f19;
    border: 2px solid var(--ocean-light);
    border-radius: 10px;

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

    box-shadow: 0 0 10px rgba(60, 199, 255, 0.4);
    transition: 0.2s;
}

.search-bar button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px var(--ocean-light);
}

.search-bar button img {
    width: 22px;
    height: 22px;
}

/* ===================================================================================== */
/*                                 HERO SLIDER (CINEMATIC)                               */
/* ===================================================================================== */

.hero-slider {
    width: 100%;
    height: 260px;
    background: linear-gradient(180deg, #011423 0%, #00101c 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--ocean-light);
}

/* ------------------------------------------------------------------- */
/*  الحالة الأساسية للسلايد قبل البدء (لا شيء ظاهر)                   */
/* ------------------------------------------------------------------- */

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active {
    opacity: 1;
}

/* ------------------------------------------------------------------- */
/*  الخلفية السينمائية (Scale + Blur + Fade)                          */
/* ------------------------------------------------------------------- */

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;

    opacity: 0;
    transform: scale(1.25);
    filter: blur(8px);

    transition: opacity 1.4s cubic-bezier(.16,.84,.44,1),
                transform 1.4s cubic-bezier(.16,.84,.44,1),
                filter 1.4s cubic-bezier(.16,.84,.44,1);
}

.slide.active .bg {
    opacity: 0.55;
    transform: scale(1);
    filter: blur(0);
}

/* ------------------------------------------------------------------- */
/*  العناصر الأساسية (قبل ظهورها)                                     */
/* ------------------------------------------------------------------- */

.slide .el {
    position: absolute;

    opacity: 0;
    transform: scale(1.45) translateY(40px);
    filter: blur(12px);

    transition: opacity 1.4s cubic-bezier(.16,.84,.44,1),
                transform 1.4s cubic-bezier(.16,.84,.44,1),
                filter 1.4s cubic-bezier(.16,.84,.44,1);
}

/* ------------------------------------------------------------------- */
/*  العنصر 1 — الكيس (يدخل من اليسار)                                 */
/* ------------------------------------------------------------------- */

.slide .item-left {
    width: 120px;
    left: 10px;
    bottom: 20px;

    transform: translateX(-150px) scale(1.4);
}

.slide.active .item-left {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 0.9s;
}

/* ------------------------------------------------------------------- */
/*  العنصر 2 — الكيبورد (يصعد من الأسفل)                              */
/* ------------------------------------------------------------------- */

.slide .item-keyboard {
    width: 95px;
    left: 20px;
    top: 35px;

    transform: translateY(150px) scale(1.4);
}

.slide.active .item-keyboard {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 1.2s;
}

/* ------------------------------------------------------------------- */
/*  العنصر 3 — السماعة (تنزل من الأعلى)                               */
/* ------------------------------------------------------------------- */

.slide .item-headset {
    width: 130px;
    right: 15px;
    top: 10px;

    transform: translateY(-150px) scale(1.4);
}

.slide.active .item-headset {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 1.5s;
}

/* ------------------------------------------------------------------- */
/*  العنصر 4 — الماوس (يدخل من اليمين)                                */
/* ------------------------------------------------------------------- */

.slide .item-mouse {
    width: 80px;
    right: 30px;
    bottom: 10px;

    transform: translateX(150px) scale(1.4);
}

.slide.active .item-mouse {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 1.8s;
}

/* ------------------------------------------------------------------- */
/*  الكتابة السينمائية                                                */
/* ------------------------------------------------------------------- */

.title-box {
    position: absolute;
    left: 20px;
    bottom: 5px;
}

/* العنوان الأول (ينزل من فوق + Blur + Scale) */
.title-box .t1 {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--ocean-light);

    opacity: 0;
    transform: translateY(-45px) scale(1.35);
    filter: blur(10px);

    transition: opacity 1.2s cubic-bezier(.16,.84,.44,1),
                transform 1.2s cubic-bezier(.16,.84,.44,1),
                filter 1.2s cubic-bezier(.16,.84,.44,1);
}

.slide.active .t1 {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.2s;
}

/* العنوان الثاني (يظهر تدريجياً) */
.title-box .t2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffffff;

    opacity: 0;
    transform: translateY(-20px) scale(1.2);
    filter: blur(8px);

    transition: opacity 1.4s cubic-bezier(.16,.84,.44,1),
                transform 1.4s cubic-bezier(.16,.84,.44,1),
                filter 1.4s cubic-bezier(.16,.84,.44,1);
}

.slide.active .t2 {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.55s;
}



/* ======================================================= */
/*                      FIND US SECTION                    */
/* ======================================================= */

/* SECTION */
.find-us {
    width: 100%;
    background: #00121d;
    padding: 60px 0;
    overflow: hidden;
}

/* كل الأزواج مخفية بالبداية */
.fu-container {
    position: relative;
}

/* زوج الأزرار */
.fu-pair {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
}

/* الأزرار */
.fu-btn {
    background: #001b2d;
    border: 2px solid var(--ocean-light);
    border-radius: 14px;
    padding: 12px 18px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 10px rgba(60,199,255,0.4);
    transform: scale(0.8);
    opacity: 0;
}

/* الصور */
.fu-btn img {
    width: 22px;
    height: 22px;
}

/* دخول من اليسار */
.fu-btn.left.enter {
    animation: enterLeft .8s forwards;
}

/* دخول من اليمين */
.fu-btn.right.enter {
    animation: enterRight .8s forwards;
}

/* خروج لليسار */
.fu-btn.left.exit {
    animation: exitLeft .8s forwards;
}

/* خروج لليمين */
.fu-btn.right.exit {
    animation: exitRight .8s forwards;
}

/* نبض (pulse) */
.fu-btn.pulse {
    animation: pulse 1.2s infinite ease-in-out alternate;
}

/* ============ ANIMATIONS ============ */

@keyframes enterLeft {
    from { transform: translateX(-70px) scale(.7); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes enterRight {
    from { transform: translateX(70px) scale(.7); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes exitLeft {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to   { transform: translateX(-70px) scale(.7); opacity: 0; }
}

@keyframes exitRight {
    from { transform: translateX(0) scale(1); opacity: 1; }
    to   { transform: translateX(70px) scale(.7); opacity: 0; }
}

@keyframes pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}


/* ======================================================= */
/*                     CATEGORIES SECTION                  */
/* ======================================================= */

.categories {
    width: 100%;
    padding: 30px 20px;
    background: #000f19;
    
}

.cat-title {
    color: var(--ocean-light);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ------------------------------------------------------- */
/*       HORIZONTAL SLIDER – Gaming Blue Ocean Style       */
/* ------------------------------------------------------- */

.cat-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;

    /* Hide scrollbar (Mobile friendly) */
    scrollbar-width: none; /* Firefox */
}

.cat-slider::-webkit-scrollbar {
    display: none; /* Chrome */
}

.cat-box {
    min-width: 110px;
    height: 130px;

    background: #001624;
    border: 2px solid var(--ocean-light);
    border-radius: 12px;

    padding: 12px 10px;
    text-align: center;

    box-shadow: 0 0 10px rgba(60,199,255,0.2);
    transition: 0.25s ease;
    scroll-snap-align: start;
}

.cat-box img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
}

.cat-box span {
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cat-box:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 18px rgba(60,199,255,0.4);
}



/* ======================================================= */
/*                 MOBILE FIXED TOP NAVBAR                 */
/* ======================================================= */

.mobile-nav {
    position: sticky;
    top: 0;
    z-index: 3000;
}

/* Search bar also sticky below navbar */
.search-bar {
    position: sticky;
    top: 65px;  /* ارتفاع الموبايل ناف */
    z-index: 2900;
}

/* تحسين الانتقال عند التثبيت */
.mobile-nav,
.search-bar {
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* عندما ينزل المستخدم للأسفل */
.scrolled .mobile-nav {
    background: #000f19;
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}

.scrolled .search-bar {
    background: #00111c;
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}


/* ======================================================= */
/*                       BIG OFFERS                       */
/* ======================================================= */

.big-offers {
    width: 100%;
    background: #00121d;
    padding: 40px 20px 60px 20px;
}

.offers-title {
    color: var(--ocean-light);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* Container */
.offers-slider-container {
    width: 100%;
    max-width: 900px;
    margin: auto;
    position: relative;
}

/* Slider Wrapper */
.offers-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Each Slide */
.offer-slide {
    width: 100%;
    aspect-ratio: 3/2;  /* ثابت على كل الشاشات */
    position: absolute;

    opacity: 0;
    transition: opacity .8s ease;
}

.offer-slide.active {
    opacity: 1;
    position: relative;
}

/* الصورة */
.offer-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 12px;
    border: 2px solid var(--ocean-light);
    box-shadow: 0 0 15px rgba(60,199,255,0.35);
}

/* Pagination Dots */
.offers-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.offers-dot {
    width: 12px;
    height: 12px;
    background: #00334e;
    border: 2px solid var(--ocean-light);
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease;
}

.offers-dot.active {
    background: var(--ocean-light);
    box-shadow: 0 0 10px var(--ocean-light);
}
/*********************************************/
/*       FIXED NAVBARS + SIDEBAR LAYERS       */
/*********************************************/

/* ====== DESKTOP NAVBAR FIX ====== */
.desktop-nav {
    position: sticky;
    top: 0;
    z-index: 3500 !important;
    background: #00111c;
}

/* ====== MOBILE NAVBAR FIX ====== */
.mobile-nav {
    position: sticky;
    top: 0;
    z-index: 3500 !important;
    background: #00111c;
}

/* ====== SEARCH BAR FIX ====== */
.search-bar {
    position: sticky;
    top: 65px;
    z-index: 3400 !important;
    background: #00111c;
}

/* تأثير عند التمرير */
.scrolled .mobile-nav,
.scrolled .desktop-nav {
    background: #000f19;
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}

.scrolled .search-bar {
    background: #00111c;
    box-shadow: 0 4px 12px rgba(60, 199, 255, 0.25);
}

/*********************************************/
/*              SIDEBAR FIX (TOP)            */
/*********************************************/
.sidebar {
    z-index: 5000 !important;
}

.overlay {
    z-index: 4000 !important;
}

/* إخفاء الـ search bar عندما يكون الـ sidebar مفتوح */
.sidebar-open .search-bar {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-20px);
}