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

.top-header{
    background:linear-gradient(180deg,#2b0f0a,#160605);
    border-bottom:1px solid rgba(255,120,60,.15);
    position:relative;
    z-index:50;
}

.top-header-inner{
    max-width:1200px;
    margin:0 auto;
    padding:8px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ==================================================
   SOCIAL ICONS
================================================== */

.top-social{
    display:flex;
    gap:14px;
}

.top-social a{
    width:18px;
    height:18px;
    display:block;
    opacity:.7;
    transition:.2s;
}

.top-social a:hover{
    opacity:1;
    transform:translateY(-1px);
}

.soc-discord{ background:#ff7a2f; mask:url('/wp-content/themes/fayl-world/assets/icons/discord.svg') center/contain no-repeat; -webkit-mask:url('/wp-content/themes/fayl-world/assets/icons/discord.svg') center/contain no-repeat;}
.soc-telegram{ background:#ff7a2f; mask:url('/wp-content/themes/fayl-world/assets/icons/telegram.svg') center/contain no-repeat; -webkit-mask:url('/wp-content/themes/fayl-world/assets/icons/telegram.svg') center/contain no-repeat;}
.soc-youtube{ background:#ff7a2f; mask:url('/wp-content/themes/fayl-world/assets/icons/youtube.svg') center/contain no-repeat; -webkit-mask:url('/wp-content/themes/fayl-world/assets/icons/youtube.svg') center/contain no-repeat;}

/* ==================================================
   ACCOUNT MENU
================================================== */

.top-account-menu{
    display:flex;
    align-items:center;
    gap:14px;
}

.top-account-menu a{
    font-size:13px;
    text-decoration:none;
    color:#ffb089;
    padding:6px 10px;
    border-radius:8px;
    transition:.2s;
}

.top-account-menu a:hover{
    background:rgba(255,120,60,.15);
    color:#fff;
}

/* ==================================================
   ULTRA DROPDOWN (STABLE VERSION)
================================================== */

.ultra-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

/* hover bridge — чтобы меню не исчезало */
.ultra-dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:14px;
}

/* TRIGGER */

.user-trigger{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
    background:rgba(0,0,0,.25);
}

.user-trigger:hover{
    background:rgba(255,120,60,.15);
    box-shadow:0 0 14px rgba(255,80,20,.35);
}

/* AVATAR */

.user-avatar{
    position:relative;
}

.user-avatar img{
    border-radius:50%;
    box-shadow:0 0 10px rgba(255,120,60,.35);
}

/* ONLINE DOT */

.user-online{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3cff79;
    box-shadow:0 0 6px #3cff79;
}

/* NAME */

.user-name{
    font-size:13px;
    color:#ffb089;
}

/* ARROW */

.user-arrow{
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #ffb089;
}

/* DROPDOWN PANEL */

.user-dropdown{
    position:absolute;
    right:0;
    top:100%;
    margin-top:8px;
    min-width:190px;

    background:linear-gradient(180deg,#2b0f0a,#160605);
    border:1px solid rgba(255,120,60,.25);
    border-radius:14px;

    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;

    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:.22s ease;

    box-shadow:0 14px 35px rgba(0,0,0,.6);
    z-index:9999;
}

/* SHOW */

.ultra-dropdown:hover .user-dropdown{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* LINKS */

.user-dropdown a{
    padding:9px 12px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    color:#ffb089;
    transition:.2s;
}

.user-dropdown a:hover{
    background:rgba(255,120,60,.15);
    color:#fff;
}

.user-dropdown .logout{
    color:#ff7a2f;
}

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

@media(max-width:768px){

    .ultra-dropdown:focus-within .user-dropdown{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

}
/* ===============================================================================================================================  */
/* ==================================================
   FINAL FOOTER PRO — NEWORLD
================================================== */

.footer-wrapper{
    margin-top:60px;
}

/* MAIN PANEL */

.ultra-footer{
    background:linear-gradient(180deg,#140705,#07090d);
    border-top:1px solid rgba(255,120,60,.25);
    box-shadow:0 -10px 40px rgba(0,0,0,.6) inset;
}

.ultra-footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:50px 20px;

    display:grid;
    grid-template-columns:2fr 2fr 1.5fr 1.5fr;
    gap:40px;
}

/* TITLES */

.footer-col h4{
    margin-bottom:14px;
    font-size:15px;
    color:#ffb089;
    letter-spacing:.5px;
}

/* TEXT */

.footer-text{
    opacity:.7;
    font-size:14px;
    margin:14px 0;
}

/* ==================================================
   NAVIGATION — ROW STYLE
================================================== */

.footer-menu{
    list-style:none;
    padding:0;
    margin:0;

    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.footer-menu li{
    margin:0;
}

.footer-menu a{
    text-decoration:none;
    color:#9aa4b2;
    padding:6px 10px;
    border-radius:8px;
    transition:.2s;
}

.footer-menu a:hover{
    background:rgba(255,120,60,.15);
    color:#fff;
}

/* LINKS */

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:8px;
    color:#9aa4b2;
}

.footer-links a{
    text-decoration:none;
    color:#9aa4b2;
    transition:.2s;
}

.footer-links a:hover{
    color:#fff;
}

/* SOCIAL */

.footer-social{
    display:flex;
    gap:12px;
    margin-top:14px;
}

/* ==================================================
   BOTTOM BAR
================================================== */

.footer-bottom{
    border-top:1px solid rgba(255,120,60,.15);
    background:#05070b;
}

.footer-bottom-inner{
    max-width:1200px;
    margin:0 auto;
    padding:16px 20px;

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

    font-size:13px;
    opacity:.75;
}

/* SCROLL UP BUTTON */

.footer-up{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:18px;
    color:#ffb089;

    background:linear-gradient(180deg,#2b0f0a,#160605);
    border:1px solid rgba(255,120,60,.3);

    transition:.25s;
}

.footer-up:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 0 12px rgba(255,80,20,.4);
}

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

@media(max-width:900px){

    .ultra-footer-inner{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:600px){

    .ultra-footer-inner{
        grid-template-columns:1fr;
    }

    .footer-menu{
        justify-content:center;
    }

    .footer-bottom-inner{
        flex-direction:column;
        text-align:center;
    }

}

/* ==================================================
   GLOBAL UI POLISH — NEWORLD LAUNCHER STYLE
================================================== */

/* -----------------------------------
   1. GLOBAL BACKGROUND DEPTH
----------------------------------- */

.site-wrapper{
    background:
        radial-gradient(circle at 50% -200px, rgba(255,80,20,.08), transparent 60%),
        #05070b;
}

/* -----------------------------------
   2. HEADER + FOOTER VISUAL CONNECTION
----------------------------------- */

.header-wrapper{
    box-shadow:0 20px 40px rgba(0,0,0,.6);
    position:relative;
    z-index:40;
}

.ultra-footer{
    position:relative;
}

/* glow линия сверху футера */

.ultra-footer::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,120,60,.6),
        transparent
    );
}

/* -----------------------------------
   3. GLOBAL PANEL STYLE (GRID INFO FEEL)
----------------------------------- */

.site-header,
.top-header,
.ultra-footer{
    backdrop-filter: blur(6px);
}

/* -----------------------------------
   4. MENU MICRO ANIMATION
----------------------------------- */

.main-navigation a,
.footer-menu a,
.top-account-menu a{
    position:relative;
}

.main-navigation a::after,
.footer-menu a::after,
.top-account-menu a::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    bottom:2px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,120,60,.6),
        transparent
    );

    opacity:0;
    transform:scaleX(.6);
    transition:.25s;
}

.main-navigation a:hover::after,
.footer-menu a:hover::after,
.top-account-menu a:hover::after{
    opacity:1;
    transform:scaleX(1);
}

/* -----------------------------------
   5. DROPDOWN DEPTH POLISH
----------------------------------- */

.user-dropdown{
    backdrop-filter: blur(8px);
    box-shadow:
        0 14px 35px rgba(0,0,0,.7),
        0 0 18px rgba(255,80,20,.15);
}

/* subtle glow avatar */

.user-avatar img{
    transition:.3s;
}

.ultra-dropdown:hover .user-avatar img{
    box-shadow:0 0 16px rgba(255,80,20,.6);
}

/* -----------------------------------
   6. SCROLL SMOOTH (launcher feel)
----------------------------------- */

html{
    scroll-behavior:smooth;
}

/* -----------------------------------
   7. FOOTER UP BUTTON ANIMATION
----------------------------------- */

.footer-up{
    transition:.25s;
}

.footer-up:hover{
    transform:translateY(-4px) scale(1.05);
}

/* -----------------------------------
   8. GLOBAL CARD HOVER CONSISTENCY
----------------------------------- */

.latest-post,
.grid-info,
.w4os-login,
.widget{
    transition:.25s;
}

.latest-post:hover,
.widget:hover{
    box-shadow:0 0 25px rgba(255,80,20,.08);
}
/*=====================================================================================================================*/
/* ==================================================
   AAA + LAUNCHER MODE — FINAL GLOBAL UPGRADE
================================================== */


/* -----------------------------------
   1. STICKY HEADER (AAA FEEL)
----------------------------------- */

.header-wrapper{
    position:sticky;
    top:0;
    z-index:1000;

    backdrop-filter: blur(10px);
    background:linear-gradient(
        180deg,
        rgba(20,7,5,.85),
        rgba(10,10,14,.65)
    );
}

/* subtle glow under header */

.header-wrapper::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,120,60,.6),
        transparent
    );
}


/* -----------------------------------
   2. GLOBAL CARD AAA STYLE
----------------------------------- */

.widget,
.latest-post,
.w4os-login,
.grid-info{
    background:linear-gradient(180deg,#140705,#0a0c11);
    border:1px solid rgba(255,120,60,.12);
    border-radius:16px;

    transition:.25s;
}

.widget:hover,
.latest-post:hover{
    border-color:rgba(255,120,60,.35);
    box-shadow:
        0 0 18px rgba(255,80,20,.15),
        0 12px 30px rgba(0,0,0,.5);
}


/* -----------------------------------
   3. LAUNCHER BUTTON STYLE
----------------------------------- */

button,
.button,
.wp-block-button__link{
    border-radius:12px;
    background:linear-gradient(180deg,#3a140c,#1a0806);
    border:1px solid rgba(255,120,60,.3);
    transition:.25s;
}

button:hover,
.button:hover,
.wp-block-button__link:hover{
    transform:translateY(-2px);
    box-shadow:0 0 18px rgba(255,80,20,.35);
}


/* -----------------------------------
   4. NAVIGATION AAA MICRO ANIMATION
----------------------------------- */

.main-navigation a{
    position:relative;
}

.main-navigation a::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-6px;
    width:0;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #ff7a2f,
        transparent
    );

    transition:.25s;
    transform:translateX(-50%);
}

.main-navigation a:hover::before{
    width:70%;
}


/* -----------------------------------
   5. DROPDOWN LAUNCHER GLASS
----------------------------------- */

.user-dropdown{
    backdrop-filter: blur(14px);
    background:linear-gradient(
        180deg,
        rgba(35,10,8,.92),
        rgba(15,6,6,.92)
    );
}


/* -----------------------------------
   6. ONLINE DOT — AAA PULSE
----------------------------------- */

.user-online{
    animation:onlinePulse 2s infinite ease-in-out;
}

@keyframes onlinePulse{
    0%{ box-shadow:0 0 4px #3cff79; }
    50%{ box-shadow:0 0 10px #3cff79; }
    100%{ box-shadow:0 0 4px #3cff79; }
}


/* -----------------------------------
   7. FOOTER AAA DEPTH
----------------------------------- */

.ultra-footer{
    background:
        radial-gradient(circle at 50% -200px, rgba(255,80,20,.08), transparent 60%),
        linear-gradient(180deg,#140705,#05070b);
}


/* -----------------------------------
   8. GLOBAL SCROLLBAR (LAUNCHER TOUCH)
----------------------------------- */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#05070b;
}

::-webkit-scrollbar-thumb{
    background:rgba(255,120,60,.25);
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(255,120,60,.5);
}