/* ================================================================
   mobile.css — полная мобильная оптимизация
   ТОЛЬКО мобайл (max-width: 767px / 480px / 380px)
   Десктоп не затрагивается
   ================================================================ */

/* ══════════════════════════════════════════════════════════════════
   0. BASE — общее для всех страниц
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .csmoney-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Кнопки — минимум 44px (touch target) */
  .btn-primary, .btn-secondary, .btn-csmoney,
  button.btn-primary, a.btn-primary {
    min-height: 44px !important;
    padding: 0.65rem 1.1rem !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    touch-action: manipulation;
  }

  /* Инпуты — 16px чтобы iOS не зумил */
  input, select, textarea {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* ══════════════════════════════════════════════════════════════
     1. ХЕДЕР — layout управляется <style> тегом в header.html
        Здесь только визуальные стили
     ══════════════════════════════════════════════════════════════ */

  .header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  .header-logo { flex: none !important; margin: 0 !important; }

  .header-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.28rem !important;
    position: static !important;
  }
  .header-right > * { width: auto !important; position: static !important; }

  /* Flag + Currency — мини квадраты */
  #langToggleHeader, #currencyToggleHeader {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    background: rgba(139,92,246,0.1) !important;
    border: 1px solid rgba(139,92,246,0.28) !important;
  }
  #langToggleHeader { padding: 4px !important; }
  #langToggleHeader .flag-icon { width: 16px !important; height: 16px !important; }
  #langToggleHeader .arrow-icon { display: none !important; }
  #currencyToggleHeader { padding: 2px 5px !important; font-size: 0.72rem !important; font-weight: 800 !important; }
  #currencyToggleHeader .arrow-icon { display: none !important; }

  /* Deposit */
  .skinjet-deposit-btn, #depositBtn {
    width: auto !important;
    padding: 5px 11px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    min-height: 28px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* ── Строка 2: top-nav — [Маркет 50%] [Quick Sell 50%] ── */
  .csmoney-header .top-nav {
    display: flex !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.42rem !important;
    margin: 0 0 0.42rem 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .csmoney-header .top-nav-link {
    display: flex !important;
    flex: 1 1 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.62rem 0.5rem !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-height: 42px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    gap: 0.3rem !important;
  }

  .csmoney-header .top-nav-link .nav-text {
    display: inline !important;
    font-size: 0.88rem !important;
  }

  .csmoney-header .top-nav-link svg,
  .csmoney-header .top-nav-link .top-nav-icon { display: none !important; }

  /* Маркет — фиолетовый */
  .csmoney-header .top-nav-link[data-page="market"] {
    background: #7c3aed !important;
    box-shadow: 0 2px 10px rgba(124,58,237,0.4) !important;
    border: none !important;
    color: #fff !important;
  }

  /* Quick Sell — зелёный */
  .csmoney-header .top-nav-link[data-page="trading"] {
    background: #16a34a !important;
    box-shadow: 0 2px 10px rgba(22,163,74,0.4) !important;
    border: none !important;
    color: #fff !important;
  }

  /* IC внутри top-nav скрыть (он standalone) */
  .csmoney-header .top-nav .top-nav-link[data-page="inventory-checker"] {
    display: none !important;
  }

  /* ── Строка 1: Steam — полная ширина ── */
  #loginBtn {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.62rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    height: auto !important;
    white-space: nowrap !important;
    margin: 0 0 0.42rem 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: rgba(139,92,246,0.1) !important;
    box-shadow: none !important;
    border: 1.5px solid rgba(139,92,246,0.5) !important;
    color: #e9d5ff !important;
    text-shadow: none !important;
  }
  #loginBtn::before { display: none !important; }
  #loginBtn img {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) opacity(0.85) !important;
  }

  /* ── Строка 3: Inventory Checker — полная ширина ── */
  .csmoney-header .mobile-ic-standalone {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.60rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 1.5px solid rgba(139,92,246,0.3) !important;
    color: #a78bfa !important;
  }

  /* Корзина */
  .csmoney-header .cart-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
  }

  .balance-pill {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.78rem !important;
    gap: 0.3rem !important;
  }

  .balance-sub { display: none !important; }
  .skinjet-online-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    opacity: 0.75 !important;
  }

  .user-avatar-compact {
    width: 32px !important;
    height: 32px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     2. МАРКЕТ
     ══════════════════════════════════════════════════════════════ */

  /* Карточки — 2 колонки */
  .market-grid, #marketGrid, #myListingsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    padding: 0.75rem !important;
  }

  .market-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
  }

  .market-card-thumb {
    height: 120px !important;
    max-height: 120px !important;
  }

  .market-card-thumb img {
    max-width: 90px !important;
  }

  .market-card-body {
    padding: 0.5rem 0.6rem 0.6rem !important;
    gap: 0.2rem !important;
  }

  .market-card-title {
    font-size: 0.72rem !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  .market-card-price {
    font-size: 0.88rem !important;
    margin: 4px 0 !important;
  }

  .market-card .buy-btn,
  .market-card button {
    min-height: 36px !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
  }

  /* Тулбар маркета */
  .market-top-bar, .market-controls-row, .p2p-controls-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  #marketSearch, #searchInput, .market-search {
    width: 100% !important;
    font-size: 16px !important;
    padding: 0.6rem 1rem 0.6rem 2.4rem !important;
    border-radius: 10px !important;
  }

  #sortFilter, .filter-select-modern {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 0.85rem !important;
  }

  .mobile-filters-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    background: rgba(124, 58, 237, 0.15) !important;
    border: 1px solid rgba(124, 58, 237, 0.4) !important;
    color: #c4b5fd !important;
    justify-content: center !important;
  }

  .price-range-inputs {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  .price-input-wrapper input {
    width: 100% !important;
  }

  /* Модалка предмета */
  .item-modal, #itemModal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* ══════════════════════════════════════════════════════════════
     3. TRADING / QUICK SELL
     ══════════════════════════════════════════════════════════════ */

  div[style*="padding:1.8rem 2rem"] {
    padding: 0.75rem 0.75rem 0 !important;
  }

  /* Inventory grid */
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .item-thumb {
    height: 90px !important;
  }

  .item-thumb img {
    max-width: 75px !important;
    max-height: 65px !important;
  }

  .item-name {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .inventory-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .inventory-search {
    width: 100% !important;
    font-size: 16px !important;
  }

  .panel.exchange {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  .sell-btn, #sellBtn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     4. ПРОФИЛЬ
     ══════════════════════════════════════════════════════════════ */

  .profile-page {
    padding: 0.75rem 0 !important;
  }

  .profile-card-unified {
    border-radius: 12px !important;
  }

  .profile-header-unified {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
  }

  .profile-header-main {
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  .profile-avatar-unified.small {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
  }

  .profile-info-block {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .profile-username-inline {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .profile-locale-controls {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .profile-fields {
    padding: 0.75rem 1rem !important;
  }

  .profile-field-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }

  .profile-field-value input {
    width: 100% !important;
    font-size: 16px !important;
  }

  .profile-field-save .save-button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
  }

  /* Табы */
  .profile-tabs-unified {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0.75rem !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .profile-tabs-unified::-webkit-scrollbar { display: none !important; }

  .tab-btn-unified {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .tab-btn-unified svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* История */
  .history-item {
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
    border-radius: 10px !important;
    flex-wrap: wrap !important;
  }

  .history-item-image-wrapper {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
  }

  .history-item-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .history-item-info {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }

  .history-item-actions {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .history-item-actions button,
  .history-item button {
    flex: 1 1 auto !important;
    min-height: 38px !important;
    font-size: 0.75rem !important;
  }

  /* Инвентарь профиля */
  .inventory-grid-unified {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  #sellButtonsContainer {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  #sellButtonsContainer > div:last-child {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  #sellButtonsContainer button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  /* Реферальная программа */
  .referral-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  .referral-link-wrapper {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .referral-link-input, .btn-copy-ref {
    width: 100% !important;
  }

  .btn-copy-ref {
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* ══════════════════════════════════════════════════════════════
     5. ФУТЕР
     ══════════════════════════════════════════════════════════════ */
  .footer-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem 1rem !important;
  }

  .footer-section:first-child {
    grid-column: 1 / -1 !important;
  }

  .footer-section h4 {
    font-size: 0.78rem !important;
    margin-bottom: 0.6rem !important;
  }

  .footer-section ul li a {
    font-size: 0.78rem !important;
  }

  .footer-bottom {
    padding: 0.75rem 0 !important;
    font-size: 0.75rem !important;
  }

  /* ══════════════════════════════════════════════════════════════
     6. МОДАЛЬНЫЕ ОКНА
     ══════════════════════════════════════════════════════════════ */
  .modal-content, .modal-card {
    width: 94vw !important;
    max-width: 94vw !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    margin: 0 auto !important;
  }

  #cryptoDepositModal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
  }

  /* ══════════════════════════════════════════════════════════════
     7. СТАТИЧНЫЕ СТРАНИЦЫ (FAQ, Гарантии, How-to-sell и т.д.)
     ══════════════════════════════════════════════════════════════ */
  .help-steps-grid, .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hero-title, .section-hero h1 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 0.6rem !important;
    align-items: stretch !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SMALL PHONES ≤ 480px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .market-grid, #marketGrid, #myListingsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    padding: 0.5rem !important;
  }

  .market-card-thumb {
    height: 100px !important;
    max-height: 100px !important;
  }

  .market-card-title {
    font-size: 0.68rem !important;
    height: 24px !important;
    max-height: 24px !important;
  }

  .market-card-price .price-main {
    font-size: 0.82rem !important;
  }

  .market-card .buy-btn {
    font-size: 0.7rem !important;
    padding: 0.35rem !important;
    min-height: 32px !important;
  }

  .inventory-grid, .inventory-grid-unified {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .profile-avatar-unified.small {
    width: 48px !important;
    height: 48px !important;
  }

  .profile-username-inline {
    font-size: 0.9rem !important;
  }

  .tab-btn-unified {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.72rem !important;
  }

  .tab-btn-unified svg {
    display: none !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
  }

  .csmoney-header .top-nav-link {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   VERY SMALL ≤ 380px (iPhone SE)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

  .csmoney-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .market-grid, #marketGrid, #myListingsGrid {
    gap: 0.35rem !important;
    padding: 0.4rem !important;
  }

  .market-card-thumb {
    height: 88px !important;
  }

  .market-card-body {
    padding: 0.3rem !important;
  }

  .market-card-title {
    font-size: 0.62rem !important;
  }

  .profile-avatar-unified.small {
    width: 42px !important;
    height: 42px !important;
  }

  .btn-primary, .btn-secondary {
    font-size: 0.82rem !important;
    padding: 0.55rem 0.9rem !important;
  }

  .tab-btn-unified {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.66rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP RESTORE — возвращаем десктоп в норму
   (HTML-структура хедера изменена для мобайла — исправляем десктоп)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* top-nav теперь прямой дочерний элемент header — вставляем между logo и controls */
  .csmoney-header .top-nav {
    order: 1 !important;
    display: flex !important;
    width: auto !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 0.4rem !important;
    padding: 0 !important;
    margin: 0 0.5rem !important;
    background: none !important;
    border: none !important;
    align-items: center !important;
  }

  /* Nav links on desktop — keep layout only, let styles.css handle button visuals */
  .csmoney-header .top-nav-link {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    justify-content: center !important;
    min-height: 36px !important;
  }

  .csmoney-header .top-nav-link svg,
  .csmoney-header .top-nav-link .top-nav-icon {
    display: flex !important;
  }

  .csmoney-header .top-nav-link .nav-text {
    font-size: 0.88rem !important;
  }

  /* header-right — после top-nav */
  .csmoney-header .header-right {
    order: 2 !important;
    width: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
  }

  .csmoney-header .header-right > * { width: auto !important; }

  /* loginBtn — последний, рядом с controls */
  .csmoney-header #loginBtn {
    order: 3 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    height: auto !important;
    letter-spacing: normal !important;
    background: var(--primary-color, #8b5cf6) !important;
    box-shadow: none !important;
    border: none !important;
    color: #fff !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .csmoney-header #loginBtn img {
    width: 20px !important;
    height: 20px !important;
    filter: brightness(0) invert(1) !important;
  }

  /* lang/currency — вернуть нативный вид */
  #langToggleHeader, #currencyToggleHeader {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 0.3rem 0.45rem !important;
  }

  #langToggleHeader .flag-icon { width: 18px !important; height: 18px !important; }
  #langToggleHeader .arrow-icon { display: inline !important; }
  #currencyToggleHeader .arrow-icon { display: inline !important; }

  /* Deposit — нативный вид */
  .skinjet-deposit-btn, #depositBtn {
    min-height: 36px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 20px !important;
  }

  /* Онлайн-бейдж — показать на десктопе */
  .skinjet-online-badge { display: flex !important; }

  /* mobile-only elements — скрыть на десктопе */
  .csmoney-header .mobile-inv-row { display: none !important; }
  .csmoney-header .mobile-ic-standalone { display: none !important; }
  /* IC возвращаем в top-nav на десктопе */
  .csmoney-header .top-nav-link[data-page="inventory-checker"] { display: flex !important; }

}