/* ============================================================================
   mobile-account-fixes.css — sadece test edilmiş, kanıtlanmış mobile UX
   sorunlarını hedef alan dar scope'lu fix'ler.

   Yöntem: önce-sonra Playwright screenshot ile her satırın etkisi doğrulandı.

   Kapsam (yalnızca @media (max-width: 768px)):
     1. Floating destek/whatsapp/feedback widget'ı içerik üstüne biniyordu →
        gizle (bottom-nav zaten erişim sağlıyor).
     2. Hesap navigation altında içerik kesiliyordu → padding-bottom yeterli.
     3. .account-welcome-card "beyaz text + beyaz zemin" olduğu için invisible
        kalıyordu → CSS variable'lar fallback'li doğrudan uygula, body class
        scoping ile yüksek specificity sağla.

   Bu dosya base.html sonunda yüklenir; tek satırlı page kodu değişikliği yok.
   ============================================================================ */

@media (max-width: 768px) {
  /* ---- 1. Floating support/wa/feedback widget mobilde gizle ----
     Kullanıcı için bottom-tab-bar'da Bildirimler + sayfa içi destek linkleri
     erişimi sağlıyor. 4 sticky FAB form input/toggle/CTA üzerine biniyordu
     (test edildi: profile TC-no input, notifications toggle, subscription
     "Süresiz Kullanım" rozeti). */
  body .support-floating-buttons {
    display: none !important;
  }

  /* ---- 2. Hesap nav alt sticky tab-bar yüksekliği için içerik dolgusu ----
     Bottom nav ~78-86px + safe-area-inset → 110px content padding. Yoksa
     kullanıcı son satırı (Account: "Entegrasyon/Pazaryeri" satırı) göremez. */
  body:has(.account-navigation--rail) main#mainContent.main-content,
  body:has(#accountNavigation) main#mainContent.main-content,
  body:has(.account-page-wrapper) main#mainContent.main-content {
    /* Bottom-tab-bar gerçek yüksekliği ölçüldü: ~85-92px + drop-shadow + safe
       area + nefes alanı. 130px+safe-area = "Entegrasyon/Pazaryeri" gibi son
       satır kart içeriğinin tam görünmesini garanti eder (test edildi). */
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- 3. account-welcome-card "invisible" sorunu ----
     CSS variable resolved ama daha düşük specificity'li başka bir kural
     veya cache nedeniyle uygulanmıyordu. Burada yüksek specificity +
     hex fallback ile garanti et. tm-account-hero-gradient yoksa Trendyol
     primary palette ile fallback. */
  /* ID-specificity yenmek için #tmv2App scope'u dahil — #tmv2App .card kuralı
     specificity (1,1,0) ile beyaz arkaplan veriyordu, class-only kurallar
     yenemiyordu. Burada #tmv2App + .account-welcome-card iki kez
     (specificity-boost trick) ile yenilebilir bir kural. */
  #tmv2App .account-welcome-card.account-welcome-card,
  #tmv2App .account-welcome-card.account-welcome-card.card {
    background: var(
      --tm-account-hero-gradient,
      linear-gradient(135deg, #0163c2 0%, #0175e4 52%, #73b7fe 100%)
    ) !important;
    background-color: var(--color-primary, #0175e4) !important;
    box-shadow: 0 8px 26px rgba(1, 117, 228, 0.22) !important;
    border: none !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tm-fg-on-brand, #ffffff) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card h4,
  #tmv2App .account-welcome-card.account-welcome-card h5,
  #tmv2App .account-welcome-card.account-welcome-card h6 {
    color: var(--tm-fg-on-brand, #ffffff) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card .text-muted,
  #tmv2App .account-welcome-card.account-welcome-card .text-muted.small,
  #tmv2App .account-welcome-card.account-welcome-card p {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  #tmv2App .account-welcome-card.account-welcome-card .account-welcome-card__icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
  }
  #tmv2App .account-welcome-card.account-welcome-card .account-welcome-card__icon i {
    color: #ffffff !important;
  }
}