/* ═══════════════════════════════════════════════════
   FormaQadin — Android Mobil CSS
   Tam Android UX optimizasiyası
   ═══════════════════════════════════════════════════ */

/* ── Android WebView üçün əsas ── */
* { -webkit-tap-highlight-color: transparent; }
input, select, textarea, button { font-size: 16px !important; } /* Zoom problemini aradan qaldır */
html { scroll-behavior: smooth; }

/* ════════════════════════════════
   MOBİL ≤ 768px
   ════════════════════════════════ */
@media (max-width: 768px) {

  /* ── WRAP ── */
  .wrap {
    box-shadow: none !important;
    padding-bottom: 76px !important; /* Alt nav üçün boşluq */
  }

  /* ── NAV — tam yenidən ── */
  nav {
    height: 56px !important;
    padding: 0 14px !important;
    gap: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99 !important;
    background: rgba(255,251,253,.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  /* Nav içini sadələşdir */
  /* nav-links: hamburger əvəzinə yatay scroll */
  .nav-links  { display:flex !important; overflow-x:auto !important; white-space:nowrap !important; gap:0 !important; flex-shrink:1 !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important; }
  .nav-links::-webkit-scrollbar { display:none !important; }
  .nav-links a { flex-shrink:0 !important; font-size:.72rem !important; padding:5px 10px !important; }
  .nav-lang   { display: none !important; }
  .btn-login  { display: none !important; }
  .btn-reg    { display: none !important; }
  .logo-tag   { display: none !important; }
  .logo-name  { font-size: .88rem !important; }
  .nav-ic     { display: none !important; }
  .hamburger  { display: none !important; }

  /* Nav sonrası boşluq */
  .wrap > nav + * { margin-top: 56px; }
  /* Breadcrumb nav altında görünsün */
  div[style*="padding:10px 14px"] { margin-top: 56px; }

  /* ════ ANA SƏHİFƏ ════ */

  /* Hero */
  .hero {
    padding: 16px 14px 12px !important;
    background: linear-gradient(160deg,#fff5fb 0%,#fce4f0 60%,#fff8fc 100%) !important;
  }
  .hero h1 {
    font-size: 1.48rem !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
  }
  .hero-sub {
    font-size: .82rem !important;
    margin-bottom: 12px !important;
    line-height: 1.65 !important;
  }
  .hero-stats {
    gap: 8px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat { font-size: .76rem !important; }

  /* Search Box — mobil */
  .sbox {
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
  }
  .sbox-tabs { gap: 6px !important; margin-bottom: 9px !important; }
  .sbox-tab  { padding: 6px 13px !important; font-size: .78rem !important; }
  .srow {
    grid-template-columns: 1fr !important;
    border-radius: 11px !important;
  }
  .sdiv { display: none !important; }
  .sfield {
    padding: 9px 12px !important;
    border-bottom: 1px solid #f0d6e8 !important;
  }
  .sfield:last-of-type { border-bottom: none !important; }
  .sfield select,
  .sfield input { font-size: .88rem !important; }
  .sbtn {
    margin: 7px !important;
    width: calc(100% - 14px) !important;
    border-radius: 11px !important;
    padding: 12px !important;
    font-size: .9rem !important;
  }

  /* Category Chips */
  .chips {
    padding: 7px !important;
    margin-bottom: 10px !important;
    gap: 0 !important;
  }
  .chip { padding: 5px 11px !important; }
  .chip-ic {
    width: 26px !important;
    height: 26px !important;
    font-size: .85rem !important;
    border-radius: 8px !important;
  }
  .chip-nm { font-size: .62rem !important; }

  /* Wide Banner */
  .wide-banner {
    height: 150px !important;
    border-radius: 13px !important;
  }
  .banner-ov { padding: 0 16px !important; }
  .banner-text h2 {
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
  }
  .banner-text p  { font-size: .76rem !important; margin-bottom: 9px !important; }
  .banner-btn     { padding: 7px 14px !important; font-size: .76rem !important; }

  /* Section paddings */
  .sec, .sec-white, .sec-light {
    padding: 16px 14px !important;
  }
  .sec-hd { margin-bottom: 12px !important; }
  .sec-hd h2 { font-size: .94rem !important; }
  .sec-hd a  { font-size: .78rem !important; }

  /* ── VENUE CARDS — yatay scroll ── */
  .vcards {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .vcards::-webkit-scrollbar { display: none !important; }
  .vcard {
    flex-shrink: 0 !important;
    width: 152px !important;
    scroll-snap-align: start !important;
    border-radius: 13px !important;
  }
  .vcard-img  { height: 105px !important; }
  .vcard-body { padding: 8px 10px !important; }
  .vcard-name { font-size: .8rem !important; }
  .vcard-loc  { font-size: .66rem !important; margin-bottom: 5px !important; }
  .rate-num   { font-size: .76rem !important; }
  .vcard-price{ font-size: .76rem !important; }

  /* ── KATEQORİYALAR — 2 sütun ── */
  .catgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }
  .catcard { border-radius: 13px !important; }
  .catcard-nm  { font-size: .8rem !important; }

  /* ── PROMO BANNER ── */
  .promo {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    border-radius: 14px !important;
  }
  .promo-img   { display: none !important; }
  .promo-text  { padding: 20px 18px !important; }
  .promo-title { font-size: 2rem !important; line-height: 1 !important; }
  .promo-label { font-size: .64rem !important; }
  .promo-sub   { font-size: .82rem !important; margin-bottom: 14px !important; }
  .promo-btn   { padding: 9px 18px !important; font-size: .82rem !important; }

  /* ── RƏYLƏRİ — 1 sütun ── */
  .rvcards { grid-template-columns: 1fr !important; gap: 9px !important; }
  .rvcard  { padding: 13px !important; }
  .rv-text { font-size: .8rem !important; }

  /* ── BLOG — 1 sütun ── */
  .blogcards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .blog-img  { height: 140px !important; }
  .blogcard-ttl { font-size: .9rem !important; }

  /* ── NECƏ İŞLƏYİR — 2 sütun ── */
  .howgrid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .howcard { padding: 12px 10px !important; gap: 8px !important; }
  .how-ic    { font-size: 1.2rem !important; margin-bottom: 4px !important; }
  .how-title { font-size: .8rem !important; }
  .how-desc  { font-size: .7rem !important; }

  /* ── FOOTER ── */
  footer { padding: 20px 14px 12px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .footer-brand { grid-column: 1/-1 !important; margin-bottom: 4px !important; }
  .footer-col h5 { font-size: .6rem !important; margin-bottom: 9px !important; }
  .footer-col a  { font-size: .74rem !important; margin-bottom: 8px !important; }
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }
  .footer-copy { font-size: .66rem !important; }

  /* ════ AXTARIŞ SƏHİFƏSİ ════ */

  /* Filtr sidebar üstə keçsin */
  .search-layout,
  div[style*="display:flex;gap:16px;align-items:flex-start"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Filtr — yatay scroll chip-lər */
  div[style*="width:220px;flex-shrink:0"] {
    width: 100% !important;
    position: static !important;
  }
  div[style*="width:220px;flex-shrink:0"] > div {
    position: static !important;
    border-radius: 13px !important;
    padding: 12px !important;
  }

  /* Kateqoriya filtri — yatay scroll */
  div[style*="flex:1;display:flex;flex-direction:column;gap:3px"]:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Nəticə grid — 2 sütun */
  .vcards.search-grid,
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }

  /* ════ SALON SƏHİFƏSİ ════ */

  .venue-layout,
  div[style*="display:grid;grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Desktop booking widget gizlə */
  .venue-right,
  .venue-booking-desktop { display: none !important; }

  /* Qalereya */
  .gallery-main { height: 220px !important; border-radius: 13px !important; }
  .gallery-thumb {
    width: 58px !important;
    height: 58px !important;
    border-radius: 9px !important;
  }

  /* Venue kart */
  .venue-card { padding: 14px !important; border-radius: 13px !important; }
  .venue-card h3 { font-size: .9rem !important; margin-bottom: 11px !important; }

  /* Trener grid — 2 sütun */
  .venue-card div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }
  .tr-thumb { height: 80px !important; }

  /* Booking modal */
  #bookModal > div { border-radius: 20px 20px 0 0 !important; }
  #mobileBar { display: block !important; }

  /* ════ YAXIN MƏKANLAR ════ */

  #map {
    height: 260px !important;
    border-radius: 13px !important;
  }
  .nearby-panel { height: 300px !important; }
  div[style*="display:flex;gap:14px;border-radius:16px"] {
    flex-direction: column !important;
    border-radius: 13px !important;
  }
  div[style*="width:320px;flex-shrink:0"] {
    width: 100% !important;
  }

  /* Yaxın məkan alt grid */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }

  /* ════ PROFİL SƏHİFƏSİ ════ */

  div[style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tab-lar scroll olsun */
  .ptab-row { overflow-x: auto !important; white-space: nowrap !important; }
  .ptab-row::-webkit-scrollbar { display: none !important; }
  .ptab { padding: 9px 16px !important; font-size: .8rem !important; }

  /* Stat kartlar */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
  }

  /* Sevimlilər grid */
  div[style*="grid-template-columns:repeat(4,1fr)"].favorites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ════ PAKET SƏHİFƏSİ ════ */

  div[style*="display:grid;grid-template-columns:repeat"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  div[style*="border-radius:20px;border:2px solid"] {
    padding: 18px !important;
  }

  /* ════ BLOG SƏHİFƏSİ ════ */

  div[style*="display:grid;grid-template-columns:220px 1fr"] {
    display: block !important;
  }

  /* ════ ADMIN / BİZNES PANEL ════ */

  .sidebar {
    position: fixed !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 200 !important;
    width: 240px !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .main { margin-left: 0 !important; }

  #adminHamburger,
  #bizHamburger { display: flex !important; }

  .topbar { padding: 10px 12px !important; }
  .content { padding: 12px 10px !important; }

  /* Admin stat kartlar */
  div[class*="admin-stats"],
  div[style*="grid-template-columns:repeat(4,1fr)"].stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 9px !important;
  }

  /* Cədvəllər — scroll */
  table {
    min-width: 480px !important;
    font-size: .76rem !important;
  }
  td, th { padding: 8px 10px !important; }
  div[style*="overflow:hidden"].card { overflow-x: auto !important; }

  /* Card grid-lər */
  .grid2, .grid3 { grid-template-columns: 1fr !important; }
  .grid2.keep2   { grid-template-columns: 1fr 1fr !important; }

  /* Biznes analitika */
  div[style*="grid-template-columns:1fr 1fr"].analytics {
    grid-template-columns: 1fr !important;
  }

  /* Dietoloq - müştəri layout */
  div[style*="grid-template-columns:400px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ════════════════════════════════
   KİÇİK ANDROID ≤ 400px (köhnə telefonlar)
   ════════════════════════════════ */
@media (max-width: 400px) {
  .hero h1      { font-size: 1.3rem !important; }
  .promo-title  { font-size: 1.75rem !important; }
  .wide-banner  { height: 135px !important; }
  .vcard        { width: 138px !important; }
  .catgrid      { grid-template-columns: repeat(2, 1fr) !important; }
  .howgrid      { grid-template-columns: 1fr !important; }
  .gallery-main { height: 185px !important; }

  div[style*="grid-template-columns:repeat(3,1fr)"].stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
}

/* ════════════════════════════════
   BÖYÜK MOBİL 480–768px (tablet)
   ════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .vcards .vcard { width: 170px !important; }
  .catgrid       { grid-template-columns: repeat(3, 1fr) !important; }
  .howgrid       { grid-template-columns: repeat(2, 1fr) !important; }
  .rvcards       { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-main  { height: 260px !important; }
}

/* ════════════════════════════════
   ANDROID TOUCH OPTİMİZASİYA
   ════════════════════════════════ */
@media (max-width: 768px) {

  /* Bütün tıklanabilir elementlər — min 44px touch target */
  button, a, .chip, .vcard, .catcard, .ncard,
  input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
  }
  .nav-ic, .hamburger { min-height: 40px; min-width: 40px; }

  /* Smooth scroll */
  .vcards, .gallery-thumbs, .chips,
  .nearby-panel, .ptab-row {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  /* Input focus — zoom problem yoxdur (16px artıq təyin edilib) */
  input:focus, select:focus, textarea:focus {
    outline: 2px solid #d4237a !important;
    outline-offset: 0 !important;
  }

  /* Mobil modal — tam ekran */
  #bookModal .modal-panel,
  div[style*="border-radius:20px 20px 0 0"] {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Alt mobil bar həmişə görünsün */
  #mobileBar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    background: #fff !important;
    border-top: 1.5px solid #f0d6e8 !important;
    padding: 10px 14px env(safe-area-inset-bottom, 0) 14px !important;
  }

  /* Android navigation bar boşluğu */
  .wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Forma submit düymələri tam genişlik */
  .bk-btn { min-height: 48px !important; font-size: .92rem !important; }

  /* Swipe animasiyası */
  .mobile-menu-panel { animation: slideInLeft .25s cubic-bezier(.4,0,.2,1) !important; }
  @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  /* Kart hover efektini mobilda söndür (touch-da problem yaradır) */
  .vcard:hover, .catcard:hover, .blogcard:hover {
    transform: none !important;
    box-shadow: 0 2px 10px rgba(212,35,122,.05) !important;
  }

  /* Aktiv klik efekti */
  .vcard:active, .catcard:active, .blogcard:active {
    transform: scale(.98) !important;
    transition: transform .1s !important;
  }
  button:active { transform: scale(.97) !important; }
}

/* ── Android App modu ── */
.android-app footer          { display: none !important; }
.android-app .wrap           { padding-bottom: 76px !important; }
.android-app nav             { position: fixed !important; top: 0 !important; }

/* ═══════════════════════════════════════════
   GLOBAL PLAYER + MOBİL DÜZƏLİŞLƏR
   ═══════════════════════════════════════════ */

/* Player aktiv olduqda boşluq */
body.has-player { padding-bottom: 62px !important; }

/* ── NAV — mobil horizontal scroll ── */
@media (max-width: 768px) {

  /* Nav linklər yatay scroll olsun */
  .nav-links {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 0 !important;
    padding: 0 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nav-links::-webkit-scrollbar { display: none !important; }
  .nav-links a {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Nav-ı tam genişliyə al */
  nav {
    overflow-x: hidden !important;
  }

  /* ── FORUM MOBİL ── */
  .forum-layout {
    grid-template-columns: 1fr !important;
  }
  .forum-right { display: none !important; }
  .fcat-row {
    padding: 11px 13px !important;
  }
  .fcat-ic {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  /* ── MUSİQİ SƏHİFƏSİ MOBİL ── */
  /* 2 sütunlu layout → 1 sütun */
  div[style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Sol panel (kateqoriyalar + playlist) yatay scroll chip */
  div[style*="grid-template-columns:280px 1fr"] > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  div[style*="grid-template-columns:280px 1fr"] > div:first-child::-webkit-scrollbar { display: none; }

  /* Kateqoriya kartları — yatay scroll için */
  div[style*="grid-template-columns:280px 1fr"] > div:first-child > div {
    flex-shrink: 0 !important;
    min-width: 140px !important;
    border-radius: 12px !important;
  }

  /* Mahnı kartları — tam genişlik */
  .song-card {
    padding: 8px 10px !important;
    border-radius: 11px !important;
  }
  .song-cover {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
  }
  .play-ic {
    width: 26px !important;
    height: 26px !important;
    font-size: .62rem !important;
  }

  /* Upload panel grid → 1 sütun */
  #uploadPanel form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── GLOBAL PLAYER MOBİL ── */
  #fqBar {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #fqBar > div:last-child {
    padding: 7px 11px !important;
    gap: 7px !important;
  }
  #fqDisc {
    width: 30px !important;
    height: 30px !important;
    font-size: .78rem !important;
  }
  #fqTitle { font-size: .76rem !important; }
  #fqArtist { font-size: .6rem !important; }
  #fqTime { display: none !important; }
  #fqShuffle { display: none !important; }
}

/* ── SONG CARD AKTİV ── */
.fq-song-active {
  border-color: #d4237a !important;
  background: #fff0f5 !important;
}
.fq-song-active .play-ic { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}