/* =========================================================
   ZNILATHOSS SPORTS
   HEADER.CSS
   رأس التطبيق
   ========================================================= */


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

.app-header {

    position: relative;

    width: 100%;

    min-width: 0;

    background:
        var(--navy);

    color:
        var(--white);

    z-index: 1000;
}


/* =========================================================
   HEADER INNER
   ========================================================= */

.header-inner {

    width: 100%;

    max-width:
        var(--content-max-width);

    min-width: 0;

    min-height:
        var(--header-height);

    margin:
        0 auto;

    padding:
        0 var(--page-padding);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


/* =========================================================
   LOGO / APP NAME
   ========================================================= */

.app-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;

    color:
        var(--white);

    font-size:
        clamp(15px, 2vw, 21px);

    font-weight:
        900;

    white-space:
        nowrap;
}


.app-brand-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    flex:
        0 0 31px;

    background:
        rgba(255, 255, 255, .10);

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius:
        9px;

    font-size:
        15px;
}


.app-brand-text{

    overflow:
        hidden;

    text-overflow:
        center;

    white-space:
        nowrap;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;
}


/* =========================================================
   HEADER BUTTON
   ========================================================= */

.header-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    padding:
        0;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius:
        9px;

    color:
        var(--white);

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        background-color var(--transition),
        transform var(--transition),
        border-color var(--transition);
}


.header-button:hover {

    background:
        rgba(255, 255, 255, .15);

    border-color:
        rgba(255, 255, 255, .18);

    transform:
        translateY(-1px);
}


.header-button:active {

    transform:
        translateY(0);
}


.header-button:focus-visible {

    outline:
        2px solid var(--blue-light);

    outline-offset:
        2px;
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

.menu-toggle {

    display:
        none;
}


/* =========================================================
   SEARCH AREA
   ========================================================= */

.header-search {

    width: 100%;

    max-width:
        var(--content-max-width);

    margin:
        0 auto;

    padding:
        0 var(--page-padding) 8px;
}


.header-search-form {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        38px;

    background:
        rgba(255, 255, 255, .07);

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius:
        10px;

    overflow:
        hidden;

    transition:
        border-color var(--transition),
        background-color var(--transition);
}


.header-search-form:focus-within {

    background:
        rgba(255, 255, 255, .10);

    border-color:
        rgba(255, 255, 255, .25);
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.header-search-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    color:
        rgba(255, 255, 255, .70);

    font-size:
        14px;
}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

.header-search input {

    width:
        100%;

    min-width:
        0;

    height:
        38px;

    padding:
        0 4px;

    background:
        transparent;

    border:
        0;

    outline:
        0;

    color:
        var(--white);

    font-size:
        11px;
}


.header-search input::placeholder {

    color:
        rgba(255, 255, 255, .55);
}


/* =========================================================
   HEADER SUBTITLE
   ========================================================= */

.header-subtitle {

    width:
        100%;

    max-width:
        var(--content-max-width);

    margin:
        0 auto;

    padding:
        0 var(--page-padding) 7px;

    color:
        rgba(255, 255, 255, .58);

    font-size:
        9px;

    font-weight:
        600;

    text-align:
        right;
}


/* =========================================================
   HEADER DIVIDER
   ========================================================= */

.header-divider {

    width:
        100%;

    height:
        1px;

    background:
        rgba(255, 255, 255, .07);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .header-inner {

        min-height:
            56px;

        gap:
            10px;
    }


    .app-brand {

        font-size:
            17px;
    }


    .app-brand-icon {

        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;
    }


    .header-search {

        padding-bottom:
            7px;
    }
}


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

@media (max-width: 700px) {

    .header-inner {

        min-height:
            54px;

        padding:
            0 8px;
    }


    .app-brand {

        font-size:
            15px;

        gap:
            6px;
    }


    .app-brand-icon {

        width:
            28px;

        height:
            28px;

        flex-basis:
            28px;

        border-radius:
            8px;

        font-size:
            13px;
    }


    .header-actions {

        gap:
            5px;
    }


    .header-button {

        width:
            34px;

        height:
            34px;

        border-radius:
            8px;

        font-size:
            14px;
    }


    .menu-toggle {

        display:
            inline-flex;
    }


    .header-search {

        padding:
            0 8px 7px;
    }


    .header-search-form {

        min-height:
            35px;

        border-radius:
            9px;
    }


    .header-search-icon {

        width:
            35px;

        height:
            35px;

        flex-basis:
            35px;
    }


    .header-search input {

        height:
            35px;

        font-size:
            10px;
    }


    .header-subtitle {

        padding:
            0 8px 6px;

        font-size:
            8px;
    }
}


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

@media (max-width: 420px) {

    .header-inner {

        min-height:
            50px;

        padding:
            0 6px;
    }


    .app-brand {

        font-size:
            13px;
    }


    .app-brand-icon {

        width:
            26px;

        height:
            26px;

        flex-basis:
            26px;
    }


    .header-button {

        width:
            31px;

        height:
            31px;

        font-size:
            13px;
    }


    .header-search {

        padding:
            0 6px 6px;
    }


    .header-search-form {

        min-height:
            33px;
    }


    .header-search-icon {

        width:
            33px;

        height:
            33px;

        flex-basis:
            33px;
    }


    .header-search input {

        height:
            33px;

        font-size:
            9px;
    }


    .header-subtitle {

        padding:
            0 6px 5px;

        font-size:
            7px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 340px) {

    .app-brand-text {

        max-width:
            150px;
    }


    .header-actions {

        gap:
            3px;
    }


    .header-button {

        width:
            29px;

        height:
            29px;
    }
}