@media screen and (max-width: 1701px) { 
    header .buttons-menu .nav-link:not(.btn-dark) {
        margin-left: 0.75rem
    }
    
    header .nav-link:not(.btn-dark) {
        padding-left: 0.75rem;
        padding-right: 0.75rem
    }
}

@media screen and (max-width: 1600px) { 
    
    header .buttons-menu .nav-link:not(.btn-dark) span:not(.top-cart-number),
    header .buttons-menu .nav-link.btn-dark {

    }
    
    .footer-details .item-holder {
        font-size: 1rem
    }

}

@media screen and (max-width: 1301px) { 
    .efficiency span {
        flex: 0 0 auto;
        padding: 0.15rem
    }
    
        
    header .nav-link:not(.btn-dark) {
        padding-left: 0.5rem;
        padding-right: 0.5rem
    }
    
    .top-bar .nav .nav-link img {
        margin-right: 0.5rem;
        width: 1.75rem
    }
    
    .top-bar .nav .nav-link {
        font-size: 1rem
    }
}

@media screen and (max-width: 1100px) { 
    header .main-menu,
    header .social-menu,
    header .buttons-menu .nav-item .nav-link {
        display: none !important
    }
    
    header .buttons-menu .nav-item .nav-link.btn-account {
        display: flex !important;
        padding-top: 0;
        padding-bottom: 0.15rem
    }
    
    header .buttons-menu .nav-item .nav-link.btn-account span {
        display: none
    }
    
    header .buttons-menu .nav-item .nav-link.btn-account i {
        font-size: 1.25rem;
        margin-right: 0 !important
    }
    
    .footer-details .item-holder {
        font-size: 0.9rem
    }
    
    header .buttons-menu .nav-item .nav-link.btn-cart,
    header .buttons-menu .nav-item .nav-link.side-panel-trigger{
        display: block !important
    }
    
    header .buttons-menu .nav-item .nav-link.btn-cart i,
    header .buttons-menu .nav-item .nav-link.side-panel-trigger i{
        font-size: 1.25rem;
        line-height: 1
    }
}

@media screen and (max-width: 993px) { 
    .btn,
    .pseudo-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .btn.btn-sm,
    .pseudo-btn.btn-sm{
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .extra-padding {
        padding-left: 0;
        padding-right: 0
    }
    
    header > .navbar .container-fluid {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
    
    .app-results-holder .points-results .result {
        margin-bottom: 1rem
    }
    
    .question-answers {
        margin-bottom: 1rem
    }
    
    .media-holder video {
        background-size: 5rem 5rem;     
    }
    
    .app-results-holder .buttons .btn {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        max-width: 25rem;
    }
    
    .top-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 999;
    }
    
    .top-bar .container-xxl {
        padding: 0
    }
    
    .top-bar .nav .nav-link {
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .top-bar .nav .nav-link img {
        margin-right: 0;
        width: 1.5rem
    }
    
    .atributes-list .item {
        justify-content: center;
        flex-direction: column;
        align-items: center
    }
    
    .atributes-list .item {
        margin-bottom: 2rem
    }
    
    .atributes-list .item span {
        text-align: center;
        padding-left: 0;
        padding-top: 0.5rem
    }
    
    .text-section .content-holder, 
    .text-section .img-holder {
        padding: 1.5rem 5%
    }
    
    .hero .hero-wrapper {
        padding-bottom: 0
    }
    
    .text-section .bg-holder {
        position: relative;
        width: 100%;
        height: 60vw
    }
    
    .footer-details > ul,
    .footer-bottom .list-unstyled {
        flex-direction: column;
    }
    
    .footer-details > ul > li,
    .footer-bottom .list-unstyled li {
        margin-bottom: 1rem
    }
    
    .footer-details > ul > li:last-of-type,
    .footer-bottom .list-unstyled li:last-of-type {
        margin-bottom: 0
    }
    
    .footer-details .item-holder {
        font-size: 1.125rem
    }
    
    .app-settings-holder ul li button {
        min-width: 4rem;
    }
    
    .product-holder .details-holder .title,
    .product-holder .details-holder .price {
        font-size: 1rem;
    }
    
    .product-holder {
        padding-bottom: 1rem
    }
    
    .hero .hero-wrapper {
        min-height: 600px
    }
    
    .main-content {
        padding-top: 2rem;
        padding-bottom: 2rem
    }
    
    .blog-post-bottom {
        margin-bottom: -2rem
    }
    
    .product-gallery-holder,
    .product-details-holder {
        padding-left: 0;
        padding-right: 0
    }
    
    .product-gallery-holder {
        padding-bottom:  2rem
    }
    
    .checklist.x2,
    .iconlist.x2 {
        font-size: 1rem;
    }
    
    .related-products {
        padding-top: 2rem
    }
    
    .default-carousel .owl-nav .owl-prev, .default-carousel .owl-nav .owl-next, .default-carousel .owl-nav .owl-prev:hover, .default-carousel .owl-nav .owl-next:hover {
        font-size: 1.25rem;
        width: 2rem;
        height: 2rem;
    }
    
    .default-carousel {
        padding-left: 3rem;
        padding-right: 3rem
    }
    
    .default-carousel .owl-nav .owl-prev, .default-carousel .owl-nav .owl-prev:hover {
        left: -3rem !important;
    }

    .default-carousel .owl-nav .owl-next, .default-carousel .owl-nav .owl-next:hover {
        right: -3rem !important;
    }
    
    .plans-holder {
        padding-top: 0rem
    }

    .single-plan .badge {
        position: relative;
        width: 100%
    }
    
    .single-plan {
        margin-bottom: 2rem
    }
    
    .atributes-holder {
        padding-top: 2rem
    }

    .form-control, .custom-select {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
      
    .order-summary-holder {
        padding-left: 0;
        padding-top: 2rem
    }
    
    .account-tab-content {
        padding-left: 0
    }
    
    .account-nav-holder {
        margin-bottom: 2rem
    }
    
    .contact-bottom,
    .contact-top {
        padding-top: 2rem;
        padding-bottom: 2rem
    }
    
    .footer-bottom {
        padding-bottom: 6.5rem
    }
    
    .login-baner {
        position: relative;
        width: 100%;
        padding: 0
    }
    
    .user-data-form.login-margin {
        margin-top:0
    }

}

@media screen and (max-width: 769px) { 
    .btn,
    .pseudo-btn {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
    
    .btn.btn-sm, 
    .pseudo-btn.btn-sm {
        padding: 0.35rem 0.75rem;
        font-size: 0.625rem
    }
    
    .question-content {
        padding: 0.5rem
    }
    
    .btn.btn-xs {
        padding: 0.25rem 0.75rem;
    }
    
    .pseudo-btn.with-buttons {
        padding: 0.3rem
    }
    
    header .buttons-menu .btn {
        display: none
    }
    
    .app-settings-holder ul li button {
        min-width: 3rem;
    }
    
    .hero .app-settings-holder ul li button {
        font-size: 0.75rem;
    }
    
    .app-results-holder .points-results .result {
        padding: 1rem
    }
    
    .question-answers .single-choice ul li button span {
        width: 3rem
    }
    
    .question-content {
        font-size: 0.8rem
    }
    
    .media-holder video {
        background-size: 3rem 3rem;     
    }
    
    .app-results-holder .results {
        margin-bottom: 0
    }
    
    .app-results-holder .buttons {
        padding-top: 1rem
    }
    
    .app-results-holder h2 {
        margin-bottom: 1rem
    }
    
    .app-settings-holder ul li {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        padding-bottom: 0.75rem
    }
    
    .hero .hero-wrapper {
        padding-top: 2rem
    }
    
    .hero .hero-wrapper .app-start-holder {
        margin-bottom: 2rem
    }
    
    .single-plan .content {
        font-size: 1rem
    }
    
    .single-plan .badge {
        font-size: 1.25rem
    }
    
    .account-header .plan-info-holder {
        flex-direction: column;
        align-items: flex-end
    }
    
    .account-header .plan-info-holder .plan-info {
        margin-right: 0
    }
    
    .account-header .plan-info-holder .btn {
        margin-top: 0.5rem
    }
    
        
    .blog-item-holder .content .img {
        height: 300px;
        min-height: 0
    }
    
    .question-answers .single-choice ul li button {
        padding-left: 4rem
    }
    
    
}

@media screen and (max-width: 577px) { 
    #side-panel {
        width: 100%;
        right: -100%;
    }
    
    header .logo {
        width: 10rem
    }
    
    header .nav i, #side-panel .nav i {
        font-size: 1rem
    }
    
    header .side-panel-trigger {
        margin-left: 0
    }
    
    .app-start-holder .buttons .btn {
        width: 100%;
    }
    
    .hero .hero-wrapper .app-start-holder .buttons button {
        margin-left: 0;
        margin-right: 0
    }
    
    .app-results-holder .results {
        font-size: 0.8rem
    }
    
    .hero .hero-wrapper .hero-atributes .item span {
        font-size: 0.8rem
    }
    
    .footer-bottom {
        padding-left: 0;
        padding-right: 0
    }
    
    .text-section .content-holder, 
    .text-section .img-holder {
        padding-left: 0;
        padding-right: 0
    }
    
    .top-bar {
        padding: 0
    }
    
    .top-bar .nav .nav-link {
        font-size: 0.525rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-weight: 500
    }
    
    .top-bar .nav .nav-link img {
        width: 1.25rem
    }
    
    .form-control, .custom-select {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
    
        
    .order-products-list .product .img {
        flex-basis: 2rem
    }
    
    .order-summary-holder ul li {
        font-size: 1rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem
    }
    
    .order-products-list .product .price {
        padding-left: 0.5rem;
        padding-right: 0.5rem
    }
    
    .order-products-list .product .title a {
        font-size: 0.75em;
        line-height: 0.7
    }
    
    .login-baner .inner {
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 2rem;
        padding-right: 2rem
    }
    
    .login-baner .inner h4 {
        flex-basis: 100%;
        padding-bottom: 1rem;
        text-align: center;

    }
    
    .login-baner .inner .btn {
        margin-left: 0
    }
    
    .user-data-form fieldset {
        margin-bottom: 0.5rem
    }
    
    .account-header {
        padding-top: 1rem;
        padding-bttom: 1rem
    }
    
    .account-header,
    .account-header .plan-info-holder {
        display: block
    }
    
    .account-header .plan-info-holder .plan-info {
        text-align: left;
        margin-top: 1rem
    }
    
    .account-header .plan-info-holder .plan-info .name,
    .account-header .plan-info-holder .plan-info .expire {
        display: inline-block
    }
    
    .account-header .user-info-holder i {
        font-size: 2rem
    }
    
    .account-header .user-info-holder .name {
        font-size: 1rem
    }
   
    
    .account-header span,
    .account-header .user-info-holder .account-type {
        font-size: 0.825rem
    }
    
    .account-header .plan-info-holder .btn {
        width: 100%
    }
    
    .order-history-list li .item .details {
        display: none
    }
    
    .order-history-list li .item .date {
        padding: 0
    }
    
            
    .blog-item-holder .content .img {
        height: 200px;
    }
    
    .product-gallery-holder {
        padding-bottom: 0;
    }
    
    .list-circles li {
        width: 15rem;
        height: 15rem;
    }
    
    .footer-bottom {
        padding-bottom: 3.5rem;
        padding-top: 0.5rem
    }
    
    
    .app-page body footer .footer-bottom {
        padding-bottom: 0.5rem
    }

    
    .footer-details > ul > li, .footer-bottom .list-unstyled li {
        margin-bottom: 0.25rem;
        font-size: 0.6rem
    }
    
}
/* ==========================================================================
   AJUSTES DE MÓVIL
   --------------------------------------------------------------------------
   El escritorio se queda como estaba: todo va dentro de media queries de
   ≤991px, ≤767px y ≤575px. Se añade al final de responsive.css (la última hoja
   que carga la plantilla) y con el mismo prefijo `body:not(.app-page)` que usa
   app.css, porque si no, las reglas de allí ganan por especificidad.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Cabecera: que quepa TODO y que la hamburguesa se pueda pulsar.
   A 320-390px los botones ocupaban 250px y la hamburguesa terminaba en
   x=367..430: con el centro fuera de la pantalla, el menú lateral (Sklep,
   Poradniki, Kontakt, cerrar sesión) era inalcanzable desde el móvil.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    body:not(.app-page) header > .navbar > .container-fluid {
        gap: 0.35rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* El logo se quedaba en 8rem aquí y en 6.25rem por debajo de 575px, así que
       ENCOGÍA al agrandar la pantalla y en el móvil se veía muy pequeño: el SVG
       mide 234x32, así que a 125px las letras salen de 17px de alto.
       Ahora una sola regla: crece con la pantalla y se queda con lo que sobra
       después de los botones (medido: la botonera ocupa 146px y el contenedor
       deja unos 24px de márgenes). El tope de 11rem es el mismo que en
       escritorio, y el calc impide que en pantallas de 320px la hamburguesa se
       salga de la pantalla, que es el problema que se arregló aquí en su día. */
    body:not(.app-page) header .logo {
        width: min(11rem, calc(100vw - 9rem)) !important;
        max-width: min(11rem, calc(100vw - 9rem)) !important;
        flex: 0 0 auto !important;
    }
    body:not(.app-page) header .logo img { width: 100% !important; height: auto; }

    body:not(.app-page) header .buttons-menu {
        width: auto !important;
        flex-wrap: nowrap !important;
        margin-left: auto !important;
        gap: 0.25rem !important;
    }
    body:not(.app-page) header .buttons-menu .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Botones de la cabecera: 44x44 como mínimo, para el dedo */
    body:not(.app-page) header .buttons-menu .nav-link {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.6rem !important;
        margin-left: 0 !important;
    }
    body:not(.app-page) header .btn-account span { display: none !important; }
    body:not(.app-page) header .nav-link i { font-size: 1.25rem; line-height: 1; }
}

@media screen and (max-width: 575px) {
    /* El tamaño del logo ya lo fija la regla fluida de arriba (≤991px): aquí solo
       se aprieta el padding de los botones para dejarle sitio. */
    body:not(.app-page) header .buttons-menu .nav-link { padding: 0.45rem 0.5rem !important; }
}

/* --------------------------------------------------------------------------
   2) La barra fija de abajo (`.top-bar`) tapaba el final de la página: se
   reserva su altura con un espaciador que sólo existe si la barra se pinta
   (ver templates/website/_layout/sections/top_bar.html.twig).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 993px) {
    .top-bar-spacer { display: block; height: 4.5rem; }

    body:not(.app-page) .top-bar {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }
}

/* --------------------------------------------------------------------------
   3) "Menu konta" (el desplegable del panel en móvil): medía 27px y parecía
   texto suelto. Ahora es un botón claro de 48px, con estado abierto.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .account-nav-toggle {
        min-height: 48px;
        padding: 0.75rem 1rem;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
        background: #fff;
        font-weight: 700;
        text-align: left;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .account-nav-toggle[aria-expanded="true"],
    .account-nav-toggle:not(.collapsed) {
        border-color: #1C94F5;
        color: #0a7fd6;
        background: #F5FAFF;
    }
}

/* --------------------------------------------------------------------------
   4) Botones y campos: en pantalla táctil, 44px de alto como mínimo. Salían de
   35px ("Szczegóły", "Edytuj", "Wiadomości", "Karta kursanta"…).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    a.btn,
    button.btn,
    .pseudo-btn,
    .btn.btn-sm,
    .btn.btn-xs {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .form-control,
    select.form-control,
    .form-select { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   5) Pantalla de inicio del test (el corazón del producto): las 12 categorías
   eran 12 botones apilados (807px de alto). En móvil, dos columnas.
   Va con `#test` delante porque en esa página hay reglas con ID
   (`#test ul.list-unstyled`) que si no ganan por especificidad.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    #test .app-start-holder h2 { font-size: 1.05rem; }

    #test .app-start-holder ul.categories-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        justify-content: stretch !important;
    }
    #test .app-start-holder ul.categories-list > li {
        width: 100%;
        margin: 0;
    }
    #test .app-start-holder ul.categories-list > li > .btn {
        width: 100% !important;
        min-height: 48px;
        padding: 0.55rem 0.4rem;
        font-size: 0.8rem;
        line-height: 1.25;
        white-space: normal;
        border-radius: 12px;
    }

    /* Puntos (1/2/3) y orden (Po kolei / Losowo): a lo ancho, en fila */
    #test .app-start-holder ul.points-list > li,
    #test .app-start-holder ul.mode-list > li { flex: 1 1 0; min-width: 0; }
    #test .app-start-holder ul.points-list > li > .btn,
    #test .app-start-holder ul.mode-list > li > .btn { width: 100% !important; min-height: 48px; }

    #test .app-start-holder > .buttons .btn {
        width: 100%;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
}
/* --------------------------------------------------------------------------
   6) La franja "comparte tu progreso con tu instructor" del test era `sticky`
   y en móvil se quedaban 203px pegados arriba. En pantallas pequeñas se queda
   en su sitio, como un bloque normal.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .test-share-bar {
        position: static;
        padding: 0.85rem;
    }
    .test-share-bar .test-share-text,
    .test-share-bar .test-share-actions { flex: 1 1 100%; min-width: 0; }
    .test-share-bar .test-share-actions { justify-content: stretch; }
    .test-share-bar .test-share-input { max-width: none; }
}
/* Tablet (768-991px): la pantalla de inicio del test tenía las 12 categorías
   apiladas en 903px. En tres columnas se queda en la mitad. El escritorio
   (≥992px) no se toca. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #test .app-start-holder ul.categories-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }
    #test .app-start-holder ul.categories-list > li { width: 100%; margin: 0; }
    #test .app-start-holder ul.categories-list > li > .btn {
        width: 100% !important;
        min-height: 52px;
        font-size: 0.875rem;
        white-space: normal;
    }
}
/* --------------------------------------------------------------------------
   7) Iconos y enlaces sueltos: área táctil mínima de 44px.
   Salían de 30-43px: la cruz de cerrar del panel lateral, los iconos de redes
   del panel, la cruz del modal del marketplace, la miga de pan y el logo.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    body:not(.app-page) header .logo,
    #side-panel .nav-link,
    #side-panel .side-panel-trigger a,
    .ip-breadcrumb a,
    .ip-modal-close {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #side-panel .social-menu .nav-link,
    #side-panel .side-panel-trigger a,
    .ip-modal-close { min-width: 44px; }

    /* La miga de pan, a lo ancho y sin apretar */
    .ip-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.25rem; }
}
/* --------------------------------------------------------------------------
   8) Flechas de los carruseles (TikTok, opiniones) y enlaces del panel
   lateral: 40x40 y 43px. A 44px en pantallas táctiles.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next,
    .default-carousel .owl-nav button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #side-panel .nav.flex-column .nav-link { min-width: 44px; min-height: 44px; }
}
/* --------------------------------------------------------------------------
   9) Enlaces del pie: medían 34px de alto. En táctil, 44px.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .footer-details a,
    .footer-details .nav-link,
    .footer-bottom a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .footer-details ul.list-unstyled,
    .footer-bottom ul.list-unstyled { margin-bottom: 0; }

    .footer-details .social-menu { display: flex; flex-wrap: wrap; gap: 0.25rem; }
}
@media screen and (max-width: 991px) {
    /* Último detalle: los iconos sociales del pie medían 40px de ancho. */
    .footer-details .social-menu .nav-link {
        min-width: 44px;
        justify-content: center;
    }
}
/* --------------------------------------------------------------------------
   10) Últimos detalles táctiles detectados en la auditoría:
   - el ojo de "mostrar contraseña" (32x28) y los botones sociales del login
     (24x30),
   - "Odzyskaj hasło" (26px de alto),
   - el título y el botón "Zapowiedź" de las tarjetas de vídeo (37px),
   - los puntos del carrusel (8x8), que se quedan visualmente igual pero con
     una zona táctil de 24px: el fondo sólo pinta la caja de contenido.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .toggle-password,
    .social-btn,
    .login-form .social-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .forgot-password-link,
    .login-form .forgot-password-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .my-video-title a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .my-video-preview,
    .my-video-actions .btn,
    .my-video-actions button {
        min-height: 44px;
    }

    /* El punto sigue midiendo 8px, pero se pulsa en 24x24 */
    .carousel-dots { gap: 0.15rem; }
    .carousel-dots .carousel-dot {
        width: 24px !important;
        height: 24px !important;
        padding: 8px !important;
        border-radius: 999px;
        background-clip: content-box !important;
    }
    .carousel-dots .carousel-dot.is-active { width: 32px !important; }
}
/* --------------------------------------------------------------------------
   11) Puntos del carrusel: el punto se dibuja con `::after` y el botón mide
   44x44, así se ve igual pero se pulsa sin apuntar.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .carousel-dots { gap: 0 !important; }

    .carousel-dots .carousel-dot,
    .carousel-dots .carousel-dot.is-active {
        position: relative;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0;
    }

    .carousel-dots .carousel-dot::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #CBD5E1;
        transition: width 0.2s, background 0.2s;
    }

    .carousel-dots .carousel-dot.is-active::after {
        width: 20px;
        border-radius: 999px;
        background: #1C94F5;
    }
}
/* --------------------------------------------------------------------------
   12) La cruz del modal del perfil de instructor: su hoja
   (instructor-public.css) carga después de esta, así que se fuerza.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    body .ip-modal-close {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}
/* ==========================================================================
   PIE DE PÁGINA
   --------------------------------------------------------------------------
   Problemas que había:

   · El logo de la marca medía 500x70 en un móvil de 390: se salía de la
     pantalla y, como estiraba la fila, descuadraba TODO lo demás (la línea
     legal quedaba centrada en 515px, no en la pantalla, y se cortaba).
   · El logo de Tpay se quedaba en 50px de alto y en el móvil pesaba más que
     la marca; el de SeoGrow igual.
   · Entre 992 y 1199px el logo (500) y Tpay (226) dejaban la línea legal en
     208px: partía en tres renglones y los puntos «·» quedaban colgando.
   · El bloque de contacto (email, teléfono, redes, "Bezpieczne płatności")
     salía a la izquierda mientras las redes salían centradas.
   · El hueco de la barra fija de abajo estaba ANTES del pie, así que el pie
     quedaba tapado (ahora va después, en base.html.twig).
   ========================================================================== */

/* --- 1) Los logos, a un tamaño que quepa siempre --- */
.footer-logo {
    height: auto;
    max-height: 2.25rem;      /* 36px → ~258px de ancho, cabe en 320 */
    width: auto;
    max-width: 100%;
}

.footer-tpay img {
    height: auto;
    max-height: 1.75rem;
    width: auto;
    max-width: 100%;
}

/* El logo de SeoGrow ya no se toca aquí: su alto está en app.css, calculado para
   que su nombre se lea del mismo tamaño que «Designed by» (ver el comentario de
   .footer-credit-logo img). Estos dos límites (1.15rem y 1.4rem) lo dejaban en
   23px, por debajo del texto, y descuadraban la línea base. */

@media screen and (min-width: 576px) {
    .footer-logo { max-height: 2.75rem; }
    .footer-tpay img { max-height: 2rem; }
}

@media screen and (min-width: 992px) {
    .footer-tpay img { max-height: 2.5rem; }
}

@media screen and (min-width: 1200px) {
    .footer-logo { max-height: 3.5rem; }
}

/* --- 2) Hasta 1199px: apilado y todo centrado ---
   Es lo que evita que la línea legal quede aplastada entre los dos logos. */
@media screen and (max-width: 1199.98px) {
    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.1rem;
    }
    .footer-brand { order: 1; }
    .footer-tpay { order: 2; }
    .footer-center { order: 3; width: 100%; flex: 0 0 auto; }
    .footer-line { justify-content: center; }
}

/* --- 3) En el móvil, la línea legal en columna y sin puntos sueltos --- */
@media screen and (max-width: 575.98px) {
    .footer-main { padding: 1.5rem 0 1.25rem; }
    .footer-line {
        flex-direction: column;
        gap: 0.35rem;
        font-size: 0.8125rem;
        letter-spacing: 0;
    }
    .footer-dot { display: none; }
    .footer-bottom { padding: 1rem 0; }
    .footer-credit { gap: 0.4rem; }
}

/* --- 4) Bloque de contacto (email, teléfono, redes): alineado con el resto --- */
@media screen and (max-width: 1199.98px) {
    .footer-details {
        padding: 1.75rem 0;
        font-size: 1rem;
    }

    .footer-details > ul {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
    }

    .footer-details > ul > li { width: 100%; }

    .footer-details .item-holder {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
        text-align: center;
    }

    .footer-details .social-menu { justify-content: center; }
}
/* La caja del email/teléfono/redes tiene que ocupar todo el ancho: si no,
   `justify-content: center` centra dentro de una caja estrecha y el grupo
   (etiqueta + iconos) queda descuadrado respecto al resto del pie. */
@media screen and (max-width: 1199.98px) {
    .footer-details .item-holder { width: 100%; }
}
/* En tablet (576-1199px) los cuatro datos del pie caben en una o dos filas
   centradas; apilados en columna el pie se hacía larguísimo. */
@media screen and (min-width: 576px) and (max-width: 1199.98px) {
    .footer-details > ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 1.75rem;
    }

    .footer-details > ul > li { width: auto; }
    .footer-details .item-holder { width: auto; }
}
/* --------------------------------------------------------------------------
   Barra fija de abajo (los cuatro accesos del móvil)
   --------------------------------------------------------------------------
   Entre 576 y 900px se quedaba en 241px de alto: los accesos se apilaban (icono
   encima, texto debajo), el texto partía en dos líneas y la barra se comía un
   tercio de la pantalla. En cuanto hay ancho, los cuatro van en UNA fila con el
   icono al lado. En el móvil de verdad (≤575px) se quedan apilados, que es lo
   cómodo para el pulgar.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 576px) and (max-width: 993px) {
    body:not(.app-page) .top-bar .nav { flex-wrap: nowrap !important; }

    body:not(.app-page) .top-bar .nav .nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    body:not(.app-page) .top-bar .nav .nav-link {
        flex-direction: row !important;
        gap: 0.4rem;
        min-height: 48px;
        padding: 0.5rem 0.35rem !important;
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    body:not(.app-page) .top-bar .nav .nav-link img { width: 1.15rem !important; }
}

@media screen and (max-width: 575.98px) {
    body:not(.app-page) .top-bar .nav .nav-item { max-width: 25%; }
    body:not(.app-page) .top-bar .nav .nav-link {
        font-size: 0.72rem;
        line-height: 1.15;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

/* Altura de reserva antes de que el JS mida la barra de verdad */
@media screen and (max-width: 993px) {
    .top-bar-spacer { display: block; height: 5.5rem; }
}
/* ==========================================================================
   Test — la fila con Kategoria / Punktacja / Kolejność
   --------------------------------------------------------------------------
   Salían una debajo de otra porque una regla heredada de app.css

       #test ul.list-unstyled { flex-direction: column !important; }

   (pensada para la lista de RESPUESTAS) atrapa también esta fila: es un
   selector con ID, así que gana a `body ul.settings-buttons` por
   especificidad. Aquí se replica el `#test` para empatar y se gana por orden
   de carga (responsive.css es la última hoja).

   En escritorio los tres van en una línea; en el móvil de verdad, donde no
   caben, se apilan a ancho completo y bien alineados (texto a la izquierda,
   ZMIEŃ a la derecha), que es más limpio que tres píldoras de anchos distintos.
   ========================================================================== */
#test ul.settings-buttons,
#test ul.settings-buttons.list-unstyled {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
}

@media screen and (max-width: 575.98px) {
    #test ul.settings-buttons > li,
    #test ul.settings-buttons > li > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    #test ul.settings-buttons > li > div {
        justify-content: space-between !important;
    }
}
/* Las tres píldoras sumaban 937px y el panel mide 920: no cabían por 17px y se
   iban una debajo de otra. Se recorta el hueco que sobraba (el icono tenía
   margen Y el contenedor tenía gap, así que había doble separación) sin tocar
   el tamaño del texto. */
@media screen and (min-width: 576px) {
    #test ul.settings-buttons > li > div {
        gap: 0.45rem !important;
        padding: 0.45rem 0.85rem 0.45rem 1rem !important;
    }

    #test ul.settings-buttons > li > div .fa {
        margin-right: 0 !important;
    }

    #test ul.settings-buttons > li > div .btn-yellow {
        margin-left: 0.35rem !important;
        padding: 0.3rem 0.65rem !important;
    }
}
/* Y el segundo culpable, también de app.css:

       #test .single-choice li, #test ul.list-unstyled > li {
           display: block !important; width: 100% !important;
       }

   El primer selector es para la lista de RESPUESTAS (que sí van una debajo de
   otra), pero el segundo atrapa cualquier `ul.list-unstyled > li` de dentro del
   test — incluida esta fila. Con el ID por delante y `!important` ganaba a
   `body ul.settings-buttons > li`. Se replica el `#test` (misma especificidad)
   y se gana por orden: responsive.css carga después. */
#test ul.settings-buttons > li,
#test ul.settings-buttons > li.settings-button-item {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
}
/* En el móvil de verdad (≤575px) los tres no caben ni de dos en dos: se apilan a
   ancho completo, con el texto a la izquierda y ZMIEŃ a la derecha, que se ve
   ordenado. Va al final para ganar a la regla de arriba (misma especificidad). */
@media screen and (max-width: 575.98px) {
    #test ul.settings-buttons > li,
    #test ul.settings-buttons > li.settings-button-item,
    #test ul.settings-buttons > li > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    #test ul.settings-buttons > li > div {
        justify-content: space-between !important;
    }
}
/* ==========================================================================
   Test — la lista de resultados del resumen
   --------------------------------------------------------------------------
   El número salía pegado a su etiqueta («...kategoriach:2299») porque la misma
   regla heredada de app.css que ya rompió la fila de datos y la rejilla de
   categorías, aquí deshacía el `space-between` de `.results li`:

       #test ul.list-unstyled > li { display: block !important; width: 100% !important; }

   Se replica el `#test` (misma especificidad) y se gana por orden de carga.
   El `gap` deja un espacio real aunque la etiqueta sea muy larga.
   ========================================================================== */
#test ul.results > li,
#test ul.list-unstyled.results > li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* En el móvil, la etiqueta larga y el número pueden ir en dos líneas sin
   quedar pegados */
@media screen and (max-width: 575.98px) {
    #test ul.results > li {
        gap: 0.75rem !important;
        align-items: baseline !important;
    }
}
/* ==========================================================================
   Test — pantalla de inicio: las categorías, en CUADRÍCULA
   --------------------------------------------------------------------------
   Salían una debajo de otra por la regla heredada de app.css

       #test ul.list-unstyled { flex-direction: column !important; }

   (pensada para la lista de respuestas) que atrapa también esta lista: es un
   selector con ID, así que gana a las clases `d-flex flex-wrap` del componente.
   Se replica el `#test` y se gana por orden de carga; además se pasa a rejilla,
   que reparte mejor las categorías.
   ========================================================================== */
#test ul.categories-list,
#test ul.list-unstyled.categories-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) !important;
    gap: 0.6rem !important;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: center !important;
    list-style: none !important;
}

#test ul.categories-list > li {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#test ul.categories-list > li > button {
    width: 100% !important;
    min-height: 44px;
}

/* La puntuación y el orden también iban apilados: van en fila, con salto */
#test ul.points-list,
#test ul.mode-list,
#test ul.list-unstyled.points-list,
#test ul.list-unstyled.mode-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}
/* ==========================================================================
   Test — pantalla de inicio (elegir categoría / puntuación / orden)
   --------------------------------------------------------------------------
   Las opciones ya eran `flex-direction: row`, pero cada `<li>` ocupaba el 100%
   del ancho por la regla heredada de app.css

       #test .single-choice li, #test ul.list-unstyled > li {
           display: block !important; width: 100% !important;
       }

   (pensada para la lista de RESPUESTAS), así que salían una debajo de otra. Se
   replica el `#test` con la clase extra (más especificidad) y se gana seguro.

   De paso, las tres secciones pasan a ser tarjetas con su título y sus opciones
   como píldoras: la pantalla se lee de un vistazo y el botón de empezar destaca.
   ========================================================================== */
#test .app-settings-holder {
    max-width: 46rem;
    margin: 0 auto 1rem;
    padding: 1.25rem 1.25rem 1.35rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#test .app-settings-holder h2 {
    margin: 0 0 0.9rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a0a0a;
}

#test .app-settings-holder .small {
    margin-top: 0.75rem;
    color: #6B7280;
}

/* Puntuación y orden: en UNA fila (la regla heredada los apilaba) */
#test ul.points-list > li,
#test ul.mode-list > li,
#test ul.list-unstyled.points-list > li,
#test ul.list-unstyled.mode-list > li {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

#test ul.points-list > li > button,
#test ul.mode-list > li > button {
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
}

/* La opción elegida, en azul y con un poco de sombra */
#test ul.points-list > li > button.selected,
#test ul.mode-list > li > button.selected,
#test ul.categories-list > li > button.selected {
    background-color: #1C94F5 !important;
    border-color: #1C94F5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -4px rgba(28, 148, 245, 0.55);
}

/* Categorías: píldoras algo más cuadradas, que aguantan «A — motocykl» */
#test ul.categories-list > li > button {
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

/* El botón de empezar, protagonista claro */
#test .app-start-holder .buttons .btn {
    min-height: 52px;
    padding: 0.8rem 2.25rem;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
}
/* ==========================================================================
   NAVBAR EN UNA SOLA LINEA (992-1440 px)
   --------------------------------------------------------------------------
   Medido en el navegador: entre 992 y 1400 px de ancho la cabecera NO cabia en
   una linea. Las tres listas (main-menu, social-menu, buttons-menu) llevan
   flex-shrink:1 + flex-wrap:wrap, asi que el navegador las encogia unos pocos
   pixeles por debajo de su ancho real y sus items saltaban a una segunda fila:
     - 1440 px: cabecera 116 px, main-menu 1 fila (necesita 438,5 px, tiene 438)
     - 1400 px: cabecera 160 px, main-menu en 2 filas
     - 1244 px: cabecera 174 px; main-menu 2 filas, social 2 filas, botones 2 filas
   Por debajo de 1100 px el CSS ya cambia a menu lateral + hamburguesa, asi que
   quedaba una zona muerta entre 1100 y 1400 px.
   Arreglo: en esa franja se oculta el social-menu (los mismos enlaces siguen en
   el panel lateral y en el pie) y las dos listas que quedan no se encogen ni
   parten por dentro. A partir de 1440 px no cambia absolutamente nada.
   ========================================================================== */
@media (max-width: 1279.98px) and (min-width: 992px) {
    body:not(.app-page) header .social-menu {
        display: none !important;
    }
    body:not(.app-page) header .main-menu,
    body:not(.app-page) header .buttons-menu {
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }
}