/* ==========================================================================
   FarsKids v30 - app-like motion, mobile bottom navigation, mobile footer.
   Loaded AFTER style.css (see functions.php) so it is the final word.
   ========================================================================== */

/* --- 1. Route transitions ------------------------------------------------
   Motion itself is driven from js/other.js (Web Animations API). The old
   "blur + dim the page while loading" look is switched off for good, so the
   visitor never gets a loading feeling.                                      */
html body .fk-route-loading,
html .fk-route-loading{
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    pointer-events:auto!important;
    transition:none!important;
}
html{ -webkit-tap-highlight-color:transparent; }
body{ overflow-x:hidden; }

/* progress bar: thinner, softer, brand gradient (only shows on slow requests) */
#fk-page-loader{
    height:2.5px!important;
    background:linear-gradient(90deg,#7c3aed,#d946ef 60%,#f472b6)!important;
    box-shadow:0 0 12px rgba(217,70,239,.55)!important;
    border-radius:0 2px 2px 0!important;
}

/* --- 2. Mobile bottom navigation ----------------------------------------- */
@media (max-width:1023px){
    :root{ --fk-nav-cut:#171514; }

    html body #farskids-fixed-menu .fixedside-bottom{
        position:fixed!important;
        left:0!important; right:0!important; bottom:0!important;
        width:100%!important;
        margin:0!important;
        height:auto!important;
        min-height:0!important;
        padding:6px 8px calc(3px + env(safe-area-inset-bottom,0px))!important;
        border:0!important;
        border-top:1px solid rgba(255,255,255,.07)!important;
        border-radius:0!important;
        background:rgba(23,21,20,.88)!important;
        -webkit-backdrop-filter:saturate(1.6) blur(18px);
        backdrop-filter:saturate(1.6) blur(18px);
        box-shadow:0 -10px 28px rgba(0,0,0,.30)!important;
        overflow:visible!important;
        z-index:10020!important;
    }

    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        grid-template-rows:auto!important;
        align-items:stretch!important;
        gap:0!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        list-style:none!important;
    }
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li{
        display:flex!important;
        position:relative!important;
        width:100%!important; min-width:0!important; max-width:none!important;
        height:auto!important; min-height:0!important;
        margin:0!important; padding:0!important;
        background:transparent!important;
        overflow:visible!important;
    }

    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a,
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a:hover,
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a:focus,
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a:active,
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a.fk-mobile-active{
        position:relative!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:2px!important;
        flex:1 1 auto!important;
        width:100%!important; min-width:0!important; max-width:100%!important;
        height:auto!important; min-height:50px!important;
        margin:0!important; padding:3px 0 2px!important;
        border:0!important; outline:0!important; box-shadow:none!important;
        background:transparent!important;
        color:#8b8580!important;
        text-align:center!important;
        line-height:1!important;
        white-space:nowrap!important;
        overflow:visible!important;
        transform:none!important;
        opacity:1!important;
        transition:color .25s ease!important;
        -webkit-tap-highlight-color:transparent;
        touch-action:manipulation;
    }
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a.fk-mobile-active{ color:#fff!important; }
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a::before,
    html body #farskids-fixed-menu .fixedside-bottom ul.fk-bn-list > li > a::after{
        content:none!important; display:none!important;
    }

    /* icon holder: a soft pill grows behind the icon of the active tab */
    html body #farskids-fixed-menu .fixedside-bottom .fk-mobile-icon{
        position:relative!important;
        display:grid!important;
        place-items:center!important;
        width:48px!important; min-width:48px!important; max-width:48px!important;
        height:30px!important; min-height:30px!important; max-height:30px!important;
        flex:0 0 30px!important;
        margin:0!important; padding:0!important;
        line-height:0!important;
        transform:none!important;
        transition:transform .28s cubic-bezier(.34,1.56,.64,1)!important;
    }
    html body #farskids-fixed-menu .fixedside-bottom li > a:active .fk-mobile-icon{ transform:scale(.86)!important; }

    html body #farskids-fixed-menu .fixedside-bottom .fk-bn-pill{
        position:absolute; inset:0;
        border-radius:15px;
        background:linear-gradient(135deg,rgba(168,85,247,.24),rgba(225,29,202,.20));
        opacity:0;
        transform:scale(.45);
        transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
        pointer-events:none;
    }
    html body #farskids-fixed-menu .fixedside-bottom a.fk-mobile-active .fk-bn-pill{ opacity:1; transform:scale(1); }

    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico{
        grid-area:1/1;
        display:block!important;
        width:23px!important; height:23px!important;
        min-width:23px!important; min-height:23px!important;
        margin:0!important; padding:0!important;
        flex:none!important;
        overflow:visible;
        transform-origin:50% 50%;
        transition:transform .38s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    }
    /* idle = outline, active = solid gradient */
    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico-o{
        fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
        opacity:1; transform:scale(1);
    }
    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico-s{
        opacity:0; transform:scale(.55);
        fill:none; stroke:none;
    }
    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico-s .s{ fill:url(#fkNavGrad) #d946ef; stroke:none; }
    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico-s .h{ fill:none; stroke:url(#fkNavGrad) #d946ef; stroke-width:2.6; stroke-linecap:round; }
    html body #farskids-fixed-menu .fixedside-bottom svg.fk-bn-ico-s .c{ fill:none; stroke:var(--fk-nav-cut); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    html body #farskids-fixed-menu .fixedside-bottom a.fk-mobile-active svg.fk-bn-ico-o{ opacity:0; transform:scale(.55); }
    html body #farskids-fixed-menu .fixedside-bottom a.fk-mobile-active svg.fk-bn-ico-s{
        opacity:1; transform:scale(1);
        filter:drop-shadow(0 2px 7px rgba(217,70,239,.45));
    }

    html body #farskids-fixed-menu .fixedside-bottom .fk-bn-label{
        display:block!important;
        width:100%!important; max-width:100%!important;
        height:auto!important; min-height:0!important; max-height:none!important;
        margin:0!important; padding:0!important;
        font-size:10.5px!important;
        line-height:1.25!important;
        font-weight:500!important;
        letter-spacing:0!important;
        color:inherit!important;
        text-align:center!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        transform:none!important;
        transition:color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1)!important;
    }
    html body #farskids-fixed-menu .fixedside-bottom a.fk-mobile-active .fk-bn-label{ font-weight:700!important; }

    @media (max-width:360px){
        html body #farskids-fixed-menu .fixedside-bottom .fk-bn-label{ font-size:9.5px!important; }
        html body #farskids-fixed-menu .fixedside-bottom .fk-mobile-icon{ width:42px!important; min-width:42px!important; max-width:42px!important; }
    }

    /* page content clears the (now lower and slimmer) navigation */
    body{ padding-bottom:calc(var(--fk-mobile-nav-real-height,62px) + 6px)!important; }
}

/* --- 3. Mobile footer: tidy actions + footer hugs the bottom -------------- */
@media (max-width:1199px){
    /* On short pages the footer is pushed down to sit right above the nav, instead of
       floating in the middle of the screen with a big empty gap underneath it. */
    body > .xl\:container,
    body > div.xl\:container,
    body > .fk-page-grid{
        min-height:calc(100dvh - var(--fk-app-header-height,62px) - var(--fk-mobile-nav-real-height,62px) - var(--fk-footer-h,160px) - 14px);
    }

    html body footer.fk-mobile-site-footer{
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:14px!important;
        margin:0 14px 6px!important;
        padding:16px 0 4px!important;
        border-top:1px solid rgba(255,255,255,.08)!important;
        background:transparent!important;
        text-align:center;
    }

    /* page links: one tidy row of equal chips */
    html body footer.fk-mobile-site-footer .fk-mobile-footer-pages{
        display:flex!important;
        flex-wrap:nowrap!important;
        justify-content:center!important;
        gap:8px!important;
        margin:0!important; padding:0!important;
        width:100%!important;
    }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-pages a{
        flex:1 1 0!important;
        min-width:0!important;
        display:flex!important; align-items:center!important; justify-content:center!important;
        min-height:38px!important;
        padding:6px 6px!important;
        border:1px solid rgba(255,255,255,.08)!important;
        border-radius:12px!important;
        background:rgba(255,255,255,.04)!important;
        color:#a8a29e!important;
        font-size:11.5px!important;
        line-height:1.3!important;
        white-space:nowrap!important;
        transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease!important;
    }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-pages a:active{ transform:scale(.97); }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-pages a[aria-current="page"]{
        color:#fff!important;
        border-color:rgba(217,70,239,.45)!important;
        background:rgba(217,70,239,.12)!important;
    }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-pages a[aria-current="page"]::after{ content:none!important; display:none!important; }

    /* the four action tiles (social + install) share ONE grid, identical size and icon style */
    html body footer.fk-mobile-site-footer .fk-mobile-footer-actions{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:8px!important;
        margin:0!important; padding:0!important;
    }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-social,
    html body footer.fk-mobile-site-footer .fk-pwa-install-links{
        display:contents!important;
    }
    html body footer.fk-mobile-site-footer .fk-act{
        appearance:none; -webkit-appearance:none;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:6px!important;
        width:100%!important; height:auto!important;
        min-width:0!important; min-height:64px!important;
        margin:0!important; padding:10px 4px 9px!important;
        border:1px solid rgba(255,255,255,.08)!important;
        border-radius:16px!important;
        background:rgba(255,255,255,.04)!important;
        color:#b4aea8!important;
        font:inherit;
        font-size:11px!important;
        line-height:1.2!important;
        text-decoration:none!important;
        cursor:pointer;
        box-shadow:none!important;
        transition:background .22s ease,color .22s ease,border-color .22s ease,transform .25s cubic-bezier(.34,1.56,.64,1)!important;
        -webkit-tap-highlight-color:transparent;
    }
    html body footer.fk-mobile-site-footer .fk-act:hover,
    html body footer.fk-mobile-site-footer .fk-act:focus-visible{
        color:#fff!important;
        border-color:rgba(217,70,239,.5)!important;
        background:rgba(217,70,239,.12)!important;
        outline:none!important;
    }
    html body footer.fk-mobile-site-footer .fk-act:active{ transform:scale(.94); }
    html body footer.fk-mobile-site-footer .fk-act > svg{
        display:block!important;
        width:22px!important; height:22px!important;
        min-width:22px!important; min-height:22px!important;
        flex:0 0 22px!important;
        margin:0!important;
    }
    /* outline glyphs (instagram / telegram) */
    html body footer.fk-mobile-site-footer .fk-act > svg.fk-bn-ico{
        fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
    }
    /* brand glyphs (android / apple) are solid shapes */
    html body footer.fk-mobile-site-footer .fk-act-android > svg{ fill:currentColor; stroke:none; }
    html body footer.fk-mobile-site-footer .fk-act-ios > svg{ fill:currentColor; stroke:none; }
    html body footer.fk-mobile-site-footer .fk-act span{
        display:block!important;
        font-size:11px!important;
        line-height:1.2!important;
        font-weight:500;
        color:inherit!important;
        white-space:nowrap;
    }

    /* copyright: last, quiet */
    html body footer.fk-mobile-site-footer .fk-mobile-footer-meta{
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:6px!important;
        margin:2px 0 0!important; padding:0!important;
        min-height:0!important;
    }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-copyright{ font-size:11px!important; color:#6f6a65!important; }
    html body footer.fk-mobile-site-footer .fk-mobile-footer-brand{ width:18px!important; height:18px!important; }
}

/* --- 4. Respect reduced-motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
    html body #farskids-fixed-menu .fixedside-bottom *{ transition-duration:.01ms!important; }
}