/* Variables Generales */
:root {
  --dark-grey: #303841;
  --mid-grey: #3A4750;
  --light-grey: #EEEEEE;
  --yellow: #F6C90E;
}

.bgDarkGrey {
  background-color: var(--dark-grey);
}

.bgMidGrey {
  background-color: var(--mid-grey);
}

.bgLightGrey {
  background-color: var(--light-grey);
}

.bgYellow {
  background-color: var(--yellow);
}

/* Estilos Navbar */
#mainNav {
  background-color: var(--dark-grey);
}

/* Tamaño Logo */
.logo {
  max-width: 100px;
}

/* Boton Login dentro de Offcanvas */
.loginButton {
  text-decoration: none;
  background-color: var(--yellow);
  color: var(--dark-grey);
  padding: 8px 16px;
  margin-right: 5px;
  border-radius: 0.375rem;
}

.loginButton:hover {
  color: var(--light-grey);
}

.loginButton:active {
  color: var(--mid-grey);
}

/* Botones de navegación */
.buttonNav {
  color: var(--light-grey);
}

.buttonNav:hover {
  font-size: larger;
  color: var(--yellow);
}

.togglerNav {
  background-color: var(--light-grey);
  color: var(--yellow);
}

.nav-link:focus {
  color: var(--light-grey);
}

/* Ocultar Boton Login del Navbar expandido */
.loginButtonDisplay {
  display: none;
}

/* Breakpoint lg xl xxl */
@media (min-width: 992px) {

  /* Tamaño Logo */
  .logo {
    max-width: 150px;
  }

  /* Botones de navegación */
  .buttonNav {
  width: initial;
  text-align: center;
  }

  .buttonNav:hover {
    color: var(--yellow);
    font-size: initial;
  }

  .loginButtonDisplay {
    display: flex;
  }
}

/* Estilos Footer */
.footerLink {
  color: #757575;
}

.footerLink:hover {
  color: var(--light-grey);
}

/* Galería */
.popcornImg {
  max-width: 4.7rem;
}

/* Calificación Estrellas */
input[type="radio"] {
  display: none;
}

label {
  color: var(--dark-grey);
}

.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
}

label:hover,
label:hover ~ label {
  color: var(--yellow);
}

input[type="radio"]:checked ~ label {
  color: var(--yellow);
}

/* Accordion */
.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--light-grey);
  --bs-accordion-active-bg: var(--yellow);
}