/* ==================================================
   CELEBSO Shared Navbar - Stylesheet
   Used on secondary pages (about, news, blog, terms,
   help-center) to match the index.html navbar.
   ================================================== */

.navbar{
    height:72px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(7,8,18,.94);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.nav-inner{
    max-width:1100px;
    height:100%;
    margin:auto;
    padding:0 20px;
    position:relative;
    display:flex;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
    font-size:22px;
    font-weight:800;
    letter-spacing:2px;
    cursor:pointer;
    transition:.2s;
}

.logo:hover{
    opacity:.85;
}

.logo .main-icon{
    width:165px;
    height:auto;
    border-radius:12px;
    background:transparent;
}

.menu{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:30px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

.menu a{
    font-size:14px;
    font-weight:600;
    color:#c8c8d0;
    transition:all .25s;
    position:relative;
    padding:9px 18px;
    border-radius:24px;
    letter-spacing:.3px;
}

.menu a:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    width:0;
    height:2px;
    background:#ffca05;
    transition:all .25s;
    transform:translateX(-50%);
}

.menu a:hover{
    color:#fff;
    background:linear-gradient(90deg,rgba(255,202,5,.14),rgba(255,176,0,.10));
    box-shadow:0 0 18px rgba(255,202,5,.18), inset 0 0 0 1px rgba(255,202,5,.22);
}

.menu a:hover:after{
    width:22px;
}

.menu a.active{
    color:#ffca05;
    background:linear-gradient(90deg,rgba(255,202,5,.14),rgba(255,176,0,.10));
    box-shadow:0 0 18px rgba(255,202,5,.18), inset 0 0 0 1px rgba(255,202,5,.22);
}

.menu a.active:after{
    width:22px;
}

.nav-auth{
    display:flex;
    align-items:center;
    gap:18px;
    margin-left:auto;
}

.nav-auth .install{
    background:linear-gradient(90deg,#ffb700,#ffd000);
    color:#171717;
    border:0;
    padding:12px 22px;
    border-radius:24px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

.nav-auth .install:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(255,202,5,.35);
}

.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    transition:.25s;
}

.nav-toggle span{
    width:20px;
    height:2px;
    background:#ffca05;
    border-radius:2px;
    transition:.3s;
}

.nav-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
    opacity:0;
}

.nav-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu{
    display:none;
    position:fixed;
    top:76px;
    right:14px;
    width:min(300px, calc(100vw - 28px));
    flex-direction:column;
    gap:6px;
    padding:12px 16px 16px;
    background:rgba(10,11,24,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
    animation:menuDrop .25s ease;
}

@keyframes menuDrop{
    from{
        opacity:0;
        transform:translateY(-8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.mobile-menu a{
    font-size:15px;
    color:#d5d5dd;
    padding:13px 14px;
    border-radius:10px;
    transition:.2s;
    border:1px solid transparent;
}

.mobile-menu a:hover{
    background:rgba(255,202,5,.12);
    color:#ffca05;
    border-color:rgba(255,202,5,.25);
}

.mobile-menu a.active{
    color:#ffca05;
    border-color:rgba(255,202,5,.25);
}

.mobile-auth{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
}

.mobile-auth .install{
    width:100%;
    text-align:center;
    padding:13px 14px;
    font-size:15px;
}

.mobile-menu.open{
    display:flex;
}

@media(max-width:850px){

    .nav-inner{
        width:94%;
        flex-wrap:wrap;
        padding:8px 0;
        gap:8px;
        position:relative;
        justify-content:flex-end;
    }

    /* Centered logo on mobile */
    .logo{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

    .navbar{
        height:auto;
        min-height:60px;
    }

    .logo .main-icon{
        width:96px;
        height:auto;
        border-radius:8px;
    }

    .menu{
        display:none;
    }

    .nav-auth{
        display:none;
    }

    .nav-toggle{
        display:flex;
        margin-left:auto;
    }
}

/* ================= TAILWIND PAGES MOBILE POLISH =================
   Used on about, news, blog, help-center and terms pages. */

@media(max-width:640px){
    .text-5xl{font-size:2.2rem !important;}
    .text-4xl{font-size:1.9rem !important;}
    .text-3xl{font-size:1.5rem !important;}
    .text-2xl{font-size:1.35rem !important;}

    .pt-16{padding-top:2.5rem !important;}
    .pb-32{padding-bottom:6rem !important;}
    .pt-12{padding-top:2rem !important;}
    .pb-16{padding-bottom:3rem !important;}
    .py-16{padding-top:2.5rem !important; padding-bottom:2.5rem !important;}
    .py-12{padding-top:2rem !important; padding-bottom:2rem !important;}
    .py-10{padding-top:1.5rem !important; padding-bottom:1.5rem !important;}
    .px-6{padding-left:1.25rem !important; padding-right:1.25rem !important;}
    .p-8{padding:1.25rem !important;}
    .p-10{padding:1.5rem !important;}
    .p-6{padding:1.25rem !important;}

    .grid.gap-6{gap:1rem;}
    .mb-12{margin-bottom:2rem !important;}
    .mb-8{margin-bottom:1.5rem !important;}
    .mb-6{margin-bottom:1.25rem !important;}
    .mb-4{margin-bottom:1rem !important;}

    .min-h-\[300px\]{min-height:220px !important;}
    .min-h-\[260px\]{min-height:220px !important;}
    .h-48{height:11rem !important;}

    .gap-16{gap:2.5rem !important;}
    .gap-12{gap:1.75rem !important;}
    .gap-10{gap:1.5rem !important;}
    .gap-8{gap:1rem !important;}

    .w-14.h-14{width:3rem !important; height:3rem !important;}
    .w-16.h-16{width:3.25rem !important; height:3.25rem !important;}
    .w-24.h-24{width:5rem !important; height:5rem !important;}

    .flex.items-center.gap-8{flex-direction:column; text-align:center;}

    .flex.overflow-x-auto.no-scrollbar{
        justify-content:flex-start !important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .flex.overflow-x-auto.no-scrollbar::-webkit-scrollbar{
        display:none;
    }
}

@media(max-width:480px){
    .text-lg{font-size:1.05rem !important;}
    .text-base{font-size:0.95rem !important;}
    .text-sm{font-size:0.85rem !important;}

    .rounded-\[32px\]{border-radius:1.25rem !important;}
    .rounded-3xl{border-radius:1.25rem !important;}

    .p-14{padding:1.5rem !important;}

    .p-8{
        padding:1rem !important;
    }

    .grid.gap-6{gap:0.75rem;}
    .gap-6{gap:0.75rem !important;}

    .h-48{height:10rem !important;}

    .flex.items-center.gap-2.px-6.py-3,
    .inline-flex.items-center.gap-2.px-6.py-3,
    .inline-flex.items-center.gap-2.px-6.py-2\.5,
    .flex.items-center.bg-dark-card.rounded-full.p-2{
        font-size:0.8rem !important;
        padding-left:1rem !important;
        padding-right:1rem !important;
    }
}