/*
(c) Spacehubs Africa. All rights reserved.
Licensed under the Proprietary License found in the LICENSE file
in the root directory of this source tree.
*/

.country-tab-nav { display: flex; gap: 0.375rem; overflow-x: auto; white-space: nowrap; padding-bottom: 0.25rem; }
.country-tab-nav::-webkit-scrollbar { height: 4px; }
.country-tab-nav::-webkit-scrollbar-track { background: transparent; }
.country-tab-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.country-tab-nav::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.country-tab-nav .tab-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem; font-weight: 500;
  color: #475569;
  border: 1px solid transparent;
  background: #f1f5f9;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.country-tab-nav .tab-btn:hover:not([data-locked]) { background: #e2e8f0; color: #0f172a; }
.country-tab-nav .tab-btn[data-locked] { opacity: 0.8; }
.country-tab-nav .tab-btn[data-locked]:hover { background: #fef9c3; color: #92400e; }

/* ── Premium teaser: chart-card grid ────────────────────────────────────── */
.teaser-unlock-banner {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 0.875rem 1rem;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.75rem;
    margin-bottom: 1.25rem;
}
.teaser-unlock-label { font-size: 0.8125rem; font-weight: 600; color: #b45309; margin: 0 0 0.25rem; }
.teaser-unlock-detail { font-size: 0.75rem; color: #92400e; margin: 0; opacity: 0.85; }
.teaser-upgrade-btn {
    display: inline-flex; align-items: center;
    background: var(--color-sha-indigo); color: #fff;
    padding: 0.5rem 1rem; border-radius: 0.5rem;
    font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    white-space: nowrap; transition: opacity 0.15s;
}
.teaser-upgrade-btn:hover { opacity: 0.88; }

.teaser-chart-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem;
}
.teaser-chart-card--locked { opacity: 0.7; }
.teaser-chart-card-header {
    display: flex; align-items: flex-start; gap: 0.625rem;
    justify-content: space-between; margin-bottom: 0.75rem;
}
.teaser-chart-title  { font-size: 0.9375rem; font-weight: 700; color: #111827; margin: 0 0 0.2rem; }
.teaser-chart-desc   { font-size: 0.75rem; color: #9ca3af; margin: 0; }
.teaser-lock-icon    { color: #d97706; font-size: 0.8125rem; margin-top: 0.2rem; flex-shrink: 0; }
.teaser-chart-preview-area {
    display: flex; align-items: flex-end; gap: 0.5rem;
    padding: 0.75rem 0.75rem 0;
    height: 10rem; border-radius: 0.5rem;
    background: #f8fafc; overflow: hidden; position: relative;
}
.teaser-bar {
    flex: 1; border-radius: 0.25rem 0.25rem 0 0;
    background: #e2e8f0; min-width: 0;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.teaser-preview-note {
    font-size: 0.6875rem; color: #94a3b8; text-align: center; margin: 0.5rem 0 0;
}
.teaser-chart-locked-area {
    height: 7rem; border-radius: 0.5rem;
    border: 2px dashed #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: #d1d5db;
}
.country-tab-nav .tab-btn[data-tab="overview"].active    { background: #E0F5FB; color: #075985; border-color: #0EA5E9; font-weight: 600; }
.country-tab-nav .tab-btn[data-tab="growth"].active      { background: var(--color-sha-green-bg);  color: var(--color-sha-green-text);  border-color: var(--color-sha-green-border);  font-weight: 600; }
.country-tab-nav .tab-btn[data-tab="industry"].active    { background: var(--color-sha-gold-bg);   color: var(--color-sha-gold-text);   border-color: var(--color-sha-gold-border);   font-weight: 600; }
.country-tab-nav .tab-btn[data-tab="infrastructure"].active { background: var(--color-sha-teal-bg); color: var(--color-sha-teal-text); border-color: var(--color-sha-teal-border);    font-weight: 600; }
.country-tab-nav .tab-btn[data-tab="academics"].active   { background: var(--color-sha-purple-bg); color: var(--color-sha-purple-text); border-color: var(--color-sha-purple-border); font-weight: 600; }