/* ==========================================================================
   MrSeries — Banderitas de idioma y precio de la ficha
   ==========================================================================

   Archivo propio, encolado desde sys/idiomas.php. No se toca
   assets/css/style.css para no alterar el diseño ya terminado.

   Reutiliza las variables --mrs-* que ya declara el tema, con valor de
   respaldo por si se cargara este archivo de forma aislada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Banderitas de idioma
   -------------------------------------------------------------------------- */

.mrs-langs {
   display: flex;
   flex-wrap: wrap;
   gap: .4rem;
   margin: 0 0 .85rem;
   padding: 0;
   list-style: none;
}

.mrs-lang {
   display: inline-flex;
   align-items: center;
   gap: .38rem;
   padding: .22rem .5rem .22rem .32rem;
   border: 1px solid var(--mrs-border-soft, #2f3a4d);
   border-radius: 999px;
   background: var(--mrs-surface, #1c232e);
   line-height: 1;
   white-space: nowrap;
}

/* El SVG no trae width/height: el tamaño se decide aquí. */
.mrs-lang__flag {
   display: block;
   width: 20px;
   height: auto;
   flex: 0 0 20px;
   border-radius: 2px;
   /* Un borde interior sutil evita que las banderas claras se
      "derramen" sobre el fondo oscuro del tema. */
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.mrs-lang__label {
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: .02em;
   text-transform: uppercase;
   color: var(--mrs-text, #dce6f7);
}

/* Los subtítulos no son un idioma de audio: se marcan en tono apagado
   para que se distingan de un vistazo. */
.mrs-lang--subtitle {
   background: transparent;
   border-style: dashed;
}

.mrs-lang--subtitle .mrs-lang__label {
   color: var(--mrs-text-muted, rgba(220, 230, 247, .8));
   font-weight: 500;
}

.mrs-lang--subtitle .mrs-lang__flag {
   box-shadow: none;
}

/* En la columna lateral de la ficha el espacio es estrecho. */
.details__side .mrs-langs {
   gap: .3rem;
}

.details__side .mrs-lang {
   padding: .18rem .42rem .18rem .28rem;
}

.details__side .mrs-lang__flag {
   width: 18px;
   flex-basis: 18px;
}

.details__side .mrs-lang__label {
   font-size: .68rem;
}

/* --------------------------------------------------------------------------
   2. Precio en la zona "Información y descarga"
   -------------------------------------------------------------------------- */

/* Bloque de compra: precio arriba, boton debajo. Se usa DOS veces en la
   ficha (bajo el titulo y en "Informacion y descarga") con el mismo
   marcado; solo cambia el modificador --top / --bottom. */
.mrs-buy {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: .5rem;
   margin: 0 0 1rem;
}

.mrs-buy--bottom {
   margin-bottom: 1.15rem;
}

/* El precio es INFORMACION, no un control.
   Antes iba dentro de un recuadro con borde, fondo y esquinas redondeadas,
   y el boton de al lado no tenia ningun estilo. Resultado: el precio
   parecia el boton y el boton parecia texto, asi que la gente hacia clic
   en el precio y no pasaba nada. Aqui el precio se queda como texto. */
.mrs-price {
   display: inline-flex;
   align-items: baseline;
   gap: .45rem;
   line-height: 1.2;
}

.mrs-price__label {
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--mrs-text-muted, rgba(220, 230, 247, .8));
}

.mrs-price__value {
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--mrs-text-strong, #fff);
   white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Botón de compra
   --------------------------------------------------------------------------

   El plugin emite las clases `mrs-cta__button` y sus variantes, pero NO
   encola ninguna hoja de estilos, y el tema no tenía ni una regla para
   ellas: el botón se renderizaba como un enlace de texto de 59x20 px.
   Estas reglas le dan la apariencia de botón. No se toca el plugin.
   -------------------------------------------------------------------------- */

.mrs-cta__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 44px;              /* objetivo tactil cómodo */
   padding: .7rem 1.9rem;
   border: 0;
   border-radius: 6px;
   background: var(--mrs-accent, #d9004d);
   color: #fff;
   font-size: .88rem;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .18s ease, transform .18s ease;
}

.mrs-cta__button:hover,
.mrs-cta__button:focus {
   background: var(--mrs-accent-hover, #a8003b);
   color: #fff;
   text-decoration: none;
}

.mrs-cta__button:active {
   transform: translateY(1px);
}

.mrs-cta__button:focus-visible {
   outline: 2px solid var(--mrs-accent-bright, #ff2e77);
   outline-offset: 2px;
}

/* Ya comprado: no es una llamada a la acción, es un acceso. */
.mrs-cta__button--owned {
   background: transparent;
   border: 1px solid var(--mrs-ok, #2ecc71);
   color: var(--mrs-ok, #2ecc71);
}

.mrs-cta__button--owned:hover,
.mrs-cta__button--owned:focus {
   background: var(--mrs-ok, #2ecc71);
   color: #101720;
}

/* No comprable ahora mismo. */
.mrs-cta__button--disabled {
   background: var(--mrs-field, #303c52);
   color: var(--mrs-text-muted, rgba(220, 230, 247, .8));
   cursor: not-allowed;
   pointer-events: none;
}

.mrs-cta__message,
.mrs-cta__notice {
   margin: 0;
   font-size: .8rem;
   color: var(--mrs-text-muted, rgba(220, 230, 247, .8));
}

/* Aviso que solo ve el administrador cuando falta configuración. */
.mrs-cta--admin-notice {
   padding: .6rem .85rem;
   border: 1px dashed var(--mrs-error, #ff5c5c);
   border-radius: 6px;
   color: var(--mrs-error, #ff5c5c);
   font-size: .8rem;
}

.mrs-buy > .mrs-cta {
   margin-top: 0;
}

/* Aviso de "contenido no adquirido": el texto no tenia ninguna regla propia
   y heredaba un color oscuro, casi ilegible sobre el fondo de la ficha.
   Mismas variables de texto claro que ya usa el resto del bloque de compra
   (.mrs-price__value, .mrs-cta__message). No se toca el boton COMPRAR
   (.mrs-cta__button ya tiene su propio color, sin cambios). */
.mrs-locked__title {
   margin: 0;
   color: var(--mrs-text-strong, #fff);
   font-weight: 700;
}

.mrs-locked__text {
   margin: 0;
   color: var(--mrs-text-muted, rgba(220, 230, 247, .8));
}

@media (max-width: 575px) {
   .mrs-buy {
      align-items: stretch;
   }

   .mrs-price {
      width: 100%;
      justify-content: center;
   }
}


/* --------------------------------------------------------------------------
   4. Insignias de idioma en las tarjetas del catálogo
   --------------------------------------------------------------------------

   Ubicación: abajo a la derecha del póster. Es la única esquina libre:
      .card__info-movies  -> arriba izquierda (calidad + año)
      .card__rate         -> arriba derecha (nota)
      .card__cover .formato -> abajo izquierda (formato)
   Así no tapan ni la nota ni el formato, y el título va fuera del póster.
   -------------------------------------------------------------------------- */

/* El sprite no se pinta: solo aporta los <symbol> que reutilizan las tarjetas.
   Se oculta con tamaño 0 en lugar de `display:none`, que es el modo seguro
   de mantener las referencias <use> operativas. */
.mrs-lang-sprite {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
}

.mrs-clangs {
   position: absolute;
   right: 5px;
   bottom: 5px;
   z-index: 3;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 3px;
   /* Se reserva la mitad izquierda para `.card__cover .formato`, que vive en
      esa esquina. Sin este límite, con tres insignias en una tarjeta estrecha
      la fila llegaba hasta el badge de formato y lo tapaba. Al restringir el
      ancho, las insignias que no caben pasan a una segunda fila, que crece
      hacia ARRIBA porque el bloque está anclado por `bottom`. */
   max-width: calc(100% - 58px);
   pointer-events: none;   /* el clic sigue yendo al enlace del póster */
}

.mrs-clang {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 2px 4px 2px 3px;
   border-radius: 3px;
   /* Fondo oscuro sólido: es lo que garantiza el contraste sobre un póster
      claro, oscuro o saturado, sin depender de la imagen que haya debajo. */
   background: rgba(8, 12, 20, .82);
   line-height: 1;
}

.mrs-clang__flag {
   display: block;
   width: 15px;
   height: 10px;
   flex: 0 0 15px;
   border-radius: 1px;
}

.mrs-clang__abbr {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .04em;
   color: #fff;
   text-transform: uppercase;
}

/* Los subtítulos se diferencian del audio también aquí. */
.mrs-clang--subtitle .mrs-clang__abbr {
   color: #9fb0c9;
   font-weight: 600;
}

/* El tema aplica blur y escala a la imagen del póster al pasar el ratón
   (`.card__cover:hover img:not(.idioma)`). Las insignias son <svg>, así que
   no les afecta; se refuerza que permanezcan nítidas y por encima. */
.card__cover:hover .mrs-clangs {
   z-index: 4;
}

/* En pantallas pequeñas las tarjetas son más estrechas, así que se reduce
   todo un punto.
   NO se oculta ninguna insignia: si hay tres o cuatro idiomas reconocidos se
   muestran todos, repartidos en las filas que hagan falta. Las filas crecen
   hacia ARRIBA, porque el bloque está anclado por `bottom`, y el `max-width`
   sigue reservando la esquina de `.card__cover .formato`. */
@media (max-width: 575px) {
   .mrs-clang {
      padding: 2px 3px;
      gap: 2px;
   }

   .mrs-clang__flag {
      width: 13px;
      height: 9px;
      flex-basis: 13px;
   }

   .mrs-clang__abbr {
      font-size: 8px;
   }
}