/* ═══════════════════════════════════════════════════════════════════
   PokéTrade — mobile-responsive.css
   Komplexní responzivita: telefon / tablet / fold zařízení
   
   Breakpointy:
     1200px  — velký tablet / malý laptop
     1024px  — tablet landscape (iPad Air, Tab S8...)
      900px  — tablet portrait / velký telefon
      768px  — malý tablet / velký telefon landscape
      600px  — telefon landscape / střední telefon
      480px  — standardní smartphone
      390px  — iPhone Pro / Pixel
      360px  — běžný Android
      280px  — sklopený fold (Galaxy Z Fold, Razr...)
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. GLOBÁLNÍ TOUCH & SCROLL OPRAVY
   ────────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* Všechna tlačítka — minimální touch target 44px (WCAG) */
button, a, [role="button"], input[type="checkbox"], input[type="radio"], select {
  min-height: 0; /* zrušit inherit, každý element definuje sám */
}

/* Přirozené scrollování na iOS */
.sidebar, .notif-drop-list, .settings-drop-body, .mob-nav-links,
.chat-drop-list, .czl-side, .pending-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ──────────────────────────────────────────────────────────────────
   2. TOPBAR — tablet 1024px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav pills — zmenšit padding, zkrátit texty */
  .nav-lnks a {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  /* Logo — trochu menší */
  .app-logo {
    font-size: 13px !important;
    margin-right: 14px !important;
  }

  /* Topbar gap */
  .app-topbar {
    padding: 0 14px !important;
    gap: 4px !important;
  }

  /* Settings/notif dropdown — nepřetékat mimo obrazovku */
  .settings-drop {
    width: 360px !important;
    right: 0 !important;
  }
  .notif-drop {
    width: 300px !important;
    right: 0 !important;
  }
  .chat-drop {
    width: 280px !important;
    right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   3. TOPBAR — telefon 768px (hamburger)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Topbar výška — vyšší pro lepší touch */
  .app-topbar {
    height: 52px !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }

  /* Logo */
  .app-logo {
    font-size: 12px !important;
    margin-right: 4px !important;
    gap: 5px !important;
  }
  .app-logo img {
    width: 22px !important;
    height: 22px !important;
  }

  /* Pravá část topbaru — zmenšit mezery */
  .topbar-right {
    gap: 6px !important;
  }

  /* Ikony v topbaru — větší touch target */
  .chat-icon-btn,
  .notif-bell-btn {
    padding: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* User chip — schovat jméno, ponechat avatar */
  .user-chip span#userName {
    display: none !important;
  }
  .user-chip {
    padding: 4px 6px !important;
  }

  /* Logout tlačítko — jen ikona */
  #logoutBtn img.nav-icon {
    margin-right: 0 !important;
  }
  #logoutBtn {
    font-size: 0 !important; /* schovat text */
    padding: 6px 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  #logoutBtn img.nav-icon {
    font-size: 16px;
    width: 20px !important;
    height: 20px !important;
  }

  /* Dropdowny — celá šířka */
  .notif-drop {
    width: calc(100vw - 20px) !important;
    right: -8px !important;
    left: auto !important;
  }
  .settings-drop {
    width: calc(100vw - 20px) !important;
    right: -8px !important;
    left: auto !important;
    max-height: 80vh !important;
  }
  .chat-drop {
    width: calc(100vw - 20px) !important;
    right: -8px !important;
  }

  /* Mobilní nav drawer — vylepšení */
  .mob-nav-drawer {
    width: min(82vw, 290px) !important;
  }
  .mob-nav-links a {
    padding: 13px 14px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
  .mob-nav-links img.nav-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   4. MARKETPLACE — LAYOUT tablet 1024px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar {
    width: 195px !important;
  }
  .main {
    padding: 14px 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   5. MARKETPLACE — LAYOUT tablet 900px (sidebar jako drawer)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Market mode tabs — scrollovatelné na mobilu */
  .market-mode-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 12px !important;
    gap: 6px !important;
    /* Skrýt scrollbar */
  }
  .market-mode-tabs::-webkit-scrollbar { display: none; }

  .mmt-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }

  /* Toolbar — zalamovat */
  .market-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .search-wrap {
    width: 100% !important;
    flex: unset !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  .sort-sel {
    flex: 1 !important;
    min-width: 0 !important;
    order: 2 !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
  .view-toggle {
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  .count-info {
    order: 4 !important;
    width: 100% !important;
  }

  /* Listing row — kompaktnější */
  .listing-row {
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  /* Thumbnail — trochu menší */
  .card-thumb {
    width: 50px !important;
    height: 70px !important;
  }

  /* Listing info */
  .listing-title {
    font-size: 14px !important;
  }

  /* Listing pravá část — pod info */
  .listing-right {
    min-width: 100px !important;
    align-items: flex-end !important;
  }
  .price-big {
    font-size: 16px !important;
  }

  /* Akční tlačítka */
  .action-btns {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .btn-buy, .btn-offer, .btn-trade-sm {
    padding: 6px 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    min-height: 30px !important;
  }

  /* Detail modal — bottom sheet */
  .detail-panel {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .detail-gallery {
    position: static !important;
  }

  /* Pokročilé filtry */
  .adv-filter-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .adv-filter-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Fullscreen formulář */
  .fs-modal-box {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 95vh !important;
  }

  /* Main padding */
  .main {
    padding: 10px 12px !important;
  }

  /* Plovoucí filtr tlačítko — bezpečná vzdálenost od okraje */
  .mob-filter-btn {
    bottom: 16px !important;
    right: 16px !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   6. MARKETPLACE — telefon 600px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Listing — svislé řazení */
  .listing-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    align-items: flex-start !important;
  }

  /* Thumbnail */
  .card-thumb {
    width: 44px !important;
    height: 62px !important;
    flex-shrink: 0 !important;
  }

  /* Tagy — schovat na malých */
  .listing-tags { 
    display: none !important; 
  }

  /* Listing meta — jen nejdůležitější */
  .listing-meta {
    gap: 6px !important;
    font-size: 11px !important;
  }

  /* Pravá část — zmenšit */
  .listing-right {
    min-width: 85px !important;
  }
  .price-big {
    font-size: 14px !important;
  }

  /* Akční tlačítka — ikony místo textu */
  .action-btns {
    gap: 4px !important;
  }
  .btn-buy, .btn-offer, .btn-trade-sm {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Empty state */
  .empty-state {
    padding: 40px 16px !important;
  }
  .empty-state .icon {
    font-size: 36px !important;
  }

  /* Modály na celou obrazovku */
  .detail-panel {
    max-height: 95vh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* Pokročilé filtry — 1 sloupec */
  .adv-filter-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pending modal */
  #pendingModal > div {
    border-radius: 18px 18px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    max-height: 85vh !important;
  }

  /* Share modal */
  .share-modal-box {
    width: calc(100vw - 24px) !important;
    padding: 18px 16px !important;
  }
  .share-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 7px !important;
  }

  /* Card zoom lightbox */
  .czl-wrap {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .czl-img-area {
    width: 100% !important;
    height: 45vh !important;
    min-height: 240px !important;
  }
  .czl-side {
    height: auto !important;
    max-height: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   7. MARKETPLACE — telefon 480px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Market mode tabs — kompaktnější */
  .mmt-btn {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
  }

  /* Listing title */
  .listing-title {
    font-size: 13px !important;
  }

  /* Meta info */
  .listing-meta {
    font-size: 10.5px !important;
  }

  /* Pravá část — ještě menší */
  .listing-right {
    min-width: 75px !important;
  }
  .price-big {
    font-size: 13px !important;
  }
  .price-big small {
    font-size: 10px !important;
  }

  /* Search input */
  .search-wrap input {
    font-size: 14px !important; /* min 16px pro iOS (aby nezoomoval), ale 14 pro výzor */
  }

  /* Sort select */
  .sort-sel {
    font-size: 13px !important;
  }

  /* Share grid */
  .share-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Demand row */
  .demand-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   8. TELEFON 390px (iPhone Pro, Pixel 8)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  /* Topbar — ještě kompaktnější */
  .app-topbar {
    padding: 0 10px !important;
    gap: 4px !important;
  }
  .app-logo {
    font-size: 11px !important;
  }
  .app-logo img {
    width: 20px !important;
    height: 20px !important;
  }

  /* Listing row — maximálně kompaktní */
  .listing-row {
    padding: 8px !important;
    gap: 7px !important;
  }
  .card-thumb {
    width: 40px !important;
    height: 56px !important;
  }
  .listing-title {
    font-size: 12.5px !important;
  }

  /* Market tabs */
  .mmt-btn {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }

  /* Sidebar drawer — trochu širší pro dotykové ovládání */
  .mob-nav-drawer {
    width: min(88vw, 260px) !important;
  }

  /* Akční tlačítka — stack svisle */
  .action-btns {
    gap: 3px !important;
  }

  /* Main padding */
  .main {
    padding: 8px 8px !important;
  }

  /* Plovoucí filtr */
  .mob-filter-btn {
    bottom: 12px !important;
    right: 12px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   9. FOLD ZAŘÍZENÍ — složené (280–320px)
   Galaxy Z Fold, Motorola Razr atd.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 320px) {
  /* Topbar — pouze logo + hamburger + 1-2 ikony */
  .app-topbar {
    padding: 0 8px !important;
    gap: 3px !important;
    height: 48px !important;
  }
  .app-logo {
    font-size: 10px !important;
    gap: 4px !important;
  }
  .app-logo img {
    width: 18px !important;
    height: 18px !important;
  }

  /* Notif/settings ikony — zmenšit */
  .chat-icon-btn,
  .notif-bell-btn {
    padding: 6px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .chat-icon-btn svg,
  .notif-bell-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* User chip — jen avatar */
  .user-chip {
    padding: 4px !important;
    border-radius: 50% !important;
  }
  .user-avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 9px !important;
  }

  /* Dropdowny — absolutně celá šířka */
  .notif-drop, .settings-drop, .chat-drop {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 0 14px 14px !important;
    position: fixed !important;
    top: 48px !important;
  }

  /* Market mode tabs — sehr kompakt */
  .mmt-btn {
    padding: 5px 7px !important;
    font-size: 10px !important;
  }

  /* Listing row — fold layout */
  .listing-row {
    padding: 7px !important;
    gap: 6px !important;
  }
  .card-thumb {
    width: 36px !important;
    height: 50px !important;
  }
  .listing-title {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  .listing-meta {
    font-size: 10px !important;
    gap: 4px !important;
  }
  .listing-right {
    min-width: 65px !important;
  }
  .price-big {
    font-size: 12px !important;
  }
  .action-btns {
    gap: 2px !important;
  }
  .btn-buy, .btn-offer, .btn-trade-sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  /* Toolbar */
  .market-toolbar {
    gap: 6px !important;
  }
  .sort-sel {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* Sidebar drawer — skoro celá obrazovka */
  .mob-nav-drawer {
    width: min(92vw, 260px) !important;
  }
  .mob-nav-links a {
    padding: 11px 12px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }

  /* Detail bottom sheet */
  .detail-panel {
    max-height: 97vh !important;
  }

  /* Plovoucí filtr */
  .mob-filter-btn {
    bottom: 10px !important;
    right: 10px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  /* Modály */
  .share-modal-box {
    width: 100vw !important;
    border-radius: 0 !important;
    padding: 14px 12px !important;
  }
  .share-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .share-btn {
    padding: 10px 4px 8px !important;
    font-size: 10px !important;
  }
  .share-icon {
    width: 26px !important;
    height: 26px !important;
  }
  .share-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Main padding */
  .main {
    padding: 6px 6px !important;
  }

  /* Settings drop — menší */
  .settings-drop {
    max-height: calc(100vh - 48px) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   10. PROFIL STRÁNKA — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Profile layout — jeden sloupec */
  .profile-grid,
  .profile-layout,
  [class*="profile-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   11. MOJE ALBUM — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Album card grid */
  .album-cards-grid,
  .album-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 600px) {
  .album-cards-grid,
  .album-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 390px) {
  .album-cards-grid,
  .album-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
  }
}

@media (max-width: 320px) {
  .album-cards-grid,
  .album-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   12. SCANNER — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Scanner layout */
  .scanner-layout,
  .scan-layout {
    flex-direction: column !important;
  }

  /* Kamera view — plná šířka */
  .scanner-view,
  .scan-view,
  #scannerWrap,
  #cameraView {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   13. COMPARE STRÁNKA — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .compare-grid,
  .compare-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   14. QUEUE / DOWNLOAD STRÁNKY — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .queue-grid,
  .queue-layout,
  .download-grid {
    grid-template-columns: 1fr !important;
  }

  /* Queue item — compact */
  .queue-item,
  .queue-row {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   15. CHAT STRÁNKA — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Chat layout */
  .chat-layout,
  .chat-grid {
    flex-direction: column !important;
    height: calc(100vh - 52px) !important;
  }

  /* Sidebar konverzací — přes celou šířku */
  .chat-sidebar,
  .conversations-list {
    width: 100% !important;
    height: auto !important;
    max-height: 35vh !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  /* Chat hlavní okno */
  .chat-main {
    flex: 1 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  .chat-sidebar,
  .conversations-list {
    max-height: 30vh !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   16. MODÁLNÍ OKNA — globální responsive vylepšení
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Všechna modální okna — bezpečné okraje */
  [class*="modal-box"],
  [class*="modal-inner"],
  [class*="panel-inner"] {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Overlay padding */
  [class*="modal-overlay"],
  [class*="modal-wrap"] {
    padding: 8px !important;
    align-items: flex-end !important;
  }
}

@media (max-width: 320px) {
  [class*="modal-overlay"],
  [class*="modal-wrap"] {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  [class*="modal-box"],
  [class*="panel-inner"] {
    border-radius: 16px 16px 0 0 !important;
    max-height: 95vh !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   17. FORMA A INPUT ELEMENTY — touch optimalizace
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Inputs — minimální 16px pro iOS (jinak zoom) */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none !important;
  }

  /* Checkboxy — větší touch area */
  .filter-opt {
    padding: 6px 4px !important;
    min-height: 36px !important;
  }
  .filter-opt input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
  }

  /* Select elementy */
  .acc-sync-select,
  .groq-select-sm {
    padding: 10px 12px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  /* Search input — plná šířka */
  .search-wrap input {
    padding-left: 34px !important;
    padding-right: 70px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   18. SETTINGS PANEL — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Accordion hlavičky — větší touch */
  .sdrop-acc-header {
    padding: 13px 14px !important;
    min-height: 48px !important;
  }

  /* Tlačítka měny / jazyka */
  .curr-btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* Preset chipy */
  .preset-chip {
    padding: 5px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   19. NOTIFICATIONS PANEL — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Notif item — větší touch target */
  .notif-item {
    padding: 13px 14px !important;
    min-height: 48px !important;
  }

  /* Notif preference řádky */
  .notif-pref-row {
    padding: 11px 0 !important;
    min-height: 44px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   20. INDEX / HOMEPAGE — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: 48px 0 !important;
    min-height: auto !important;
  }
  .hero-title {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
  .hero-sub {
    font-size: 14px !important;
  }
  .hero-btns {
    gap: 10px !important;
    margin-bottom: 32px !important;
  }
  .hero-stats {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .stat span {
    font-size: 22px !important;
  }
  .cta-box {
    padding: 36px 20px !important;
  }
  .steps {
    flex-direction: column !important;
    align-items: center !important;
  }
  .step {
    max-width: 100% !important;
    width: 100% !important;
  }
  .step-arrow {
    transform: rotate(90deg) !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 14px !important;
  }
  .nav-inner {
    padding: 0 14px !important;
    gap: 16px !important;
  }
  .hero {
    padding: 36px 0 !important;
  }
  .section {
    padding: 48px 0 !important;
  }
  .section-title {
    font-size: 22px !important;
    margin-bottom: 28px !important;
  }
  .features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   21. TRANSACTIONS STRÁNKA — responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .transactions-table,
  .transaction-grid {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Transaction row — card místo řádku */
  .transaction-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   22. LANDSCAPE ORIENTATION — telefon na šířku
   ────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Topbar — zmenšit */
  .app-topbar {
    height: 44px !important;
  }

  /* Modální okna — menší výška */
  .detail-panel,
  .fs-modal-box,
  #pendingModal > div {
    max-height: 95vh !important;
  }

  /* Nav drawer — scrollovatelný */
  .mob-nav-drawer {
    overflow-y: auto !important;
  }
  .mob-nav-links {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
  }
  .mob-nav-links a {
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }

  /* Hero — kompaktní */
  .hero {
    padding: 24px 0 !important;
    min-height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   23. FOLD — rozložené (717px — Galaxy Z Fold 4 unfolded)
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 720px) {
  /* Fold rozložený — tablet-like layout */
  .sidebar {
    width: 180px !important;
  }

  /* Nav pills — viditelné */
  .mob-menu-btn {
    display: none !important;
  }
  .nav-lnks {
    display: flex !important;
  }
  .nav-lnks a {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Cards grid — 2 sloupce */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   24. PŘÍSTUPNOST — focus pro klávesnici / přepínání
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Výraznější focus pro dotykové ovládání */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible {
    outline: 2px solid rgba(245,200,66,0.7) !important;
    outline-offset: 2px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   25. SAFE AREA — iPhone notch / Dynamic Island / Android nav bar
   ────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mob-filter-btn {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .mob-nav-drawer {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .detail-panel,
  .fs-modal-box,
  #pendingModal > div {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .app-topbar {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   26. GALAXY Z FOLD 7 — vnitřní displej (~882px CSS šířka)
       Fold 7 inner: 2160×1856 px fyzicky → ~882×756 CSS px
       Toto je "tablet v krajině" — zobrazuj plné rozvržení
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 820px) and (max-width: 920px) {

  /* Topbar — zobraz navigaci, skryj hamburger */
  .mob-menu-btn { display: none !important; }
  .nav-lnks {
    display: flex !important;
    gap: 2px !important;
  }
  .nav-lnks a {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
  }
  .app-logo {
    font-size: 13px !important;
  }

  /* Marketplace — sidebar + grid vedle sebe */
  .sidebar {
    width: 200px !important;
    min-width: 200px !important;
    display: flex !important;
  }
  .czl-side {
    width: 200px !important;
    min-width: 200px !important;
  }
  .main-content,
  .czl-main {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Karty — 3 sloupce */
  .cards-grid,
  .listing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Settings/notif dropdowns — nepřetékat */
  .settings-drop { width: 380px !important; right: 0 !important; }
  .notif-drop    { width: 320px !important; right: 0 !important; }
  .chat-drop     { width: 300px !important; right: 0 !important; }

  /* Chat — plné rozvržení s postranním panelem */
  .chat-layout {
    flex-direction: row !important;
  }
  .chat-sidebar {
    width: 220px !important;
    min-width: 220px !important;
    display: flex !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   27. GALAXY Z FOLD 7 — vnější displej (~374px) a sklopený stav
       Outer: 2316×968 px → ~374×156 CSS px (portrait)
       Pokrytí přes existující 390px breakpoint — jen doplnění
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

  /* Topbar ještě kompaktnější */
  .app-topbar {
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .app-logo span,
  .app-logo .logo-text {
    display: none !important; /* skryj text, ponech jen ikonku */
  }
  .app-logo img {
    width: 20px !important;
    height: 20px !important;
  }

  /* Notif/chat/settings ikony — menší */
  .topbar-icon, .notif-btn, .chat-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* Marketplace karty — 1 sloupec na vnějším displeji */
  .cards-grid,
  .listing-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modální okna — celá šířka */
  .modal-box,
  .fs-modal-box,
  .detail-panel {
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   28. GALAXY S23 ULTRA — 393px šířka, vysoký displej (6.8")
       S23 Ultra má specifický poměr 19.3:9 — hodně prostoru výšky
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 390px) and (max-width: 430px) and (min-height: 800px) {

  /* Karty mohou být o trochu větší — využijeme výšku */
  .card-thumb,
  .listing-img {
    aspect-ratio: 3 / 4 !important;
  }

  /* Marketplace karty — 2 sloupce se širším obsahem */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Chat input bar — více prostoru */
  .chat-input-wrap {
    padding: 10px 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   29. TABLETY — Samsung Tab S8/S9 Ultra, iPad Pro 12.9"
       Tab S9 Ultra: ~1100px CSS landscape, ~756px portrait
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1280px) {

  /* Sidebar plně viditelný */
  .sidebar,
  .czl-side {
    width: 220px !important;
    min-width: 220px !important;
    display: flex !important;
  }

  /* Karty — 4 sloupce */
  .cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .listing-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Dropdowns — plný formát */
  .settings-drop { width: 420px !important; }
  .notif-drop    { width: 360px !important; }
  .chat-drop     { width: 340px !important; }

  /* Modální okna — omez max šířku */
  .modal-box,
  .fs-modal-box {
    max-width: 640px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   30. SAMSUNG ONE UI — specifické opravy
       One UI přidává vlastní font scaling a dotykové efekty
   ══════════════════════════════════════════════════════════════════ */

/* Zakáž Samsung/One UI zvětšování textu */
* {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Samsung Internet browser — oprav position: fixed pod navigační lištu */
@supports (-webkit-overflow-scrolling: touch) {
  .app-topbar {
    position: -webkit-sticky !important;
    position: sticky !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   31. SAFE AREA — rozšíření pro Android nav gesta (Samsung)
       S23 Ultra / Fold 7 používají gestovou navigaci — spodní
       safe area může být 0, ale gesture inset je jiný
   ══════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {

  /* Spodní navigační bar / gesture area */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Fixní spodní elementy */
  .mob-bottom-nav,
  .chat-input-wrap,
  .bottom-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Floating tlačítka — nad gesture area */
  .fab,
  .mob-filter-btn,
  .scroll-top-btn {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Drawer a modály — safe area na spodku */
  .mob-nav-drawer,
  .detail-panel,
  .fs-modal-box,
  .bottom-sheet {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   32. PWA STANDALONE MÓD — app je nainstalovaná
       html.pwa-standalone platí pro nainstalovanou PWA
   ══════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {

  /* Topbar — přidej prostor pro status bar nahoře */
  .app-topbar {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Skryj "Přidat na plochu" tlačítka — zbytečná */
  [data-pwa-install],
  #chipInstall,
  .btn-pwa-install {
    display: none !important;
  }

  /* Hlavní obsah — odsazení od topbaru */
  .page-body,
  .main-wrap,
  #mainContent {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
  }
}