/* bayin.com — language switcher styles */

/* 右上角登录 / 注册 / 语言切换：与顶部主导航 (.main-menu nav ul li a) 字体保持一致
   （Poppins 16px / 500 / capitalize，白色，悬停 #26c6da） */
.header-top-right > ul > li > a {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-transform: capitalize;
    text-decoration: none;
}
.header-top-right > ul > li > a:hover,
.header-top-right > ul > li > a:focus {
    color: #26c6da;
    text-decoration: none;
}
/* 登录与注册之间的细分隔线 */
.header-top-right .top-right-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 12px;
    vertical-align: middle;
    background: #ffffff;
    opacity: .45;
}

.header-top-right .lang-switcher { position: relative; }
.lang-switcher .lang-toggle { cursor: pointer; white-space: nowrap; }
.lang-switcher .lang-toggle .lang-current { margin: 0 2px; font-weight: 500; letter-spacing: .5px; }
.lang-switcher .lang-toggle .fa-angle-down { margin-left: 2px; }

.lang-switcher .lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 8px 0 0;
    padding: 6px 0;
    min-width: 160px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 9999;
    display: none;
    /* the dark top bar sets text-align:right - items must stay left aligned,
       otherwise a huge blank gap opens on the left of the panel */
    text-align: left;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-switcher .lang-menu li { list-style: none; margin: 0; padding: 0; }
.lang-switcher .lang-menu li a {
    display: block;
    padding: 8px 18px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}
.lang-switcher .lang-menu li a:hover,
.lang-switcher .lang-menu li a:focus { background: #f5f6f8; text-decoration: none; }
.lang-switcher .lang-menu li.active a { color: #00c3c3; font-weight: 600; }
.lang-switcher .lang-menu li.active a::before {
    content: "\f00c";
    font-family: FontAwesome;
    margin-right: 8px;
    font-size: 12px;
}

/* footer sidebar demo card text */
.seo-store .overly h4 { margin-bottom: 6px; }

/* =============================================
   Portal header layout
   Top info bar: contact info (left) + login/register/language/burger (right)
   Below: logo + main nav, left aligned
   ============================================= */
header.portal-header .header-top-area .container > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
header.portal-header .header-top-area .container > .row > div {
    float: none;
    padding: 0 10px;
}
/* logo (auto width) */
header.portal-header .header-top-area .container > .row > div:nth-child(1) {
    width: auto;
    flex: 0 0 auto;
}
/* main nav, left aligned, fills remaining space */
header.portal-header .header-top-area .container > .row > div:nth-child(2) {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
header.portal-header .main-menu ul { text-align: left; }
header.portal-header .main-menu nav ul li a { white-space: nowrap; }

/* Below 1200px the nav drops to its own full-width row under the logo */
@media (max-width: 1199px) {
    header.portal-header .header-top-area .container > .row > div:nth-child(2) {
        flex-basis: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    header.portal-header .logo-area { height: 60px; }
    header.portal-header .main-menu nav > ul > li > a { line-height: 60px; }
}

/* Utility items inside the dark top info bar */
.header-top-section .header-top-right {
    height: auto;
    text-align: right;
}
.header-top-section .header-top-right > ul > li {
    line-height: 28px;
}
.header-top-section .header-top-right > ul > li > a {
    font-size: 14px;
    color: #a6b1b7;
}
.header-top-section .header-top-right > ul > li > a:hover,
.header-top-section .header-top-right > ul > li > a:focus {
    color: #26c6da;
}
.header-top-section .header-top-right .top-right-sep {
    height: 12px;
    margin: 0 8px;
}
.header-top-section .header-top-right > ul > li:last-child { padding-left: 12px; }
.header-top-section .header-top-right > ul > li:last-child a {
    color: #a6b1b7;
    border-left: 1px solid #3d4a52;
    padding-left: 14px;
}
.header-top-section .header-top-right > ul > li:last-child a i { font-size: 16px; }
.header-top-section .header-top-right .side-menu-open i {
    color: #a6b1b7;
    font-size: 16px;
}
/* the top bar makes every ul li inline-block - keep dropdown panels vertical */
.header-top-section .lang-switcher .lang-menu li,
.header-top-section .sidenav-nav li { display: block; }

/* Inner pages (base.html): the language switcher lives in the dark top info
   bar's right utility list (.header-address). Anchor the dropdown panel to the
   switcher item and match the top-bar link colors (grey, cyan on hover). */
.header-top-section .header-address .lang-switcher { position: relative; }
.header-top-section .header-address .lang-switcher > a.lang-toggle {
    color: #a6b1b7;
}
.header-top-section .header-address .lang-switcher > a.lang-toggle:hover,
.header-top-section .header-address .lang-switcher > a.lang-toggle:focus {
    color: #26c6da;
}

/* Sidenav close button: the top-bar rule
   ".header-top-section .header-top-right > ul > li:last-child a"
   (padding-left: 14px + dark border-left) outranks the template's
   .closebtn styles and knocks the × off-center inside its circular
   border. Re-assert with an ID selector and center via flex. */
#mySidenav .closebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    border: 1px solid #ffffff;
}
#mySidenav .closebtn:hover {
    color: #26c6da;
}

/* Phones: top bar keeps the utility items (right), logo row below;
   desktop nav is hidden, navigation goes through the burger sidenav */
@media (max-width: 767px) {
    .wraper > header.portal-header { display: block; }
    header.portal-header .header-top-section .header-phone { display: none; }
    header.portal-header .header-top-area .container > .row > div:nth-child(2) { display: none; }
    header.portal-header .logo-area { height: 56px; }
    header.portal-header .logo-area img { max-height: 36px; width: auto; }
    /* meanmenu's fixed bar duplicates the portal header on phones - hide it */
    body.mean-container .mean-bar { display: none; }
    body.mean-container .wraper { padding-top: 0; }
    /* keep slider caption below the visible header */
    .slider-default .nivo-caption { top: 100px; }
}

/* Shop page module grid: cards have different text lengths, so in the
   Bootstrap 3 float layout a taller card blocks the next row's floats and
   leaves empty slots (rows with 2 or 1 cards). Switch the grid to flexbox:
   floats are ignored inside a flex container, so rows always fill left to
   right (3 / lg+md, 2 / sm, 1 / xs) and cards in one row keep equal height. */
.product-category-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.product-category-grid .item {
    float: none;
}

/* ---- Home slider caption: keep text off the laptop illustration on the
   right side of the slide (white text over the white device became
   unreadable). Constrain the caption to the left area and add a shadow
   so it stays legible over any part of the image. ---- */
.slider-default .slider-content h1,
.slider-default .slider-content p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
@media (min-width: 1200px) {
    .slider-default .slider-content h1 {
        max-width: 56%;
        font-size: 40px;
        line-height: 1.25;
    }
    .slider-default .slider-content p {
        max-width: 52%;
    }
}
/* The template centers the caption between 768-1199px, where the centered
   title still runs into the illustration - keep it left and narrow. */
@media (min-width: 768px) and (max-width: 1199px) {
    .slider-default .slider-content h1 {
        max-width: 62%;
        font-size: 32px;
        text-align: left;
    }
    .slider-default .slider-content p {
        max-width: 58%;
        text-align: left;
    }
}
/* 992-1199px: the portal header (absolutely positioned over the slider) wraps
   to an extra menu row and covers the vertically centered caption - shift the
   caption content below the header. */
@media (min-width: 992px) and (max-width: 1199px) {
    .slider-default .slider-content .title-container {
        position: relative;
        top: 70px;
    }
}
@media (max-width: 767px) {
    .slider-default .slider-content h1 {
        max-width: 90%;
        text-align: left;
    }
}