/* BITBANK_MOBILE_HEADER_INFLOW_V31 */

/*
  Мобильная шапка:
  - меню и поиск раскрываются внутри шапки;
  - не перекрывают контент;
  - выглядят как часть header;
  - высота меняется аккуратно.
*/
@media (max-width:900px){
  .site-header{
    position:relative !important;
    z-index:1000 !important;
    overflow:visible !important;
    background:rgba(8,10,36,.92) !important;
    backdrop-filter:blur(18px) !important;
  }

  .header-row{
    position:relative !important;
    display:grid !important;
    grid-template-columns:39px minmax(0,1fr) 39px !important;
    grid-template-areas:
      "search brand menu"
      "form form form"
      "nav nav nav" !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 0 11px !important;
  }

  .header-row > .brand{
    grid-area:brand !important;
    justify-self:center !important;
    min-width:0 !important;
    width:auto !important;
    text-align:center !important;
  }

  .header-row > .brand .brand-title{
    font-size:20px !important;
    letter-spacing:.125em !important;
  }

  .mobile-head-btn{
    width:38px !important;
    height:38px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:13px !important;
    color:#fff !important;
    background:rgba(255,255,255,.075) !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .mobile-search-btn{
    grid-area:search !important;
    justify-self:start !important;
    font-size:19px !important;
    line-height:1 !important;
  }

  .mobile-menu-btn{
    grid-area:menu !important;
    justify-self:end !important;
    gap:3.8px !important;
  }

  .mobile-menu-btn span{
    width:17px !important;
    height:1.8px !important;
    display:block !important;
    border-radius:999px !important;
    background:#fff !important;
    transition:transform .16s ease, opacity .16s ease !important;
  }

  .site-header.is-mobile-menu-open .mobile-menu-btn span:nth-child(1){
    transform:translateY(5.7px) rotate(45deg) !important;
  }

  .site-header.is-mobile-menu-open .mobile-menu-btn span:nth-child(2){
    opacity:0 !important;
  }

  .site-header.is-mobile-menu-open .mobile-menu-btn span:nth-child(3){
    transform:translateY(-5.7px) rotate(-45deg) !important;
  }

  /* Поиск внутри шапки */
  html body .site-header .header-row > .search-form{
    grid-area:form !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    z-index:auto !important;

    display:grid !important;
    width:100% !important;
    max-width:none !important;
    grid-template-columns:1fr 82px !important;

    margin:0 !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.075) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;

    min-height:0 !important;
    max-height:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:hidden !important;
    transform:none !important;
    transition:max-height .18s ease, opacity .14s ease, visibility .14s ease !important;
  }

  html body .site-header.is-mobile-search-open .header-row > .search-form{
    min-height:43px !important;
    max-height:50px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    margin-top:2px !important;
  }

  .header-row > .search-form input,
  .header-row > .search-form button{
    font-size:13.5px !important;
  }

  /* Меню внутри шапки */
  html body .site-header .header-row > .nav{
    grid-area:nav !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    z-index:auto !important;

    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;

    max-height:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:hidden !important;
    transform:none !important;
    transition:max-height .18s ease, opacity .14s ease, visibility .14s ease, padding .18s ease !important;
  }

  html body .site-header.is-mobile-menu-open .header-row > .nav{
    max-height:96px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    padding-top:7px !important;
  }

  .header-row > .nav .nav-link{
    height:35px !important;
    padding:0 11px !important;
    border-radius:12px !important;
    font-size:12.5px !important;
    background:rgba(255,255,255,.065) !important;
  }

  .header-row > .nav .nav-link.active{
    background:rgba(255,255,255,.12) !important;
  }
}

@media (max-width:390px){
  .header-row{
    grid-template-columns:38px minmax(0,1fr) 38px !important;
    gap:7px !important;
    padding:10px 0 10px !important;
  }

  .mobile-head-btn{
    width:37px !important;
    height:37px !important;
    border-radius:12px !important;
  }

  .header-row > .brand .brand-title{
    font-size:19px !important;
  }

  html body .site-header.is-mobile-menu-open .header-row > .nav{
    max-height:110px !important;
    padding-top:7px !important;
  }

  .header-row > .nav .nav-link{
    height:34px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }
}


/* BITBANK_MOBILE_MY_ORDERS_V130 */
@media (max-width:900px){
  html body .site-header .header-row{
    grid-template-columns:39px minmax(0,1fr) 39px !important;
    grid-template-areas:
      "search brand menu"
      "orders orders orders"
      "nav nav nav" !important;
  }

  html body .site-header .mobile-search-btn{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  html body .site-header .header-row > .my-orders-link-v128{
    grid-area:orders !important;
    justify-self:center !important;
    align-self:center !important;

    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:2px 0 0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:rgba(245,247,255,.92) !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:650 !important;
    letter-spacing:.01em !important;
    text-decoration:none !important;
  }

  html body .site-header .header-row > .my-orders-link-v128.active,
  html body .site-header .header-row > .my-orders-link-v128:hover,
  html body .site-header .header-row > .my-orders-link-v128:focus{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    text-decoration:none !important;
  }
}

@media (max-width:390px){
  html body .site-header .header-row{
    grid-template-columns:38px minmax(0,1fr) 38px !important;
  }

  html body .site-header .header-row > .my-orders-link-v128{
    font-size:13.5px !important;
  }
}


/* V919_MOBILE_BURGER_DROPDOWN_CARD */
@media (min-width:901px){
  .site-header .mobile-dropdown-v919,
  .site-header .nav-mobile-orders-v917{
    display:none !important;
  }
}

@media (max-width:900px){
  html body .site-header{
    position:relative !important;
    overflow:visible !important;
    z-index:100 !important;
  }

  html body .site-header .header-row{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:"brand burger" !important;
    align-items:center !important;
    min-height:72px !important;
    padding:10px 20px !important;
    gap:12px !important;
    overflow:visible !important;
  }

  html body .site-header .header-row > .brand{
    grid-area:brand !important;
    justify-self:start !important;
    display:inline-flex !important;
    align-items:center !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  html body .site-header .header-row > .brand .logo-mark{
    display:none !important;
  }

  html body .site-header .header-row > .brand .brand-title{
    display:block !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
    white-space:nowrap !important;
  }

  html body .site-header .header-row > .brand .brand-sub{
    display:none !important;
  }

  html body .site-header .header-row > .mobile-orders-btn-v651,
  html body .site-header .header-row > .header-orders-link-v651{
    display:none !important;
  }

  html body .site-header .header-row > .mobile-menu-btn{
    grid-area:burger !important;
    justify-self:end !important;
    display:inline-flex !important;
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    margin:0 !important;
    position:relative !important;
    z-index:130 !important;
  }

  /* Старый nav на мобилке полностью скрываем, чтобы он не растягивался строкой. */
  html body .site-header .header-row > .nav{
    display:none !important;
  }

  html body .site-header .mobile-dropdown-v919{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    right:20px !important;
    left:auto !important;
    z-index:120 !important;

    display:none !important;
    width:245px !important;
    max-width:calc(100vw - 40px) !important;
    height:auto !important;

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

    border:1px solid rgba(115,230,255,.18) !important;
    border-radius:18px !important;
    background:rgba(15,19,62,.98) !important;
    box-shadow:0 20px 54px rgba(0,0,0,.42) !important;
    backdrop-filter:blur(14px) !important;
    overflow:hidden !important;
  }

  html body .site-header.is-mobile-menu-open .mobile-dropdown-v919{
    display:block !important;
  }

  html body .site-header .mobile-dropdown-v919 a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    margin:0 !important;
    padding:12px 18px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    color:rgba(255,255,255,.92) !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  html body .site-header .mobile-dropdown-v919 a + a{
    border-top:1px solid rgba(255,255,255,.07) !important;
  }

  html body .site-header .mobile-dropdown-v919 a:hover,
  html body .site-header .mobile-dropdown-v919 a:focus{
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
  }
}

@media (max-width:380px){
  html body .site-header .header-row{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  html body .site-header .header-row > .brand .brand-title{
    font-size:22px !important;
    letter-spacing:.14em !important;
  }

  html body .site-header .mobile-dropdown-v919{
    right:16px !important;
    max-width:calc(100vw - 32px) !important;
  }
}
/* /V919_MOBILE_BURGER_DROPDOWN_CARD */