/* ============================================
   F1 RACE BRASIL - MODERN CSS 2024
   F1 Racing Theme with Glassmorphism Effects
   ============================================ */

/* CSS Custom Properties - F1 Racing Theme */
:root {
  /* Primary Colors - F1 Racing */
  --f1-red: #E10600;
  --f1-red-dark: #B80500;
  --f1-red-light: #FF1A1A;
  --f1-black: #0D0D0D;
  --f1-dark: #1A1A1A;
  --f1-gray: #2D2D2D;
  --f1-silver: #C0C0C0;
  --f1-gold: #FFD700;
  --f1-white: #FFFFFF;
  
  /* Accent Colors */
  --accent-green: #00C851;
  --accent-orange: #FF8800;
  --accent-blue: #33B5E5;
  --accent-purple: #AA66CC;
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--f1-black) 0%, var(--f1-dark) 50%, var(--f1-gray) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-red: linear-gradient(135deg, var(--f1-red) 0%, var(--f1-red-dark) 100%);
  
  /* Typography */
  --font-racing: 'Racing Sans One', cursive;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  background: var(--f1-black);
  color: var(--f1-white);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background Pattern - Racing Grid */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(225, 6, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225, 6, 0, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: -1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-racing);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

a {
  color: var(--f1-red-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--f1-gold);
}

/* ============================================
   LAYOUT - CSS GRID
   ============================================ */
.f1-container {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  grid-template-areas: "sidebar-left main sidebar-right";
  gap: var(--space-lg);
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-lg);
  min-height: 100vh;
}

.f1-sidebar-left { grid-area: sidebar-left; }
.f1-main { grid-area: main; }
.f1-sidebar-right { grid-area: sidebar-right; }

/* Responsive Layout */
@media (max-width: 1200px) {
  .f1-container {
    grid-template-columns: 260px 1fr;
    grid-template-areas: 
      "sidebar-left main"
      "sidebar-right main";
  }
  .f1-sidebar-right {
    position: fixed;
    right: -320px;
    top: 0;
    height: 100vh;
    width: 300px;
    background: var(--f1-dark);
    z-index: 1000;
    padding: var(--space-lg);
    transition: right var(--transition-normal);
    overflow-y: auto;
  }
  .f1-sidebar-right.active {
    right: 0;
  }
}

@media (max-width: 768px) {
  .f1-container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "main"
      "sidebar-left";
    padding: var(--space-md);
  }
  .f1-sidebar-left {
    order: 2;
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.f1-header {
  background: var(--gradient-hero);
  border-bottom: 3px solid var(--f1-red);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.f1-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

.f1-logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--f1-white);
}

.f1-logo img {
  height: 40px;
  width: auto;
}

.f1-logo span {
  background: var(--gradient-red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.f1-nav-links {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
}

.f1-nav-links a {
  color: var(--f1-silver);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  position: relative;
  padding: var(--space-sm) 0;
}

.f1-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--f1-red);
  transition: width var(--transition-normal);
}

.f1-nav-links a:hover::after {
  width: 100%;
}

.f1-nav-links a:hover {
  color: var(--f1-white);
}

/* Mobile Menu Toggle */
.f1-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.f1-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--f1-white);
  transition: var(--transition-fast);
}

@media (max-width: 768px) {
  .f1-menu-toggle {
    display: flex;
  }
  .f1-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--f1-dark);
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-md);
  }
  .f1-nav-links.active {
    display: flex;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
.f1-hero {
  position: relative;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.f1-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.f1-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xxl);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.f1-hero-title {
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: var(--space-md);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.f1-hero-subtitle {
  font-size: 1.125rem;
  color: var(--f1-silver);
  max-width: 600px;
}

/* ============================================
   CARDS - Glassmorphism
   ============================================ */
.f1-card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.f1-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.f1-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}

.f1-card-title {
  font-size: 1.125rem;
  color: var(--f1-white);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.f1-card-title i {
  color: var(--f1-red);
  font-size: 1.25rem;
}

/* ============================================
   COUNTDOWN TIMER
   ============================================ */
.f1-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: center;
}

.f1-countdown-item {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
}

.f1-countdown-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-red);
  animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.f1-countdown-number {
  font-family: var(--font-racing);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--f1-red-light);
  line-height: 1;
  display: block;
}

.f1-countdown-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--f1-silver);
  letter-spacing: 0.1em;
  margin-top: var(--space-xs);
}

/* ============================================
   SERVER STATUS
   ============================================ */
.f1-server-list {
  list-style: none;
}

.f1-server-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--transition-fast);
}

.f1-server-item:last-child {
  border-bottom: none;
}

.f1-server-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.f1-server-info {
  display: flex;
  flex-direction: column;
}

.f1-server-name {
  font-weight: 600;
  color: var(--f1-white);
  transition: color var(--transition-fast);
}

.f1-server-name:hover {
  color: var(--f1-gold);
  text-decoration: underline;
  cursor: pointer;
}

.f1-server-status {
  font-size: 0.75rem;
  color: var(--f1-silver);
}


/* Progress Bar for Server Status - With Counter Inside */
.f1-progress-wrapper {
  width: 100%;
  position: relative;
  margin-top: var(--space-xs);
}

.f1-progress-bar {
  width: 100%;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.f1-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(225, 6, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: 45px;
}

.f1-progress-text {
  font-family: var(--font-racing);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--f1-white);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}



.f1-server-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.f1-badge-online {
  background: rgba(0, 200, 81, 0.2);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.f1-badge-warning {
  background: rgba(255, 136, 0, 0.2);
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
}

.f1-badge-offline {
  background: rgba(225, 6, 0, 0.2);
  color: var(--f1-red-light);
  border: 1px solid var(--f1-red-light);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.f1-badge-online .status-dot {
  background: var(--accent-green);
}

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

/* ============================================
   CHARTS
   ============================================ */
.f1-chart-container {
  position: relative;
  height: 250px;
  margin: var(--space-md) 0;
}

/* ============================================
   RANKING
   ============================================ */
.f1-ranking-list {
  list-style: none;
}

.f1-ranking-item {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  transition: all var(--transition-fast);
}

.f1-ranking-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.f1-ranking-position {
  font-family: var(--font-racing);
  font-size: 1.25rem;
  color: var(--f1-silver);
  text-align: center;
}

.f1-ranking-position.top-3 {
  color: var(--f1-gold);
  font-size: 1.5rem;
}

.f1-ranking-info {
  display: flex;
  flex-direction: column;
}

.f1-ranking-name {
  font-weight: 600;
  color: var(--f1-white);
}

.f1-ranking-team {
  font-size: 0.75rem;
  color: var(--f1-silver);
}

.f1-ranking-points {
  font-family: var(--font-racing);
  font-size: 1.125rem;
  color: var(--f1-red-light);
  text-align: right;
}

/* ============================================
   LOGIN FORM
   ============================================ */
.f1-form-group {
  margin-bottom: var(--space-md);
  position: relative;
}

.f1-form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--f1-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.f1-form-input {
  width: 100%;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--f1-white);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.f1-form-input:focus {
  outline: none;
  border-color: var(--f1-red);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.2);
}

.f1-form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.f1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}

.f1-btn-primary {
  background: var(--gradient-red);
  color: var(--f1-white);
  box-shadow: 0 4px 15px rgba(225, 6, 0, 0.4);
}

.f1-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 6, 0, 0.6);
}

.f1-btn-secondary {
  background: transparent;
  color: var(--f1-silver);
  border: 1px solid var(--glass-border);
}

.f1-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--f1-white);
}

.f1-form-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-md);
  font-size: 0.875rem;
}

/* ============================================
   RACE INFO
   ============================================ */
.f1-race-card {
  position: relative;
  overflow: hidden;
}

.f1-race-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.f1-race-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
}

.f1-race-details h4 {
  color: var(--f1-white);
  margin-bottom: var(--space-xs);
}

.f1-race-record {
  font-size: 0.875rem;
  color: var(--f1-silver);
}

.f1-weather {
  text-align: center;
}

.f1-weather img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}

.f1-weather-text {
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
}

/* ============================================
   MANAGER SPOTLIGHT
   ============================================ */
.f1-spotlight {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  align-items: center;
}

.f1-spotlight-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--f1-red);
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.4);
}

.f1-spotlight-info h4 {
  color: var(--f1-gold);
  margin-bottom: var(--space-xs);
}

.f1-spotlight-info p {
  font-size: 0.875rem;
  color: var(--f1-silver);
  margin-bottom: var(--space-xs);
}

.f1-spotlight-badge {
  display: inline-block;
  background: var(--gradient-red);
  color: var(--f1-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

/* ============================================
   PRACTICE LEADERBOARD
   ============================================ */
.f1-leaderboard {
  width: 100%;
  border-collapse: collapse;
}

.f1-leaderboard th,
.f1-leaderboard td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.f1-leaderboard th {
  font-family: var(--font-racing);
  font-size: 0.875rem;
  color: var(--f1-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 400;
}

.f1-leaderboard td {
  font-size: 0.9375rem;
}

.f1-leaderboard tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

.f1-position {
  font-family: var(--font-racing);
  font-weight: 600;
  width: 40px;
}

.f1-position-1 { color: var(--f1-gold); }
.f1-position-2 { color: var(--f1-silver); }
.f1-position-3 { color: #CD7F32; }

.f1-driver-name {
  font-weight: 600;
  color: var(--f1-white);
}

.f1-time {
  font-family: 'Courier New', monospace;
  color: var(--f1-red-light);
  font-weight: 600;
}

.f1-gap {
  color: var(--f1-silver);
  font-size: 0.875rem;
}

/* ============================================
   FAVORITES
   ============================================ */
.f1-favorites-list {
  list-style: none;
}

.f1-favorite-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}

.f1-favorite-rank {
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--f1-silver);
  width: 30px;
  text-align: center;
}

.f1-favorite-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.f1-favorite-info {
  flex: 1;
}

.f1-favorite-name {
  font-weight: 600;
  color: var(--f1-white);
}

.f1-favorite-votes {
  font-size: 0.75rem;
  color: var(--f1-silver);
}

/* ============================================
   FOOTER
   ============================================ */
.f1-footer {
  background: var(--f1-dark);
  border-top: 1px solid var(--glass-border);
  padding: var(--space-xxl) var(--space-lg);
  margin-top: var(--space-xxl);
  text-align: center;
}

.f1-footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.f1-footer-logo {
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--f1-white);
  margin-bottom: var(--space-md);
}

.f1-footer-text {
  color: var(--f1-silver);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}

.f1-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  list-style: none;
  margin-bottom: var(--space-lg);
}

.f1-footer-links a {
  color: var(--f1-silver);
  font-size: 0.875rem;
}

.f1-footer-links a:hover {
  color: var(--f1-red-light);
}

.f1-copyright {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.f1-animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.f1-delay-1 { animation-delay: 0.1s; }
.f1-delay-2 { animation-delay: 0.2s; }
.f1-delay-3 { animation-delay: 0.3s; }

/* Scroll Reveal */
.f1-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.f1-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

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

::-webkit-scrollbar-track {
  background: var(--f1-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--f1-gray);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--f1-red);
}

/* ============================================
   PROFILE PAGE SPECIFIC STYLES
   ============================================ */
.f1-profile-container {
  padding-top: var(--space-xl);
}

.f1-profile-header {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
}

.f1-profile-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.f1-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--f1-red);
  box-shadow: 0 0 30px rgba(225, 6, 0, 0.4);
  flex-shrink: 0;
}

.f1-profile-info {
  flex: 1;
  min-width: 200px;
}

.f1-profile-name {
  font-family: var(--font-racing);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--f1-white);
  margin-bottom: var(--space-sm);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  line-height: 1.2;
}

.f1-profile-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--f1-silver);
  font-size: 0.875rem;
}

.f1-profile-details span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.f1-profile-details img {
  height: 16px;
  width: auto;
}

/* Profile Stats Grid */
.f1-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.f1-stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: transform var(--transition-fast);
}

.f1-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--f1-red);
}

.f1-stat-value {
  font-family: var(--font-racing);
  font-size: 2rem;
  color: var(--f1-red-light);
  display: block;
}

.f1-stat-label {
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Profile Content Layout */
.f1-profile-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (max-width: 768px) {
  .f1-profile-content {
    grid-template-columns: 1fr;
  }
  
  .f1-profile-avatar-section {
    flex-direction: column;
    text-align: center;
  }
  
  .f1-profile-details {
    justify-content: center;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
.f1-text-center { text-align: center; }

.f1-text-right { text-align: right; }
.f1-text-gold { color: var(--f1-gold); }
.f1-text-red { color: var(--f1-red-light); }
.f1-text-muted { color: var(--f1-silver); }

.f1-mb-0 { margin-bottom: 0; }
.f1-mb-sm { margin-bottom: var(--space-sm); }
.f1-mb-md { margin-bottom: var(--space-md); }
.f1-mb-lg { margin-bottom: var(--space-lg); }

.f1-hidden { display: none; }
.f1-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Loading State */
.f1-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--f1-red);
  animation: spin 1s ease-in-out infinite;
}

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

/* Responsive Typography */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .f1-countdown {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .f1-spotlight {
    grid-template-columns: 80px 1fr;
  }
  
  .f1-spotlight-avatar {
    width: 80px;
    height: 80px;
  }
}

/* ============================================
   CENTRAL DE COMPRAS - COMPRAR MODERNO
   ============================================ */
.f1-comprar-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Header */
.f1-comprar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--f1-red);
}

.f1-comprar-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.f1-comprar-title > i {
  font-size: 2.5rem;
  color: var(--f1-red);
}

.f1-comprar-title h1 {
  font-family: var(--font-racing);
  color: var(--f1-gold);
  margin: 0;
  font-size: 1.75rem;
}

.f1-comprar-title p {
  color: var(--f1-silver);
  margin: 0;
  font-size: 0.9rem;
}

.f1-comprar-caixa {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(0, 200, 81, 0.1);
  border: 1px solid rgba(0, 200, 81, 0.3);
  border-radius: var(--radius-lg);
}

.f1-comprar-caixa > i {
  font-size: 1.75rem;
  color: var(--accent-green);
}

.f1-caixa-label {
  display: block;
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.f1-caixa-valor {
  display: block;
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--accent-green);
}

/* Layout */
.f1-comprar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 992px) {
  .f1-comprar-layout {
    grid-template-columns: 1fr;
  }
  
  .f1-comprar-header {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

/* Sidebar */
.f1-comprar-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 280px;
}

.f1-menu-categoria {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.f1-categoria-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: rgba(225, 6, 0, 0.1);
  border-bottom: 1px solid var(--glass-border);
  color: var(--f1-red);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.f1-categoria-header i {
  font-size: 1rem;
  color: var(--f1-red);
}

.f1-menu-lista {
  list-style: none;
  margin: 0;
  padding: var(--space-sm);
}

.f1-menu-lista li {
  margin: var(--space-xs) 0;
  list-style: none;
}

.f1-menu-lista li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--f1-silver);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-size: 0.9rem;
}

.f1-menu-lista li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--f1-white);
}

.f1-menu-lista li.ativo a,
.f1-menu-lista li.active a {
  background: rgba(225, 6, 0, 0.15);
  color: var(--f1-red);
  font-weight: 600;
  border: 1px solid rgba(225, 6, 0, 0.3);
}

.f1-menu-lista li a i:first-child {
  width: 20px;
  text-align: center;
  color: var(--f1-red);
  font-size: 1rem;
}

.f1-menu-lista li a .indicador {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--f1-red);
}

/* Dica */
.f1-comprar-dica {
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius-lg);
}

.f1-comprar-dica i {
  font-size: 1.5rem;
  color: var(--f1-gold);
  margin-bottom: var(--space-sm);
}

.f1-comprar-dica p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--f1-silver);
  line-height: 1.6;
}

/* Conteúdo */
.f1-comprar-conteudo {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  min-height: 600px;
}

/* Breadcrumb */
.f1-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.9rem;
}

.f1-breadcrumb a {
  color: var(--f1-red);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.f1-breadcrumb a:hover {
  text-decoration: underline;
}

.f1-breadcrumb > i {
  color: var(--f1-gray);
  font-size: 0.75rem;
}

.f1-breadcrumb span {
  color: var(--f1-white);
  font-weight: 500;
}

/* Containers de conteúdo */
.f1-comprar-assistente,
.f1-comprar-peca,
.f1-comprar-contrato {
  animation: fadeIn 0.3s ease;
}

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

/* Responsivo */
@media (max-width: 768px) {
  .f1-comprar-container {
    padding: var(--space-md);
  }
  
  .f1-comprar-title {
    flex-direction: column;
    text-align: center;
  }
  
  .f1-comprar-title h1 {
    font-size: 1.5rem;
  }
  
  .f1-comprar-caixa {
    width: 100%;
    justify-content: center;
  }
  
  .f1-categoria-header {
    padding: var(--space-sm) var(--space-md);
  }
  
  .f1-menu-lista li a {
    padding: var(--space-sm);
  }
  
  .f1-comprar-conteudo {
    padding: var(--space-md);
    min-height: auto;
  }
}

/* ============================================
   MOTOR MODERNO - PÁGINA DE MOTORES
   ============================================ */
.f1-motor-container {
  padding: 0;
}

/* Header do Fabricante */
.f1-motor-fabricante {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(145deg, rgba(225, 6, 0, 0.1) 0%, rgba(225, 6, 0, 0.05) 100%);
  border: 1px solid rgba(225, 6, 0, 0.2);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-xl);
}

.f1-fab-logo {
  width: 80px;
  height: 80px;
  background: var(--gradient-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--f1-white);
  box-shadow: 0 4px 20px rgba(225, 6, 0, 0.4);
}

.f1-fab-info {
  flex: 1;
}

.f1-fab-info h2 {
  font-family: var(--font-racing);
  color: var(--f1-gold);
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.75rem;
}

.f1-fab-info p {
  color: var(--f1-silver);
  margin: 0;
  font-size: 0.9rem;
}

.f1-fab-status {
  margin-left: auto;
}

.f1-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
}

.f1-status-ativo {
  background: rgba(0, 200, 81, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(0, 200, 81, 0.3);
}

/* Título de Seção */
.f1-section-title {
  font-family: var(--font-racing);
  color: var(--f1-white);
  font-size: 1.25rem;
  margin: 0 0 var(--space-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.f1-section-title i {
  color: var(--f1-red);
}

/* Grid de Motores */
.f1-motor-grid {
  margin-bottom: var(--space-xxl);
}

.f1-motor-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.f1-motor-card {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.f1-motor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-color: rgba(225, 6, 0, 0.3);
}

.f1-motor-imagem {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.f1-motor-imagem img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.f1-motor-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--gradient-red);
  color: var(--f1-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.f1-motor-detalhes {
  padding: var(--space-md);
}

.f1-motor-detalhes h4 {
  color: var(--f1-white);
  margin: 0 0 var(--space-md) 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.f1-motor-specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.f1-spec {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--f1-silver);
  font-size: 0.875rem;
}

.f1-spec i {
  color: var(--f1-red);
  width: 16px;
}

.f1-spec strong {
  color: var(--f1-white);
  font-weight: 600;
}

.f1-motor-bolsa {
  margin-bottom: var(--space-md);
}

.f1-variacao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.f1-variacao-alta {
  background: rgba(0, 200, 81, 0.15);
  color: var(--accent-green);
}

.f1-variacao-baixa {
  background: rgba(225, 6, 0, 0.15);
  color: var(--f1-red);
}

.f1-variacao-estavel {
  background: rgba(255, 193, 7, 0.15);
  color: #FFC107;
}

.f1-variacao-valor {
  font-size: 0.75rem;
  color: var(--f1-silver);
  margin-left: var(--space-xs);
}


.f1-motor-preco {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.f1-preco-label {
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
}

.f1-preco-valor {
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--accent-green);
}

.f1-motor-compra {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.f1-compra-qtd {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.f1-compra-qtd label {
  color: var(--f1-silver);
  font-size: 0.875rem;
}

.f1-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--f1-white);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  cursor: pointer;
}

.f1-select:focus {
  outline: none;
  border-color: var(--f1-red);
}

.f1-disponivel {
  color: var(--f1-silver);
  font-size: 0.75rem;
}

.f1-btn-comprar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm);
  background: var(--gradient-red);
  color: var(--f1-white);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.f1-btn-comprar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(225, 6, 0, 0.4);
}

.f1-motor-esgotado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--f1-silver);
  font-weight: 600;
}

.f1-motor-esgotado.f1-preco-invalido {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.3);
  color: #FFC107;
}


/* Estoque */
.f1-motor-estoque {
  margin-top: var(--space-xxl);
}

.f1-estoque-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.f1-estoque-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.f1-estoque-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(225, 6, 0, 0.3);
}

.f1-estoque-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.f1-estoque-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: rgba(0,0,0,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
}

.f1-estoque-nome h4 {
  color: var(--f1-white);
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.f1-estoque-nome span {
  color: var(--f1-silver);
  font-size: 0.75rem;
}

.f1-estoque-qtd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 200, 81, 0.1);
  border: 1px solid rgba(0, 200, 81, 0.2);
  border-radius: var(--radius-md);
}

.f1-qtd-numero {
  font-family: var(--font-racing);
  font-size: 1.5rem;
  color: var(--accent-green);
  line-height: 1;
}

.f1-qtd-label {
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
}

.f1-estoque-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-xxl);
  color: var(--f1-silver);
}

.f1-estoque-vazio i {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  color: var(--f1-gray);
}

.f1-estoque-vazio p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.125rem;
  color: var(--f1-white);
}

.f1-estoque-vazio span {
  font-size: 0.875rem;
}

/* Alertas */
.f1-alert {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.f1-alert-success {
  background: rgba(0, 200, 81, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(0, 200, 81, 0.3);
}

.f1-alert-warning {
  background: rgba(255, 193, 7, 0.15);
  color: #FFC107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.f1-alert-danger {
  background: rgba(225, 6, 0, 0.15);
  color: var(--f1-red);
  border: 1px solid rgba(225, 6, 0, 0.3);
}

/* ============================================
   DICAS DE PNEU - SEÇÃO ESPECÍFICA
   ============================================ */
.f1-dicas-pneu {
  margin-top: var(--space-xxl);
}

.f1-dicas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.f1-dica-card {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.f1-dica-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.f1-dica-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  font-weight: 600;
  color: var(--f1-white);
  font-size: 1rem;
}

.f1-dica-header i {
  font-size: 1.25rem;
  color: var(--f1-red);
}

.f1-dica-card p {
  color: var(--f1-silver);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.f1-dica-card p:last-of-type {
  margin-bottom: 0;
}

.f1-dica-warning {
  border-left: 4px solid var(--accent-orange);
}

.f1-dica-warning .f1-dica-header i {
  color: var(--accent-orange);
}

.f1-dica-info {
  border-left: 4px solid var(--accent-blue);
}

.f1-dica-info .f1-dica-header i {
  color: var(--accent-blue);
}

.f1-btn-dica {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: rgba(225, 6, 0, 0.15);
  color: var(--f1-red);
  border: 1px solid rgba(225, 6, 0, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-top: var(--space-sm);
}

.f1-btn-dica:hover {
  background: var(--gradient-red);
  color: var(--f1-white);
  transform: translateY(-2px);
}

/* ============================================
   DEVOLUÇÃO DE PEÇAS - ESTILOS ESPECÍFICOS
   ============================================ */
.f1-devolucao-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(145deg, rgba(255, 136, 0, 0.1) 0%, rgba(255, 136, 0, 0.05) 100%);
  border: 1px solid rgba(255, 136, 0, 0.2);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-xl);
}

.f1-devolucao-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #FF8800 0%, #CC6E00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--f1-white);
  box-shadow: 0 4px 20px rgba(255, 136, 0, 0.4);
}

.f1-devolucao-info {
  flex: 1;
}

.f1-devolucao-info h2 {
  font-family: var(--font-racing);
  color: var(--f1-gold);
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.75rem;
}

.f1-devolucao-info p {
  color: var(--f1-silver);
  margin: 0;
  font-size: 0.9rem;
}

.f1-devolucao-regras {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-left: auto;
}

.f1-regra-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--f1-silver);
}

.f1-regra-item i {
  color: var(--accent-orange);
  font-size: 0.875rem;
}

/* Seção de Devolução */
.f1-devolucao-secao {
  margin-bottom: var(--space-xxl);
}

.f1-devolucao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

/* Card de Devolução */
.f1-devolucao-card {
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.f1-devolucao-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 136, 0, 0.3);
}

.f1-devolucao-imagem {
  position: relative;
  height: 140px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.f1-devolucao-imagem img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.f1-devolucao-detalhes {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.f1-devolucao-detalhes h4 {
  color: var(--f1-white);
  margin: 0 0 var(--space-sm) 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.f1-devolucao-estoque {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: 0.875rem;
}

.f1-estoque-label {
  color: var(--f1-silver);
}

.f1-estoque-valor {
  color: var(--accent-green);
  font-weight: 600;
}

.f1-devolucao-valor {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: rgba(0, 200, 81, 0.1);
  border: 1px solid rgba(0, 200, 81, 0.2);
  border-radius: var(--radius-md);
}

.f1-valor-label {
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
}

.f1-valor-receber {
  font-family: var(--font-racing);
  font-size: 1.25rem;
  color: var(--accent-green);
}

.f1-devolucao-form {
  margin-top: auto;
}

.f1-devolucao-qtd {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.f1-devolucao-qtd label {
  color: var(--f1-silver);
  font-size: 0.875rem;
}

.f1-btn-devolver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm);
  background: linear-gradient(135deg, #FF8800 0%, #CC6E00 100%);
  color: var(--f1-white);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.f1-btn-devolver:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 136, 0, 0.4);
}

/* Estado Vazio */
.f1-devolucao-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-xxl);
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  color: var(--f1-silver);
}

.f1-devolucao-vazio i {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  color: var(--f1-gray);
}

.f1-devolucao-vazio p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--f1-white);
}

/* Responsivo Devolução */
@media (max-width: 768px) {
  .f1-devolucao-header {
    flex-direction: column;
    text-align: center;
  }
  
  .f1-devolucao-regras {
    margin-left: 0;
    margin-top: var(--space-md);
  }
  
  .f1-devolucao-grid {
    grid-template-columns: 1fr;
  }
  
  .f1-devolucao-imagem {
    height: 120px;
  }
}

/* Responsivo Motor */
@media (max-width: 768px) {
  .f1-motor-fabricante {
    flex-direction: column;
    text-align: center;
  }
  
  .f1-fab-status {
    margin-left: 0;
  }
  
  .f1-motor-cards {
    grid-template-columns: 1fr;
  }
  
  .f1-motor-imagem {
    height: 150px;
  }
  
  .f1-estoque-grid {
    grid-template-columns: 1fr;
  }
  
  .f1-dicas-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   RESULTADOS - PÁGINA DE RESULTADOS MODERNA
   ============================================ */

/* Page Header */
.f1-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--gradient-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--f1-red);
}

.f1-header-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--f1-white);
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(225, 6, 0, 0.3);
}

.f1-header-content {
  flex: 1;
}

.f1-header-title {
  font-family: var(--font-racing);
  font-size: 2rem;
  color: var(--f1-gold);
  margin: 0 0 var(--space-xs) 0;
}

.f1-header-subtitle {
  color: var(--f1-silver);
  margin: 0;
  font-size: 1rem;
}

/* Sub Navigation */
.f1-subnav {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.f1-subnav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--f1-silver);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.f1-subnav-item i {
  font-size: 1rem;
}

.f1-subnav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--f1-white);
}

.f1-subnav-item.active {
  background: var(--gradient-red);
  color: var(--f1-white);
  box-shadow: 0 4px 15px rgba(225, 6, 0, 0.3);
}

/* Card Headers Variants */
.f1-card-header-red {
  background: rgba(225, 6, 0, 0.1);
  border-bottom: 1px solid rgba(225, 6, 0, 0.2);
}

.f1-card-header-red i {
  color: var(--f1-red);
}

.f1-card-header-blue {
  background: rgba(51, 181, 229, 0.1);
  border-bottom: 1px solid rgba(51, 181, 229, 0.2);
}

.f1-card-header-blue i {
  color: var(--accent-blue);
}

.f1-card-header-gold {
  background: rgba(255, 215, 0, 0.1);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.f1-card-header-gold i {
  color: var(--f1-gold);
}

.f1-card-badge {
  margin-left: auto;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--f1-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tables */
.f1-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.f1-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.f1-table th {
  font-family: var(--font-racing);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--f1-silver);
  padding: var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--glass-border);
}

.f1-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}

.f1-table-striped tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.f1-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Position Badges */
.f1-position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-racing);
  font-weight: 600;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--f1-white);
}

.f1-pos-1 {
  background: var(--f1-gold);
  color: var(--f1-black);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.f1-pos-2 {
  background: var(--f1-silver);
  color: var(--f1-black);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

.f1-pos-3 {
  background: #CD7F32;
  color: var(--f1-white);
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.4);
}

/* Links */
.f1-link {
  color: var(--f1-red-light);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.f1-link:hover {
  color: var(--f1-gold);
  text-decoration: underline;
}

/* Time and Points */
.f1-time {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--f1-red-light);
}

.f1-derp {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--f1-silver);
}

.f1-points {
  font-family: var(--font-racing);
  font-size: 1.125rem;
  color: var(--f1-gold);
  font-weight: 600;
}

/* Status Icons */
.f1-status-ready {
  color: var(--accent-green);
  font-size: 1.25rem;
}

.f1-status-not-ready {
  color: var(--f1-red);
  font-size: 1.25rem;
}

/* Flag Images */
.f1-flag {
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Resultado Content */
.f1-resultado-content {
  margin-top: var(--space-lg);
}

/* Responsive Resultados */
@media (max-width: 768px) {
  .f1-page-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  
  .f1-header-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .f1-header-title {
    font-size: 1.5rem;
  }
  
  .f1-subnav {
    flex-wrap: wrap;
  }
  
  .f1-subnav-item {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
  
  .f1-table th,
  .f1-table td {
    padding: var(--space-sm);
    font-size: 0.875rem;
  }
  
  .f1-position-badge {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .f1-subnav-item span {
    display: none;
  }
  
  .f1-subnav-item {
    padding: var(--space-sm);
  }
  
  .f1-subnav-item i {
    font-size: 1.25rem;
  }
  
  .f1-table th:nth-child(3),
  .f1-table td:nth-child(3),
  .f1-table th:nth-child(6),
  .f1-table td:nth-child(6) {
    display: none;
  }
}