.border-tabs-container{background:#f8f9fa;border-radius:10px;padding:15px;margin-bottom:25px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.nav-tabs{border:none;display:flex;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:5px}
.nav-tabs::-webkit-scrollbar{height:3px}
.nav-tabs::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.nav-tabs::-webkit-scrollbar-thumb{background:#007bff;border-radius:10px}
.nav-tabs .nav-item{white-space:nowrap;flex-shrink:0}
.nav-tabs .nav-link{border:2px solid transparent;border-radius:25px!important;margin:0 5px;padding:8px 16px;font-size:14px;font-weight:500;color:#6c757d;transition:all .3s ease;display:flex;align-items:center;gap:8px}
.nav-tabs .nav-link:hover{border-color:#007bff;color:#007bff;background-color:rgba(0,123,255,0.1)}
.nav-tabs .nav-link.active{background-color:#007bff;border-color:#007bff;color:#fff}
.country-section-card{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 2px 15px rgba(0,0,0,0.08);border:1px solid #e9ecef}
.country-title{font-size:1.5rem;font-weight:600;color:#2c3e50;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.destination-row{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:8px;margin-bottom:15px;padding:15px;border:1px solid #dee2e6;transition:all .3s ease}
.destination-row:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,0.1);border-color:#007bff}
.destination-link{text-decoration:none;color:#2c3e50;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.destination-link:hover{color:#007bff}
.transport-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.transport-btn{background:#fff;border:2px solid #007bff;color:#007bff;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:500;text-decoration:none;transition:all .3s ease;display:flex;align-items:center;gap:5px;white-space:nowrap}
.transport-btn:hover{background:#007bff;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,123,255,0.3)}
.toggle-btn{background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);border:none;border-radius:10px;padding:15px 20px;color:#fff;font-weight:600;box-shadow:0 4px 15px rgba(0,123,255,0.3);transition:all .3s ease}
.toggle-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,123,255,0.4)}
.info-alert{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);border:none;border-radius:15px;padding:25px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.info-alert h5{color:#1565c0;font-weight:700}
.seo-links-section{display:block;visibility:visible;opacity:1}
.seo-links-section .list-unstyled{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.seo-links-section .list-unstyled>li{list-style:none;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:1px solid #dee2e6;border-radius:8px;padding:12px;flex:1 1 calc(50% - 12px);display:flex;flex-direction:column}
.seo-links-section .list-unstyled>li strong a{text-decoration:none}
.js-hidden{display:none!important}
.matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:stretch}
.matches-item{min-width:0}
@media (max-width:768px){
.destination-row{flex-direction:column;text-align:center}
.destination-link{justify-content:center;margin-bottom:15px}
.transport-buttons{justify-content:center}
.country-title{font-size:1.25rem;justify-content:center}
.nav-tabs .nav-link{font-size:12px;padding:6px 12px}
.seo-links-section .list-unstyled{display:block}
.seo-links-section .list-unstyled>li{flex:none;width:100%}
}
@media (max-width:576px){
.container{padding-left:10px;padding-right:10px}
.border-tabs-container,.country-section-card{margin-left:-10px;margin-right:-10px;border-radius:0}
.transport-btn{font-size:11px;padding:5px 10px}
.matches-grid{grid-template-columns:1fr}
}
.flag-img,.flag-svg{border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.loading-animation{display:none;text-align:center;padding:20px}
.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Dark mode styles */
[data-theme="dark"] .border-tabs-container{background:var(--v2-bg-card,#1e293b);box-shadow:0 2px 10px rgba(0,0,0,0.3)}
[data-theme="dark"] .nav-tabs::-webkit-scrollbar-track{background:#334155}
[data-theme="dark"] .nav-tabs::-webkit-scrollbar-thumb{background:#0ea5e9}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--v2-text-muted,#94a3b8)}
[data-theme="dark"] .nav-tabs .nav-link:hover{border-color:#0ea5e9;color:#0ea5e9;background-color:rgba(14,165,233,0.15)}
[data-theme="dark"] .nav-tabs .nav-link.active{background-color:#0ea5e9;border-color:#0ea5e9;color:#fff}
[data-theme="dark"] .country-section-card{background:var(--v2-bg-card,#1e293b);box-shadow:0 2px 15px rgba(0,0,0,0.3);border-color:var(--v2-border,#334155)}
[data-theme="dark"] .country-title{color:var(--v2-text,#f1f5f9)}
[data-theme="dark"] .destination-row{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-color:var(--v2-border,#475569)}
[data-theme="dark"] .destination-row:hover{border-color:#0ea5e9;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .destination-link{color:var(--v2-text,#f1f5f9)}
[data-theme="dark"] .destination-link:hover{color:#0ea5e9}
[data-theme="dark"] .transport-btn{background:var(--v2-bg-secondary,#334155);border-color:#0ea5e9;color:#38bdf8}
[data-theme="dark"] .transport-btn:hover{background:#0ea5e9;color:#fff;box-shadow:0 2px 8px rgba(14,165,233,0.4)}
[data-theme="dark"] .toggle-btn{background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);box-shadow:0 4px 15px rgba(14,165,233,0.4)}
[data-theme="dark"] .toggle-btn:hover{box-shadow:0 6px 20px rgba(14,165,233,0.5)}
[data-theme="dark"] .info-alert{background:linear-gradient(135deg,#1e3a5f 0%,#1e293b 100%);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .info-alert h5{color:#38bdf8}
[data-theme="dark"] .seo-links-section .list-unstyled>li{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-color:var(--v2-border,#475569);color:var(--v2-text,#f1f5f9)}
[data-theme="dark"] .seo-links-section .list-unstyled>li strong a{color:var(--v2-primary-light,#38bdf8)}
[data-theme="dark"] .matches-item{background:var(--v2-bg-secondary,#334155);border-color:var(--v2-border,#475569)}
[data-theme="dark"] .loading-animation{color:var(--v2-text,#f1f5f9)}
[data-theme="dark"] .spinner{border-color:#334155;border-top-color:#0ea5e9}

/* Filter Panel Styles */
.stat-filter-panel {
  background: var(--v2-bg-card, #fff);
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--v2-border, #e5e7eb);
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.stat-filter-panel .filter-section {
  margin-bottom: 16px;
}

.stat-filter-panel .filter-section:last-child {
  margin-bottom: 0;
}

.stat-filter-panel .filter-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--v2-text-primary, #1e293b);
  margin-bottom: 10px;
}

.stat-filter-panel .filter-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
}

/* Filter buttons wrapper - responsive layout */
.stat-filter-panel .filter-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-filter-panel .filter-buttons-scroll {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* On desktop: single line, overflow hidden, JS controls visibility */
@media (min-width: 769px) {
  .stat-filter-panel .filter-buttons-scroll {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .stat-filter-panel .filter-btn {
    flex-shrink: 0;
  }
  .stat-filter-panel .filter-btn-more {
    display: none !important;
  }
  .stat-filter-panel .filter-btn.desktop-hidden {
    display: none !important;
  }
  .stat-filter-panel .filter-more-dropdown {
    display: flex;
    flex-shrink: 0;
  }
  .stat-filter-panel .filter-more-dropdown.no-overflow {
    display: none;
  }
}

/* On mobile: horizontal scroll, show all buttons */
@media (max-width: 768px) {
  .stat-filter-panel .filter-buttons-wrapper {
    display: block;
  }
  .stat-filter-panel .filter-buttons-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    padding-right: 16px;
  }
  .stat-filter-panel .filter-buttons-scroll::-webkit-scrollbar {
    display: none;
  }
  .stat-filter-panel .filter-btn {
    flex-shrink: 0;
  }
  .stat-filter-panel .filter-btn.desktop-hidden {
    display: inline-flex !important;
  }
  .stat-filter-panel .filter-btn-more {
    display: inline-flex;
    flex-shrink: 0;
  }
  .stat-filter-panel .filter-more-dropdown {
    display: none !important;
  }
}

/* Dropdown styles */
.stat-filter-panel .filter-more-dropdown {
  position: relative;
  flex-shrink: 0;
}

.stat-filter-panel .filter-btn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stat-filter-panel .filter-btn-toggle .toggle-icon {
  transition: transform 0.2s ease;
}

.stat-filter-panel .filter-btn-toggle.active .toggle-icon {
  transform: rotate(180deg);
}

.stat-filter-panel .filter-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 180px;
  background: var(--v2-bg-card, #fff);
  border: 1px solid var(--v2-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 8px;
}

.stat-filter-panel .filter-dropdown-menu.show {
  display: block;
}

.stat-filter-panel .filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--v2-text-secondary, #475569);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.stat-filter-panel .filter-dropdown-item:hover {
  background: var(--v2-bg-secondary, #f1f5f9);
  color: #0ea5e9;
}

.stat-filter-panel .filter-dropdown-item.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
}

/* Dark mode dropdown */
[data-theme="dark"] .stat-filter-panel .filter-dropdown-menu {
  background: var(--v2-bg-card, #1e293b);
  border-color: var(--v2-border, #334155);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .stat-filter-panel .filter-dropdown-item {
  color: var(--v2-text-muted, #94a3b8);
}

[data-theme="dark"] .stat-filter-panel .filter-dropdown-item:hover {
  background: var(--v2-bg-secondary, #334155);
  color: #38bdf8;
}

[data-theme="dark"] .stat-filter-panel .filter-dropdown-item.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
}

.stat-filter-panel .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-filter-panel .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--v2-border, #e5e7eb);
  border-radius: 9999px;
  background: var(--v2-bg-secondary, #f9fafb);
  color: var(--v2-text-secondary, #475569);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.stat-filter-panel .filter-btn:hover {
  border-color: #0ea5e9;
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08);
}

.stat-filter-panel .filter-btn.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.stat-filter-panel .filter-btn img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.stat-filter-panel .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--v2-border, #e5e7eb);
  border-radius: 9999px;
  background: var(--v2-bg-secondary, #f9fafb);
  color: var(--v2-text-secondary, #475569);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-filter-panel .filter-chip:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08);
}

.stat-filter-panel .filter-chip.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

/* Intro list */
.stat-intro-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 16px auto;
  max-width: 900px;
}

.stat-intro-list .intro-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--v2-bg-secondary, #f1f5f9);
  border-radius: 9999px;
  font-size: 0.85rem;
  color: var(--v2-text-secondary, #475569);
  white-space: nowrap;
}

.stat-intro-list .intro-item img {
  width: 20px;
  height: 13px;
  border-radius: 2px;
}

/* Dark mode for filter panel */
[data-theme="dark"] .stat-filter-panel {
  background: var(--v2-bg-card, #1e293b);
  border-color: var(--v2-border, #334155);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stat-filter-panel .filter-label {
  color: var(--v2-text, #f1f5f9);
}

[data-theme="dark"] .stat-filter-panel .filter-btn {
  background: var(--v2-bg-secondary, #334155);
  border-color: var(--v2-border, #475569);
  color: var(--v2-text-muted, #94a3b8);
}

[data-theme="dark"] .stat-filter-panel .filter-btn:hover {
  border-color: #0ea5e9;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.15);
}

[data-theme="dark"] .stat-filter-panel .filter-btn.active {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  color: #fff;
  border-color: transparent;
}

[data-theme="dark"] .stat-filter-panel .filter-chip {
  background: var(--v2-bg-secondary, #334155);
  border-color: var(--v2-border, #475569);
  color: var(--v2-text-muted, #94a3b8);
}

[data-theme="dark"] .stat-filter-panel .filter-chip:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.15);
}

[data-theme="dark"] .stat-filter-panel .filter-chip.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

[data-theme="dark"] .stat-intro-list .intro-item {
  background: var(--v2-bg-secondary, #334155);
  color: var(--v2-text-muted, #94a3b8);
}

/* Highlight effect when section needs attention */
.stat-filter-panel .filter-section-highlight {
  animation: highlightPulse 0.6s ease-out;
}

.stat-filter-panel .filter-section-highlight .filter-label {
  color: #0ea5e9;
}

.stat-filter-panel .filter-section-highlight .filter-chips,
.stat-filter-panel .filter-section-highlight .filter-buttons-wrapper {
  border: 2px solid #0ea5e9;
  border-radius: 12px;
  padding: 8px;
  margin: -8px;
  background: rgba(14, 165, 233, 0.05);
}

@keyframes highlightPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

[data-theme="dark"] .stat-filter-panel .filter-section-highlight .filter-label {
  color: #38bdf8;
}

[data-theme="dark"] .stat-filter-panel .filter-section-highlight .filter-chips,
[data-theme="dark"] .stat-filter-panel .filter-section-highlight .filter-buttons-wrapper {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

/* Mobile responsive for filter panel */
@media (max-width: 576px) {
  .stat-filter-panel {
    padding: 16px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 0;
  }

  .stat-filter-panel .filter-buttons {
    gap: 6px;
  }

  .stat-filter-panel .filter-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .stat-filter-panel .filter-btn img {
    width: 20px;
    height: 13px;
  }

  .stat-intro-list {
    gap: 6px;
  }

  .stat-intro-list .intro-item {
    padding: 4px 10px;
    font-size: 0.8rem;
  }
}