/* =============================================
   BALIQCI.STORE — MOBILE CSS (FINAL)
   ============================================= */

input, select, textarea { font-size: 16px !important; }

/* BOTTOM NAV — yalnız mobil */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {

  /* BODY */
  body { padding-bottom: 75px !important; }

  /* STICKY POST BTN — gizlət (bottom nav işləyir) */
  .sticky-post-btn { display: none !important; }

  /* HEADER */
  .header-inner { padding: 0 12px !important; height: 54px !important; gap: 8px !important; }
  .logo { font-size: 18px !important; flex-shrink: 0; }
  .nav-cats { display: none !important; }
  .btn-post { display: none !important; }

  /* HEADER — profil dropdown mobilde gizlət, bottom nav kabinet işləyir */
  .user-menu-wrap { position: relative !important; }
  .user-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    min-width: 210px !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 10001 !important;
  }

  /* BOTTOM NAV */
  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    z-index: 99999 !important;
    justify-content: space-around !important;
    align-items: center !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
  }
  .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    cursor: pointer;
    text-decoration: none;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 500;
    transition: color .2s;
    min-height: 60px;
    border: none;
    background: none;
    padding: 0;
  }
  .bn-item.active { color: #0077B6; }
  .bn-item:active { opacity: .7; }
  .bn-icon { font-size: 22px; line-height: 1; }
  .bn-label { font-size: 10px; font-weight: 500; }
  .bn-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
  }
  .bn-center-btn {
    position: relative;
    top: -14px;
    width: 54px;
    height: 54px;
    background: #2ecc71;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(46,204,113,0.45);
    border: 3px solid #ffffff;
    transition: transform .2s;
  }
  .bn-center-btn:active { transform: scale(0.93); }
  .bn-center-icon { font-size: 24px; color: white; line-height: 1; }
  .bn-center-label { font-size: 10px; font-weight: 600; color: #2ecc71; margin-top: -10px; }

  /* HERO */
  .hero { padding: 20px 12px !important; }
  .hero-title { font-size: 18px !important; margin-bottom: 14px !important; }
  .search-box { grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px !important; }

  /* CATEGORIES — horizontal scroll */
  .cats-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
  }
  .cats-grid::-webkit-scrollbar { display: none; }
  .cat-chip { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* SECTION */
  .section { padding: 16px 12px 0 !important; }

  /* ELANS GRID */
  .elans-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .elan-img, .elan-img-placeholder { height: 140px !important; }
  .elan-price { font-size: 15px !important; }
  .elan-title { font-size: 13px !important; }

  /* PAGINATION */
  .pagination { padding: 16px 12px 16px !important; flex-wrap: wrap; }

  /* AUTH */
  .auth-card { border-radius: 12px !important; }
  .tab-content { padding: 20px 18px !important; }

  /* POST */
  .form-card { padding: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .preview-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ELAN DETAIL */
  .main { grid-template-columns: 1fr !important; gap: 14px !important; padding: 0 12px !important; }
  .right-panel { order: -1 !important; }
  .elan-price { font-size: 26px !important; }
  .thumb { width: 60px !important; height: 60px !important; }

  /* DASHBOARD */
  .layout { grid-template-columns: 1fr !important; padding: 0 12px 20px !important; gap: 14px !important; margin-top: 16px !important; }
  .sidebar { border-radius: 10px !important; display: block !important; }
  .sidebar-user { flex-direction: row !important; text-align: left !important; padding: 14px 16px !important; gap: 12px !important; }
  .sidebar-nav { display: flex !important; flex-direction: row !important; padding: 6px 8px !important; gap: 4px !important; overflow-x: auto !important; scrollbar-width: none !important; border-top: 1px solid #e5e7eb; }
  .sidebar-nav::-webkit-scrollbar { display: none !important; }
  .nav-item { padding: 8px 14px !important; border-left: none !important; border-bottom: 2px solid transparent !important; border-radius: 8px !important; white-space: nowrap !important; font-size: 13px !important; }
  .nav-item.active { border-left-color: transparent !important; border-bottom-color: #0077B6 !important; background: #eff8ff !important; }
  .nav-logout { border-top: none !important; border-left: 1px solid #e5e7eb !important; padding: 8px 14px !important; margin-top: 0 !important; font-size: 13px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stat-num { font-size: 24px !important; }
  .elan-row { padding: 12px !important; gap: 10px !important; flex-wrap: wrap; }
  .elan-thumb, .elan-thumb-ph { width: 56px !important; height: 56px !important; }
  .elan-row-title { font-size: 13px !important; }
  .elan-row > div:last-child { width: 100% !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
  .btn-edit, .btn-del { flex: 1 !important; min-height: 44px !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .section-header { padding: 14px 16px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .elan-tabs { flex-wrap: wrap !important; gap: 6px !important; }
  .form-body { padding: 16px !important; }

  /* ADMIN */
  thead th:nth-child(4), td:nth-child(4) { display: none !important; }
  td { padding: 10px 12px !important; font-size: 13px !important; }
  .action-btns { flex-direction: column !important; gap: 6px !important; }
  .btn-approve, .btn-reject, .btn-pending { min-height: 44px !important; font-size: 12px !important; }
}

@media (max-width: 480px) {
  .elans-grid { grid-template-columns: 1fr !important; }
  .elan-img, .elan-img-placeholder { height: 200px !important; }
  .logo { font-size: 16px !important; }
  .btn-auth { font-size: 12px !important; padding: 6px 10px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* HEADER — profil düyməsi mobilde gizlət */
@media (max-width: 768px) {
  #authBlock {
    display: none !important;
  }
}

/* Sticky post btn — yalnız mobilde görünsün */
.sticky-post-btn {
  display: none;
}
@media (max-width: 768px) {
  .sticky-post-btn {
    display: flex !important;
  }
}

/* =============================================
   UX/UI FINAL FIXES
   ============================================= */

/* 1. HEADER PROFILE KAPSULU */
.user-avatar-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px 4px 4px !important;
  height: 40px !important;
  border-radius: 24px !important;
  gap: 6px !important;
}
.avatar-circle {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.chevron {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* 2. PREMIUM SECTION — az elan olduqda kart eni */
#premiumGrid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#premiumGrid .elan-card:only-child {
  max-width: 280px;
}
@media (max-width: 768px) {
  #premiumGrid .elan-card:only-child {
    max-width: 100%;
  }
}

/* 3. KATEQORİYA ÇİPLƏRİ — mərkəzləşdirmə */
.cats-grid {
  justify-content: center;
  gap: 10px !important;
}
@media (max-width: 768px) {
  .cats-grid {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .cat-chip {
    flex-shrink: 0 !important;
  }
}