/**
 * EEP Design System - Baseado no PLANO_DESIGN_FRONTEND.md
 * 
 * Sistema de design moderno inspirado no Anota AI e Material Design 3.0
 * Implementa as especificações exatas do plano aprovado
 * 
 * @version 2.0.0
 * @priority CRITICAL
 */

/* ==========================================================================
   DESIGN SYSTEM - FUNDAÇÃO (Conforme PLANO_DESIGN_FRONTEND.md)
   IMPORTANTE: Todos os seletores devem ser escopados para evitar vazamento
   ========================================================================== */

:root {
  /* Cores Primárias - Exatamente como especificado no plano */
  --eep-primary: #1095F3;
  --eep-primary-dark: #0066CC;
  --eep-primary-light: #E3F2FD;
  
  /* Cores Secundárias */
  --eep-success: #10B981;
  --eep-warning: #F59E0B;
  --eep-danger: #EF4444;
  --eep-info: #6B7280;
  
  /* Cores Neutras */
  --eep-white: #FFFFFF;
  --eep-gray-50: #F9FAFB;
  --eep-gray-100: #F3F4F6;
  --eep-gray-200: #E5E7EB;
  --eep-gray-300: #D1D5DB;
  --eep-gray-600: #4B5563;
  --eep-gray-900: #111827;
  
  /* Tipografia - Sistema Apple/Material */
  --eep-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --eep-font-size-xs: 0.75rem;
  --eep-font-size-sm: 0.875rem;
  --eep-font-size-base: 1rem;
  --eep-font-size-lg: 1.125rem;
  --eep-font-size-xl: 1.25rem;
  
  /* Espaçamento - Grid 4px base */
  --eep-spacing-1: 0.25rem;
  --eep-spacing-2: 0.5rem;
  --eep-spacing-3: 0.75rem;
  --eep-spacing-4: 1rem;
  --eep-spacing-6: 1.5rem;
  --eep-spacing-8: 2rem;
  
  /* Propriedades de Acessibilidade */
  --eep-focus-color: #1095F3;
  --eep-focus-outline: 2px solid var(--eep-focus-color);
  --eep-focus-offset: 2px;
  
  /* Bordas e Raio */
  --eep-border-radius: 0.5rem;
  --eep-border-radius-lg: 0.75rem;
  --eep-border-radius-full: 9999px;
  
  /* Sombras - Material Design */
  --eep-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --eep-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --eep-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Transições - Suaves e consistentes */
  --eep-transition: all 0.2s ease-in-out;
  --eep-transition-slow: all 0.3s ease-in-out;
}

/* ==========================================================================
   LAYOUT MODERNO PARA RADIO OPTIONS (Seguindo Plano Exato)
   ========================================================================== */

.eep-radio-card {
  position: relative;
  transition: var(--eep-transition);
}

.eep-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eep-radio-label {
  display: flex;
  align-items: center;
  padding: var(--eep-spacing-4);
  background: var(--eep-white);
  border: 2px solid var(--eep-gray-200);
  border-radius: var(--eep-border-radius-lg);
  cursor: pointer;
  transition: var(--eep-transition);
  box-shadow: var(--eep-shadow-sm);
}

.eep-radio-label:hover {
  border-color: var(--eep-primary);
  box-shadow: var(--eep-shadow-md);
  transform: translateY(-1px);
}

.eep-radio-input:checked + .eep-radio-label {
  border-color: var(--eep-primary);
  background: var(--eep-primary-light);
  box-shadow: 0 0 0 3px rgba(16, 149, 243, 0.1);
}

.eep-option-image {
  width: 60px;
  height: 60px;
  border-radius: var(--eep-border-radius);
  overflow: hidden;
  margin-right: var(--eep-spacing-4);
  background: var(--eep-gray-100);
  flex-shrink: 0;
}

.eep-option-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eep-option-content {
  flex: 1;
}

.eep-option-name {
  font-size: var(--eep-font-size-lg);
  font-weight: 600;
  color: var(--eep-gray-900);
  margin: 0 0 var(--eep-spacing-1) 0;
  font-family: var(--eep-font-family);
}

.eep-option-description {
  font-size: var(--eep-font-size-sm);
  color: var(--eep-gray-600);
  margin: 0 0 var(--eep-spacing-2) 0;
  line-height: 1.4;
  font-family: var(--eep-font-family);
}

.eep-option-price {
  font-size: var(--eep-font-size-sm);
  font-weight: 600;
  color: var(--eep-primary);
  font-family: var(--eep-font-family);
}

.eep-selection-indicator {
  width: 24px;
  height: 24px;
  border-radius: var(--eep-border-radius-full);
  background: var(--eep-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--eep-transition);
  margin-left: var(--eep-spacing-4);
  flex-shrink: 0;
}

.eep-radio-input:checked + .eep-radio-label .eep-selection-indicator {
  background: var(--eep-primary);
  color: white;
}

.eep-check-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: var(--eep-transition);
}

.eep-radio-input:checked + .eep-radio-label .eep-check-icon {
  opacity: 1;
}

/* ==========================================================================
   LAYOUT MODERNO PARA CHECKBOX/MULTISELECT OPTIONS (Contador Interativo)
   ========================================================================== */

.eep-checkbox-counter {
  position: relative;
}

.eep-checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eep-checkbox-label {
  display: flex;
  align-items: center;
  padding: var(--eep-spacing-4);
  background: var(--eep-white);
  border: 2px solid var(--eep-gray-200);
  border-radius: var(--eep-border-radius-lg);
  cursor: pointer;
  transition: var(--eep-transition);
  box-shadow: var(--eep-shadow-sm);
}

.eep-checkbox-label:hover {
  border-color: var(--eep-primary);
  box-shadow: var(--eep-shadow-md);
  transform: translateY(-1px);
}

.eep-checkbox-input:checked + .eep-checkbox-label {
  border-color: var(--eep-primary);
  background: var(--eep-primary-light);
}

.eep-counter-container {
  display: flex;
  align-items: center;
  gap: var(--eep-spacing-2);
  background: var(--eep-gray-100);
  border-radius: var(--eep-border-radius-full);
  padding: var(--eep-spacing-1);
  min-width: 100px;
  margin-left: auto;
}

.eep-counter-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--eep-white);
  border-radius: var(--eep-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--eep-transition);
  box-shadow: var(--eep-shadow-sm);
}

.eep-counter-btn svg {
  width: 16px;
  height: 16px;
  color: var(--eep-gray-600);
}

.eep-counter-btn:hover:not(:disabled) {
  background: var(--eep-primary);
  box-shadow: var(--eep-shadow-md);
}

.eep-counter-btn:hover:not(:disabled) svg {
  color: white;
}

.eep-counter-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.eep-counter-value {
  font-weight: 600;
  color: var(--eep-gray-900);
  min-width: 20px;
  text-align: center;
  font-family: var(--eep-font-family);
}

/* ==========================================================================
   LAYOUT GRID RESPONSIVO (Especificação Exata do Plano)
   ========================================================================== */

.eep-options-grid {
  display: grid;
  gap: var(--eep-spacing-4);
  font-family: var(--eep-font-family);
}

/* Radio Options - Stack vertical em telas menores */
.eep-layout-radio .eep-options-grid {
  grid-template-columns: 1fr;
}

/* Checkbox Grid Moderno - Espaçamento 1px conforme solicitado */
.eep-checkbox-modern-grid {
  display: grid;
  gap: 1px; /* 1px conforme solicitado pelo usuário */
  font-family: var(--eep-font-family);
  grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); /* Cards menores */
}

/* Checkbox Options - Responsivo baseado no tamanho */
.eep-layout-checkbox .eep-options-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* RESPONSIVIDADE OTIMIZADA */
@media (max-width: 480px) {
  /* Mobile - uma coluna apenas */
  .eep-checkbox-modern-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  
  .eep-layout-radio .eep-options-grid {
    gap: 1px;
  }
  
  /* Counter mais compacto em mobile */
  .eep-counter-container {
    min-width: 80px;
    padding: var(--eep-spacing-1);
  }
  
  .eep-counter-btn {
    width: 28px;
    height: 28px;
  }
  
  /* Imagens menores em mobile */
  .eep-option-image {
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Tablet - 2 colunas */
  .eep-checkbox-modern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .eep-layout-radio .eep-options-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Desktop pequeno - 3 colunas */
  .eep-checkbox-modern-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .eep-layout-radio .eep-options-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (min-width: 1025px) {
  /* Desktop grande - 4+ colunas baseado no conteúdo */
  .eep-checkbox-modern-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .eep-layout-radio .eep-options-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    max-width: 1200px; /* Limitar largura em telas muito grandes */
  }
}

/* ==========================================================================
   ANIMAÇÕES E MICRO-INTERAÇÕES (Conforme Plano)
   ========================================================================== */

@keyframes eep-bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43% { transform: translate3d(0,-8px,0); }
  70% { transform: translate3d(0,-4px,0); }
  90% { transform: translate3d(0,-2px,0); }
}

@keyframes eep-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 149, 243, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(16, 149, 243, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 149, 243, 0); }
}

.eep-counter-btn:active {
  animation: eep-bounce 0.6s;
}

.eep-radio-input:checked + .eep-radio-label {
  animation: eep-pulse 0.6s;
}

/* ==========================================================================
   CORREÇÕES DE INTEGRAÇÃO COM CÓDIGO ATUAL
   ========================================================================== */

/* Aplicando sistema de design aos componentes existentes */
.eep-group-modern,
.eep-modern-container {
  font-family: var(--eep-font-family);
}

.eep-group-title-modern {
  font-family: var(--eep-font-family);
  color: var(--eep-gray-900);
  font-size: var(--eep-font-size-xl);
  font-weight: 600;
}

.eep-group-description-modern {
  font-family: var(--eep-font-family);
  color: var(--eep-gray-600);
  font-size: var(--eep-font-size-sm);
}

/* Melhorando botões existentes com design system */
.eep-product-extras .eep-counter-btn-modern {
  background: var(--eep-white);
  border: none;
  border-radius: var(--eep-border-radius-full);
  box-shadow: var(--eep-shadow-sm);
  transition: var(--eep-transition);
  font-family: var(--eep-font-family);
}

.eep-product-extras .eep-counter-btn-modern:hover {
  background: var(--eep-primary);
  color: white;
  box-shadow: var(--eep-shadow-md);
}

/* Melhorando preços */
.eep-product-extras .eep-price-modern {
  color: var(--eep-primary);
  font-weight: 600;
  font-family: var(--eep-font-family);
}

/* ==========================================================================
   ACESSIBILIDADE E PERFORMANCE
   ========================================================================== */

/* Screen Reader Only - Para elementos visíveis apenas para leitores de tela */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus states avançados para acessibilidade */
.eep-radio-label:focus-within,
.eep-checkbox-label:focus-within,
.eep-anota-btn:focus,
.eep-anota-v2-button:focus,
.eep-collapse-icon:focus,
.eep-group button:focus,
.eep-anota-container button:focus {
  outline: var(--eep-focus-outline);
  outline-offset: var(--eep-focus-offset);
  box-shadow: 0 0 0 3px rgba(16, 149, 243, 0.2);
}

/* Estados de focus visíveis apenas no teclado */
.js-focus-visible button:focus:not(.focus-visible),
.js-focus-visible .eep-anota-btn:focus:not(.focus-visible),
.js-focus-visible .eep-anota-v2-button:focus:not(.focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Melhor contraste para textos importantes */
.eep-anota-v2-required,
.eep-anota-required,
.required {
  color: var(--eep-danger);
  font-weight: 600;
}

/* Estados de erro com alta visibilidade */
.eep-validation-errors,
.eep-group-validation {
  background: #fef2f2;
  border: 2px solid var(--eep-danger);
  border-radius: var(--eep-border-radius);
  padding: var(--eep-spacing-3);
  color: #991b1b;
}

/* Indicadores de status dinâmicos */
[role="status"],
[aria-live="polite"],
.eep-group [aria-live="assertive"],
.eep-anota-container [aria-live="assertive"] {
  font-weight: 500;
}

/* Estados de hover melhorados para touch */
@media (hover: hover) {
  .eep-radio-label:hover,
  .eep-checkbox-label:hover {
    transform: translateY(-1px);
  }
}

/* Touch targets mínimos (44px) */
.eep-counter-btn {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 480px) {
  /* Garantir touch targets adequados em mobile */
  .eep-radio-label,
  .eep-checkbox-label {
    min-height: 44px;
    padding: var(--eep-spacing-3) var(--eep-spacing-4);
  }
  
  .eep-counter-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

/* Redução de movimento para usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
  .eep-radio-label,
  .eep-checkbox-label,
  .eep-counter-btn,
  .eep-selection-indicator {
    transition: none !important;
    animation: none !important;
  }
  
  .eep-animate-bounce,
  .eep-animate-pulse {
    animation: none !important;
  }
}

/* Alto contraste */
@media (prefers-contrast: high) {
  .eep-radio-label,
  .eep-checkbox-label {
    border-width: 3px;
  }
  
  .eep-radio-input:checked + .eep-radio-label,
  .eep-checkbox-input:checked + .eep-checkbox-label {
    border-width: 4px;
  }
}

/* Modo escuro */
@media (prefers-color-scheme: dark) {
  :root {
    --eep-white: #1F2937;
    --eep-gray-50: #374151;
    --eep-gray-100: #4B5563;
    --eep-gray-200: #6B7280;
    --eep-gray-300: #9CA3AF;
    --eep-gray-600: #D1D5DB;
    --eep-gray-900: #F9FAFB;
    --eep-primary-light: rgba(16, 149, 243, 0.2);
  }
}

/* Performance - GPU acceleration */
.eep-radio-label,
.eep-checkbox-label,
.eep-counter-btn {
  will-change: transform;
}

/* Performance - Contenção de layout */
.eep-options-grid,
.eep-checkbox-modern-grid {
  contain: layout style;
}

/* Performance - Lazy loading para imagens */
.eep-option-image img {
  loading: lazy;
  decoding: async;
}