/* Mobile Fixes CSS - Dashboard, QR Payment és Marketplace Egyszerűsítés
 * Logika érintetlen, csak UI elrejtés és átszervezés
 */

/* ===== DASHBOARD EGYSZERŰSÍTÉS ===== */

/* Kredit egyenleg kártyák elrejtése - logika marad */
.credit-list {
  display: none !important;
}

/* User avatar és részletes info egyszerűsítése */
.user-avatar {
  display: none !important;
}

/* Card header egyszerűsítés - jobb spacing */
.card-header {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

#user-phone {
  font-size: 14px !important;
  opacity: 0.8 !important;
}

/* Balance card kiemelés - csak a fő egyenleg látszódjon */
.balance-card {
  margin: 20px 0 !important;
  padding: 24px !important;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-orange) 100%) !important;
}

.balance-amount {
  font-size: 3rem !important;
  margin: 16px 0 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.balance-label {
  font-size: 16px !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Action Grid optimalizálás */
.action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}

.action-btn {
  padding: 20px 16px !important;
  border-radius: 12px !important;
  min-height: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.action-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.action-icon {
  font-size: 2rem !important;
  margin-bottom: 12px !important;
}

.action-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Recent Activity egyszerűsítés */
.card:has(#recent-activity) {
  margin-top: 32px !important;
}

.card:has(#recent-activity) .card-title {
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

/* ===== FELSŐ MENÜ JAVÍTÁS ===== */

/* Screen header javítás - elválasztott elemek */
.screen-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  margin: -16px -16px 20px -16px !important;
}

.screen-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Kilépés gomb elkülönítése */
.screen-header .btn {
  margin-left: 16px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  min-height: 36px !important;
}

/* ===== QR PAYMENT EGYSZERŰSÍTÉS ===== */

/* QR Mode Selection egyszerűsítés */
.qr-mode-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.qr-mode-option {
  padding: 16px 12px !important;
  border-radius: 10px !important;
  text-align: center !important;
  min-height: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.qr-mode-icon {
  font-size: 2rem !important;
  margin-bottom: 8px !important;
}

.qr-mode-title {
  font-size: 14px !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

.qr-mode-subtitle {
  font-size: 12px !important;
  line-height: 1.2 !important;
  opacity: 0.8 !important;
}

/* QR Camera Container egyszerűsítés */
.qr-camera-container {
  margin: 20px 0 !important;
  border-radius: 12px !important;
  background: #000 !important;
  min-height: 300px !important;
  position: relative !important;
}

.qr-camera-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* QR Controls egyszerűsítés */
.qr-camera-controls {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 16px 0 !important;
  flex-wrap: wrap !important;
}

.qr-camera-controls .btn {
  min-width: 120px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}

/* QR Demo Section kompaktabb */
.qr-demo-section {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border-dark) !important;
}

.qr-demo-title {
  font-size: 14px !important;
  margin-bottom: 12px !important;
  text-align: center !important;
  color: var(--text-secondary) !important;
}

.qr-demo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

.qr-demo-grid .btn {
  padding: 12px 8px !important;
  font-size: 12px !important;
  min-height: 50px !important;
  line-height: 1.2 !important;
}

.demo-amount {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

/* QR Scanner UI elrejtés - túl komplex */
.qr-scanner-overlay {
  display: none !important;
}

.qr-target-frame {
  display: none !important;
}

.qr-scanner-instructions {
  display: none !important;
}

.qr-scanner-status {
  display: none !important;
}

/* QR Generator Form egyszerűsítés */
.qr-generator-form .form-group {
  margin-bottom: 16px !important;
}

.qr-generator-form .form-label {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.qr-generator-form .form-input,
.qr-generator-form .form-select {
  padding: 12px !important;
  font-size: 14px !important;
  min-height: 44px !important;
}

/* QR Generated Display egyszerűsítés */
.qr-generated-container {
  padding: 20px !important;
  border-radius: 12px !important;
  margin-top: 20px !important;
}

.qr-generated-code {
  padding: 16px !important;
  margin: 16px 0 !important;
  border-radius: 8px !important;
}

.qr-generated-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}

.qr-generated-actions .btn {
  flex: 1 !important;
  max-width: 150px !important;
}

/* ===== MARKETPLACE SCREEN ÁTDOLGOZÁS ===== */

/* Marketplace fejléc kártya elrejtése - több próbálkozás */
#marketplace-screen .card:first-child {
  display: none !important;
}

/* Ha a fejléc kártya nem az első child */
#marketplace-screen .card:nth-child(1) {
  display: none !important;
}

/* Ha a card-header tartalmazza ezt a szöveget */
.card-title:contains("Közösségi Kredit Csereplatform") {
  display: none !important;
}

/* Szülő card elrejtése ha tartalmazza ezt */
.card:has(.card-title:contains("Közösségi Kredit")) {
  display: none !important;
}

/* Ha h3 tag tartalmazza */
h3:contains("Közösségi Kredit Csereplatform") {
  display: none !important;
}

/* Szülő elem elrejtése ha h3 tartalmazza */
.card:has(h3:contains("Közösségi Kredit")) {
  display: none !important;
}

/* Brutális megoldás - minden olyan kártya ami tartalmazza ezt a szöveget */
.card:has(*:contains("Tagtársak által kínált")) {
  display: none !important;
}

/* Marketplace screen title színezés */
#marketplace-screen .screen-title {
  color: var(--primary-orange) !important;
}

/* Marketplace listing items egyszerűsítése */
.marketplace-container {
  padding: 0 !important;
}

.partner-list .credit-item,
.partner-list .listing-item {
  padding: 16px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--border-dark) !important;
}

/* Merchant kredit váltás kártyák */
.merchant-exchange-card {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--success-green) 100%) !important;
  border: none !important;
  color: white !important;
}

.merchant-exchange-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.merchant-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.merchant-category {
  font-size: 12px !important;
  opacity: 0.9 !important;
}

.exchange-rate-badge {
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Merchant szabályok megjelenítés */
.merchant-rules {
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.merchant-rules-title {
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.merchant-rules-list {
  list-style: none !important;
  padding: 0 !important;
}

.merchant-rules-list li {
  margin: 4px 0 !important;
  padding-left: 16px !important;
  position: relative !important;
}

.merchant-rules-list li::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--accent-color) !important;
  font-weight: bold !important;
}

/* Elérhető kreditek egyszerűsített megjelenítés */
.available-credits-container {
  margin-top: 16px !important;
}

.available-amount {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--accent-color) !important;
  margin-bottom: 8px !important;
}

.available-description {
  font-size: 13px !important;
  opacity: 0.9 !important;
  margin-bottom: 16px !important;
}

/* Exchange actions */
.exchange-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.exchange-input {
  flex: 1 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  font-size: 14px !important;
  text-align: center !important;
}

.exchange-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.exchange-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: white !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.exchange-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Auto-return credits - egyszerűsített elrejtés egyelőre */
.card:has([id*="auto-return"]) {
  display: none !important;
}

/* ===== AZONNALI ASZTALI TESZT - MINDEN MÉRETNÉL ===== */
.action-grid {
  gap: 12px !important; /* Kisebb gap minden méretnél */
}

.card {
  margin: 12px 0 !important; /* Kompaktabb card spacing */
  padding: 18px !important;
}

.bottom-nav {
  height: 70px !important; /* Alacsonyabb nav minden méretnél */
  padding: 8px 4px !important;
}

.nav-icon {
  font-size: 1.2rem !important;
  margin-bottom: 4px !important;
}

.nav-text {
  font-size: 11px !important;
}

.screen {
  padding-bottom: 85px !important; /* Kevesebb bottom padding */
}

/* ===== SETTINGS PATTERN ALKALMAZÁSA MINDENHOL ===== */

/* Egyszerű item pattern - mint a Settings screenben */
.simple-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dark);
  min-height: 48px;
}

.simple-item:last-child {
  border-bottom: none;
}

.simple-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.simple-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

/* ===== CSAK MOBIL JAVÍTÁSOK (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
  
  /* Dashboard - Action Grid egyszerűsítés */
  .action-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .action-btn {
    padding: 12px 8px !important;
    min-height: 60px !important;
  }
  
  .action-icon {
    font-size: 1.4rem !important;
    margin-bottom: 6px !important;
  }
  
  .action-text {
    font-size: 11px !important;
    line-height: 1.2;
  }
  
  /* Credit List - Settings pattern alkalmazása */
  .credit-item {
    padding: 16px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  
  .credit-info {
    align-items: center !important;
  }
  
  .credit-icon {
    width: 36px !important;
    height: 36px !important;
    margin-right: 12px !important;
    font-size: 1.1rem !important;
  }
  
  .credit-details h4 {
    font-size: 15px !important;
    margin-bottom: 2px !important;
  }
  
  .credit-details p {
    font-size: 12px !important;
  }
  
  .credit-balance-amount {
    font-size: 15px !important;
    font-weight: 600;
  }
  
  /* Partner Items - Egyszerűsítés */
  .partner-item {
    padding: 16px !important;
    margin-bottom: 8px !important;
  }
  
  .partner-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
  }
  
  .partner-name {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  
  .partner-type {
    font-size: 12px !important;
    opacity: 0.7;
  }
  
  .partner-discount {
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-top: 6px !important;
  }
  
  .partner-details {
    font-size: 12px !important;
    line-height: 1.3;
    margin-bottom: 12px !important;
  }
  
  .partner-actions {
    display: flex !important;
    gap: 8px !important;
  }
  
  .partner-actions .btn {
    flex: 1;
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
  }
  
  /* Forms - Touch friendly */
  .form-input,
  .form-select,
  .auth-form-input {
    font-size: 16px !important; /* iOS zoom prevention */
    padding: 12px !important;
    min-height: 48px !important;
  }
  
  .form-label,
  .auth-form-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  
  /* Buttons - Touch targets */
  .btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  .btn-sm {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  
  /* Bottom Navigation - Kompakt */
  .bottom-nav {
    height: 65px !important;
    padding: 6px 4px !important;
  }
  
  .nav-item {
    padding: 4px 2px !important;
  }
  
  .nav-icon {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
  }
  
  .nav-text {
    font-size: 10px !important;
    line-height: 1.1;
  }
  
  /* Screen padding */
  .screen {
    padding: 12px !important;
    padding-bottom: 75px !important;
  }
  
  /* Cards kompakt */
  .card {
    margin: 8px 0 !important;
    padding: 16px !important;
  }
  
  .card-header {
    margin-bottom: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  
  .card-title {
    font-size: 16px !important;
  }
  
  /* Balance card egyszerűsítés */
  .balance-card {
    margin: 8px 0 !important;
    padding: 16px 12px !important;
    min-height: auto !important;
  }
  
  .balance-amount {
    font-size: 1.8rem !important;
    margin: 8px 0 !important;
  }
  
  .balance-label {
    font-size: 13px !important;
  }
  
  /* Welcome screen */
  .welcome-logo {
    width: 90px !important;
    height: 90px !important;
    font-size: 2rem !important;
  }
  
  .welcome-title {
    font-size: 1.8rem !important;
  }
  
  /* Auth screens */
  .auth-logo {
    width: 60px !important;
    height: 60px !important;
  }
  
  .auth-title {
    font-size: 1.4rem !important;
  }
  
}

/* ===== TABLET (481px - 768px) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  
  .action-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  
  .screen {
    padding: 16px !important;
    padding-bottom: 80px !important;
  }
  
}