/* ============================================
   Klaro Custom Theme - AgaVolt Design System
   ============================================

   Cores:
   - Primary (Azul): #0052cc, #60a5fa
   - Accent (Amarelo): #dfff00
   - Dark BG: #0f172a, #1f2937
   - Text: #ffffff, #d1d5db, #9ca3af

   ============================================ */

/* ===== NOTICE (Banner de Cookies) ===== */
.klaro .cookie-notice {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  max-width: 420px !important;
  margin: 16px !important;
  padding: 0 !important;
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
}

/* Container interno */
.klaro .cookie-notice .cn-body {
  padding: 20px !important;
  position: relative !important;
}

/* Título do banner */
.klaro .cookie-notice .cn-body .title,
.klaro .cookie-notice .cn-body > strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
  padding-right: 24px !important;
}

/* Texto descritivo */
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body .cn-text {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #9ca3af !important;
  margin: 0 0 16px 0 !important;
}

/* Container dos botões */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Reset base para todos os botões */
.klaro .cookie-notice .cn-buttons button,
.klaro .cookie-notice .cn-buttons .cm-btn {
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Botão ACEITAR - Amarelo (igual CTA do site) */
.klaro .cookie-notice .cm-btn-success,
.klaro .cookie-notice .cm-btn-accept-all,
.klaro .cookie-notice .cn-buttons .cm-btn-success {
  background: #dfff00 !important;
  color: #0f172a !important;
  border: none !important;
  order: 1 !important;
}

.klaro .cookie-notice .cm-btn-success:hover,
.klaro .cookie-notice .cm-btn-accept-all:hover {
  background: #c9e600 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(223, 255, 0, 0.3) !important;
}

/* Botão NEGAR - Outline */
.klaro .cookie-notice .cm-btn-danger,
.klaro .cookie-notice .cn-decline,
.klaro .cookie-notice .cn-buttons .cm-btn-danger {
  background: transparent !important;
  color: #d1d5db !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  order: 2 !important;
}

.klaro .cookie-notice .cm-btn-danger:hover,
.klaro .cookie-notice .cn-decline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Link VER PREFERÊNCIAS - Azul */
.klaro .cookie-notice .cm-btn-info,
.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-notice a.cn-learn-more {
  background: transparent !important;
  color: #60a5fa !important;
  border: none !important;
  padding: 10px 12px !important;
  order: 3 !important;
}

.klaro .cookie-notice .cm-btn-info:hover,
.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice a.cn-learn-more:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* ===== MODAL DE PREFERÊNCIAS ===== */
.klaro .cookie-modal {
  z-index: 10000 !important;
}

.klaro .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px) !important;
}

.klaro .cookie-modal .cm-modal {
  background: rgba(15, 23, 42, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
  max-width: 520px !important;
  max-height: 85vh !important;
  overflow: hidden !important;
}

/* Header do modal */
.klaro .cookie-modal .cm-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(31, 41, 55, 0.5) !important;
}

.klaro .cookie-modal .cm-header h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* Botão fechar (X) */
.klaro .cookie-modal .cm-header .cm-close-link {
  color: #9ca3af !important;
  font-size: 24px !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.klaro .cookie-modal .cm-header .cm-close-link:hover {
  color: #ffffff !important;
}

/* Body do modal */
.klaro .cookie-modal .cm-body {
  padding: 20px 24px !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
}

.klaro .cookie-modal .cm-body p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #9ca3af !important;
  margin-bottom: 16px !important;
}

/* Serviços/Apps listados */
.klaro .cookie-modal .cm-services,
.klaro .cookie-modal .cm-apps {
  margin-top: 16px !important;
}

.klaro .cookie-modal .cm-service,
.klaro .cookie-modal .cm-app {
  background: rgba(31, 41, 55, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.klaro .cookie-modal .cm-service:hover,
.klaro .cookie-modal .cm-app:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.klaro .cookie-modal .cm-service-title,
.klaro .cookie-modal .cm-app-title,
.klaro .cookie-modal .cm-list-title {
  font-weight: 600 !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

.klaro .cookie-modal .cm-service-description,
.klaro .cookie-modal .cm-app-description,
.klaro .cookie-modal .cm-list-description {
  font-size: 13px !important;
  color: #9ca3af !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

/* Toggle switch */
.klaro .cm-switch {
  position: relative !important;
}

.klaro .cm-switch input:checked + .cm-switch-slider,
.klaro .cm-switch input:checked + .slider {
  background: #dfff00 !important;
}

.klaro .cm-switch .cm-switch-slider,
.klaro .cm-switch .slider {
  background: #374151 !important;
  border-radius: 20px !important;
}

.klaro .cm-switch .cm-switch-slider:before,
.klaro .cm-switch .slider:before {
  background: #ffffff !important;
}

/* Footer do modal */
.klaro .cookie-modal .cm-footer {
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(31, 41, 55, 0.5) !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.klaro .cookie-modal .cm-footer .cm-btn {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.klaro .cookie-modal .cm-footer .cm-btn-success {
  background: #dfff00 !important;
  color: #0f172a !important;
  border: none !important;
}

.klaro .cookie-modal .cm-footer .cm-btn-success:hover {
  background: #c9e600 !important;
}

.klaro .cookie-modal .cm-footer .cm-btn-danger {
  background: transparent !important;
  color: #d1d5db !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.klaro .cookie-modal .cm-footer .cm-btn-danger:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* ===== OCULTAR POWERED BY ===== */
.klaro .cm-powered-by {
  display: none !important;
}

/* ===== LINKS DENTRO DO MODAL ===== */
.klaro .cookie-modal a {
  color: #60a5fa !important;
}

.klaro .cookie-modal a:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

/* ===== ANIMAÇÕES ===== */
.klaro .cookie-notice {
  animation: slideInUp 0.4s ease-out !important;
}

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

.klaro .cookie-modal .cm-modal {
  animation: fadeInScale 0.3s ease-out !important;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== RESPONSIVO - MOBILE ===== */
@media (max-width: 480px) {
  .klaro .cookie-notice {
    max-width: calc(100% - 32px) !important;
    margin: 16px !important;
    left: 0 !important;
    right: 0 !important;
  }

  .klaro .cookie-notice .cn-body {
    padding: 16px !important;
  }

  .klaro .cookie-notice .cn-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .klaro .cookie-notice .cn-buttons button,
  .klaro .cookie-notice .cn-buttons .cm-btn,
  .klaro .cookie-notice .cn-buttons a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Modal mobile */
  .klaro .cookie-modal .cm-modal {
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 12px !important;
  }

  .klaro .cookie-modal .cm-body {
    max-height: 45vh !important;
  }

  .klaro .cookie-modal .cm-footer {
    flex-direction: column !important;
  }

  .klaro .cookie-modal .cm-footer .cm-btn {
    width: 100% !important;
  }
}

/* ===== SCROLLBAR CUSTOMIZADA ===== */
.klaro .cookie-modal .cm-body::-webkit-scrollbar {
  width: 6px;
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.klaro .cookie-modal .cm-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}