.img-channel {
    max-width: 5.5rem;
    max-height: 5.5rem;
}

.nomargin {
    margin: 0 !important;
}

.mouse-touch {
    cursor: pointer;
}

/*para corregir el texto de mayusculas en dispositivos*/
.iq-widget-blog .blog-data {
    text-transform: none;
}

/*Colores de las distintas plataformas*/
.win10-color {
    color: #1ba1e2;
}

.iOS-color {
    color: #a3a3a3;
}

.android-color {
    color: #60a917;
}

.unknown-platform-color {
    color: #a3a3a3;
}

/*Para corregir los dispositivos en device selection*/
.iq-widget-blog li {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: none;
}

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    margin: 1rem solid white !important;
    color: white !important;
    background-color: white !important;
    border: 1px solid #333 !important;
    opacity: 1 !important;
}

.vh-10 {
    height: 10vh !important;
}

.vh-20 {
    height: 20vh !important;
}

.m-t-20 {
    margin-top: 20px;
}

.main-content {
    padding-top: 74px !important;
}

.nopadding-top {
    padding-top: 0px !important;
}

.normaltext {
    text-transform: none !important;
}


/*------scroll bar---------------------*/

::-webkit-scrollbar {
    width: 10px;
    height: 7px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0px none #ffffff;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: #525965;
}

::-webkit-scrollbar-thumb:active {
    background: #525965;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
    background: transparent;
}

::-webkit-scrollbar-track:active {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/*------fin scroll bar------------------*/

.epg-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

@media (min-width: 1200px) {
    #itemdropdownCart {
        margin-left: 20px;
    }
}

footer .footer-menu>li a {
    text-transform: none;
}

/* Plugin de autocompletado*/
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
    box-shadow: 0 4px 6px 0 rgba(32, 33, 36, 0.28);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

/*Fin del plugin de autocompletado*/

.favourite-person-block {
    padding-top: 2rem;
}

/*
Corrector del banner principal para que no ocupe toda la pantalla
*/
.iq-banner-thumb-slider .slider .slider-bg {
    height: 90vh !important;
}

#home-banner-slider {
    height: 80vh !important;
}

/*
De la lista de canales de TV
*/
.watchlist-warpper.card-style-two .block-images {
    padding: .2rem;
    margin-bottom: .2rem;
}

/*imagenes de la lista de tv*/
.watchlist-warpper.card-style-two .block-images .img-box img {
    width: 60px;
    height: 60px;
    -o-object-fit: cover;
    object-fit: cover;
}

.badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    -webkit-border-radius: var(--bs-badge-border-radius);
    border-radius: var(--bs-badge-border-radius);
}

.section-padding {
    padding-top: 0 !important;
}

.custom-section-title {
    padding: 2rem 0 2rem 0 !important;
    text-align: center;
}

.m-b-0 {
    margin-bottom: 0 !important;
}


.img-vod {
    object-fit: cover;
    aspect-ratio: 9/16;
}

.img-vod-start {
    object-fit: cover;
    aspect-ratio: 10/16;
}

.rounded-tv-logo {
    border-radius: 0.75rem;
}

.tv-logo-dashboard {
    aspect-ratio: 1/1;
    object-fit: cover;
    -o-object-fit: cover;
}

.img-subcategory {
    object-fit: cover;
    aspect-ratio: 16/9;
}

.trailor-video .btn-transparant.iq-button span {
    text-transform: none !important;
}

.rounded-card {
    border-radius: 0.75rem !important;
}

.movie-poster::before {
    background: transparent !important;
}

/* .btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
} */

/* Lazy Load Styles */


.img-parent {
    display: block;
    /* min-height: 20rem; */
    /* layout hack */
    background: #000 center center no-repeat;
    background-size: cover;
    filter: blur(3px);
    /* blur the lowres image */
}

.img-parent>img {
    display: block;
    width: 100%;
    opacity: 0;
    /* visually hide the img element */
}

.img-parent.is-loaded {
    filter: none;
    /* remove the blur on fullres image */
    transition: filter 1s;
}

/* Layout Styles */

/* Aqui va el estilo del boton llamativo de las notificaciones */
.texto-pulsante {
    /* La magia sucede con la animación */
    animation: pulsoTexto 1.5s infinite;
    /* Asegura que la transformación de escala no afecte el layout */
    display: inline-block;
}

@keyframes pulsoTexto {
    0% {
        transform: scale(1);
        /* Sombra de texto inicial, sutil */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
            0 0 10px rgba(255, 255, 255, 0.5);
    }

    70% {
        transform: scale(1.05);
        /* Sombra de texto en el pico de la animación: más grande y brillante */
        text-shadow: 0 0 15px rgba(255, 221, 87, 1),
            0 0 30px rgba(255, 255, 255, 0.7);
    }

    100% {
        transform: scale(1);
        /* Vuelve a la sombra de texto inicial para un bucle suave */
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
            0 0 10px rgba(255, 255, 255, 0.5);
    }
}

/* Fin Aqui va el estilo del boton llamativo de las notificaciones */

/*Estilos del buscador bonito*/
.main-content {
    transition: filter 0.5s ease, transform 0.5s ease;
}

body.search-active .main-content {
    filter: blur(10px);
    transform: scale(0.95);
}

/* --- Estilos de la Superposición de Búsqueda --- */
#search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(15, 16, 20, 0.7);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10vh;
}

#search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Contenedor del buscador y resultados */
.search-container {
    width: 100%;
    max-width: 900px;
    transform: translateY(-50px);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* CAMBIO: Se convierte en un contenedor flex */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ocupa toda la altura disponible en el overlay */
}

#search-overlay.active .search-container {
    transform: translateY(0);
}

/* Input principal de búsqueda */
#main-search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #6b7280;
    color: white;
    font-size: 2.5rem;
    /* font-weight: bold; */
    padding: 1rem 0;
    text-align: center;
    transition: border-bottom-color 0.4s ease-in-out;
}

#main-search-input:focus {
    outline: none;
    border-bottom-color: var(--bs-primary);
}

/* #main-search-input::placeholder {
    color: #4b5563;
} */

/* Botón de cerrar */
#close-search-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 2rem;
    transition: color 0.2s ease;
}

#close-search-btn:hover {
    color: white;
}

/* Resultados de búsqueda */
#search-results {
    margin-top: 0.5rem;
    overflow-y: auto;
    padding: 2rem 1rem;
    text-align: left;
    flex-grow: 1;
}

/* CAMBIO: Estilo para los subtítulos de sección */
.search-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #4b5563;
}

.result-item {
    background-color: rgba(31, 41, 55, 0.5);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    height: 100%;
}

.result-description {
    font-size: 0.85rem;
    color: #adb5bd;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-cast {
    font-size: 0.8rem;
    color: #6c757d;
}

.result-col {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Fin de los estilos del buscador bonito*/

/*agrandamiento de los cards*/
.swiper-slide .iq-card,
.tv-logo-inicio {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;
    /* Esto asegura que la imagen y los bordes se vean bien al escalar */
    border-radius: 8px;
    /* Ajusta según el radio de tus tarjetas */
    overflow: hidden;
}

/*
  Paso 2: Aplicamos el efecto mejorado al pasar el mouse.
*/
.swiper-slide:hover .iq-card,
.tv-logo-inicio:hover {
    /* Hacemos el agrandamiento un poco más sutil */
    transform: scale(1.05);

    /* Añadimos una sombra para dar un efecto de "elevación" y profundidad */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

    /* Nos aseguramos de que la tarjeta se muestre por encima de las demás */
    z-index: 10;
}

/*
  Paso 1: Preparamos la tarjeta para la animación.
  Apuntamos a la clase '.iq-blog-box' que contiene cada elemento.
*/
.col .iq-blog-box {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;
}

/*
  Paso 2: Aplicamos el efecto al pasar el mouse sobre la columna.
  Usamos :hover en la clase '.col' para que el área de activación sea un poco más grande.
*/
.col:hover .iq-blog-box {
    /* Agrandamos la tarjeta para que destaque */
    transform: scale(1.05);

    /* Añadimos una sombra para un efecto de "elevación" y profundidad */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

    /* Traemos la tarjeta al frente para que no sea tapada por sus vecinas */
    z-index: 10;
}

/*fin del agrandammiento de los cards*/

.btn-icon-1rem-width {
    width: 1rem;
}

.btn-padding {
    padding: 1px 6px !important;
}