/**
 * Sistema de Design - Arena Esportiva
 * Design System focado em mobile-first com consistência profissional
 */

/* ========================================
   VARIÁVEIS CSS - PALETA DE CORES
======================================== */
:root {
  /* Cores Primárias - Verde (você gostou) */
  --primary-color: #1abc9c;
  --primary-dark: #16a085;
  --primary-light: #48d597;

  /* Cores Secundárias - Azul da Logo (#021373) */
  --secondary-color: #021373;
  --secondary-dark: #010a47;
  --secondary-light: #3d4a9e;

  /* Cores de Destaque - Laranja da Logo (#F25C05) */
  --accent-color: #f25c05;
  --accent-dark: #a62f03;
  --accent-light: #ff8533;

  /* Cores de Sistema */
  --success: #1abc9c;
  --warning: #f25c05;
  --danger: #a62f03;
  --info: #021373;

  /* Cores Neutras - Preto e Cinza da Logo */
  --dark: #0d0d0d;
  --dark-alt: #1a1a1a;
  --dark-blue: #021373;
  --gray-900: #212529;
  --gray-700: #495057;
  --gray-500: #6c757d;
  --gray-300: #dee2e6;
  --gray-100: #f2f2f2;
  --white: #ffffff;

  /* Gradientes - Combinações da Logo */
  --gradient-primary: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
  --gradient-secondary: linear-gradient(135deg, #021373 0%, #3d4a9e 100%);
  --gradient-accent: linear-gradient(135deg, #f25c05 0%, #a62f03 100%);
  --gradient-dark: linear-gradient(
    135deg,
    #0d0d0d 0%,
    #1a1a1a 50%,
    #021373 100%
  );
  --gradient-hero: linear-gradient(135deg, #1abc9c 0%, #021373 100%);

  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 4px 15px rgba(26, 188, 156, 0.3);
  --shadow-secondary: 0 4px 15px rgba(2, 19, 115, 0.2);
  --shadow-accent: 0 4px 15px rgba(242, 92, 5, 0.2);

  /* Tipografia */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  /* Espaçamentos */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 50px;

  /* Transições */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   RESET E BASE
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--gray-900);
  background-color: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   COMPONENTES - GRADIENTES
======================================== */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

/* ========================================
   COMPONENTES - CARDS
======================================== */
.card-premium {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  transition: all var(--transition-base);
  overflow: hidden;
}

.card-premium:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.card-premium-sm {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--white);
  transition: all var(--transition-base);
}

.card-stats {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: rgba(255, 255, 255, 0.95);
  transition: transform var(--transition-base);
}

.card-stats:hover {
  transform: translateY(-5px);
}

/* ========================================
   COMPONENTES - BOTÕES
======================================== */
.btn-premium {
  background: var(--gradient-secondary);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  color: var(--white);
}

.btn-premium:active {
  transform: translateY(0);
}

.btn-success-premium {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-primary);
}

.btn-success-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
  color: var(--white);
}

.btn-outline-premium {
  border: 2px solid var(--primary-color);
  border-radius: var(--radius-pill);
  color: var(--primary-color);
  background: transparent;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all var(--transition-base);
}

.btn-outline-premium:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-2px);
}

/* ========================================
   COMPONENTES - BADGES
======================================== */
.badge-premium {
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* ========================================
   COMPONENTES - FORMULÁRIOS
======================================== */
.form-control-premium {
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-300);
  padding: 0.75rem 1rem;
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
}

.form-control-premium:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control-premium-pill {
  border-radius: var(--radius-pill);
  border: 2px solid var(--gray-300);
  padding: 0.75rem 1.25rem;
  transition: all var(--transition-fast);
}

.form-control-premium-pill:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* ========================================
   COMPONENTES - HEADERS
======================================== */
.header-gradient {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-md);
}

.header-dark {
  background: var(--gradient-dark);
  box-shadow: var(--shadow-md);
}

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

/* ========================================
   COMPONENTES - IMAGENS
======================================== */
.img-premium {
  border-radius: var(--radius-lg);
  object-fit: cover;
  width: 100%;
}

.img-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ========================================
   ANIMAÇÕES
======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out;
}

.animate-slideInUp {
  animation: slideInUp 0.6s ease-out;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   UTILITIES
======================================== */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shadow-primary {
  box-shadow: var(--shadow-primary);
}

.transition-all {
  transition: all var(--transition-base);
}

/* ========================================
   RESPONSIVIDADE MOBILE-FIRST
======================================== */

/* Smartphones (até 576px) */
@media (max-width: 576px) {
  :root {
    --font-size-base: 0.9375rem; /* 15px */
    --font-size-lg: 1rem; /* 16px */
    --font-size-xl: 1.125rem; /* 18px */
    --font-size-2xl: 1.375rem; /* 22px */
    --font-size-3xl: 1.625rem; /* 26px */
    --font-size-4xl: 2rem; /* 32px */
  }

  .card-premium {
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
  }

  .btn-premium,
  .btn-success-premium {
    padding: 0.65rem 1.25rem;
    font-size: var(--font-size-sm);
  }

  body {
    font-size: var(--font-size-base);
  }
}

/* Tablets pequenos (576px até 768px) */
@media (min-width: 576px) and (max-width: 768px) {
  .card-premium {
    border-radius: var(--radius-lg);
  }
}

/* Tablets (768px até 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  .card-premium {
    border-radius: var(--radius-xl);
  }
}

/* Desktop (acima de 992px) */
@media (min-width: 992px) {
  .card-premium:hover {
    transform: translateY(-8px);
  }
}

/* ========================================
   COMPONENTES ESPECÍFICOS - RESERVAS
======================================== */
.quadra-card {
  transition: all var(--transition-base);
}

.quadra-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.quadra-img {
  height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

@media (max-width: 576px) {
  .quadra-img {
    height: 10rem;
  }
}

/* ========================================
   COMPONENTES ESPECÍFICOS - HORÁRIOS
======================================== */
.horario-btn {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-300);
  background: var(--white);
  font-weight: 600;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.horario-btn:hover:not(:disabled) {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

.horario-btn.selected {
  background: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-primary);
}

.horario-btn:disabled {
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================
   LOADING STATES
======================================== */
.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--white);
  width: 24px;
  height: 24px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   SCROLLBAR PERSONALIZADA
======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* ========================================
   BOTÃO PAGAR NO LOCAL
======================================== */
.btn-pagar-local {
  background-color: var(--accent-color) !important;
  border: none !important;
  color: white !important;
}

.btn-pagar-local:hover {
  background-color: var(--accent-dark) !important;
  color: white !important;
}

.btn-pagar-local .fa-store {
  color: white !important;
}

.btn-pagar-local span {
  color: white !important;
  font-weight: 600 !important;
}