/* =====================================================
   LOGO — like-social.net style
   v5 — mobile fix на основі реального HTML
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800;900&display=swap');

:root {
  --ls-blue:       #3A78B5;
  --ls-blue-light: #5B9BD5;
  --ls-blue-dark:  #1A3A5C;
  --ls-gray-400:   #7A98B8;
}

/* ════════════════════════════
   DESKTOP
   ════════════════════════════ */
header .left {
  margin-top: 20px !important;
  float: left !important;
}

header .cabinet23 {
  display: inline-flex !important;
  align-items: center !important;
}

a.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.logo-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: linear-gradient(135deg, #5B9BD5, #3A78B5) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-family: 'Manrope', sans-serif !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

a.logo > div:last-child {
  display: flex !important;
  flex-direction: column !important;
}

.logo-text {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1A3A5C !important;
  font-family: 'Manrope', sans-serif !important;
  line-height: 1.2 !important;
  display: block !important;
  letter-spacing: 0 !important;
}
.logo-text span { color: #5B9BD5 !important; }

.logo-sub {
  font-size: 9px !important;
  color: #7A98B8 !important;
  letter-spacing: 2px !important;
  display: block !important;
  margin-top: 1px !important;
  font-family: 'Manrope', sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ════════════════════════════
   MOBILE ≤ 767px
   Структура:
   header
   ├─ .left
   │   ├─ .cabinet23 → a.logo        ← показуємо
   │   └─ .cabinet23 → .cabinet2     ← ХОВАЄМО
   └─ .right
       ├─ .balance                   ← показуємо (скорочено)
       ├─ a.buy                      ← показуємо
       ├─ a.help                     ← ховаємо
       └─ .cabinet                   ← ховаємо
   ════════════════════════════ */
@media (max-width: 767px) {

  /* Хедер — горизонтальний flex */
  header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  /* .left — лише лого, не розтягується */
  header .left {
    float: none !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
  }

  /* Другий cabinet23 (email під логотипом) — приховати */
  header .left .cabinet23:nth-child(2) {
    display: none !important;
  }

  /* .right — займає весь залишок, flex-рядок */
  header .right {
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    width: auto !important;
    height: auto !important;
    border-left: 1px solid #dcdcdc !important;
    padding-left: 8px !important;
    margin-left: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Баланс — компактний */
  header .balance {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding: 0 6px 0 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    background: none !important;
    flex-shrink: 1 !important;
  }
  header .balance p {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  /* Кнопка "Поповнити" */
  header a.buy {
    float: none !important;
    display: inline-block !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: none !important;
    text-decoration: underline !important;
    border-right: none !important;
  }

  /* Приховати "Написати" і .cabinet (email + вихід) */
  header a.help,
  header .cabinet {
    display: none !important;
  }

  /* Логотип менший */
  .logo-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  a.logo { gap: 7px !important; }
  .logo-text { font-size: 15px !important; }
  .logo-sub { display: none !important; }
}

@media (max-width: 380px) {
  header a.buy { font-size: 10px !important; padding: 5px 6px !important; }
  header .balance p { font-size: 12px !important; }
  .logo-text { font-size: 13px !important; }
}