/* ===================================================================
   TRAINERNEARBY UNIFIED DESIGN SYSTEM v1.0
   Teal (#038f7e) + Orange (#FF5722) Color Palette
   =================================================================== */

/* --- Design Tokens (CSS Custom Properties) --- */
:root {
  --tnb-teal: #038f7e;
  --tnb-teal-dark: #026d5f;
  --tnb-teal-light: #e6f6f2;
  --tnb-orange: #FF5722;
  --tnb-orange-dark: #e64a19;
  --tnb-white: #ffffff;
  --tnb-gray-50: #fbfcfe;
  --tnb-gray-100: #f5f6f8;
  --tnb-gray-150: #f1f4f9;
  --tnb-gray-200: #edf0f5;
  --tnb-gray-300: #e3e8f0;
  --tnb-gray-400: #c3cdd9;
  --tnb-gray-500: #8a97ab;
  --tnb-gray-600: #5a6a80;
  --tnb-gray-700: #3d4c63;
  --tnb-gray-800: #2c3b52;
  --tnb-gray-900: #1f2a3b;
  --tnb-shadow-sm: 0 2px 8px rgba(20, 40, 70, 0.04);
  --tnb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.07);
  --tnb-shadow-lg: 0 12px 28px rgba(20, 40, 70, 0.08);
  --tnb-shadow-xl: 0 18px 38px rgba(0, 0, 0, 0.12);
  --tnb-shadow-teal: 0 6px 22px rgba(3, 143, 126, 0.15);
  --tnb-radius-sm: 8px;
  --tnb-radius-md: 12px;
  --tnb-radius-lg: 16px;
  --tnb-radius-xl: 20px;
  --tnb-radius-pill: 30px;

  /* Typography */
  --font-heading: 'Audiowide', cursive, sans-serif;
  --font-body: 'Raleway', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ===================================================================
   1. BUTTON SYSTEM
   =================================================================== */

/* Primary Teal Button */
.tnb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tnb-white);
  background: var(--tnb-teal);
  border: none;
  border-radius: var(--tnb-radius-pill);
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  line-height: 1.4;
}
.tnb-btn-primary:hover {
  background: var(--tnb-teal-dark);
  color: var(--tnb-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(3, 143, 126, 0.35);
  text-decoration: none;
}
.tnb-btn-primary:disabled,
.tnb-btn-primary.disabled {
  background: var(--tnb-gray-300);
  color: var(--tnb-gray-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Orange Accent Button */
.tnb-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tnb-white);
  background: var(--tnb-orange);
  border: none;
  border-radius: var(--tnb-radius-pill);
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  line-height: 1.4;
}
.tnb-btn-accent:hover {
  background: var(--tnb-orange-dark);
  color: var(--tnb-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 87, 34, 0.35);
  text-decoration: none;
}

/* Outline Teal Button */
.tnb-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tnb-teal);
  background: transparent;
  border: 2px solid var(--tnb-teal);
  border-radius: var(--tnb-radius-pill);
  padding: 8px 22px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  line-height: 1.4;
}
.tnb-btn-outline:hover {
  background: var(--tnb-teal);
  color: var(--tnb-white);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Button variants */
.tnb-btn-block { width: 100%; display: flex; }
/* ===================================================================
   2. SUBSCRIPTION CTA BUTTONS
   =================================================================== */

.tnb-btn-subscribe {
  width: 100%;
  display: block;
  text-align: center;
  padding: 12px 24px;
  border-radius: var(--tnb-radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--tnb-white);
  background: var(--tnb-teal);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  line-height: 1.5;
}
.tnb-btn-subscribe:hover {
  background: var(--tnb-teal-dark);
  color: var(--tnb-white);
  box-shadow: 0 6px 18px rgba(3, 143, 126, 0.35);
  text-decoration: none;
}

.tnb-btn-subscribe:disabled,
.tnb-btn-subscribe-current {
  width: 100%;
  display: block;
  text-align: center;
  padding: 12px 24px;
  border-radius: var(--tnb-radius-md);
  font-size: 15px;
  font-weight: 600;
  background: var(--tnb-teal-light);
  color: var(--tnb-teal);
  border: 1px solid var(--tnb-teal);
  cursor: not-allowed;
  line-height: 1.5;
}

.tnb-btn-subscribe-disabled {
  width: 100%;
  display: block;
  text-align: center;
  padding: 12px 24px;
  border-radius: var(--tnb-radius-md);
  font-size: 15px;
  font-weight: 600;
  background: var(--tnb-gray-100);
  color: var(--tnb-gray-500);
  border: 1px solid var(--tnb-gray-300);
  cursor: not-allowed;
  line-height: 1.5;
}

/* ===================================================================
   3. CARD SYSTEM
   =================================================================== */

.tnb-card {
  background: var(--tnb-white);
  border: 1px solid var(--tnb-gray-200);
  border-radius: var(--tnb-radius-lg);
  box-shadow: var(--tnb-shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tnb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tnb-shadow-xl);
}

.tnb-card-pro {
  border: 2px solid var(--tnb-teal);
  box-shadow: var(--tnb-shadow-teal);
}
.tnb-card-pro:hover {
  box-shadow: 0 20px 44px rgba(3, 143, 126, 0.28);
}

/* ===================================================================
   4. PRICING CARDS
   =================================================================== */

.tnb-pricing-card {
  background: var(--tnb-white);
  border-radius: var(--tnb-radius-lg);
  box-shadow: var(--tnb-shadow-lg);
  border: 1px solid var(--tnb-gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.tnb-pricing-card:hover {
  box-shadow: var(--tnb-shadow-xl);
}

.tnb-pricing-card-pro {
  background: var(--tnb-white);
  border-radius: var(--tnb-radius-lg);
  box-shadow: var(--tnb-shadow-lg);
  border: 2px solid var(--tnb-teal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  transform: scale(1.02);
  position: relative;
}
.tnb-pricing-card-pro:hover {
  box-shadow: 0 24px 48px rgba(3, 143, 126, 0.2);
}

/* Mobile & tablet: drop the "featured" scale-up so the Pro card never
   overflows the single-column grid and triggers horizontal scrolling. */
@media (max-width: 767px) {
  .tnb-pricing-card-pro {
    transform: none;
  }
}

/* ===================================================================
   5. BADGES & SIDEBAR
   =================================================================== */

.tnb-best-value-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: var(--tnb-teal);
  color: var(--tnb-white);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px 4px;
  border-radius: 0 var(--tnb-radius-lg) 0 12px;
  box-shadow: 0 4px 12px rgba(3, 143, 126, 0.3);
}

.tnb-pro-only-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--tnb-radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--tnb-teal-light);
  color: var(--tnb-teal);
  white-space: nowrap;
}

.tnb-feature-check { color: var(--tnb-teal); }
.tnb-feature-cross { color: var(--tnb-gray-400); }
.tnb-text-brand { color: var(--tnb-teal); }
.tnb-text-accent { color: var(--tnb-orange); }
.tnb-text-dark { color: var(--tnb-gray-900); }
.tnb-text-muted { color: var(--tnb-gray-600); }
/* ===================================================================
   BUTTONS EXTRA
   =================================================================== */

.tnb-btn-primary:active,
.tnb-btn-accent:active,
.tnb-btn-outline:active {
  transform: translateY(0);
}
/* ===================================================================
   6. FILTER SIDEBAR
   =================================================================== */

.tnb-filter-sidebar {
  background: var(--tnb-white);
  border: 1px solid var(--tnb-gray-200);
  border-radius: var(--tnb-radius-lg);
  box-shadow: 0 6px 22px rgba(20, 40, 70, 0.06);
  padding: 22px 20px;
}
.tnb-filter-sidebar .tnb-filter-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--tnb-gray-900);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tnb-teal);
  line-height: 1.4;
}

.tnb-distance-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--tnb-teal);
  background: var(--tnb-teal-light);
  border-radius: var(--tnb-radius-xl);
  padding: 3px 12px;
  white-space: nowrap;
}

/* ===================================================================
   7. PROFILE LINK
   =================================================================== */

.tnb-profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tnb-teal);
  color: var(--tnb-white);
  border-radius: var(--tnb-radius-md);
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tnb-profile-link:hover {
  background: var(--tnb-teal-dark);
  color: var(--tnb-white);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ===================================================================
   8. LOCATION BADGE
   =================================================================== */

.tnb-loc-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--tnb-radius-pill);
  font-size: 12px;
  font-weight: 700;
  margin: 2px;
  color: var(--tnb-white);
  background: var(--tnb-teal);
}
.tnb-loc-badge.muted {
  background: var(--tnb-gray-150);
  color: var(--tnb-gray-600);
}

/* ===================================================================
   9. PRICE BADGE
   =================================================================== */

.tnb-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tnb-orange);
  color: var(--tnb-white);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--tnb-radius-xl);
  padding: 5px 14px;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.28);
  text-align: center;
  white-space: nowrap;
}
.tnb-btn-sm { font-size: 12px; padding: 8px 18px; }
.tnb-btn-flat { text-transform: none; letter-spacing: normal; }