/* Tienda "categoria" ([novuskills_quiz_storefront]): muestra solo el curso recomendado por el quiz
   + el resto de programas de su misma categoria. Reusa integramente .nvs-store/.nvs-product/
   .nvs-check/.nvs-summary-card/.nvs-payment-card de novuskills-mini-store.css (mismo JS, mismo
   carrito, mismo descuento, mismo checkout) -- este archivo solo redisena la columna izquierda
   (.nvs-qsf-*), que en el diseño de referencia es distinta a la tienda-acordeon de siempre.
   Selectores compuestos con mas especificidad que el ".nvs-product"/".nvs-check" de base para poder
   pisar sus reglas sin necesitar !important. */

/* Seccion "Also in your cart" (ver syncOtherCategoriesSection() en novuskills-mini-store.js): solo se
   destapa si el carrito ya tenia cursos de OTRA categoria. Cuando esta activa, la card de bundle ya no
   aplica (la promesa de "categoria completa con descuento" se rompe si hay otra categoria de por
   medio), asi que se oculta -- nvs-qsf-other-active la agrega el JS al .nvs-store raiz. */
.nvs-store.nvs-qsf-other-active .nvs-qsf-bundle-card,
.nvs-store.nvs-qsf-other-active .nvs-qsf-divider {
    display: none !important;
}

.nvs-qsf-other-categories-title {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--nvs-text, #050505);
    margin: 20px 0 12px;
}

/* Cada categoria de "Also in your cart"/"Your cart" es su propio .nvs-course-group (uno por
   categoria real -- no hay un solo grupo compartido), y ese wrapper no traia separacion propia entre
   si: sin este gap, dos cursos de categorias DISTINTAS quedaban pegados uno contra el otro (el
   gap:14px de .nvs-group-panel en novuskills-mini-store.css solo separa cursos DENTRO de la misma
   categoria). */
.nvs-qsf-other-categories {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* El display:flex de arriba es un estilo de autor y le gana al display:none por defecto del
   user-agent para [hidden] (sin importar especificidad/orden) -- sin esto, el titulo "Also in your
   cart"/"Your cart" quedaba visible aunque la seccion no tuviera ningun curso que mostrar (mismo
   motivo que .nvs-course-group[hidden]/.nvs-product[hidden] en novuskills-mini-store.css). */
.nvs-qsf-other-categories[hidden] {
    display: none !important;
}

/* Los cursos de otra categoria usan el .nvs-product/.nvs-check de siempre (novuskills-mini-store.css),
   sin las clases nvs-qsf-* del rediseño -- es literalmente "el diseño de la otra tienda", a proposito.
   Unica excepcion: .nvs-qsf .nvs-check (mas abajo en este archivo) repinta CUALQUIER checkbox de esta
   pagina con el cuadrado nuevo -- se restaura el look redondo de siempre solo dentro de esta seccion,
   con selector mas especifico para ganarle. */
.nvs-qsf .nvs-qsf-other-categories .nvs-check {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 4px !important;
    border: 2px solid #dde4e8 !important;
    background: #ffffff !important;
}
.nvs-qsf .nvs-qsf-other-categories .nvs-product.is-selected .nvs-check {
    border-color: var(--nvs-selected-border, #2454ff) !important;
    background: var(--nvs-selected-border, #2454ff) !important;
}
.nvs-qsf .nvs-qsf-other-categories .nvs-product.is-selected .nvs-check::after {
    content: "";
    position: static;
    width: 10px;
    height: 6px;
    border: none;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.nvs-qsf-empty {
    background: #fff;
    border-radius: var(--nvs-card-radius, 15px);
    padding: 40px 28px;
    text-align: center;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    color: var(--nvs-text, #050505);
}
.nvs-qsf-empty-cta {
    display: inline-flex;
    margin-top: 16px;
    padding: 14px 26px;
    border-radius: 8px;
    background: var(--nvs-blue, #0f43ff);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.nvs-qsf-cart-card {
    padding: 32px 30px 36px;
}

/* Mismo look de "bloqueado" que .nvs-store.is-payment-step aplica a .nvs-products-card en la tienda
   de siempre (novuskills-mini-store.css) -- ahi solo esta scopeado a esa clase, asi que hace falta
   repetirlo para .nvs-qsf-cart-card. */
.nvs-store.is-payment-step .nvs-qsf-cart-card {
    pointer-events: none !important;
    user-select: none !important;
    opacity: .68;
    filter: blur(1.15px);
    transform: scale(.998);
    transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.nvs-store.is-payment-step .nvs-qsf-cart-card * {
    cursor: not-allowed !important;
}

.nvs-qsf-cart-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
.nvs-qsf-cart-header h3 {
    margin: 0;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--nvs-text, #050505);
}

.nvs-qsf-category {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--nvs-border, #e5e8ec);
}
.nvs-qsf-category-name {
    flex: 1 1 auto;
    font-family: "Special Gothic Expanded One", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--nvs-text, #050505);
}
.nvs-qsf-category-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-right: 2px solid var(--nvs-muted, #9aa7b4);
    border-bottom: 2px solid var(--nvs-muted, #9aa7b4);
    transform: rotate(-135deg);
    margin-top: 4px;
}

/* Cards de curso: version simplificada del .nvs-product de la tienda de siempre (sin precio, radio
   mas grande, fondo celeste claro incluso sin seleccionar, borde azul + fondo mas intenso cuando
   esta seleccionado). */
.nvs-qsf .nvs-product.nvs-qsf-product {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 0;
    border: 2px solid transparent;
    border-radius: 18px;
    background: #f7f8fa;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.nvs-qsf .nvs-product.nvs-qsf-product:hover {
    border-color: rgba(36, 84, 255, .30);
}
.nvs-qsf .nvs-product.nvs-qsf-product.is-selected {
    background: var(--nvs-selected-bg, #eef7ff);
    border-color: var(--nvs-selected-border, #2454ff);
}
.nvs-qsf .nvs-product.nvs-qsf-primary {
    margin-bottom: 20px;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-product-icon {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    overflow: visible;
    flex: 0 0 auto;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-product-content {
    flex: 1 1 auto;
    min-width: 0;
}
.nvs-qsf .nvs-product.nvs-qsf-product h4 {
    margin: 0 0 6px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.12;
    font-weight: 800;
    color: #050505;
}
.nvs-qsf .nvs-product.nvs-qsf-product p {
    margin: 0 0 10px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    color: #8fa5b4;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #8da4b1;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-meta img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.nvs-qsf .nvs-product.nvs-qsf-product .nvs-product-price {
    display: none;
}

/* Checkbox: cuadrado con tilde blanco cuando esta seleccionado (misma logica .is-selected que la
   tienda de siempre, solo redisenado). !important en las medidas/bordes porque .nvs-check de base
   (novuskills-mini-store.css) ya las define con !important (era para pisar el checkbox nativo del
   navegador), asi que sin !important acá tambien no se nota el cambio. */
.nvs-qsf .nvs-check {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    flex: 0 0 auto;
    border: 2px solid var(--nvs-selected-border, #2454ff) !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer;
    position: relative;
}
.nvs-qsf .nvs-product.is-selected .nvs-check {
    background: var(--nvs-blue, #0f43ff) !important;
    border-color: var(--nvs-blue, #0f43ff) !important;
}
/* Centrado con top/left 50% + translate(-50%,-50%) en vez de calcular pixeles fijos a mano (eso
   asumia un tamano exacto de caja que terminaba mal apenas algo no coincidia). Con esto el tilde
   queda centrado sin importar el tamano real de .nvs-check. */
.nvs-qsf .nvs-product.is-selected .nvs-check::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.nvs-qsf-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    color: var(--nvs-muted, #8592a3);
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px;
}
.nvs-qsf-divider::before,
.nvs-qsf-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--nvs-border, #e5e8ec);
}

/* Card de "{Categoria} Bundle": icono + titulo arriba, dos pastillas (Best value / Money back
   guarantee), precio grande, precio original tachado, texto, boton "Get bundle" abajo a la derecha.
   Ese boton ademas lleva la clase .nvs-group-select-all (el "Select all"/"Clear all" de siempre, ver
   novuskills-mini-store.css): el toggle de texto segun .is-all-selected ya viene de esa clase base,
   aca solo se pisa el look (pastilla blanca en vez de link subrayado). */
/* Esta card ademas lleva la clase .nvs-group-head (la necesita el JS para encontrar el
   .nvs-group-select-all de adentro), pero esa clase ya trae un monton de !important pensados para
   el header del acordeon de la tienda vieja (display:flex, background:transparent, padding:0,
   border:0, min-height, etc. -- ver .nvs-group-head en novuskills-mini-store.css). Hay que pisar
   cada uno de esos con !important propio o la card queda sin fondo/padding/borde. */
.nvs-qsf-bundle-card {
    position: relative;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px 30px 26px !important;
    margin: 0 0 22px !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(150deg, #0a1660, #0f43ff 120%) !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff;
    cursor: default;
    overflow: hidden;
}
.nvs-qsf-bundle-tag {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 32px;
    height: 32px;
}
.nvs-qsf-bundle-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
/* El icono es la imagen de la categoria (_nvs_group_image_id, la misma que arriba en
   .nvs-qsf-category-image). La imagen ya trae su propio fondo degradado/glow/borde diseñado (igual
   que los iconos de curso en el resto del sitio), asi que va directo sin ningun marco de CSS
   encima -- el degradado/borde/glow de aca abajo (.nvs-qsf-bundle-icon-fallback) es solo un respaldo
   por si la categoria todavia no tiene imagen cargada. */
.nvs-qsf-bundle-icon {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border-radius: 18px;
    object-fit: contain;
}
.nvs-qsf-bundle-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #3b6bff, #11bceb);
    box-shadow: 0 0 34px 6px rgba(80, 170, 255, 0.55);
    font-size: 22px;
    box-sizing: border-box;
}
/* color:#fff explicito: el blanco heredado de .nvs-qsf-bundle-card no alcanza porque el h4 del tema
   trae su propio color (negro) con una regla que le pega directo al tag, y una regla propia (aunque
   generica) siempre le gana a un valor heredado. */
.nvs-qsf-bundle-top h4 {
    margin: 0;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-transform: none;
    max-width: 75%;
}
.nvs-qsf-bundle-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.nvs-qsf-bundle-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 14px;
    font-weight: 600;
}
.nvs-qsf-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: var(--nvs-blue, #0f43ff);
    font-size: 11px;
}
.nvs-qsf-bundle-price {
    line-height: 1;
}
.nvs-qsf-bundle-price strong {
    font-size: 38px;
    font-weight: 800;
}
.nvs-qsf-bundle-price strong sup {
    font-size: 15px;
    font-weight: 700;
    margin-left: 4px;
}
.nvs-qsf-bundle-original {
    margin: 4px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
}
.nvs-qsf-bundle-original sup {
    font-size: 11px;
}
.nvs-qsf-bundle-copy {
    margin: 0 0 20px;
    max-width: 68%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
}
.nvs-qsf-bundle-cta {
    position: absolute !important;
    right: 30px !important;
    bottom: 26px !important;
    left: auto !important;
    top: auto !important;
    padding: 14px 26px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    opacity: 1 !important;
    color: var(--nvs-blue, #0f43ff) !important;
    font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    cursor: pointer;
}

.nvs-qsf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.nvs-qsf-grid .nvs-qsf-product {
    flex-direction: column;
    align-items: flex-start;
}
.nvs-qsf-grid .nvs-qsf-product .nvs-check {
    position: absolute;
    top: 18px;
    right: 18px;
}
.nvs-qsf-grid .nvs-product {
    position: relative;
}

@media (max-width: 900px) {
    .nvs-qsf-grid {
        grid-template-columns: 1fr;
    }
    .nvs-qsf-bundle-copy {
        max-width: 100%;
    }
    /* !important porque la regla base de .nvs-qsf-bundle-cta tambien usa !important (hacia falta
       para pisar .nvs-group-head, ver mas arriba) -- sin !important aca, position:absolute seguia
       ganando y el boton quedaba flotando ENCIMA del texto de la descripcion en vez de empujarlo. */
    .nvs-qsf-bundle-cta {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 640px) {
    .nvs-qsf-cart-card {
        padding: 24px 18px 28px;
    }
    .nvs-qsf-cart-header h3 {
        font-size: 21px;
    }
    .nvs-qsf-category-name {
        font-size: 21px;
    }
}

@media (max-width: 560px) {
    .nvs-qsf .nvs-product.nvs-qsf-product {
        flex-wrap: wrap;
    }
}