/* ===================================
   MEDISTORE COMMON HEADER CSS
=================================== */


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    font-family:Arial, Helvetica, sans-serif;
}



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


.ms-container{

    max-width:1400px;
    margin:auto;
    padding:0 20px;

}



/* ===================================
   TOP BAR
=================================== */


.ms-topbar{

    background:#061e57;
    color:#fff;
    font-size:16px;

}



.ms-topbar .ms-container{

    height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}



.ms-top-left,
.ms-top-right{

    display:flex;
    align-items:center;
    gap:25px;

}



.ms-top-right span{

    color:#fff;

}



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


.ms-main-header{

    background:#fff;
    padding:15px 0;
    border-bottom:1px solid #e5e5e5;

}



.ms-main-header .ms-container{

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

}



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


.ms-logo{

    flex-shrink:0;

}



.ms-logo img{

    width:180px;
    max-height:70px;
    object-fit:contain;

}



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


.ms-search{

    flex:1;
    max-width:700px;

}



.ms-search form{

    display:flex;
    width:100%;

}



.ms-search input[type="search"]{

    flex:1;

    height:45px;

    padding:0 18px;

    border:2px solid #0d520d;

    border-right:none;

    outline:none;

    font-size:15px;

    border-radius:25px 0 0 25px;

}



.ms-search button{

    width:60px;

    border:none;

    background:#0c5203;

    color:#fff;

    cursor:pointer;

    border-radius:0 25px 25px 0;

}



.ms-search button .dashicons{

    font-size:24px;

}



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


.ms-search-icon{

    display:none;

    color:#0b5ea8;

    text-decoration:none;

}



.ms-search-icon .dashicons{

    font-size:30px;

}



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


.ms-icons{

    display:flex;

    align-items:center;

    gap:20px;

}



.ms-icons a{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}



.ms-icons a:hover{

    transform:translateY(-4px);

    background:#eaf4ff;

}



.ms-icons .dashicons{

    font-size:26px;

}



.ms-icons small{

    font-size:12px;

    margin-top:3px;

}



/* ICON COLORS */


.ms-account .dashicons{

    color:#0b5ea8;

}



.ms-cart .dashicons{

    color:#0a8f55;

}



.ms-favorite .dashicons{

    color:#e91e63;

}



/* ===================================
   NAVIGATION
=================================== */


.ms-navbar{

    background:#061e57;

}



.ms-navbar .ms-container{

    display:flex;

    justify-content:center;

}



.ms-navbar ul{

    display:flex;

    list-style:none;

}



.ms-navbar li{

    margin:0;

}



.ms-navbar a{

    display:block;

    padding:18px 28px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.ms-navbar a:hover{

    background:#e91e63;

    color:#fff;

}



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


.ms-mobile-menu-btn{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

}



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


@media(max-width:768px){


.ms-container{

    padding:0 12px;

}



/* TOP BAR */

.ms-topbar{

    display:block;

    font-size:12px;

    line-height:1.4;

}



.ms-topbar .ms-container{

    height:auto;

    padding:8px 12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

}



.ms-top-left,
.ms-top-right{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    text-align:center;

}



.ms-top-right span{

    font-size:12px;

}



/* MAIN HEADER */


.ms-main-header{

    padding:10px 0;

}



.ms-main-header .ms-container{

    flex-direction:row;

    justify-content:space-between;

    gap:10px;

}



/* LOGO */


.ms-logo img{

    width:120px;

    max-height:55px;

}



/* SEARCH */


.ms-search{

    display:none;

}



.ms-search-icon{

    display:block;

    margin-left:auto;

}



/* ICONS */


.ms-icons{

    gap:6px;

}



.ms-icons a{

    width:42px;

    height:42px;

}



.ms-icons .dashicons{

    font-size:22px;

}



.ms-icons small{

    display:none;

}



/* MOBILE NAV */


.ms-navbar .ms-container{

    display:block;

}



.ms-mobile-menu-btn{

    display:block;

    width:100%;

    margin:0;

    text-align:right;

    padding:10px 15px;

    background:#0b5ea8;

}



.ms-navbar ul{

    display:none;

    flex-direction:column;

    width:100%;

}



.ms-navbar ul.active{

    display:flex;

}



.ms-navbar li{

    width:100%;

}



.ms-navbar a{

    padding:15px 20px;

    border-top:1px solid rgba(255,255,255,.15);

}


}



/* ===================================
   DESKTOP COMPACT
=================================== */


@media(min-width:769px){


.ms-main-header{

    padding:10px 0;

}



.ms-logo img{

    width:180px;

}



.ms-icons a{

    width:55px;

    height:55px;

}


}