/**
 * Stili personalizzati per vanilla-cookieconsent
 * Coordinati con il design LiveMotion (nero e rosso, font Outfit)
 */

/* Importa il font Outfit se non già disponibile */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Variabili CSS per i colori LiveMotion */
:root {
  --livemotion-black: #000000;
  --livemotion-red: #e52421;
  --livemotion-gray: #323232;
  --livemotion-light-gray: #f5f5f5;
  --livemotion-dark-gray: #1a1a1a;
  --livemotion-border: #333333;
}

/* Reset e base per il cookie consent */
#cc--main * {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Modal di consenso principale */
#cc--main .cm {
  background: var(--livemotion-black) !important;
  border: 2px solid var(--livemotion-red) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 40px rgba(229, 36, 33, 0.3) !important;
  max-width: 600px !important;
}

/* Titolo del modal di consenso */
#cc--main .cm__title {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* Descrizione del modal di consenso */
#cc--main .cm__desc {
  color: #cccccc !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}

/* Bottoni del modal di consenso */
#cc--main .cm__btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}

/* Bottone "Accetta tutti" */
#cc--main .cm__btn--primary {
  background: var(--livemotion-red) !important;
  color: white !important;
}

#cc--main .cm__btn--primary:hover {
  background: #d41e1b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(229, 36, 33, 0.4) !important;
}

/* Bottone "Solo necessari" */
#cc--main .cm__btn--secondary {
  background: transparent !important;
  color: white !important;
  border: 2px solid var(--livemotion-gray) !important;
}

#cc--main .cm__btn--secondary:hover {
  background: var(--livemotion-gray) !important;
  border-color: var(--livemotion-red) !important;
  transform: translateY(-2px) !important;
}

/* Bottone "Gestisci preferenze" */
#cc--main .cm__btn--tertiary {
  background: transparent !important;
  color: var(--livemotion-red) !important;
  text-decoration: underline !important;
  border: none !important;
  padding: 8px 16px !important;
}

#cc--main .cm__btn--tertiary:hover {
  color: #d41e1b !important;
  text-decoration: none !important;
}

/* Footer con link */
#cc--main .cm__footer {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--livemotion-border) !important;
}

#cc--main .cm__footer a {
  color: var(--livemotion-red) !important;
  text-decoration: none !important;
  margin-right: 1rem !important;
  font-weight: 500 !important;
}

#cc--main .cm__footer a:hover {
  text-decoration: underline !important;
  color: #d41e1b !important;
}

/* Modal delle preferenze */
#cc--main .pm {
  background: var(--livemotion-black) !important;
  border: 2px solid var(--livemotion-red) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 40px rgba(229, 36, 33, 0.3) !important;
  max-width: 700px !important;
  max-height: 90vh !important;
}

/* Header del modal preferenze */
#cc--main .pm__header {
  background: var(--livemotion-dark-gray) !important;
  border-bottom: 1px solid var(--livemotion-border) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 1.5rem !important;
}

#cc--main .pm__title {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
}

/* Corpo del modal preferenze */
#cc--main .pm__body {
  padding: 1.5rem !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

/* Sezioni delle preferenze */
#cc--main .pm__section {
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
  background: var(--livemotion-dark-gray) !important;
  border-radius: 8px !important;
  border: 1px solid var(--livemotion-border) !important;
}

#cc--main .pm__section-title {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-bottom: 0.5rem !important;
}

#cc--main .pm__section-desc {
  color: #cccccc !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* Badge "Sempre Attivi" */
#cc--main .pm__badge {
  background: var(--livemotion-red) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
}

/* Toggle switches */
#cc--main .section__toggle {
  position: relative !important;
  display: inline-block !important;
  width: 50px !important;
  height: 24px !important;
}

#cc--main .section__toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

#cc--main .toggle__slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: var(--livemotion-gray) !important;
  transition: 0.3s !important;
  border-radius: 24px !important;
}

#cc--main .toggle__slider:before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: 0.3s !important;
  border-radius: 50% !important;
}

#cc--main input:checked + .toggle__slider {
  background-color: var(--livemotion-red) !important;
}

#cc--main input:checked + .toggle__slider:before {
  transform: translateX(26px) !important;
}

/* Footer del modal preferenze */
#cc--main .pm__footer {
  background: var(--livemotion-dark-gray) !important;
  border-top: 1px solid var(--livemotion-border) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 1.5rem !important;
  display: flex !important;
  gap: 1rem !important;
  justify-content: flex-end !important;
}

/* Bottoni del footer preferenze */
#cc--main .pm__btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
}

#cc--main .pm__btn--primary {
  background: var(--livemotion-red) !important;
  color: white !important;
}

#cc--main .pm__btn--primary:hover {
  background: #d41e1b !important;
  transform: translateY(-2px) !important;
}

#cc--main .pm__btn--secondary {
  background: transparent !important;
  color: white !important;
  border: 2px solid var(--livemotion-gray) !important;
}

#cc--main .pm__btn--secondary:hover {
  background: var(--livemotion-gray) !important;
  border-color: var(--livemotion-red) !important;
}

/* Overlay */
#cc--main .cc__overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

/* Link nelle descrizioni */
#cc--main .cc__link {
  color: var(--livemotion-red) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#cc--main .cc__link:hover {
  text-decoration: underline !important;
  color: #d41e1b !important;
}

/* Scrollbar personalizzata per il modal preferenze */
#cc--main .pm__body::-webkit-scrollbar {
  width: 8px !important;
}

#cc--main .pm__body::-webkit-scrollbar-track {
  background: var(--livemotion-dark-gray) !important;
  border-radius: 4px !important;
}

#cc--main .pm__body::-webkit-scrollbar-thumb {
  background: var(--livemotion-red) !important;
  border-radius: 4px !important;
}

#cc--main .pm__body::-webkit-scrollbar-thumb:hover {
  background: #d41e1b !important;
}

/* Responsive design */
@media (max-width: 768px) {
  #cc--main .cm {
    margin: 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
  
  #cc--main .pm {
    margin: 1rem !important;
    max-width: calc(100% - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
  }
  
  #cc--main .pm__footer {
    flex-direction: column !important;
  }
  
  #cc--main .pm__btn {
    width: 100% !important;
  }
}

/* Animazioni */
@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#cc--main .cm {
  animation: slideInUp 0.4s ease-out !important;
}

#cc--main .pm {
  animation: slideInRight 0.4s ease-out !important;
}

/* Focus states per accessibilità */
#cc--main .cm__btn:focus,
#cc--main .pm__btn:focus {
  outline: 2px solid var(--livemotion-red) !important;
  outline-offset: 2px !important;
}

#cc--main .toggle__slider:focus {
  box-shadow: 0 0 0 2px var(--livemotion-red) !important;
}