/* ==========================================================================
   ELENA ROSS
   AVISO DE COOKIES
========================================================================== */


/* ==========================================================================
   AVISO
========================================================================== */

.cookie-notice{

  position: fixed;

  z-index: 1000;

  width: 50%;
  max-width: var(--ancho-maximo-concreto);

  left: 0;
  right: 0;
  bottom: 35px;

  margin: auto;

  padding: 25px 30px 25px 30px;

  background-color: rgba(164, 169, 153, 0.9);

  font-family: var(--fuente-textos);
  font-size: var(--size-texto);

  font-weight: 300;

  line-height: 1.5;

  color: var(--color-texto-beige);

  text-align: center;

  animation:
      cookie-notice-fadein 500ms ease-out;

}


/* ==========================================================================
 ENLACE
========================================================================== */

.cookie-notice a{

  color: var(--color-texto-beige);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  cursor: pointer;

  transition:
      color var(--duracion-transicion) var(--curva-transicion);

}

.cookie-notice a:hover{

  color: var(--color-boton-estandar-marron);

}


/* ==========================================================================
 TEXTO
========================================================================== */

.cookie-notice-message > p{

  width: 100%;

  margin: 0;

}


/* ==========================================================================
 BOTONES
========================================================================== */

.cookie-buttons{

  display: flex;

  justify-content: center;

  gap: 15px;

  margin-top: 20px;

}


.cookie-buttons button{

  padding: 9px 24px;

  border: 1px solid var(--color-texto-beige);

  background: transparent;

  font-family: var(--fuente-textos);

  font-size: 0.8rem;

  font-weight: 300;

  letter-spacing: 0.025rem;

  color: var(--color-texto-beige);

  cursor: pointer;

  transition:
      background-color var(--duracion-transicion) var(--curva-transicion),
      color var(--duracion-transicion) var(--curva-transicion),
      border-color var(--duracion-transicion) var(--curva-transicion);

}


/* ==========================================================================
 HOVER BOTONES
========================================================================== */

.cookie-buttons button:hover{

  background-color: var(--color-texto-marron);

  color: var(--color-texto-beige);

}


/* ==========================================================================
 ACEPTAR
========================================================================== */

.cookie-accept{

  background-color: var(--color-texto-marron);

  color: var(--color-texto-beige);

}


.cookie-accept:hover{

  background-color: var(--color-boton-estandar-verde);

  border-color: var(--color-boton-estandar-verde);

  color: var(--color-texto-beige);

}


/* ==========================================================================
 RECHAZAR
========================================================================== */

.cookie-reject{

  background-color: transparent;

}


/* ==========================================================================
 ANIMACIÓN
========================================================================== */

@keyframes cookie-notice-fadein{

  0%{

      transform: translate3d(0, 128px, 0);

      opacity: 0;

  }

  100%{

      transform: translate3d(0, 0, 0);

      opacity: 1;

  }

}


/* ==========================================================================
 RESPONSIVE · TABLET
========================================================================== */

@media (max-width: 925px){

  .cookie-notice{

      width: calc(100% - 40px);

      max-width: var(--ancho-maximo-concreto);

  }

}


/* ==========================================================================
 RESPONSIVE · MÓVIL
========================================================================== */

@media (max-width: 600px){

  .cookie-notice{

      width: calc(100% - 30px);

  }
}