/* BANKS LIST STYLES - з Design System */

/* HEADER */
.page-header { border-bottom:1px solid var(--c-border); padding:0 !important; }
.ph-wrapper { max-width:var(--max-w); margin:0 auto; padding:28px 24px 24px; }
.ph-wrapper .breadcrumbs { margin-bottom:16px; }
.ph { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }

/* Блок статистики */
.banks-stats { display:flex; gap:20px; margin:16px 0 0; padding:12px 0; border-top:1px solid var(--c-border); }
.stat-item { display:flex; align-items:baseline; gap:6px; }
.stat-label { font-size:14px !important; color:var(--c-text-muted); white-space:nowrap; }
.stat-value { font-size:14px !important; font-weight:600; color:var(--c-text-main); }
.stat-value a { font-size:14px !important; color:var(--c-primary); text-decoration:none; transition:color .15s; }
.stat-value a:hover { color:var(--c-primary-hover); text-decoration:underline; }

.ph-desc { margin-top:0; }
.ph-desc a { color:var(--c-primary); text-decoration:underline; transition:color .15s; }
.ph-desc a:hover { color:var(--c-primary-hover); }

/* MAIN */
.main { max-width:var(--max-w); margin:0 auto; padding:24px 24px 60px; }

/* SEARCH */
.search-wrap { position:relative; max-width:380px; margin-bottom:24px; }
.search-wrap svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--c-text-muted); pointer-events:none; }
.search-wrap input#search { 
  width:100%; padding:11px 14px 11px 40px; 
  border:1.5px solid var(--c-border); border-radius:var(--r-md); 
  font-family:var(--font); font-size:14px; 
  background:var(--c-bg-page); outline:none; color:var(--c-text-main); 
  transition:border-color .2s, background .2s; 
}
.search-wrap input#search:focus { border-color:var(--c-primary); background:var(--c-bg-card); }
.search-wrap input#search::placeholder { color:var(--c-text-muted); }

/* DESKTOP TABLE */
.banks-list-page .mobile-list { display:none; }
.banks-table-wrap { width:100%; }
.banks-table-header { 
  display:grid; grid-template-columns:36px 1fr 1fr auto; gap:20px; 
  padding:0 0 10px; border-bottom:2px solid var(--c-border); 
}
.banks-th { 
  font-size:11px; font-weight:700; text-transform:uppercase; 
  letter-spacing:.07em; color:var(--c-text-muted); text-align:left; 
}
.banks-th-action { text-align:right; }
.banks-table-body { display:flex; flex-direction:column; }
.banks-row { 
  display:grid; grid-template-columns:36px 1fr 1fr auto; gap:20px; 
  padding:14px 0; border-bottom:1px solid var(--c-border-soft); 
  transition:background .15s; align-items:center; 
}
.banks-row:last-child { border-bottom:none; }
.banks-row:hover { background:var(--c-bg-hover); }
.banks-row.hidden { display:none; }
.banks-td-num { font-size:12px; font-weight:700; color:var(--c-primary-border); }
.banks-row:hover .banks-td-num { color:var(--c-primary); }
.bank-inner { display:flex; align-items:center; gap:12px; }
.bank-logo {
  width:88px; height:44px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--c-primary); flex-shrink:0; object-fit:contain;
}
.bank-name { 
  font-size:15px; font-weight:700; line-height:1.3; 
  color:var(--c-text-main); text-decoration:none; transition:color .15s; 
}
.bank-name:hover { color:var(--c-primary); }
.bank-short { font-size:14px; color:var(--c-text-muted); margin-top:2px; }
.bank-contacts { display:flex; align-items:center; gap:6px 20px; flex-wrap:wrap; }
.contact { 
  display:inline-flex; align-items:center; gap:5px; 
  font-size:14px; color:var(--c-text-body); text-decoration:none; 
  white-space:nowrap; transition:color .15s; 
}
.contact:hover { color:var(--c-primary); }
.contact svg { color:var(--c-text-muted); flex-shrink:0; }
.banks-td-action { text-align:right; }
.more-link { 
  display:inline-flex; align-items:center; gap:4px; 
  font-size:13px; font-weight:700; color:var(--c-primary) !important; 
  text-decoration:none !important; white-space:nowrap; 
  transition:gap .15s, color .15s; 
}
.more-link:hover { gap:7px; color:var(--c-primary) !important; }
.no-results { 
  display:none; padding:40px 0; text-align:center; 
  color:var(--c-text-muted); font-weight:600; 
}
.no-results.show { display:block; }

/* MOBILE */
@media (max-width:768px) {
  .ph-wrapper { padding:18px 16px 16px; }
  .ph-wrapper .breadcrumbs .breadcrumb-text { display:inline !important; }
  .ph-wrapper .breadcrumbs .delimiter.desktop-only { display:inline-flex !important; }
  .ph { flex-direction:column; gap:4px; }
  .banks-stats { flex-direction:column; gap:8px; margin:12px 0 0; padding:10px 0; }
  .stat-item { gap:4px; }
  .stat-label { font-size:14px !important; }
  .stat-value { font-size:14px !important; }
  .main { padding:16px 16px 40px; }
  .search-wrap { max-width:100%; margin-bottom:16px; }
  .search-wrap input#search { font-size:15px; } /* Більше на мобілці */
  
  .banks-table-wrap { display:none; }
  .banks-list-page .mobile-list { display:flex; flex-direction:column; gap:10px; }
  .m-card { 
    border:1.5px solid var(--c-border); border-radius:var(--r-lg); 
    background:var(--c-bg-card); overflow:hidden; transition:border-color .2s; 
  }
  .m-card:hover { border-color:var(--c-primary); }
  .m-card.hidden { display:none; }
  .m-top { display:flex; align-items:center; gap:12px; padding:13px 14px 12px; }
  .m-num { 
    font-size:12px; font-weight:800; color:var(--c-primary-border); 
    width:16px; flex-shrink:0; text-align:center; 
  }
  .m-card:hover .m-num { color:var(--c-primary); }
  .m-logo {
    width:80px; height:40px; border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:800; color:var(--c-primary); flex-shrink:0; object-fit:contain;
  }
  .m-names { flex:1; min-width:0; }
  .m-name { 
    font-size:16px; font-weight:700; line-height:1.3; /* Більше на мобілці */
    color:var(--c-text-main); text-decoration:none; transition:color .15s; 
  }
  .m-name:hover { color:var(--c-primary); }
  .m-short { font-size:14px; color:var(--c-text-muted); }
  .m-bottom { 
    border-top:1px solid var(--c-border-soft); padding:10px 14px 13px; 
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px; 
  }
  .m-contacts { display:flex; flex-direction:column; gap:6px; }
  .m-contact { 
    display:inline-flex; align-items:center; gap:6px; 
    font-size:14px; color:var(--c-text-body); /* Більше на мобілці */
    text-decoration:none; white-space:nowrap; transition:color .15s; 
  }
  .m-contact:hover { color:var(--c-primary); }
  .m-contact svg { color:var(--c-text-muted); flex-shrink:0; }
  .m-link { 
    display:inline-flex; align-items:center; gap:4px; 
    font-size:13px; font-weight:700; color:var(--c-primary) !important; 
    text-decoration:none !important; flex-shrink:0; white-space:nowrap; 
    transition:gap .15s, color .15s; 
  }
  .m-link:hover { gap:7px; color:var(--c-primary) !important; }
}