@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --primary-cyan: #06B6D4;
  --primary-blue: #2563EB;
  --primary-indigo: #4F46E5;
  
  --brand-gradient: linear-gradient(135deg, #06B6D4 0%, #2563EB 50%, #4F46E5 100%);
  --brand-gradient-hover: linear-gradient(135deg, #0891B2 0%, #1D4ED8 50%, #4338CA 100%);
  
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-light: #EFF6FF;
  --accent: #06B6D4;
  --accent-light: #ECFEFF;
  
  --dark: #0F172A;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --bg-main: #F8FAFC;
  --bg-card: #FFFFFF;
  --border: #E2E8F0;
  
  --credit-color: #0284C7;
  --credit-bg: #E0F2FE;
  --success: #10B981;
  --warning: #F59E0B;
}

.btn-moveclub {
  background: linear-gradient(135deg, #06B6D4 0%, #2563EB 50%, #4F46E5 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
  transition: all 0.2s ease;
}
.btn-moveclub:hover {
  background: linear-gradient(135deg, #0891B2 0%, #1D4ED8 50%, #4338CA 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.38);
}

.text-brand-gradient {
  background: linear-gradient(90deg, #00F2FE 0%, #38BDF8 30%, #818CF8 65%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-moveclub-text {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
}

.brand-moveclub-text .move-text {
  color: #0F172A;
  letter-spacing: 0.1em;
}

.brand-moveclub-text-dark .move-text {
  color: #FFFFFF;
  letter-spacing: 0.1em;
}

.brand-moveclub-text .club-text {
  background: linear-gradient(90deg, #00F2FE 0%, #38BDF8 30%, #818CF8 65%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  background-color: #F8FAFC;
  color-scheme: light;
}

body {
  background-color: #F8FAFC;
  color: #0F172A;
  min-height: 100vh;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3, h4, h5, h6 {
  color: #0F172A !important;
}

main {
  max-width: 100%;
  padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  main {
    padding-bottom: 2rem;
  }
}

header, section, article {
  max-width: 100%;
}

#notificationDropdown, #userDropdown {
  max-width: calc(100vw - 20px) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Header & Navigation */
.header-glass {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  width: 100%;
  max-width: 100%;
}

.credits-badge {
  background: #0F172A;
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #38BDF8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.credits-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

/* Category Pills & Carousels */
#dateCarousel, #categoryPills {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  width: 100%;
  max-width: 100%;
  padding-bottom: 4px;
}

.category-pill {
  transition: all 0.2s ease;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}
.category-pill.active {
  background: #0F172A;
  color: #FFFFFF !important;
  font-weight: 800;
  border-color: #0F172A;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}
.category-pill:not(.active):hover {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

/* Date Pills */
.date-pill {
  transition: all 0.2s ease;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}
.date-pill.active {
  background: linear-gradient(135deg, #06B6D4 0%, #2563EB 50%, #4F46E5 100%);
  color: white !important;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

/* Studio & Class Cards */
.fitpass-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #FFFFFF;
  color: #0F172A;
  width: 100%;
  max-width: 100%;
}
.fitpass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.4);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease forwards;
}

/* Hide scrollbar for clean carousels */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Toast Animation */
#toast {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile Safe Areas and Viewport Adjustments */
.safe-area-bottom {
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
}

@media (max-width: 640px) {
  header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  main {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px)) !important;
  }
  
  .modal-dialog {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* MoveClub Ultra-Visible Floating AI Coach Widget */
#aiChatFloatingBtn {
  position: fixed !important;
  bottom: 85px !important;
  right: 18px !important;
  z-index: 999999 !important;
  display: flex !important;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.75));
}
#aiChatFloatingBtn.hidden {
  display: none !important;
}

/* ==================== ONBOARDING TOUR STYLES ==================== */
.onboarding-dot {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-dot.active {
  width: 2rem !important;
  background: linear-gradient(90deg, #06B6D4 0%, #2563EB 100%) !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.onboarding-step {
  display: none;
  animation: onboardingFadeIn 0.35s ease-out forwards;
}
.onboarding-step.active {
  display: block;
}

@keyframes onboardingFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.credit-item-card {
  transition: all 0.2s ease;
}
.credit-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.12);
}

.coach-pulse-halo {
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
  animation: coachHaloPulse 2s infinite;
}

@keyframes coachHaloPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}