/* ==========================================================
   YouAndYou TV v2.0 RC2
   Header CSS
   Production Ready
==========================================================*/

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

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

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

    backdrop-filter:blur(14px);

    border-bottom:1px solid var(--border);

    z-index:1200;

}


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

.header-container{

    height:100%;

    max-width:100%;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


/* ===================================
   LEFT
=================================== */

.header-left{

    display:flex;

    align-items:center;

    gap:18px;

}


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

.menu-toggle{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:24px;

    cursor:pointer;

}

.menu-toggle:hover{

    background:var(--bg3);

}


/* ===================================
   LOGO
=================================== */

.site-logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:700;

}

.site-logo img{

    width:42px;

    height:42px;

    border-radius:10px;

    object-fit:cover;

}


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

.header-search{

    flex:1;

    display:flex;

    justify-content:center;

}

.search-form{

    width:100%;

    max-width:700px;

    display:flex;

    align-items:center;

}

.search-input{

    flex:1;

    height:48px;

    padding:0 18px;

    border:1px solid var(--border);

    border-right:none;

    border-radius:999px 0 0 999px;

    background:var(--bg2);

    color:#fff;

    font-size:16px;

}

.search-input:focus{

    border-color:var(--secondary);

}

.search-btn{

    width:70px;

    height:48px;

    border-radius:0 999px 999px 0;

    background:var(--bg3);

    border:1px solid var(--border);

    color:#fff;

    font-size:18px;

}

.search-btn:hover{

    background:var(--primary);

}


/* ===================================
   RIGHT
=================================== */

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}


/* ===================================
   ICON BUTTON
=================================== */

.icon-btn{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:20px;

    transition:var(--transition);

}

.icon-btn:hover{

    background:var(--bg3);

}


/* ===================================
   CREATE BUTTON
=================================== */

.create-btn{

    display:flex;

    align-items:center;

    gap:8px;

    height:44px;

    padding:0 18px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

}

.create-btn:hover{

    background:var(--primary-hover);

}


/* ===================================
   PROFILE
=================================== */

.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid var(--secondary);

}


/* ===================================
   NOTIFICATION BADGE
=================================== */

.notification{

    position:relative;

}

.notification-count{

    position:absolute;

    top:3px;

    right:3px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:11px;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.mobile-search{

    display:none;

}


/* ===================================
   RESPONSIVE
=================================== */

/* Laptop */

@media(max-width:1200px){

.search-form{

max-width:520px;

}

}


/* Tablet */

@media(max-width:992px){

.site-logo span{

display:none;

}

.create-btn span{

display:none;

}

.create-btn{

padding:0;

width:46px;

justify-content:center;

}

}


/* Mobile */

@media(max-width:768px){

.header-container{

padding:0 12px;

}

.header-search{

display:none;

}

.mobile-search{

display:flex;

}

.site-logo img{

width:36px;

height:36px;

}

.user-avatar{

width:36px;

height:36px;

}

.icon-btn{

width:42px;

height:42px;

}

.menu-toggle{

width:42px;

height:42px;

}

}


/* Small Mobile */

@media(max-width:480px){

.header-right{

gap:6px;

}

.icon-btn{

font-size:18px;

}

}