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

.ftx-footer,
.ftx-footer *{
    box-sizing:border-box
}

.ftx-footer{
    --ftx-green:#08c84a;
    --ftx-text:#111820;
    --ftx-muted:#5f6973;
    --ftx-line:#e3e7e9;

    width:100%;
    margin:0;
    background:#fff;
    color:var(--ftx-text);
    font-family:Rajdhani, sans-serif
}

.ftx-footer svg{
    display:block;
    width:100%;
    height:100%;
    fill:currentColor
}

.ftx-footer__inner{
    width:calc(100% - 40px);
    max-width:1280px;
    margin:0 auto
}


/* DESKTOP */

.ftx-footer__desktop{
    display:grid;
    grid-template-columns:
        minmax(250px,1.45fr)
        minmax(145px,.8fr)
        minmax(175px,1fr)
        minmax(165px,.9fr)
        minmax(225px,1.15fr);

    padding:58px 0 52px
}

.ftx-footer__brand{
    padding-right:46px
}

.ftx-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 26px!important;
    color:#10171e!important
}

.ftx-brand__mark{
    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:42px;

    border-radius:8px 2px 8px 2px;
    background:var(--ftx-green);
    color:#fff;

    font-size:27px;
    line-height:1;
    font-weight:900;
    font-style:italic;

    transform:skew(-7deg)
}

.ftx-brand__name{
    font-size:29px;
    line-height:1;
    font-weight:900;
    letter-spacing:-1.5px
}

.ftx-footer__description{
    max-width:300px;
    margin:0!important;

    color:#4f5b65;
    font-size:14px;
    line-height:1.75
}

.ftx-footer__slogan{
    margin-top:33px
}

.ftx-footer__slogan>span{
    display:block;
    width:36px;
    height:3px;
    margin-bottom:14px;
    background:var(--ftx-green)
}

.ftx-footer__slogan small{
    color:#a0a8af;
    font-size:9px;
    letter-spacing:4.6px
}


/* COLUMNS */

.ftx-footer__column{
    min-width:0;
    padding:0 30px;
    border-left:1px solid var(--ftx-line)
}

.ftx-footer__column:last-child{
    padding-right:0
}

.ftx-footer__column h3{
    margin:0 0 25px!important;

    color:#111820;
    font-size:14px;
    line-height:1.2;
    font-weight:800
}

.ftx-footer__column h3:after{
    content:"";
    display:block;

    width:29px;
    height:3px;
    margin-top:15px;

    background:var(--ftx-green)
}

.ftx-footer__column>a:not(.ftx-app-button){
    display:block;

    margin:0 0 11px!important;

    color:#525e68!important;
    font-size:13px;
    line-height:1.4
}

.ftx-footer__column>a:not(.ftx-app-button):hover{
    color:var(--ftx-green)!important
}

.ftx-footer__all{
    font-weight:700
}


/* DOWNLOAD */

.ftx-footer__download>p{
    margin:-2px 0 17px!important;

    color:#5d6872;
    font-size:12px;
    line-height:1.55
}

.ftx-app-button{
    display:grid!important;
    grid-template-columns:34px 1fr 10px;
    align-items:center;

    width:100%;
    min-height:61px;

    margin:0 0 10px!important;
    padding:9px 12px!important;

    border:1px solid #dce2e5!important;
    border-radius:10px!important;

    background:#fff!important;
    box-shadow:none!important;

    color:#111820!important;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease
}

a.ftx-app-button:hover{
    border-color:#b9c4c9!important;
    box-shadow:0 5px 18px rgba(18,31,38,.07)!important;
    transform:translateY(-1px)
}

.ftx-app-button__icon{
    width:24px;
    height:24px;
    color:var(--ftx-green)
}

.ftx-app-button--disabled .ftx-app-button__icon{
    color:#111820
}

.ftx-app-button__text{
    display:flex;
    min-width:0;
    flex-direction:column
}

.ftx-app-button__text small{
    margin:0 0 3px;
    color:#7b848c;
    font-size:8px;
    line-height:1;
    letter-spacing:.25px
}

.ftx-app-button__text strong{
    color:#111820;
    font-size:14px;
    line-height:1.1;
    font-weight:800
}

.ftx-app-button__arrow{
    color:#707981;
    font-size:23px;
    line-height:1
}

.ftx-app-button--disabled{
    cursor:default;
    opacity:.9
}


/* BOTTOM */

.ftx-footer__bottom{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:25px;

    min-height:83px;
    padding:17px 0;

    border-top:1px solid var(--ftx-line)
}

.ftx-footer__bottom p,
.ftx-footer__bottom small{
    display:block;
    margin:0!important;

    color:#68737c;
    font-size:11px;
    line-height:1.6
}

.ftx-footer__locale{
    display:flex;
    align-items:center;
    gap:9px;

    color:#303941;
    font-size:11px;
    white-space:nowrap
}

.ftx-footer__globe{
    width:19px;
    height:19px
}

.ftx-footer__mobile,
.ftx-footer__mobile-policy{
    display:none
}


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

@media(max-width:767px){

    .ftx-footer{
        border-radius:24px 24px 0 0
    }

    .ftx-footer__inner{
        width:100%;
        padding:0 20px
    }

    .ftx-footer__desktop{
        display:none
    }

    .ftx-footer__mobile{
        display:block
    }

    .ftx-mobile-brand{
        padding:31px 3px 27px
    }

    .ftx-mobile-brand .ftx-brand{
        margin-bottom:22px!important
    }

    .ftx-mobile-brand .ftx-brand__mark{
        width:42px;
        height:40px
    }

    .ftx-mobile-brand .ftx-brand__name{
        font-size:28px
    }

    .ftx-mobile-brand>p{
        margin:0!important;

        color:#53606a;
        font-size:13px;
        line-height:1.75
    }

    .ftx-mobile-brand .ftx-footer__slogan{
        margin-top:27px
    }


    /* ACCORDION */

    .ftx-accordion{
        margin:0!important;
        border-top:1px solid var(--ftx-line)
    }

    .ftx-accordion:last-of-type{
        border-bottom:1px solid var(--ftx-line)
    }

    .ftx-accordion summary{
        display:grid;
        grid-template-columns:38px 1fr 12px;
        align-items:center;

        min-height:66px;
        padding:0 3px;

        cursor:pointer;
        list-style:none
    }

    .ftx-accordion summary::-webkit-details-marker{
        display:none
    }

    .ftx-accordion__icon{
        width:21px;
        height:21px;
        color:#242c33
    }

    .ftx-accordion summary strong{
        color:#141b21;
        font-size:13px;
        font-weight:800;
        letter-spacing:.1px
    }

    .ftx-accordion__chevron{
        width:9px;
        height:9px;

        border-right:1.5px solid #737d84;
        border-bottom:1.5px solid #737d84;

        transform:rotate(45deg);
        transition:transform .2s ease
    }

    .ftx-accordion[open] .ftx-accordion__chevron{
        transform:rotate(225deg)
    }

    .ftx-accordion__content{
        display:grid;
        gap:0;

        padding:0 0 17px 41px
    }

    .ftx-accordion__content a{
        padding:6px 0!important;

        color:#59656e!important;
        font-size:13px
    }


    /* APP CARD */

    .ftx-mobile-app{
        position:relative;
        overflow:hidden;

        margin-top:25px;
        padding:19px 13px 13px;

        border:1px solid #ddf3e5;
        border-radius:12px;

        background:
            linear-gradient(
                115deg,
                #effcf4 0%,
                #fbfffc 52%,
                #eafaf0 100%
            )
    }

    .ftx-mobile-app__heading{
        display:flex;
        align-items:center;
        gap:14px;

        padding:0 6px 16px
    }

    .ftx-mobile-app__phone{
        flex:0 0 28px;
        width:28px;
        height:28px;
        color:var(--ftx-green)
    }

    .ftx-mobile-app__heading strong{
        display:block;

        margin-bottom:3px;

        color:#151c21;
        font-size:14px;
        line-height:1.25;
        font-weight:800
    }

    .ftx-mobile-app__heading p{
        margin:0!important;

        color:#66717a;
        font-size:11px;
        line-height:1.45
    }

    .ftx-mobile-app__buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .ftx-mobile-app__buttons .ftx-app-button{
        grid-template-columns:27px 1fr;

        min-width:0;
        min-height:58px;

        margin:0!important;
        padding:8px 9px!important
    }

    .ftx-mobile-app__buttons .ftx-app-button__icon{
        width:21px;
        height:21px
    }

    .ftx-mobile-app__buttons .ftx-app-button__text small{
        font-size:7px
    }

    .ftx-mobile-app__buttons .ftx-app-button__text strong{
        font-size:12px
    }


    /* BOTTOM */

    .ftx-footer__bottom{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;

        margin-top:25px;
        padding:21px 0 31px
    }

    .ftx-footer__bottom p,
    .ftx-footer__bottom small{
        font-size:10px
    }

    .ftx-footer__locale{
        font-size:11px
    }

    .ftx-footer__mobile-policy{
        display:flex;
        align-items:center;
        gap:20px
    }

    .ftx-footer__mobile-policy a{
        color:#707980!important;
        font-size:10px
    }

}


/* Small phones: still keep store buttons side-by-side */
@media(max-width:360px){

    .ftx-footer__inner{
        padding-left:15px;
        padding-right:15px
    }

    .ftx-mobile-app__buttons{
        gap:5px
    }

    .ftx-mobile-app__buttons .ftx-app-button{
        padding-left:7px!important;
        padding-right:7px!important
    }

    .ftx-mobile-app__buttons .ftx-app-button__text strong{
        font-size:11px
    }

}


/* ==========================================================
   REAL FUTEMAX ASSETS V2
========================================================== */

.ftx-brand{
    display:block!important;
    width:210px;
    max-width:100%;
    margin:0 0 27px!important;
}

.ftx-brand__logo{
    display:block!important;
    width:205px!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    object-fit:contain;
}

.ftx-brand__mark,
.ftx-brand__name{
    display:none!important;
}


/* Real app icons */

.ftx-app-button__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px!important;
    height:30px!important;
}

.ftx-app-button__icon img{
    display:block!important;
    width:25px!important;
    height:25px!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain;
}

.ftx-app-button__icon--android img{
    width:26px!important;
    height:26px!important;
}

.ftx-app-button__icon--apple img{
    width:24px!important;
    height:24px!important;
}


/* Cleaner store buttons */

.ftx-app-button{
    grid-template-columns:35px 1fr 10px!important;
    min-height:62px!important;
    padding:10px 12px!important;
    border-radius:11px!important;
}

.ftx-app-button__text small{
    margin-bottom:4px!important;
    color:#8a9299!important;
    font-size:8px!important;
    font-weight:500!important;
    letter-spacing:.15px!important;
}

.ftx-app-button__text strong{
    color:#111820!important;
    font-size:14px!important;
    font-weight:800!important;
}


/* MOBILE */

@media(max-width:767px){

    .ftx-mobile-brand .ftx-brand{
        width:190px;
        margin-bottom:24px!important;
    }

    .ftx-mobile-brand .ftx-brand__logo{
        width:185px!important;
    }

    .ftx-mobile-app__buttons .ftx-app-button{
        grid-template-columns:31px 1fr!important;
    }

    .ftx-mobile-app__buttons .ftx-app-button__icon{
        width:25px!important;
        height:27px!important;
    }

    .ftx-mobile-app__buttons .ftx-app-button__icon img{
        width:23px!important;
        height:23px!important;
    }

    .ftx-mobile-app__buttons .ftx-app-button__icon--android img{
        width:24px!important;
        height:24px!important;
    }

    .ftx-mobile-app__buttons .ftx-app-button__icon--apple img{
        width:22px!important;
        height:22px!important;
    }

}

/* ==========================================================
   FUTEMAX FOOTER FOOTBALL ART V2
   ========================================================== */

.ftx-footer{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
}

.ftx-footer__inner{
    position:relative;
    z-index:2;
}

/*
 * Football artwork
 * Transparent PNG, so keep the image itself at full opacity.
 */
.ftx-footer:before{
    content:"";
    position:absolute;
    z-index:1;

    right:-20px;
    bottom:-25px;

    width:min(48vw, 720px);
    aspect-ratio:1536 / 1024;

    background:
        url('/wp-content/plugins/futemax-footer/assets/footer.png')
        right bottom / contain
        no-repeat;

    pointer-events:none;
}


/* Keep text/links above artwork */

.ftx-footer__desktop,
.ftx-footer__mobile,
.ftx-footer__bottom{
    position:relative;
    z-index:2;
}


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

@media(max-width:767px){

    .ftx-footer:before{
        right:-70px;
        bottom:0;

        width:360px;
        height:240px;

        background-size:contain;
        background-position:right bottom;
    }

    /*
     * No longer reserve space for the old circular ad.
     */
    .ftx-mobile-brand{
        padding-right:3px;
    }

    .ftx-mobile-brand:after{
        display:none!important;
        content:none!important;
    }

}


/* Small phones */

@media(max-width:380px){

    .ftx-footer:before{
        right:-80px;
        width:330px;
        height:220px;
    }

    .ftx-mobile-brand{
        padding-right:3px;
    }

}



/* ==========================================================
   FUTEMAX FOOTER MOBILE ART FIX V3
   Desktop unchanged
   ========================================================== */

@media(max-width:767px){

    /*
     * Reserve a clean visual zone underneath footer information.
     */
    .ftx-footer__inner{
        padding-bottom:145px;
    }

    /*
     * Football artwork sits BELOW the copyright / legal links.
     * Keep it wide so the green swoosh flows across the screen.
     */
    .ftx-footer:before{
        right:-28px;
        bottom:-8px;

        width:430px;
        height:155px;

        background-size:430px auto;
        background-position:right bottom;
        background-repeat:no-repeat;

        opacity:1;
    }

    /*
     * Keep the information area completely clean.
     */
    .ftx-footer__bottom{
        margin-bottom:0;
        padding-bottom:24px;
    }

}


/* Narrow phones */

@media(max-width:380px){

    .ftx-footer__inner{
        padding-bottom:135px;
    }

    .ftx-footer:before{
        right:-32px;
        bottom:-7px;

        width:400px;
        height:145px;

        background-size:400px auto;
        background-position:right bottom;
    }

}


/* ==========================================================
   FUTEMAX FOOTER MOBILE ART V4
   Artwork behind copyright area
   ========================================================== */

@media(max-width:767px){

    /* Remove V3 reserved empty space */
    .ftx-footer__inner{
        padding-bottom:0;
    }

    /*
     * Put football artwork behind copyright / locale / legal.
     */
    .ftx-footer:before{
        right:-45px;
        bottom:-5px;

        width:430px;
        height:235px;

        background-image:
            url('/wp-content/plugins/futemax-footer/assets/footer.png');

        background-size:430px auto;
        background-position:right bottom;
        background-repeat:no-repeat;

        opacity:.22;

        pointer-events:none;
    }

    /*
     * Copyright block stays above the image.
     */
    .ftx-footer__bottom{
        position:relative;
        z-index:2;

        margin-top:24px;
        margin-bottom:0;

        padding-top:22px;
        padding-bottom:32px;
    }

    .ftx-footer__bottom p,
    .ftx-footer__bottom small,
    .ftx-footer__locale,
    .ftx-footer__mobile-policy{
        position:relative;
        z-index:3;
    }

}


/* Small phones */

@media(max-width:380px){

    .ftx-footer__inner{
        padding-bottom:0;
    }

    .ftx-footer:before{
        right:-55px;
        bottom:-5px;

        width:400px;
        height:220px;

        background-size:400px auto;

        opacity:.20;
    }

}
