/* Font Awesome desde CDN.
   El fichero local (/node_modules/fontawesome-free/css/all.css) carga pero deja
   el contenido de los ::before vacio con la sintaxis "fa fa-car", asi que los
   iconos de la lista de categorias no se veian. Esta hoja trae la fuente completa. */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css");

.app-page body {
    display: flex;
    flex-direction: column
}

.app-page body footer {
    margin-top: auto
}

.app-page header .main-menu,
.app-page header .social-menu,
.app-page header .btn-account{
    display: none !important
}

.media-holder video {
    width: 100%;
    background-color: #E4E4E4;
    background-image: url(../assets/images/camera-reels-fill.svg);
    background-size: 7rem 7rem;
    background-repeat: no-repeat;
    background-position: center       
}

.question-content {
    border: solid 1px #000;
    margin-top: 1rem;
    padding: 2rem;
    justify-content: space-around
}

.question-answers {
    margin-top: 1em;
    margin-bottom: 2rem;
}

.question-answers button {
    opacity: 1 !important
}

.question-answers .yes-no {
    display: flex;
    justify-content: space-around;
}

.question-answers .yes-no button {
    width: 200px;
    font-weight: 400
}

.question-answers button.btn-blue {
    background-color: #EDEDED;;
    border-color: #EDEDED;
    color: #000 !important
}

.question-answers button.btn-blue:hover {
    background-color: #D9D9D9;
    border-color:  #D9D9D9;
}

.question-answers button.btn-blue.answer-selected:hover {
    background-color: #D9D9D9;
    border-color:  #D9D9D9;
}

.question-answers .single-choice button {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 6rem;
    font-weight: 400;
    background-color: #EDEDED;
    width: 100%;
    text-align: left;
    border-width: 0 !important;
}

.question-answers .single-choice button:hover {
    background-color: #D9D9D9;
}

.question-answers .single-choice ul li:last-of-type {
    margin-bottom: 0;
}

.question-answers .single-choice button span {
    background-color: #1C94F5;
    border-radius: 100px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    position: absolute;
    width: 5rem;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-answers .answer-selected {
    color: #fff !important;
    font-weight: 900 !important
}

.question-answers button.answer-selected,
.question-answers button.answer-selected {
    color: #fff !important;
    background-color: #6e757c !important;;
    border-color: #6e757c !important;;
}

.question-answers button.answer-correct {
    background-color: #B9DF61 !important;
    border-color: #B9DF61 !important; 
    color: #fff !important;
}

.question-answers button.answer-wrong {
    background-color: #dc3545 !important;
    border-color:  #dc3545 !important;
    color: #fff !important;
}

#app {
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.settings-buttons {
    padding-bottom: 1rem
}

.settings-buttons li {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Neutralize old "pill" styles from block 1 so the new "card" styles from block 2 win */
.settings-buttons li > div {
    background-color: transparent !important;
    padding: 0.5rem 0.875rem !important;
    padding-left: 0 !important;
    font-size: 0.875rem !important;
    color: #4b5563 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-buttons li > div button {
    margin-left: 0.75rem;
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem
}

.settings-buttons li > div i {
    margin-right: 0.5rem
}

.app-modal {
    border: 0;
    background-color: #000000;
    padding: 3rem;
    border-radius: 5rem;
    text-align: center;
    color: #ffffff;
    position: relative
}

.app-modal h1 {
    color: #ffffff
}

.app-modal .modal-close {
    color: #fff;
    background: none;
    border: 0;
    position: absolute;
    right: 3rem;
    top: 2rem;
    font-size: 1.5rem;
    z-index: 100
}

.efficiency {
    flex-wrap: wrap
}

.efficiency span {
    flex: 100%
}

/* ============================================================
   Modern 2026 polish — header / hero / interactive elements
   Mantiene paleta (negro + blanco + azul) y tipografías actuales.
   ============================================================ */

html {
    scroll-behavior: smooth;
}

/* Catch-all: previene scroll horizontal en mobile por cualquier elemento
   que sobresale del viewport (top-bar labels largos, carousels, SVGs, etc.)
   `overflow-x: clip` es más seguro que `hidden` en iOS Safari y no rompe
   sticky/fixed positioning. `width: 100%` evita el bug de 100vw+iOS. */
html,
body {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* Header: NOT sticky — scrolls with the page */
header {
    position: relative;
}
header > nav {
    transition: background-color 0.3s ease, box-shadow 0.3s ease,
                backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    position: relative;
    z-index: 50;
}
header.is-scrolled > nav {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
}

/* Header: refinamiento de iconos y botón de cuenta */
header .btn-account {
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0.4rem 0.85rem;
}
header .btn-account:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
header .btn-cart {
    position: relative;
    border-radius: 999px;
    padding: 0.4rem 0.5rem;
    transition: background-color 0.2s ease;
}
header .btn-cart:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
header .top-cart-number {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
header .btn-cart:hover .top-cart-number {
    transform: scale(1.12);
}

/* Hero: overlay gradient sutil al top para fundir header con imagen */
section.hero {
    position: relative;
    isolation: isolate;
}
section.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 100%);
    z-index: -1;
    pointer-events: none;
}
section.hero .bg-holder {
    z-index: -2;
}

/* Hero: tipografía del título más 2026 (tracking + crisp) */
section.hero h1,
section.hero .hero-wrapper h1 {
    letter-spacing: -0.02em;
    text-wrap: balance;
}
@media (min-width: 768px) {
    section.hero h1,
    section.hero .hero-wrapper h1 {
        letter-spacing: -0.025em;
    }
}

/* Hero: entrada animada del contenido */
section.hero .hero-wrapper > * {
    animation: hero-fade-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
section.hero .hero-wrapper > *:nth-child(1) { animation-delay: 0.05s; }
section.hero .hero-wrapper > *:nth-child(2) { animation-delay: 0.18s; }
section.hero .hero-wrapper > *:nth-child(3) { animation-delay: 0.32s; }
section.hero .hero-wrapper > *:nth-child(4) { animation-delay: 0.46s; }

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero category buttons (A, A1, A2, B, etc.) — bare <button> sin clase */
.hero-atributes button {
    background: rgba(255, 255, 255, 0.95);
    color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hero-atributes button:hover {
    background: #1C94F5;
    color: #fff;
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(28, 148, 245, 0.45);
}
.hero-atributes button:active {
    transform: translateY(0);
}
.hero-atributes button:focus-visible {
    outline: 2px solid #1C94F5;
    outline-offset: 2px;
}

/* Hero CTAs (Rozpocznij naukę / egzamin) — pulido sutil */
.hero-atributes a.btn,
.hero-atributes .btn,
section.hero a.btn,
section.hero button.btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.25s ease;
    will-change: transform;
}
section.hero a.btn:hover,
section.hero button.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
}

/* Hero subtitle: tracking y line-height más 2026 */
section.hero .hero-wrapper p {
    line-height: 1.6;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

/* CTAs del hero: hover lift sutil y micro-interaction */
section.hero a.btn,
.hero-atributes a.btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                background-color 0.2s ease,
                color 0.2s ease;
    will-change: transform;
}
section.hero a.btn:hover,
.hero-atributes a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35);
}
section.hero a.btn:active,
.hero-atributes a.btn:active {
    transform: translateY(0);
}

/* Smooth focus-visible para accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(28, 148, 245, 0.55);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Reduce motion: respetar la preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    section.hero .hero-wrapper > * { animation: none; }
    * { transition: none !important; }
}


/* ============================================================
   HERO 2026 — asymmetric redesign
   Texto izquierda + visual card (exam simulator mockup) derecha.
   Override de estilos legacy de custom.css (.hero .hero-wrapper
   centrado, min-height 800px, etc).
   ============================================================ */

section.hero.hero-2026 {
    padding-top: 0;
    padding-bottom: 0;
}
section.hero.hero-2026 .container-xxl {
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}

/* Override del wrapper legacy — pasamos a grid asimétrico */
section.hero.hero-2026 .hero-wrapper {
    display: block;          /* override del flex legacy */
    min-height: 0;           /* override del 800px legacy */
    padding: 0;              /* override del 5rem/2rem legacy */
    color: #ffffff;
    text-align: left;
    background: transparent;
}

/* Grid principal: 2 columnas asimétrico */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    min-height: 32rem;
}
@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 4rem;
        min-height: 36rem;
    }
}

/* ----- Columna izquierda: texto ----- */
.hero-text {
    max-width: 36rem;
}
@media (min-width: 992px) {
    .hero-text { max-width: 34rem; }
}

/* Eyebrow: badge con dot pulsante */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.45rem 0.95rem 0.45rem 0.7rem;
    background: rgba(28, 148, 245, 0.14);
    border: 1px solid rgba(28, 148, 245, 0.32);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-eyebrow-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    background: #1C94F5;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(28, 148, 245, 0.6);
    animation: hero-eyebrow-pulse 2.4s ease-out infinite;
}
@keyframes hero-eyebrow-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(28, 148, 245, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(28, 148, 245, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(28, 148, 245, 0);   }
}

/* H1 — display size, weight 800, balance, color de detail 13 preservado */
section.hero.hero-2026 h1 {
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.25rem;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}
section.hero.hero-2026 h1 span[style*="color"] {
    /* Mantener el span con color inline (azul) que viene de detail 13 */
    font-style: normal;
}

/* Subtítulo p */
section.hero.hero-2026 .hero-wrapper p,
section.hero.hero-2026 .hero-text > p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 30rem;
    margin: 0 0 2rem;
    font-weight: 400;
}
section.hero.hero-2026 .hero-text > p strong {
    color: #ffffff;
    font-weight: 700;
}

/* Trust strip: 3 stats con separadores */
.hero-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}
.hero-trust-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    line-height: 1;
}
.hero-trust-num {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero-trust-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.hero-trust-sep {
    display: none;
}
@media (min-width: 768px) {
    .hero-trust-sep {
        display: block;
        width: 1px;
        height: 1.5rem;
        background: rgba(255, 255, 255, 0.18);
    }
}

/* ----- Columna derecha: visual (exam card + floating) ----- */
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .hero-visual {
        max-width: none;
        margin: 0;
    }
}

/* Card principal: glass sobre el dark hero */
.hero-card {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2rem;
    color: #ffffff;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    position: relative;
    overflow: hidden;
    animation: hero-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(28, 148, 245, 0.08) 0%,
        transparent 60%);
    pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
@media (min-width: 768px) {
    .hero-card { padding: 2.25rem; }
}

.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
}
.hero-card-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}
.hero-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.18);
    border: 1px solid rgba(28, 148, 245, 0.35);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}
.hero-card-question {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.hero-card-context {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.hero-card-answers {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.5rem;
}
.hero-card-answer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hero-card-answer:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}
.hero-card-answer.is-selected {
    background: rgba(28, 148, 245, 0.18);
    border-color: rgba(28, 148, 245, 0.55);
    color: #ffffff;
}
.hero-card-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #ffffff;
}
.hero-card-answer.is-selected .hero-card-letter {
    background: #1C94F5;
    color: #ffffff;
}
.hero-card-text {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-card-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.hero-card-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1C94F5 0%, #3aa3ff 100%);
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}
.hero-card-foot-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Floating card (offset down-right) — white, contraste alto */
.hero-floating {
    position: absolute;
    right: -1rem;
    bottom: -1.5rem;
    background: #ffffff;
    color: #0a0a0a;
    border-radius: 18px;
    padding: 1.1rem 1.35rem;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45);
    min-width: 200px;
    max-width: 240px;
    animation: hero-float-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
@media (min-width: 992px) {
    .hero-floating {
        right: -1.5rem;
        bottom: -2rem;
    }
}
@keyframes hero-float-in {
    from { opacity: 0; transform: translate(8px, 8px); }
    to   { opacity: 1; transform: translate(0, 0); }
}
.hero-floating-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.5);
}
.hero-floating-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1C94F5;
    line-height: 1.1;
    margin: 0.35rem 0 0.2rem;
    letter-spacing: -0.02em;
}
.hero-floating-meta {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.55);
}

/* ----- Panel de categorías (white surface) ----- */
.hero-categories-panel {
    margin-top: 4rem;
    padding: 3.5rem 0 0;
    position: relative;
    z-index: 2;
}
@media (min-width: 992px) {
    .hero-categories-panel {
        margin-top: 5rem;
        padding-top: 4rem;
    }
}
.hero-categories-head {
    text-align: center;
    margin-bottom: 2.25rem;
}
.hero-step {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    border: 1px solid rgba(28, 148, 245, 0.18);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.hero-categories-title {
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 0.5rem;
    text-wrap: balance;
    line-height: 1.15;
}
.hero-categories-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.hero-categories-wrap {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.75rem 1.5rem 2rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
    .hero-categories-wrap {
        padding: 2.25rem 2.5rem 2.5rem;
    }
}

/* Re-style the Vue-rendered category buttons (target sin clase) */
.hero-categories-wrap button,
.hero-categories-wrap .btn {
    background: rgba(255, 255, 255, 0.95);
    color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 0.65rem 1.1rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hero-categories-wrap button:hover,
.hero-categories-wrap .btn:hover {
    background: #1C94F5;
    color: #ffffff;
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(28, 148, 245, 0.55);
}
.hero-categories-wrap button.selected,
.hero-categories-wrap button.is-active,
.hero-categories-wrap button.active {
    background: #1C94F5;
    color: #ffffff;
    border-color: #1C94F5;
}
.hero-categories-wrap button:focus-visible {
    outline: 2px solid #1C94F5;
    outline-offset: 2px;
}

/* ----- Panel de features (4 items de detail 14) ----- */
.hero-features-panel {
    margin-top: 3rem;
    padding: 3rem 0 4rem;
    position: relative;
    z-index: 2;
}
.hero-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 576px) {
    .hero-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .hero-features { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* Override del .row + .col-6/.col-lg-3 que viene de detail 14 (es HTML de TinyMCE) */
.hero-features .row {
    display: contents;
}
.hero-features .col-6,
.hero-features .col-lg-3 {
    display: contents;
}
.hero-features .item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.88);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    height: 100%;
}
.hero-features .item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(28, 148, 245, 0.32);
    transform: translateY(-2px);
}
.hero-features .item img {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    margin: 0;
    /* Invertir el icono negro para que se vea en el dark hero */
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.hero-features .item span {
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    padding-left: 0;
    max-width: none;
    font-weight: 500;
}

/* El hero-2026 oculta el .hero-atributes legacy (redundante) */
section.hero.hero-2026 .hero-atributes {
    display: none;
}

/* ----- Responsive refinements ----- */
@media (max-width: 991.98px) {
    .hero-grid { min-height: 0; }
    .hero-visual { max-width: 28rem; }
    .hero-floating {
        position: static;
        margin-top: 1.25rem;
        max-width: none;
        min-width: 0;
    }
}
@media (max-width: 575.98px) {
    .hero-trust { gap: 0.5rem 1rem; }
    .hero-trust-num { font-size: 1.25rem; }
    .hero-trust-label { font-size: 0.8125rem; }
    .hero-card { padding: 1.5rem; border-radius: 20px; }
    .hero-card-question { font-size: 1.0625rem; }
    .hero-categories-wrap { padding: 1.25rem 1rem 1.5rem; }
}

/* ----- Reduce motion: respetar preferencia ----- */
@media (prefers-reduced-motion: reduce) {
    .hero-card, .hero-floating, .hero-eyebrow-dot {
        animation: none !important;
    }
}


/* ============================================================
   HEADER 2026 — refinamiento sobre la base de custom.css
   - Top-bar: fondo limpio, separadores sutiles, mejor tipografía
   - Navbar: nav links con peso 600, hover animado, espaciado
   - Botones: cuenta y carrito con micro-interacciones
   ============================================================ */

/* Top bar (utility strip arriba del header) */
body:not(.app-page) .top-bar {
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.85);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:not(.app-page) .top-bar .nav {
    justify-content: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
body:not(.app-page) .top-bar .nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}
body:not(.app-page) .top-bar .nav .nav-link:hover {
    color: #ffffff;
}
body:not(.app-page) .top-bar .nav .nav-link img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
body:not(.app-page) .top-bar .nav .nav-link:hover img {
    opacity: 1;
}

/* Navbar principal */
body:not(.app-page) header {
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
body:not(.app-page) header > .navbar .container-fluid {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    gap: 1.5rem;
}

/* Logo */
body:not(.app-page) header .logo {
    width: 11rem;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
body:not(.app-page) header .logo:hover {
    transform: translateY(-1px);
}

/* Main nav */
body:not(.app-page) header .main-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 1rem;
}
body:not(.app-page) header .main-menu .nav-item {
    list-style: none;
}
body:not(.app-page) header .main-menu a {
    color: #0a0a0a;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: 8px;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
body:not(.app-page) header .main-menu a::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.25rem;
    height: 2px;
    background: #1C94F5;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body:not(.app-page) header .main-menu a:hover {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.06);
}
body:not(.app-page) header .main-menu a:hover::after {
    transform: scaleX(1);
}

/* Social menu en header */
body:not(.app-page) header .social-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0 0.5rem;
}
body:not(.app-page) header .social-menu .nav-link {
    padding: 0.4rem 0.5rem !important;
    color: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body:not(.app-page) header .social-menu .nav-link:hover {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    transform: translateY(-1px);
}

/* Buttons menu (cuenta, carrito, hamburger) */
body:not(.app-page) header .buttons-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
body:not(.app-page) header .buttons-menu .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
body:not(.app-page) header .btn-account:hover {
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
}
body:not(.app-page) header .btn-cart {
    padding: 0.55rem 0.75rem !important;
    background: rgba(0, 0, 0, 0.04);
    color: #0a0a0a;
}
body:not(.app-page) header .btn-cart:hover {
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
}
body:not(.app-page) header .side-panel-trigger {
    padding: 0.55rem 0.75rem !important;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    color: #0a0a0a;
}
body:not(.app-page) header .side-panel-trigger:hover {
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
}

/* Cart badge */
body:not(.app-page) header .top-cart-number {
    background: #1C94F5;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.15rem;
    border-radius: 999px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Responsive: colapsar social menu y nav en <992px */
@media (max-width: 1199.98px) {
    body:not(.app-page) header .social-menu { display: none; }
}
@media (max-width: 991.98px) {
    body:not(.app-page) header .main-menu { display: none !important; }
    body:not(.app-page) header .side-panel-trigger { display: inline-flex !important; }
    body:not(.app-page) header .navbar .container-fluid { gap: 0.75rem; }
}
@media (max-width: 575.98px) {
    body:not(.app-page) header .logo { width: 9rem; }
    body:not(.app-page) header .btn-account span { display: none; }
    body:not(.app-page) header .btn-account { padding: 0.5rem 0.6rem !important; }
    body:not(.app-page) .top-bar .nav { gap: 0.875rem; }
    body:not(.app-page) .top-bar .nav .nav-link { font-size: 0.8rem; }
}

/* Header sobre hero dark: en home el header se ve contra el bg del hero
   Ajustamos para que se vea bien sin perder contraste */
body:not(.app-page).home header,
body:not(.app-page).page-home header {
    background: rgba(255, 255, 255, 0.96);
}


/* ============================================================
   HERO 2026 — APP-FRIENDLY (light, centrado, sin decoración)
   Reemplaza el hero-2026 previo. Target: estudiantes 17-25.
   Paleta: white + cream + azul suave #1C94F5. Border-radius 16-24px.
   ============================================================ */

.hero-friendly {
    background-color: #ffffff;
    background-image: url('/assets/images/hero-new.jpg');
    background-size: 100% auto;
    background-position: right -16rem center;
    background-repeat: no-repeat;
    padding: 2.5rem 0 2rem;
    position: relative;
    overflow: hidden;
    min-height: 30rem;
    display: flex;
    align-items: center;
}
.hero-friendly::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #ffffff 0%,
        #ffffff 30%,
        rgba(255, 255, 255, 0.55) 55%,
        rgba(255, 255, 255, 0.12) 78%,
        transparent 100%);
    z-index: 0;
    pointer-events: none;
}
.hero-friendly .container-xxl {
    position: relative;
    z-index: 1;
    width: 100%;
}
.hero-friendly-content {
    text-align: left;
    max-width: 32rem;
    margin: 0;
}

/* Hero badges - 2 pills */
.hero-friendly-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.875rem;
}

/* Imagen flotante en el lado derecho del hero */
.hero-friendly-float {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 18%;
    height: auto;
    z-index: 1;
    pointer-events: none;
    animation: hero-friendly-float 5s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.18));
}
@keyframes hero-friendly-float {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% - 14px)); }
}
@media (max-width: 991.98px) {
    .hero-friendly-float {
        max-width: 14%;
        opacity: 0.85;
    }
}
@media (max-width: 575.98px) {
    .hero-friendly-float {
        display: none;
    }
}
.hero-friendly-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.hero-friendly-badge--blue {
    background: #1C94F5;
    color: #ffffff;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.hero-friendly-badge--blue i { color: #ffffff; font-size: 0.95em; }
.hero-friendly-badge--ghost {
    background: rgba(255, 255, 255, 0.75);
    color: #0a0a0a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* H1 — display, left-aligned */
.hero-friendly h1 {
    font-size: clamp(2rem, 3.6vw, 2.875rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.75rem;
    text-wrap: balance;
    text-align: left;
}
.hero-friendly h1 span[style*="color"] {
    color: #1C94F5 !important;
    font-style: normal;
}

/* Subtitle */
.hero-friendly .hero-friendly-content p,
.hero-friendly-content > p {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.5;
    color: #4B5563;
    max-width: 30rem;
    margin: 0 0 1.25rem;
    font-weight: 400;
    text-align: left;
    text-wrap: balance;
}
.hero-friendly-content > p strong {
    color: #0a0a0a;
    font-weight: 700;
}

/* CTA group — alineado a la izquierda */
.hero-friendly-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

/* Trust strip - items con icono izquierda + texto derecha, 1 línea */
.hero-friendly-trust {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
}
.hero-friendly-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.hero-friendly-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.75rem;
    box-shadow: 0 2px 6px -2px rgba(28, 148, 245, 0.5);
}
.hero-friendly-trust-text {
    line-height: 1.2;
}

/* Pill button base (overrides btn defaults) */
.btn-pill {
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.625rem !important;
    font-size: 1rem !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}
.btn-pill i { font-size: 1.05em; line-height: 1; }

.hero-friendly .btn-primary.btn-pill {
    background: #1C94F5;
    color: #ffffff;
    border: 1.5px solid #1C94F5;
    box-shadow: 0 4px 14px -4px rgba(28, 148, 245, 0.5);
}
.hero-friendly .btn-primary.btn-pill:hover {
    background: #0D7BD9;
    border-color: #0D7BD9;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(28, 148, 245, 0.6);
}
.hero-friendly .btn-ghost.btn-pill {
    background: #ffffff;
    color: #0a0a0a;
    border: 1.5px solid #0a0a0a;
}
.hero-friendly .btn-ghost.btn-pill:hover {
    background: #0a0a0a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   CATEGORIES-FRIENDLY — pills grandes tipo Duolingo
   ============================================================ */

.categories-friendly {
    background: #000000;
    padding: 1.75rem 0 2rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.categories-friendly::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rem;
    max-width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.categories-friendly-head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.friendly-step {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    border: 1px solid rgba(28, 148, 245, 0.18);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 0.875rem;
}
.friendly-title {
    font-size: clamp(1.875rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    line-height: 1.15;
    text-wrap: balance;
}
.friendly-sub {
    font-size: 1.0625rem;
    color: #6B7280;
    max-width: 36rem;
    margin: 0 auto;
    line-height: 1.5;
}

.categories-friendly-grid {
    max-width: 60rem;
    margin: 0 auto;
}/* RETIRADA: ocultaba la pantalla del test en /kurs/ */
.categories-friendly .app-settings-holder > .small { display: none; }

/* Heading "Wybierz kategorie:" - clase dedicada del template Twig */
.categories-friendly-heading {
    color: #ffffff;
    text-align: center;
    font-family: 'Ubuntu', 'Karla', sans-serif;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 1.125rem;
    padding: 0;
    text-wrap: balance;
}

/* Vue component: forzar grid en la <ul class="categories-list"> - 12 cols en 1 línea */
.categories-friendly .app-settings-holder > ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
@media (min-width: 576px) {
    .categories-friendly .app-settings-holder > ul { grid-template-columns: repeat(6, 1fr); gap: 0.625rem; }
}
@media (min-width: 768px) {
    .categories-friendly .app-settings-holder > ul { grid-template-columns: repeat(12, 1fr); gap: 0.5rem; }
}
@media (min-width: 992px) {
    .categories-friendly .app-settings-holder > ul { grid-template-columns: repeat(12, 1fr); gap: 0.75rem; }
}

/* En layout 12 cols (1 línea): botones más compactos */
@media (min-width: 768px) {
    .categories-friendly .app-settings-holder > ul li button,
    .categories-friendly .app-settings-holder > ul li .btn {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.8125rem !important;
        min-height: 3.25rem;
    }
    .categories-friendly .app-settings-holder > ul li button::before,
    .categories-friendly .app-settings-holder > ul li .btn::before {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }
    .categories-friendly .app-settings-holder > ul li button .category-tile-label,
    .categories-friendly .app-settings-holder > ul li .btn .category-tile-label {
        font-size: 0.8125rem;
    }
}
.categories-friendly .app-settings-holder > ul li {
    padding: 0 !important;
    margin: 0 !important;
}

/* Vue component: reestilar los botones a pill friendly (icono arriba + label abajo) */
.categories-friendly .app-settings-holder > ul li button,
.categories-friendly .app-settings-holder > ul li .btn {
    width: 100%;
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 1.125rem 0.5rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    min-width: 0 !important;
    min-height: 5.5rem;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}
.categories-friendly .app-settings-holder > ul li button i,
.categories-friendly .app-settings-holder > ul li .btn i {
    font-size: 1.625rem !important;
    line-height: 1;
    color: #1C94F5;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Iconos de vehículo por categoría — CSS-only vía ::before + nth-child
   (no requiere rebuild del bundle Vue; usa FontAwesome content codes) */
.categories-friendly .app-settings-holder > ul li button::before,
.categories-friendly .app-settings-holder > ul li .btn::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.625rem;
    line-height: 1;
    color: #1C94F5;
    display: block;
    transition: color 0.2s ease, transform 0.2s ease;
    /* hablarle al screen reader */
    speak: none;
    -webkit-font-smoothing: antialiased;
}
.categories-friendly .app-settings-holder > ul li button:hover::before,
.categories-friendly .app-settings-holder > ul li .btn:hover::before,
.categories-friendly .app-settings-holder > ul li button.selected::before,
.categories-friendly .app-settings-holder > ul li button.is-selected::before {
    color: #ffffff;
}

/* A, A1, A2 → motorcycle (\f21c) */
.categories-friendly .app-settings-holder > ul li:nth-child(1) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(1) .btn::before,
.categories-friendly .app-settings-holder > ul li:nth-child(2) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(2) .btn::before,
.categories-friendly .app-settings-holder > ul li:nth-child(3) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(3) .btn::before { content: "\f21c"; }

/* AM → bicycle / moped (\f206) */
.categories-friendly .app-settings-holder > ul li:nth-child(4) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(4) .btn::before { content: "\f206"; }

/* B → car side (\f5e4) */
.categories-friendly .app-settings-holder > ul li:nth-child(5) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(5) .btn::before { content: "\f5e4"; }

/* B1 → shuttle van / quad (\f5b6) */
.categories-friendly .app-settings-holder > ul li:nth-child(6) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(6) .btn::before { content: "\f5b6"; }

/* C → truck (\f0d1) */
.categories-friendly .app-settings-holder > ul li:nth-child(7) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(7) .btn::before { content: "\f0d1"; }

/* C1 → truck pickup (\f63c) */
.categories-friendly .app-settings-holder > ul li:nth-child(8) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(8) .btn::before { content: "\f63c"; }

/* D → bus (\f207) */
.categories-friendly .app-settings-holder > ul li:nth-child(9) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(9) .btn::before { content: "\f207"; }

/* D1 → van shuttle (\f5b6 alt) */
.categories-friendly .app-settings-holder > ul li:nth-child(10) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(10) .btn::before { content: "\f5b6"; }

/* PT → train (proxy para tranvía, \f238) */
.categories-friendly .app-settings-holder > ul li:nth-child(11) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(11) .btn::before { content: "\f238"; }

/* T → tractor (\f722) */
.categories-friendly .app-settings-holder > ul li:nth-child(12) button::before,
.categories-friendly .app-settings-holder > ul li:nth-child(12) .btn::before { content: "\f722"; }

/* === Neutralize the ::before icons on category tiles ===
   These auto-injected icons (one per nth-child) were creating duplicates
   alongside the <i class="fas fa-..."> rendered by Vue. The Vue template
   now only shows the letter label, so we hide the ::before too. */
.categories-friendly .app-settings-holder > ul li button::before,
.categories-friendly .app-settings-holder > ul li .btn::before {
    content: none !important;
    display: none !important;
}
.categories-friendly .app-settings-holder > ul li button .category-tile-label,
.categories-friendly .app-settings-holder > ul li .btn .category-tile-label {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.categories-friendly .app-settings-holder > ul li button:hover,
.categories-friendly .app-settings-holder > ul li .btn:hover {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border-color: #1C94F5 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(28, 148, 245, 0.45);
}
.categories-friendly .app-settings-holder > ul li button:hover i,
.categories-friendly .app-settings-holder > ul li .btn:hover i {
    color: #ffffff;
}
.categories-friendly .app-settings-holder > ul li button.selected,
.categories-friendly .app-settings-holder > ul li button.is-selected {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border-color: #1C94F5 !important;
    box-shadow: 0 6px 16px -4px rgba(28, 148, 245, 0.5);
}
.categories-friendly .app-settings-holder > ul li button.selected i,
.categories-friendly .app-settings-holder > ul li button.is-selected i {
    color: #ffffff;
}
.categories-friendly .app-settings-holder > ul li button:focus-visible {
    outline: 2px solid #1C94F5;
    outline-offset: 2px;
}

/* Vue component: reestilar los CTAs "Rozpocznij naukę / egzamin" como botones grandes */
.categories-friendly .app-start-holder > .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 2rem;
}
.categories-friendly .app-start-holder > .buttons button,
.categories-friendly .app-start-holder > .buttons .btn {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border: 1.5px solid #1C94F5 !important;
    border-radius: 999px !important;
    padding: 0.95rem 1.875rem !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    min-width: 13rem;
    box-shadow: 0 6px 18px -6px rgba(28, 148, 245, 0.5);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.2s ease;
}
.categories-friendly .app-start-holder > .buttons button:hover,
.categories-friendly .app-start-holder > .buttons .btn:hover {
    background: #0D7BD9 !important;
    border-color: #0D7BD9 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(28, 148, 245, 0.6);
}
.categories-friendly .app-start-holder > .buttons button:disabled,
.categories-friendly .app-start-holder > .buttons .btn:disabled {
    background: #d1d5db !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   HOW-FRIENDLY — 3 pasos numerados
   ============================================================ */

.how-friendly {
    background: #F8F9FB;
    padding: 4.5rem 0 5rem;
}
.how-friendly-head {
    text-align: center;
    margin-bottom: 3rem;
}
.how-friendly-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .how-friendly-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.how-friendly-step {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 24px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}
.how-friendly-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.1);
    border-color: rgba(28, 148, 245, 0.3);
}
.how-friendly-num {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 2.25rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9375rem;
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.5);
}
.how-friendly-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    margin: 0.5rem auto 1.25rem;
}
.how-friendly-step-title {
    font-size: 1.1875rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.how-friendly-step-text {
    font-size: 0.9375rem;
    color: #6B7280;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   FEATURES-FRIENDLY — 4 cards del detail 14
   ============================================================ */

.features-friendly {
    background: #ffffff;
    padding: 4rem 0 5rem;
}
.features-friendly-head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.features-friendly-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
}
@media (min-width: 576px) {
    .features-friendly-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .features-friendly-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* Override del .row + .col-* que viene de detail 14 (TinyMCE HTML) */
.features-friendly-grid .row { display: contents; }
.features-friendly-grid .col-6,
.features-friendly-grid .col-lg-3 { display: contents; }

.features-friendly-grid .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1.5px solid #EEF1F5;
    border-radius: 20px;
    color: #1F2937;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}
.features-friendly-grid .item:hover {
    transform: translateY(-3px);
    border-color: rgba(28, 148, 245, 0.4);
    box-shadow: 0 12px 28px -10px rgba(28, 148, 245, 0.2);
}
.features-friendly-grid .item img {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    margin: 0;
    /* Iconos negros → azul (mantenemos original sin filter, heredan color) */
    filter: none;
    opacity: 1;
}
.features-friendly-grid .item span {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1F2937;
    padding-left: 0;
    max-width: none;
    font-weight: 500;
}

/* ============================================================
   HEADER + TOP-BAR — APP-FRIENDLY overrides
   Top-bar light, header white con shadow suave
   ============================================================ */

/* Top bar - bajo el navbar, centrado y grande (utility strip prominente) */
body:not(.app-page) .top-bar {
    background: #ffffff;
    color: #0a0a0a;
    border-bottom: 1px solid #EEF1F5;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
body:not(.app-page) .top-bar .nav {
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.75rem;
    flex-wrap: wrap;
}
body:not(.app-page) .top-bar .nav .nav-link {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0.4rem 0.95rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body:not(.app-page) .top-bar .nav .nav-link:hover {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    transform: translateY(-1px);
}
body:not(.app-page) .top-bar .nav .nav-link img {
    width: 2rem;
    height: 2rem;
    margin: 0;
    filter: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
body:not(.app-page) .top-bar .nav .nav-link:hover img { opacity: 1; }

/* Header principal — más limpio, shadow suave */
body:not(.app-page) header {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid #EEF1F5;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
body:not(.app-page) header > .navbar .container-fluid {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    gap: 1.5rem;
}
body:not(.app-page) header .logo {
    width: 14rem;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
body:not(.app-page) header .logo:hover { transform: translateY(-1px); }

body:not(.app-page) header .main-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0 0.5rem 0 auto;
}
body:not(.app-page) header .main-menu .nav-item { list-style: none; }
body:not(.app-page) header .main-menu a {
    color: #0a0a0a;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 0.95rem !important;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
}
body:not(.app-page) header .main-menu a::after { content: none; }
body:not(.app-page) header .main-menu a:hover {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
}

/* Social menu */
body:not(.app-page) header .social-menu {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0 0.5rem;
}
body:not(.app-page) header .social-menu .nav-link {
    padding: 0.45rem 0.55rem !important;
    color: #4B5563;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body:not(.app-page) header .social-menu .nav-link:hover {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    transform: translateY(-1px);
}

/* Buttons menu — pill style */
body:not(.app-page) header .buttons-menu {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}
body:not(.app-page) header .buttons-menu .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 0.95rem !important;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}
body:not(.app-page) header .btn-account:hover {
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
}
body:not(.app-page) header .btn-cart {
    padding: 0.55rem 0.85rem !important;
    background: rgba(0, 0, 0, 0.04);
}
body:not(.app-page) header .btn-cart:hover {
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
}
body:not(.app-page) header .side-panel-trigger {
    padding: 0.55rem 0.85rem !important;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
}
body:not(.app-page) header .side-panel-trigger:hover {
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
}

body:not(.app-page) header .top-cart-number {
    background: #1C94F5;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.15rem;
    border-radius: 999px;
}

/* Responsive */
@media (max-width: 1199.98px) {
    body:not(.app-page) header .social-menu { display: none; }
}
@media (max-width: 991.98px) {
    body:not(.app-page) header .main-menu { display: none !important; }
    body:not(.app-page) header .side-panel-trigger { display: inline-flex !important; }
    body:not(.app-page) header .navbar .container-fluid { gap: 0.75rem; }
}
@media (max-width: 575.98px) {
    /* Navbar en una sola línea: logo izq + botones der */
    body:not(.app-page) header > .navbar,
    body:not(.app-page) header > .navbar > .container-fluid {
        flex-wrap: nowrap !important;
    }
    body:not(.app-page) header .logo {
        width: 7.5rem;
        max-width: 7.5rem;
        flex: 0 0 7.5rem;
    }
    body:not(.app-page) header .logo img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    body:not(.app-page) header .buttons-menu {
        flex: 0 0 auto;
        margin-left: auto !important;
    }
    body:not(.app-page) header .side-panel-trigger-holder { flex: 0 0 auto; }

    body:not(.app-page) header .btn-account span { display: none; }
    body:not(.app-page) header .btn-account { padding: 0.5rem 0.65rem !important; }

    /* Top-bar mobile: icon arriba, label abajo (stacked) — sin scroll horizontal */
    body:not(.app-page) .top-bar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        overflow: hidden;
        max-width: 100%;
    }
    body:not(.app-page) .top-bar .container-xxl,
    body:not(.app-page) .top-bar .nav {
        overflow: hidden;
        max-width: 100%;
        flex-wrap: nowrap;
    }
    body:not(.app-page) .top-bar .nav {
        display: flex;
        justify-content: space-between;
        gap: 0.25rem;
    }
    body:not(.app-page) .top-bar .nav .nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 25%;
        margin: 0 !important;
        overflow: hidden;
    }
    body:not(.app-page) .top-bar .nav .nav-link {
        flex-direction: column;
        align-items: center;
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.3rem 0.15rem;
        gap: 0.2rem;
        line-height: 1.1;
        text-align: center;
        max-width: 100%;
    }
    body:not(.app-page) .top-bar .nav .nav-link img {
        width: 1.1rem;
        height: 1.1rem;
        min-width: 1.1rem;
        margin-right: 0;
        margin-bottom: 0.1rem;
        flex-shrink: 0;
    }

    /* Hero mobile: diseñado específicamente para pantallas pequeñas */
    .hero-friendly {
        padding: 1.5rem 0 1.5rem;
        min-height: 0;
        background-position: right -4rem top;
        background-size: cover;
    }
    .hero-friendly::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.5) 55%,
            rgba(255, 255, 255, 0.4) 100%);
    }
    .hero-friendly-content {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0.5rem;
    }
    .hero-friendly-content > p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-friendly h1 {
        font-size: clamp(1.5rem, 6vw, 1.875rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        text-align: center;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
        margin: 0 auto 0.625rem;
    }
    .hero-friendly-badges {
        justify-content: center;
        gap: 0.35rem;
    }
    .hero-friendly-badge {
        font-size: 0.625rem;
        padding: 0.3rem 0.65rem;
    }
    /* Ghost badge: en mobile con overlay blanco se pierde — usar fondo más opaco */
    .hero-friendly-badge--ghost {
        background: #ffffff;
        color: #0a0a0a;
        border: 1px solid rgba(28, 148, 245, 0.25);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .hero-friendly-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
        max-width: 22rem;
        margin: 0.875rem auto 0;
    }
    .hero-friendly-ctas .btn {
        width: 100%;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.95rem !important;
        justify-content: center;
    }
    .hero-friendly-trust {
        margin-top: 0.875rem;
        gap: 0.5rem 0.5rem;
        justify-content: center;
    }
    .hero-friendly-trust li {
        font-size: 0.8125rem;
    }
    .btn-pill { padding: 0.6rem 1.15rem !important; font-size: 0.875rem !important; }
    .categories-friendly-grid button,
    .categories-friendly-grid .btn {
        padding: 0.875rem 0.4rem;
        font-size: 1rem;
        min-height: 3.5rem;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .hero-friendly-eyebrow-dot,
    .hero-friendly-float,
    .how-friendly-step,
    .btn-pill,
    .features-friendly-grid .item {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
   /kurs/ (Tryb nauki) — header + overrides del test simulator
   ============================================================ */

.kurs-page {
    background: #ffffff;
}

.kurs-header {
    background: linear-gradient(180deg, #F4F7FB 0%, #ffffff 100%);
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid #EEF1F5;
}
.kurs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
}
.kurs-breadcrumb a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease;
}
.kurs-breadcrumb a:hover {
    color: #1C94F5;
}
.kurs-breadcrumb-sep {
    color: #9CA3AF;
}
.kurs-breadcrumb-current {
    color: #0a0a0a;
    font-weight: 600;
}

.kurs-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.kurs-header-text {
    flex: 1 1 auto;
    min-width: 0;
}
.kurs-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.kurs-mode-badge i {
    font-size: 0.95em;
}
.kurs-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    line-height: 1.1;
    text-wrap: balance;
}
.kurs-subtitle {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #4B5563;
    max-width: 36rem;
    margin: 0;
}
.kurs-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: 0 0 auto;
}
.kurs-cats-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
}
.kurs-cats-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    padding: 0.4rem 0.875rem;
    background: rgba(28, 148, 245, 0.08);
    border: 1px solid rgba(28, 148, 245, 0.2);
    border-radius: 10px;
    color: #1C94F5;
}

.kurs-app {
    padding: 2rem 0 5rem;
}

/* Override del test simulator para que se vea más moderno */
.kurs-app .app-start-holder {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #EEF1F5;
    box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    max-width: 56rem;
    margin: 0 auto;
}
.kurs-app .app-settings-holder h2 {
    color: #0a0a0a;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    text-align: center;
    margin: 0 0 1.5rem !important;
}
.kurs-app .app-settings-holder > .small {
    color: #6B7280;
    text-align: center;
    font-size: 0.9375rem;
}
.kurs-app .app-settings-holder ul li {
    padding: 0 0.3rem 0.625rem !important;
}
.kurs-app .app-settings-holder ul li button {
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1.5px solid #E5E7EB !important;
    font-weight: 600;
    min-width: 5rem;
    transition: all 0.2s ease;
}
.kurs-app .app-settings-holder ul li button:hover {
    background: rgba(28, 148, 245, 0.06) !important;
    border-color: #1C94F5 !important;
    color: #1C94F5 !important;
    transform: translateY(-1px);
}
.kurs-app .app-settings-holder ul li button.selected {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border-color: #1C94F5 !important;
}
.kurs-app .app-start-holder .buttons {
    text-align: center;
    margin-top: 1.5rem;
}
.kurs-app .app-start-holder .buttons button {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border: 1.5px solid #1C94F5 !important;
    border-radius: 999px !important;
    padding: 0.85rem 1.75rem !important;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 14px -4px rgba(28, 148, 245, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kurs-app .app-start-holder .buttons button:hover:not(:disabled) {
    background: #0D7BD9 !important;
    border-color: #0D7BD9 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(28, 148, 245, 0.6);
}
.kurs-app .app-start-holder .buttons button:disabled {
    background: #E5E7EB !important;
    border-color: #E5E7EB !important;
    color: #9CA3AF !important;
    box-shadow: none;
    cursor: not-allowed;
}
.kurs-app .app-start-holder .buttons button i {
    margin-left: 0.5rem;
}

/* Responsive */
@media (max-width: 767.98px) {
    .kurs-header {
        padding: 1.5rem 0 2rem;
    }
    .kurs-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .kurs-header-meta {
        align-items: flex-start;
    }
    .kurs-app {
        padding: 1.5rem 0 2rem;
    }
    .kurs-app .app-start-holder {
        padding: 1.25rem;
        border-radius: 18px;
    }
}


/* ============================================================
   /egzamin/ — landing para usuarios no autenticados (SEO 2026)
   ============================================================ */

.exam-intro {
    background: linear-gradient(180deg, #F4F7FB 0%, #ffffff 60%);
    min-height: calc(100vh - 6rem);
    padding: 3rem 0 4rem;
    display: flex;
    align-items: center;
}
.exam-intro-wrapper {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}
.exam-intro-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0 0 1rem;
    line-height: 1.1;
    text-wrap: balance;
}
.exam-intro-sub {
    font-size: 1.125rem;
    line-height: 1.55;
    color: #4B5563;
    max-width: 38rem;
    margin: 0 auto 2.5rem;
}
.exam-intro-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 768px) {
    .exam-intro-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.exam-intro-features li {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.06);
}
.exam-intro-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 12px;
    font-size: 1.25rem;
}
.exam-intro-feature-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #0a0a0a;
}
.exam-intro-feature-text strong {
    color: #1C94F5;
    font-weight: 700;
}
.exam-intro-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.exam-intro-cta .btn {
    padding: 0.95rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
}
.exam-intro-note {
    font-size: 0.875rem;
    color: #6B7280;
    margin: 0;
    max-width: 30rem;
}
.exam-intro-note a {
    color: #1C94F5;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.exam-intro-note a:hover {
    color: #0D7BD9;
}
@media (max-width: 767.98px) {
    .exam-intro {
        padding: 2rem 0 2.5rem;
    }
    .exam-intro-features {
        gap: 0.75rem;
    }
    .exam-intro-features li {
        padding: 1rem;
    }
}


/* ============================================================
   /kontakt/ — header + form + info side (mismo lenguaje visual que /kurs/ y /instruktorzy/)
   ============================================================ */

.contact-page {
    background: #ffffff;
    min-height: 100vh;
}

/* Header con breadcrumb + título — mismo patrón que .kurs-header, con imagen de fondo */
.contact-header {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 247, 251, 0.78) 100%),
        url('/assets/images/iStock-1270058179.jpg') center right / cover no-repeat;
    padding: 2.5rem 0 3rem;
    border-bottom: 1px solid #EEF1F5;
    position: relative;
}
.contact-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
}
.contact-header .container-xxl {
    position: relative;
    z-index: 1;
}
.contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
}
.contact-breadcrumb a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease;
}
.contact-breadcrumb a:hover {
    color: #1C94F5;
}
.contact-breadcrumb-sep {
    color: #9CA3AF;
}
.contact-breadcrumb-current {
    color: #0a0a0a;
    font-weight: 600;
}

.contact-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.contact-header-text {
    flex: 1 1 auto;
    min-width: 0;
}
.contact-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.contact-mode-badge i {
    font-size: 0.95em;
}
.contact-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    line-height: 1.1;
    text-wrap: balance;
}
.contact-subtitle {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #4B5563;
    max-width: 38rem;
    margin: 0;
}

/* Variante centrada — cuando se quita el breadcrumb + badge de modo */
.contact-header.contact-header--centered {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 251, 0.78) 100%),
        url('/assets/images/iStock-1270058179.jpg') center / cover no-repeat;
    text-align: center;
}
.contact-header.contact-header--centered::after {
    background: linear-gradient(180deg, rgba(244, 247, 251, 0.55) 0%, rgba(255, 255, 255, 0.35) 100%);
}
.contact-header.contact-header--centered .contact-header-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.contact-header.contact-header--centered .contact-title {
    text-align: center;
}
.contact-header.contact-header--centered .contact-subtitle {
    text-align: center;
    margin: 0 auto;
}
.contact-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: 0 0 auto;
}
.contact-meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
}
.contact-meta-value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.contact-meta-value i {
    font-size: 0.95em;
}

/* Body 2 columnas */
.contact-body {
    padding: 3rem 0 4rem;
    background: #F4F7FB;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

/* Form card (blanco, mismo lenguaje que .single-plan / .blog-item) */
.contact-form-card {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.06);
}
@media (min-width: 768px) {
    .contact-form-card {
        padding: 2.5rem;
    }
}
.contact-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 10px;
    font-size: 0.95rem;
}
.contact-card-icon i {
    line-height: 1;
}
.contact-card-sub {
    color: #6B7280;
    font-size: 0.9375rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.contact-form-header {
    margin-bottom: 0;
}

/* Form grid */
.contact-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.contact-field--full {
    width: 100%;
}
.contact-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
    margin: 0;
}
.contact-input {
    width: 100%;
    padding: 0.75rem 0.95rem;
    font-size: 0.9375rem;
    color: #0a0a0a;
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-input::placeholder {
    color: #9CA3AF;
}
.contact-input:focus {
    outline: none;
    border-color: #1C94F5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.15);
}
.contact-input:hover:not(:focus) {
    border-color: #cbd5e1;
}
.contact-textarea {
    resize: vertical;
    min-height: 6.5rem;
    line-height: 1.5;
}
.contact-field .form-error-message,
.contact-field .invalid-feedback,
.contact-field ul {
    color: #dc2626;
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
    list-style: none;
    padding: 0;
}

/* Form footer */
.contact-form-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    border-top: 1px solid #EEF1F5;
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 600px) {
    .contact-form-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.contact-form-note {
    font-size: 0.8125rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.45;
    max-width: 28rem;
}
.contact-form-note a {
    color: #1C94F5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.contact-form-note a:hover {
    color: #0D7BD9;
}
.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.65rem;
    background: #1C94F5;
    color: #ffffff;
    border: 1.5px solid #1C94F5;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(28, 148, 245, 0.5);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}
.contact-submit::after {
    content: "\e912";
    font-family: "lined-icons";
    font-weight: normal;
    font-size: 0.95em;
    margin-left: 0.15rem;
    transition: transform 0.25s ease;
}
.contact-submit:hover {
    background: #0D7BD9;
    border-color: #0D7BD9;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(28, 148, 245, 0.6);
}
.contact-submit:hover::after {
    transform: translateX(3px);
}
.contact-submit:active {
    transform: translateY(0);
}

/* Sidebar info (info card + social — ambos light, como el resto del sitio) */
.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-info-card {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.06);
}
@media (min-width: 768px) {
    .contact-info-card {
        padding: 2.5rem;
    }
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: #F8FAFC;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.contact-info-item:hover {
    background: #ffffff;
    border-color: #1C94F5;
    transform: translateY(-1px);
}
.contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 12px;
    font-size: 1rem;
}
.contact-info-icon i {
    line-height: 1;
}
.contact-info-item > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.contact-info-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6B7280;
}
.contact-info-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0a0a0a;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease;
}
a.contact-info-value:hover {
    color: #1C94F5;
}

/* Social card — mismo patrón que instructor chips */
.contact-social-card {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.06);
}
.contact-social-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6B7280;
    margin-bottom: 1rem;
}
.contact-social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}
.contact-social-list li {
    display: contents;
}
.contact-social-list a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.7rem 0.85rem;
    background: #F8FAFC;
    border: 1.5px solid #EEF1F5;
    border-radius: 12px;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.contact-social-list a i {
    font-size: 1.05rem;
    color: #1C94F5;
    transition: color 0.2s ease, transform 0.2s ease;
}
.contact-social-list a:hover {
    background: #1C94F5;
    border-color: #1C94F5;
    color: #ffffff;
    transform: translateY(-2px);
}
.contact-social-list a:hover i {
    color: #ffffff;
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 767.98px) {
    .contact-header {
        padding: 1.5rem 0 2rem;
    }
    .contact-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-header.contact-header--centered .contact-header-row {
        align-items: center;
    }
    .contact-header.contact-header--centered .contact-title,
    .contact-header.contact-header--centered .contact-subtitle {
        text-align: center;
    }
    .contact-header-meta {
        align-items: flex-start;
    }
    .contact-body {
        padding: 2rem 0 2.5rem;
    }
    .contact-form-card,
    .contact-info-card {
        padding: 1.5rem;
        border-radius: 18px;
    }
    .contact-form-footer {
        flex-direction: column;
    }
    .contact-submit {
        width: 100%;
    }
}

/* ============================================================
   /instruktorzy/ — buscador interactivo + filtros (sobre el hero)
   ============================================================ */

.instructors-page {
    background: linear-gradient(180deg, #F4F7FB 0%, #ffffff 100%);
    min-height: 100vh;
}

/* Hero con bg image + título + filtros overlay */
.instructors-hero {
    position: relative;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    padding: 2rem 0 3rem;
}
.instructors-hero .bg-holder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.instructors-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.7) 100%);
    z-index: 0;
}
.instructors-hero .container-xxl {
    position: relative;
    z-index: 1;
}
.instructors-hero-wrapper {
    max-width: 56rem;
    margin: 0 auto;
}
.instructors-breadcrumb {
    justify-content: center;
    margin-bottom: 1.5rem;
}
.instructors-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
}
.instructors-breadcrumb a:hover {
    color: #ffffff;
}
.instructors-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
}
.instructors-breadcrumb-current {
    color: #ffffff;
}
.instructors-hero-title {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: #ffffff;
    margin: 0 0 0.75rem;
    line-height: 1.1;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.instructors-hero-title .text-primary {
    color: #5BC0EB !important;
}
.instructors-hero-sub {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.75rem;
    line-height: 1.5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.instructors-hero-sub strong {
    color: #ffffff;
    font-weight: 700;
}

/* Filtros cuando están dentro del hero (overlay card) */
.instructors-filters--overlay {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    max-width: 56rem;
    color: #0a0a0a;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.instructors-header {
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid #EEF1F5;
}
.instructors-header-text {
    max-width: 48rem;
}

/* Bloque de filtros (search + category chips) */
.instructors-body {
    padding: 2rem 0 4rem;
    background: #ffffff;
}
.instructors-filters {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Search input */
.instructors-search {
    position: relative;
    display: flex;
    align-items: center;
}
.instructors-search > i.icon-line-search {
    position: absolute;
    left: 1rem;
    color: #9CA3AF;
    font-size: 1.0625rem;
    pointer-events: none;
}
.instructors-search input {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 2.75rem;
    font-size: 0.9375rem;
    color: #0a0a0a;
    background: #F9FAFB;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.instructors-search input::placeholder {
    color: #9CA3AF;
}
.instructors-search input:focus {
    outline: none;
    background: #ffffff;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.15);
}
.instructors-search-clear {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: 0;
    color: #9CA3AF;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.instructors-search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0a0a0a;
}
.instructors-search.has-value .instructors-search-clear {
    display: inline-flex;
}

/* Category chips */
.instructors-categories {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.instructors-filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
}
.instructors-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.instructor-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    background: #ffffff;
    color: #0a0a0a;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.instructor-cat-chip:hover {
    border-color: #1C94F5;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.06);
}
.instructor-cat-chip:active {
    transform: scale(0.96);
}
.instructor-cat-chip.is-active {
    background: #1C94F5;
    color: #ffffff;
    border-color: #1C94F5;
}

/* Summary */
.instructors-summary {
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 1rem;
    padding-left: 0.25rem;
}
.instructors-summary span {
    font-weight: 700;
    color: #0a0a0a;
}

/* Grid de cards */
.instructors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .instructors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .instructors-grid { grid-template-columns: repeat(3, 1fr); }
}

.instructor-card {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.instructor-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.1);
}

.instructor-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.instructor-avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    background: linear-gradient(135deg, #1C94F5 0%, #3aa3ff 100%);
    color: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.instructor-identity {
    flex: 1 1 auto;
    min-width: 0;
}
.instructor-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.15rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.instructor-region {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: #6B7280;
}
.instructor-region i {
    font-size: 0.95em;
    color: #1C94F5;
}

.instructor-area {
    font-size: 0.875rem;
    color: #4B5563;
    margin: 0;
    padding-left: 3.5rem;
    line-height: 1.4;
    font-weight: 500;
}

.instructor-contact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid #F1F3F5;
}
.instructor-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #0a0a0a;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    margin: 0 -0.6rem;
    transition: background 0.2s ease, color 0.2s ease;
    overflow: hidden;
}
.instructor-contact-item:hover {
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
}
.instructor-contact-item i {
    flex: 0 0 1rem;
    color: #1C94F5;
    font-size: 1rem;
    text-align: center;
}
.instructor-contact-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.instructor-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid #F1F3F5;
}
.instructor-cats-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    margin-right: 0.25rem;
}
.instructor-cats-label i {
    color: #1C94F5;
}
.instructor-cat {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
    border: 1px solid rgba(28, 148, 245, 0.18);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.instructor-cat.is-match {
    background: #1C94F5;
    color: #ffffff;
    border-color: #1C94F5;
}

/* Empty state */
.instructors-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #ffffff;
    border: 1px dashed #E5E7EB;
    border-radius: 16px;
    color: #6B7280;
}
.instructors-empty i {
    font-size: 2.5rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: 0.75rem;
}
.instructors-empty p {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
}
.instructors-reset {
    padding: 0.5rem 1.25rem;
    background: #ffffff;
    color: #0a0a0a;
    border: 1.5px solid #0a0a0a;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.instructors-reset:hover {
    background: #0a0a0a;
    color: #ffffff;
}

.instructors-no-data {
    grid-column: 1 / -1;
    text-align: center;
    color: #6B7280;
    padding: 2rem;
}

/* Responsive */
@media (max-width: 767.98px) {
    .instructors-hero {
        padding: 1.5rem 0 2.5rem;
    }
    .instructors-filters--overlay {
        padding: 1rem;
        border-radius: 14px;
    }
    .instructors-body {
        padding: 1.5rem 0 2.5rem;
    }
    .instructor-area {
        padding-left: 0;
    }
}


/* ============================================================
   Home content — h2 styled like h1 (después de la conversión SEO)
   Mantiene el tamaño visual que tenían los h1 originales.
   ============================================================ */

.content-section .content-holder h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.1;
    text-transform: none;
    margin: 0 0 0.75rem;
    color: #0a0a0a;
}
.content-section.dark-theme .content-holder h2,
.content-section.bg-yellow .content-holder h2 {
    color: #ffffff;
}
.content-section .content-holder h2 span[style*="color: #1c94f5"] {
    color: #1c94f5 !important;
}
.content-section.bg-yellow .content-holder h2 span[style*="color: #1c94f5"] {
    color: #1c94f5 !important;
    font-style: italic;
}

/* Centrado para el h2 de "odzyskanie" (que está centrado en el original) */
#odzyskanie .content-holder h2 {
    text-align: center;
}
#odzyskanie h2 span[style*="font-style: italic"] {
    color: #0a0a0a;
    font-weight: 400;
}
@media (max-width: 575.98px) {
    .content-section .content-holder h2 {
        font-size: clamp(1.25rem, 5vw, 1.625rem);
    }
}


/* ============================================================
   /pakiety/ — header SEO (breadcrumb + h1 + sub)
   ============================================================ */

.plans-content {
    padding: 2rem 0 3rem;
}
.plans-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
}
.plans-breadcrumb a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease;
}
.plans-breadcrumb a:hover {
    color: #1C94F5;
}
.plans-breadcrumb-sep {
    color: #9CA3AF;
}
.plans-breadcrumb-current {
    color: #0a0a0a;
    font-weight: 600;
}
.plans-heading {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0 auto 0.75rem;
    line-height: 1.1;
    text-wrap: balance;
    text-align: center;
}
.plans-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #4B5563;
    max-width: 42rem;
    margin: 0 auto 2rem;
    text-align: center;
}

/* ============================================================
   /pakiety/ — hero "Inteligentny algorytm nauki" (detail 23)
   2 columnas: text a la izq + imagen a la der
   ============================================================ */

.plans-algo-hero {
    background: linear-gradient(180deg, #ffffff 0%, #F4F7FB 100%);
    border-radius: 24px;
    padding: 2.5rem 0;
    margin: 1rem 0 2.5rem;
    overflow: hidden;
}
.plans-algo-content {
    padding: 1rem 0;
    text-align: center;
}
.plans-algo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 auto 0.875rem;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.plans-algo-badge i {
    font-size: 0.95em;
}
.plans-algo-title {
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 0.875rem;
    line-height: 1.1;
    text-wrap: balance;
}
.plans-algo-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0 auto 1rem;
    max-width: 32rem;
}
.plans-algo-cta {
    font-size: 1rem;
    color: #0a0a0a;
    margin: 0;
}
.plans-algo-cta strong {
    color: #1C94F5;
    font-weight: 700;
}
.plans-algo-image {
    text-align: center;
    padding: 2rem 0;
}
.plans-algo-image img {
    max-width: 75%;
    height: auto;
    display: inline-block;
    border-radius: 14px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.12);
}
@media (max-width: 991.98px) {
    .plans-algo-content {
        padding: 0 0.5rem 1.5rem;
        text-align: center;
    }
    .plans-algo-badge {
        margin-left: auto;
        margin-right: auto;
    }
    .plans-algo-text {
        margin-left: auto;
        margin-right: auto;
    }
    .plans-algo-image {
        aspect-ratio: 16 / 10;
    }
}


/* ============================================================
   Home — FAQ visible (acompaña al schema FAQPage)
   ============================================================ */

.home-faq {
    background: #F4F7FB;
    padding: 3.5rem 0 4rem;
}
.home-faq-heading {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
}
.home-faq-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: #4B5563;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.home-faq-grid {
    display: grid;
    /* align-items: start: sin esto, al abrir una tarjeta la rejilla estiraba su
       vecina de fila y parecia que se abrian dos (una de ellas vacia). */
    align-items: start;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .home-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.home-faq-item {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-faq-item:hover {
    border-color: #1C94F5;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.06);
}
.home-faq-item summary {
    font-size: 1rem;
    font-weight: 600;
    color: #0a0a0a;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
    line-height: 1.4;
}
.home-faq-item summary::-webkit-details-marker {
    display: none;
}
.home-faq-item summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: #1C94F5;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    line-height: 1;
}
.home-faq-item[open] summary::after {
    content: "−";
    transform: rotate(0deg);
}
.home-faq-item p {
    margin: 0.875rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid #EEF1F5;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4B5563;
}
@media (max-width: 767.98px) {
    .home-faq {
        padding: 2.5rem 0 3rem;
    }
    .home-faq-item {
        padding: 1rem 1.25rem;
    }
}


/* ============================================================
   /kurs/ - bloque SEO post-test (H2 + cards)
   Añade contenido indexable debajo del componente Vue del test
   ============================================================ */

.kurs-seo {
    background: #ffffff;
    padding: 3rem 0 4rem;
    border-top: 1px solid #EEF1F5;
}
.kurs-seo-heading {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    margin: 0 0 1rem;
    line-height: 1.2;
    text-wrap: balance;
}
.kurs-seo-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #1F2937;
    max-width: 48rem;
    margin: 0 0 2.5rem;
}
.kurs-seo-text a {
    color: #1C94F5;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
}
.kurs-seo-text a:hover {
    color: #0a7fd6;
}
.kurs-seo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .kurs-seo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kurs-seo-card {
    background: #F8FAFC;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 1.5rem;
}
.kurs-seo-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    line-height: 1.3;
}
.kurs-seo-card-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0;
}
.kurs-seo-card-text a {
    color: #1C94F5;
    text-decoration: underline;
}
.kurs-seo-card-text em {
    font-style: italic;
    color: #1F2937;
}
@media (max-width: 575.98px) {
    .kurs-seo {
        padding: 2rem 0 2.5rem;
    }
}


/* ============================================================
   /egzamin/ - bloque SEO post-intro (H2 + cards + FAQ)
   Replica del patrón /kurs/ para consistencia
   ============================================================ */

.exam-intro-seo {
    background: #F4F7FB;
    padding: 3rem 0 4rem;
}
.exam-intro-seo-heading {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    margin: 0 0 1rem;
    line-height: 1.2;
    text-wrap: balance;
}
.exam-intro-seo-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #1F2937;
    max-width: 48rem;
    margin: 0 0 2.5rem;
}
.exam-intro-seo-text a {
    color: #1C94F5;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.exam-intro-seo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .exam-intro-seo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.exam-intro-seo-card {
    background: #ffffff;
    border: 1px solid #EEF1F5;
    border-radius: 14px;
    padding: 1.5rem;
}
.exam-intro-seo-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
}
.exam-intro-seo-card-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0;
}
.exam-intro-seo-card-text strong { color: #1C94F5; }
.exam-intro-faq {
    background: #ffffff;
    padding: 3rem 0 4rem;
}
.exam-intro-faq-heading {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}
.exam-intro-faq-item {
    border-bottom: 1px solid #EEF1F5;
    padding: 1rem 0;
}
.exam-intro-faq-item summary {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0a0a0a;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.exam-intro-faq-item summary::-webkit-details-marker { display: none; }
.exam-intro-faq-item summary::after {
    content: "+";
    font-size: 1.5rem;
    color: #1C94F5;
    font-weight: 300;
    line-height: 1;
}
.exam-intro-faq-item[open] summary::after { content: "−"; }
.exam-intro-faq-item p {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4B5563;
}
.exam-intro-faq-item p a {
    color: #1C94F5;
    text-decoration: underline;
}
@media (max-width: 575.98px) {
    .exam-intro-seo,
    .exam-intro-faq {
        padding: 2rem 0 2.5rem;
    }
}


/* ============================================================
   /pakiety/ - bloque SEO introductorio (baza pytan intent)
   Encima de los planes, refuerza keywords comerciales
   ============================================================ */

.plans-seo-intro {
    background: #ffffff;
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid #EEF1F5;
}
.plans-seo-intro-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #1F2937;
    max-width: 56rem;
    margin: 0 auto 1.25rem;
    text-align: center;
}
.plans-seo-intro-text a {
    color: #1C94F5;
    text-decoration: underline;
    font-weight: 600;
}
.plans-seo-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .plans-seo-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.plans-seo-feature {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #1F2937;
    font-weight: 500;
}
.plans-seo-feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}


/* ============================================================
   Newsletter - footer signup form (dark theme)
   Reemplaza el embed de ActiveCampaign (caido) con form Symfony
   ============================================================ */

.newsletter-sign {
    padding: 1rem 0 1.5rem;
}
.newsletter-sign .text-center h2 {
    color: #ffffff;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.newsletter-sign .text-center h3 {
    color: #ffffff;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.newsletter-form-wrap {
    max-width: 36rem;
    margin: 0 auto;
}
.newsletter-form {
    width: 100%;
}
.newsletter-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.newsletter-form-field {
    flex: 1 1 16rem;
    min-width: 0;
}
.newsletter-form-submit {
    flex: 0 0 auto;
}

/* Input - dark theme override (Bootstrap form-control viene claro) */
.newsletter-input.form-control {
    height: 2.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.newsletter-input.form-control:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}
.newsletter-input.form-control:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.25);
    outline: none;
    color: #ffffff;
}
.newsletter-input.form-control.is-invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Submit - azul solido (no gradient, matches site primary) */
.newsletter-submit.btn {
    height: 2.75rem;
    padding: 0 1.5rem;
    background: #1C94F5;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.5);
}
.newsletter-submit.btn:hover {
    background: #0d7fd6;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -3px rgba(28, 148, 245, 0.6);
}
.newsletter-submit.btn:active {
    transform: translateY(0);
}
.newsletter-submit.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.newsletter-footnote {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    margin: 0.875rem auto 0;
    max-width: 32rem;
}

/* Mobile: stacked */
@media (max-width: 575.98px) {
    .newsletter-form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .newsletter-form-field,
    .newsletter-form-submit {
        flex: 1 1 auto;
        width: 100%;
    }
    .newsletter-submit.btn {
        width: 100%;
    }
}




/* ============================================================
   /poradniki/ - Freemium model
   ============================================================ */

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: linear-gradient(135deg, #1C94F5 0%, #0a7fd6 100%);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 0.5rem;
    box-shadow: 0 4px 10px -3px rgba(28, 148, 245, 0.5);
}
.premium-badge i { font-size: 0.85em; line-height: 1; }
.premium-badge--sm {
    padding: 0.15rem 0.4rem;
    font-size: 0.6rem;
    margin-left: 0.35rem;
    gap: 0.2rem;
}
.premium-badge--sm span { display: none; }

.poradnik-cta {
    background: linear-gradient(180deg, #ffffff 0%, #F4F7FB 100%);
    border: 1.5px solid #1C94F5;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    margin: 2.5rem 0 1rem;
    text-align: center;
}
.poradnik-cta-heading {
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    line-height: 1.25;
    text-wrap: balance;
}
.poradnik-cta-text {
    font-size: 1rem;
    line-height: 1.55;
    color: #4B5563;
    max-width: 38rem;
    margin: 0 auto 1.5rem;
}
.poradnik-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    align-items: center;
}
.poradnik-cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease;
}
.poradnik-cta-buttons .btn-primary { background: #1C94F5; color: #ffffff; border: none; }
.poradnik-cta-buttons .btn-primary:hover { background: #0a7fd6; transform: translateY(-1px); }
.poradnik-cta-buttons .btn-ghost {
    background: #ffffff;
    color: #1C94F5;
    border: 1.5px solid #1C94F5;
}
.poradnik-cta-buttons .btn-ghost:hover {
    background: rgba(28, 148, 245, 0.08);
    transform: translateY(-1px);
}
.poradnik-cta-buttons .btn-link {
    background: transparent;
    color: #4B5563;
    border: none;
    padding: 0.65rem 0.5rem;
}
.poradnik-cta-buttons .btn-link:hover { color: #1C94F5; }
@media (max-width: 575.98px) {
    .poradnik-cta { padding: 1.5rem 1.25rem; }
    .poradnik-cta-buttons { flex-direction: column; width: 100%; }
    .poradnik-cta-buttons .btn { width: 100%; justify-content: center; }
}

/* --- Page video (YouTube embed) --- */
.page-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 1.5rem 0 2rem;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.page-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Oculta la barra superior de YouTube (título + canal + foto de perfil).
   El degradado cubre la franja donde el player muestra esa info al hacer
   hover/pausa; pointer-events:none deja pasar los clics al reproductor. */
.page-video-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
.page-video-wrap--locked .page-video-iframe--blur {
    filter: blur(6px) brightness(0.5);
    transform: scale(1.05);
}
.page-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(28, 148, 245, 0.75) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: #ffffff;
    z-index: 2;
}
.page-video-overlay .icon-line-lock {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}
.page-video-overlay-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: #ffffff;
    line-height: 1.2;
}
.page-video-overlay-text {
    font-size: 1rem;
    margin: 0 0 1rem;
    max-width: 32rem;
    opacity: 0.95;
    line-height: 1.5;
}
.page-video-overlay-note {
    margin: 0 0 1rem;
    opacity: 0.85;
}
.page-video-overlay .btn {
    background: #ffffff;
    color: #1C94F5;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.15s ease;
}
.page-video-overlay .btn:hover {
    transform: translateY(-1px);
    background: #f5f5f5;
}
@media (max-width: 575.98px) {
    .page-video-overlay-title { font-size: 1.25rem; }
    .page-video-overlay-text { font-size: 0.9375rem; }
    .page-video-overlay .icon-line-lock { font-size: 2.25rem; }
}

/* --- Modal de video (Dostępne filmy) --- */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.video-modal.is-open {
    display: flex;
}
.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}
.video-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.video-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
}
.video-modal-frame {
    margin: 0;
    border-radius: 0;
}
@media (max-width: 575.98px) {
    .video-modal { padding: 0.5rem; }
    .video-modal-dialog { border-radius: 10px; }
}

.premium-teaser {
    background: linear-gradient(180deg, #ffffff 0%, #F4F7FB 100%);
    border: 2px solid #1C94F5;
    border-radius: 18px;
    padding: 2.25rem 2rem;
    margin: 1.5rem 0;
}
.premium-teaser h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 1rem;
    line-height: 1.3;
}
.premium-teaser p { font-size: 1rem; line-height: 1.6; color: #1F2937; margin: 0 0 0.875rem; }
.premium-teaser ul { margin: 0 0 1rem; padding-left: 1.5rem; }
.premium-teaser li { font-size: 0.9375rem; line-height: 1.6; color: #1F2937; margin-bottom: 0.4rem; }
.premium-teaser li::marker { color: #1C94F5; }
.premium-cta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E5E7EB;
    text-align: center;
}
.premium-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.75rem;
    background: #1C94F5;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.45);
}
.premium-cta .btn:hover { background: #0a7fd6; transform: translateY(-1px); }
.premium-cta p { margin: 0.875rem 0 0; font-size: 0.875rem; color: #6B7280; }
.premium-cta a { color: #1C94F5; text-decoration: underline; font-weight: 600; }

/* ============================================================
   /egzamin/demo/ - Free demo page (anonymous, real DB question)
   ============================================================ */
.exam-demo { background: linear-gradient(180deg, #fff 0%, #F4F7FB 60%, #fff 100%); padding: 2.5rem 0 4rem; min-height: 75vh; }
.exam-demo-wrapper { max-width: 44rem; margin: 0 auto; }
.exam-demo-back { display: inline-flex; align-items: center; gap: 0.4rem; color: #4B5563; font-size: 0.875rem; font-weight: 500; text-decoration: none; margin-bottom: 1.5rem; }
.exam-demo-back:hover { color: #1C94F5; }
.exam-demo-eyebrow { display: inline-block; padding: 0.3rem 0.85rem; background: rgba(28, 148, 245, 0.08); color: #1C94F5; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.875rem; }
.exam-demo-title { font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 800; color: #0a0a0a; margin: 0 0 0.625rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.exam-demo-sub { font-size: 1.0625rem; line-height: 1.6; color: #1F2937; margin: 0 0 2rem; }
.exam-demo-sub strong { color: #1C94F5; font-weight: 700; }
.exam-demo-question { background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08); }
.exam-demo-question-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 1.25rem; font-size: 0.875rem; color: #4B5563; }
.exam-demo-pill { display: inline-block; padding: 0.3rem 0.85rem; background: linear-gradient(135deg, #1C94F5, #0a7fd6); color: #fff; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.exam-demo-points-help { flex: 1 1 0; min-width: 0; }
.exam-demo-question-text { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: #0a0a0a; margin: 0 0 1.25rem; }
.exam-demo-answers { display: flex; flex-direction: column; gap: 0.625rem; margin: 0 0 1.5rem; }
.exam-demo-answer { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: #fff; border: 1.5px solid #E5E7EB; border-radius: 12px; cursor: pointer; transition: background 0.2s, border-color 0.2s; font-size: 0.9375rem; line-height: 1.45; color: #1F2937; }
.exam-demo-answer:hover { background: rgba(28, 148, 245, 0.05); border-color: #1C94F5; }
.exam-demo-answer input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.exam-demo-answer-marker { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; border: 2px solid #D1D5DB; border-radius: 50%; background: #fff; position: relative; transition: border-color 0.2s, background 0.2s; }
.exam-demo-answer:has(input:checked) .exam-demo-answer-marker { border-color: #1C94F5; background: #1C94F5; }
.exam-demo-answer:has(input:checked) .exam-demo-answer-marker::after { content: ""; position: absolute; inset: 3px; background: #fff; border-radius: 50%; }
.exam-demo-answer:has(input:checked) { border-color: #1C94F5; background: rgba(28, 148, 245, 0.08); }
.exam-demo-answer-text { flex: 1 1 0; min-width: 0; }
.exam-demo-actions { text-align: center; }
.exam-demo-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; background: #1C94F5; color: #fff; border: none; border-radius: 999px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s, box-shadow 0.2s; box-shadow: 0 4px 14px -3px rgba(28, 148, 245, 0.5); }
.exam-demo-actions .btn:hover { background: #0a7fd6; transform: translateY(-1px); }
.exam-demo-hint { margin: 0.75rem 0 0; font-size: 0.8125rem; color: #6B7280; }
.exam-demo-result { background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08); }
.exam-demo-result--correct { border-color: #10B981; }
.exam-demo-result--wrong { border-color: #EF4444; }
.exam-demo-result-banner { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.exam-demo-result--correct .exam-demo-result-banner i, .exam-demo-result--wrong .exam-demo-result-banner i { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.exam-demo-result--correct .exam-demo-result-banner i { background: #10B981; }
.exam-demo-result--wrong .exam-demo-result-banner i { background: #EF4444; }
.exam-demo-result-title { font-size: 1.25rem; font-weight: 800; color: #0a0a0a; margin: 0; line-height: 1.25; }
.exam-demo-result-question { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: #1F2937; margin: 0 0 1.25rem; padding: 0.75rem 0; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
.exam-demo-result-answers { display: flex; flex-direction: column; gap: 0.625rem; margin: 0 0 1.75rem; }
.exam-demo-result-answer { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9375rem; line-height: 1.45; }
.exam-demo-result-answer--correct { background: rgba(16, 185, 129, 0.1); color: #064E3B; border: 1px solid rgba(16, 185, 129, 0.3); }
.exam-demo-result-answer--wrong { background: rgba(239, 68, 68, 0.1); color: #7F1D1D; border: 1px solid rgba(239, 68, 68, 0.3); }
.exam-demo-result-answer--neutral { background: #F9FAFB; color: #4B5563; border: 1px solid #E5E7EB; }
.exam-demo-result-answer-marker { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700; }
.exam-demo-result-answer--correct .exam-demo-result-answer-marker { background: #10B981; }
.exam-demo-result-answer--wrong .exam-demo-result-answer-marker { background: #EF4444; }
.exam-demo-result-answer--neutral .exam-demo-result-answer-marker { background: transparent; }
.exam-demo-result-answer-text { flex: 1 1 0; min-width: 0; }
.exam-demo-result-answer-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 4px; }
.exam-demo-result-answer--correct .exam-demo-result-answer-tag { background: #10B981; color: #fff; }
.exam-demo-result-answer--wrong .exam-demo-result-answer-tag { background: #EF4444; color: #fff; }
.exam-demo-result-next { text-align: center; padding-top: 1.25rem; border-top: 1px solid #E5E7EB; }
.exam-demo-result-next-title { font-size: 1.125rem; font-weight: 800; color: #0a0a0a; margin: 0 0 0.625rem; line-height: 1.3; }
.exam-demo-result-next-text { font-size: 0.9375rem; line-height: 1.6; color: #4B5563; margin: 0 auto 1.25rem; max-width: 32rem; }
.exam-demo-result-ctas { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-bottom: 1rem; }
.exam-demo-result-ctas .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.5rem; font-size: 0.9375rem; font-weight: 700; border-radius: 999px; text-decoration: none; transition: background 0.2s, transform 0.1s; }
.exam-demo-result-ctas .btn-primary { background: #1C94F5; color: #fff; }
.exam-demo-result-ctas .btn-primary:hover { background: #0a7fd6; transform: translateY(-1px); }
.exam-demo-result-ctas .btn-ghost { background: #fff; color: #1C94F5; border: 1.5px solid #1C94F5; }
.exam-demo-result-ctas .btn-ghost:hover { background: rgba(28, 148, 245, 0.08); transform: translateY(-1px); }
.exam-demo-result-trust { margin: 0.625rem 0 0; font-size: 0.8125rem; color: #6B7280; display: inline-flex; align-items: center; gap: 0.35rem; }
.exam-demo-result-trust i { color: #1C94F5; font-size: 0.95em; }
@media (max-width: 575.98px) { .exam-demo-wrapper { padding: 0 0.5rem; } .exam-demo-question, .exam-demo-result { padding: 1.25rem 1rem; } .exam-demo-result-ctas { flex-direction: column; width: 100%; } .exam-demo-result-ctas .btn { width: 100%; justify-content: center; } }


/* ============================================================
   /egzamin/ - demo CTA (in exam-intro-cta section)
   ============================================================ */
.exam-intro-demo-cta {
    margin-top: 1.25rem;
    text-align: center;
}
.btn-demo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    color: #1C94F5;
    border: 1.5px solid #1C94F5;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.1s ease, color 0.2s ease;
}
.btn-demo-cta:hover {
    background: #1C94F5;
    color: #ffffff;
    transform: translateY(-1px);
}
.btn-demo-cta i {
    font-size: 1em;
}


/* ============================================================
   Footer rediseñado — profesional, limpio, single-line
   ============================================================ */

.site-footer {
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer-main {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-brand {
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-brand:hover { opacity: 0.85; }

.footer-logo {
    display: block;
    height: 3.5rem;
    width: auto;
    max-width: 25rem;
}

.footer-center {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.footer-line {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.footer-line a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-line a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.footer-dot {
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

.footer-tpay {
    flex: 0 0 auto;
    line-height: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-tpay:hover { opacity: 0.85; }

.footer-tpay img {
    display: block;
    height: 2.5rem;
    width: auto;
}

.footer-bottom {
    padding: 0.875rem 0 1rem;
    background: #000000;
}

/* «Designed by» y el logo de SeoGrow van en la misma línea, así que se alinean
   por la LÍNEA BASE del texto, no por el centro de la caja: centrando las cajas
   el nombre del logo quedaba 3,2px por debajo del texto y se veía descolgado. */
.footer-credit {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
}

.footer-credit-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-credit-logo {
    line-height: 0;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-credit-logo:hover { opacity: 0.85; transform: translateY(-1px); }

/* El alto sale de igualar el logo al texto, no de un número al azar: el wordmark
   ocupa 38 de los 85 píxeles de alto del fichero (medido sobre la propia imagen)
   y las mayúsculas de «Designed by» miden 11px, así que 11 / (38/85) ≈ 24,6px =
   1,23rem. Así el nombre del logo se lee del mismo tamaño que el texto. */
.footer-credit-logo img {
    display: block;
    height: 1.23rem;
    width: auto;
    max-width: 100%;
    /* Y por debajo de la línea base queda el rabo de la «g»: 16 de los 85 píxeles
       del fichero (18,8%). Apoyando la imagen en la línea base del texto, el
       wordmark subiría esa misma proporción; se baja otro tanto y las dos líneas
       coinciden. El 21,9% es el 18,8% más los 0,76px que quedaban de diferencia,
       medidos en el navegador a 1440, 1180, 390 y 320px de ancho. */
    transform: translateY(21.9%);
}

/* Mobile: stack vertically */
@media (max-width: 767.98px) {
    .footer-main { padding: 1.5rem 0 1.25rem; }
    .footer-row {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    .footer-center { order: 3; width: 100%; }
    .footer-brand { order: 1; }
    .footer-tpay { order: 2; }
    .footer-line { font-size: 0.75rem; gap: 0.3rem; }
}

/* ==========================================================================
   KURS — Test UI redesign (autoplay + auto-advance + modern look)
   ========================================================================== */

.kurs-app {
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

.kurs-app #test,
.kurs-app #test > div {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

#test .app-start-holder {
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 10px 40px -10px rgba(28, 148, 245, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(28, 148, 245, 0.08);
    max-width: 720px;
    margin: 0 auto;
}
#test .app-settings-holder {
    margin-bottom: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
#test .app-settings-holder h2 {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}
#test .app-settings-holder .small {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}
#test .categories-list,
#test .points-list,
#test .mode-list {
    gap: 0.625rem;
    justify-content: center;
}
#test .categories-list li,
#test .points-list li,
#test .mode-list li {
    margin: 0;
}
#test .categories-list .btn,
#test .points-list .btn,
#test .mode-list .btn {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.625rem 1.5rem;
    border-radius: 999px;
    min-width: 56px;
    background: #ffffff;
    color: #1f2937;
    border: 2px solid #e5e7eb;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#test .categories-list .btn:hover,
#test .points-list .btn:hover,
#test .mode-list .btn:hover {
    transform: translateY(-1px);
    border-color: #1C94F5;
    color: #1C94F5;
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.25);
}
#test .categories-list .btn.selected,
#test .points-list .btn.selected,
#test .mode-list .btn.selected {
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    border-color: #1C94F5;
    box-shadow: 0 4px 14px -2px rgba(28, 148, 245, 0.45);
}
#test .buttons .btn {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.95rem 2.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px -4px rgba(28, 148, 245, 0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
}
#test .buttons .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(28, 148, 245, 0.55);
}
#test .buttons .btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

#test > div {
    animation: kursFadeIn 0.35s ease-out;
}
@keyframes kursFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#test .pseudo-btn {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    text-align: center;
    line-height: 1.2;
}
#test .efficiency {
    font-weight: 600 !important;
}
#test .efficiency.bg-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.35);
}

#test .settings-buttons {
    background: #ffffff;
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    text-align: left;
}
#test .settings-buttons li {
    margin: 0;
}
#test .settings-buttons li > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4b5563;
}
#test .settings-buttons .fa {
    color: #1C94F5;
    width: 16px;
    text-align: center;
}
#test .settings-buttons strong {
    color: #1f2937;
    font-weight: 600;
}
#test .settings-buttons .btn-yellow {
    background: transparent;
    border: 1px solid #1C94F5;
    color: #1C94F5;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#test .settings-buttons .btn-yellow:hover {
    background: #1C94F5;
    color: #ffffff;
}

#test .media-holder {
    background: #000000;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.35);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#test .media-holder img {
    max-width: 100%;
    height: auto;
    display: block;
}
#test .media-holder video {
    width: 100%;
    height: auto;
    display: block;
    background: #000000;
}
#test .test-video-player {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

#test .question-content {
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.45;
    color: #1f2937;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    border-left: 4px solid #1C94F5;
    border-radius: 0 16px 16px 0;
}
#test .question-content--modern {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
    border-left: 5px solid #1C94F5;
    box-shadow: 0 2px 6px rgba(28, 148, 245, 0.06);
}

#test .question-answers {
    margin-bottom: 1.5rem;
}
#test .yes-no {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
#test .yes-no .btn {
    flex: 1 1 220px;
    max-width: 320px;
}
#test .single-choice ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
#test .single-choice li {
    margin: 0;
}
#test .answer-btn {
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    width: 100%;
    text-align: left;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
#test .answer-btn:hover:not(:disabled) {
    border-color: #1C94F5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -2px rgba(28, 148, 245, 0.25);
}
#test .answer-btn:active:not(:disabled) {
    transform: translateY(0);
}
#test .answer-btn:disabled {
    cursor: default;
}
#test .answer-btn--yesno {
    text-align: center;
    justify-content: center;
    min-height: 64px;
}
#test .answer-btn--choice .answer-btn-letter {
    flex: 0 0 36px;
    height: 36px;
    width: 36px;
    border-radius: 10px;
    background: #1C94F5;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
#test .answer-btn--choice:hover:not(:disabled) .answer-btn-letter {
    background: #0f7fd6;
    transform: scale(1.05);
}
#test .answer-btn-text {
    flex: 1;
}
#test .answer-btn-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Hide the icon slot when Vue has not rendered an <i> inside it
   (the v-if leaves an empty <span class="answer-btn-icon"> with just
   a comment, which keeps the 24px slot + a 14px gap, making the
   answer text look far away from the letter). */
#test .answer-btn-icon:not(:has(> i)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
}

#test .answer-btn.answer-correct {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border-color: #10b981 !important;
    color: #064e3b !important;
    box-shadow: 0 4px 18px -2px rgba(16, 185, 129, 0.4) !important;
    animation: answerCorrect 0.4s ease-out;
}
#test .answer-btn.answer-correct .answer-btn-letter,
#test .answer-btn.answer-correct .answer-btn-icon {
    background: #059669 !important;
    color: #ffffff !important;
}
#test .answer-btn.answer-correct .answer-btn-icon i {
    color: #ffffff;
}
@keyframes answerCorrect {
    0%   { transform: scale(0.96); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#test .answer-btn.answer-wrong {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: #ef4444 !important;
    color: #7f1d1d !important;
    box-shadow: 0 4px 18px -2px rgba(239, 68, 68, 0.35) !important;
    animation: answerWrong 0.4s ease-out;
}
#test .answer-btn.answer-wrong .answer-btn-letter,
#test .answer-btn.answer-wrong .answer-btn-icon {
    background: #dc2626 !important;
    color: #ffffff !important;
}
#test .answer-btn.answer-wrong .answer-btn-icon i {
    color: #ffffff;
}
@keyframes answerWrong {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

#test .main-controls .btn,
#test .next-question-button,
#test .previous-question-button,
#test button[class*="question-button"] {
    font-family: "Poppins", sans-serif !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.25rem !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
}
#test .main-controls .btn:hover,
#test .next-question-button:hover,
#test .previous-question-button:hover {
    background: #f9fafb !important;
    border-color: #1C94F5 !important;
    color: #1C94F5 !important;
}

#test .video-start {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    background: #ffffff !important;
    color: #4b5563 !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}
#test .video-start:hover {
    border-color: #1C94F5 !important;
    color: #1C94F5 !important;
}
#test .video-start.invisible {
    display: none !important;
}

#test .app-summary-holder {
    background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 10px 40px -10px rgba(28, 148, 245, 0.15);
    border: 1px solid rgba(28, 148, 245, 0.08);
    max-width: 720px;
    margin: 0 auto;
}
#test .app-summary-holder h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
}
#test .app-summary-holder .summary-percentage {
    font-family: "Poppins", sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1C94F5 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin: 1.5rem 0;
}
#test .app-summary-holder .summary-stats {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid #e5e7eb;
}
#test .app-summary-holder .summary-buttons .btn {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.875rem 2rem;
    margin: 0.5rem;
    transition: all 0.2s;
}
#test .app-summary-holder .summary-buttons .btn-primary {
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px -4px rgba(28, 148, 245, 0.4);
}
#test .app-summary-holder .summary-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(28, 148, 245, 0.55);
}

@media (max-width: 767.98px) {
    #test .app-start-holder,
    #test .app-summary-holder {
        padding: 1.5rem 1rem;
        border-radius: 18px;
    }
    #test .question-content,
    #test .question-content--modern {
        font-size: 1.05rem;
        padding: 1rem;
    }
    #test .answer-btn,
    #test .answer-btn--choice,
    #test .answer-btn--yesno {
        font-size: 0.95rem !important;
        padding: 0.875rem 1rem !important;
    }
    #test .categories-list .btn,
    #test .points-list .btn,
    #test .mode-list .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
    #test .yes-no {
        flex-direction: column;
    }
    #test .yes-no .btn {
        max-width: 100%;
    }
}

#test .loading-indicator,
#test [class*="loading"] {
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

/* Countdown — big, prominent, modern */
#test .vue-countdown {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #064e3b;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: center;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
#test .vue-countdown .countdown-time,
#test .vue-countdown .totalSeconds {
    color: #047857;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    padding: 0.125rem 0.5rem;
    min-width: 3.5rem;
    display: inline-block;
}
#test .pseudo-btn.bg-green {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border: 2px solid #10b981 !important;
    color: #064e3b !important;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.25) !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    text-align: center;
    font-weight: 600;
}

/* Answer button — REINFORCED to override Bootstrap .btn and ensure proper layout */
#test .answer-btn {
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem 1rem 1.25rem !important;
    width: 100%;
    min-height: 64px;
    text-align: left !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    vertical-align: top !important;
}
#test .answer-btn:hover:not(:disabled) {
    border-color: #1C94F5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -2px rgba(28, 148, 245, 0.25);
}
#test .answer-btn:active:not(:disabled) {
    transform: translateY(0);
}
#test .answer-btn:disabled {
    cursor: default;
}
#test .answer-btn--yesno {
    text-align: center !important;
    justify-content: center !important;
    min-height: 64px;
}
#test .answer-btn--choice .answer-btn-letter {
    flex: 0 0 40px !important;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    border-radius: 10px;
    background: #1C94F5;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}
#test .answer-btn--choice:hover:not(:disabled) .answer-btn-letter {
    background: #0f7fd6;
    transform: scale(1.05);
}
#test .answer-btn-text {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    padding: 0 0.5rem 0 0;
    display: block;
}
#test .answer-btn-icon {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-left: auto;
}

/* Countdown warning state (last 5 seconds) */
#test .kurs-countdown {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border: 2px solid #10b981 !important;
    color: #064e3b !important;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.3s ease;
}
#test .kurs-countdown--warning {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: #ef4444 !important;
    color: #7f1d1d !important;
    box-shadow: 0 4px 14px -2px rgba(239, 68, 68, 0.35) !important;
    animation: countdownWarning 1s ease-in-out infinite;
}
#test .kurs-countdown--warning .totalSeconds,
#test .kurs-countdown--warning .countdown-time,
#test .kurs-countdown--warning span {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #b91c1c !important;
}
@keyframes countdownWarning {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* Time's up banner */
#test .kurs-timeup {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #7f1d1d;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: center;
    box-shadow: 0 4px 14px -2px rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    animation: timeupPulse 1.2s ease-in-out;
}
#test .kurs-timeup .fa {
    font-size: 1.3rem;
    color: #b91c1c;
}
@keyframes timeupPulse {
    0%   { opacity: 0; transform: scale(0.95); }
    50%  { transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   /kurs/ page — modern SaaS-style redesign (2026)
   ========================================================================== */

/* Reset / override old kurs-page header styles */
.kurs-page .kurs-header,
.kurs-page .kurs-breadcrumb,
.kurs-page .kurs-mode-badge,
.kurs-page .kurs-title,
.kurs-page .kurs-subtitle,
.kurs-page .kurs-header-meta,
.kurs-page .kurs-header-row,
.kurs-page .kurs-cats-label,
.kurs-page .kurs-cats-value {
    display: none !important;
}

/* ===================================================================
   HERO
   =================================================================== */
.kurs-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
    padding: 4rem 0 3rem;
    isolation: isolate;
}
.kurs-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.kurs-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
}
.kurs-hero-blob--blue {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #1C94F5 0%, transparent 70%);
    top: -120px;
    right: -120px;
}
.kurs-hero-blob--green {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    opacity: 0.22;
}
.kurs-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 920px;
}
.kurs-hero-top {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.kurs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    color: #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.kurs-pill .fa {
    font-size: 0.95rem;
}
.kurs-pill--free {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    color: #064e3b;
}
.kurs-pill--free .fa { color: #059669; }
.kurs-pill--time {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #78350f;
}
.kurs-pill--time .fa { color: #d97706; }

.kurs-hero-title {
    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 1.25rem;
}
.kurs-hero-title-accent {
    background: linear-gradient(135deg, #1C94F5 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.kurs-hero-sub {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    line-height: 1.55;
    color: #4b5563;
    max-width: 640px;
    margin: 0 auto 2.25rem;
}

.kurs-feature-list {
    list-style: none;
    margin: 0 auto 2.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 920px;
    text-align: left;
}
.kurs-feature-list li {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.kurs-feature-list li:hover {
    transform: translateY(-2px);
    border-color: #1C94F5;
    box-shadow: 0 8px 24px -8px rgba(28, 148, 245, 0.25);
}
.kurs-feature-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.4);
}
.kurs-feature-list li div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.kurs-feature-list strong {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
}
.kurs-feature-list span {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.3;
}

.kurs-hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.kurs-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    padding: 1rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 24px -4px rgba(28, 148, 245, 0.45);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}
.kurs-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(28, 148, 245, 0.6);
    color: #ffffff;
    text-decoration: none;
}
.kurs-cta-button .fa-play {
    font-size: 0.95rem;
}
.kurs-cta-secondary {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #4b5563;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    transition: all 0.18s;
    border: 1.5px solid transparent;
}
.kurs-cta-secondary:hover {
    color: #1C94F5;
    border-color: #1C94F5;
    text-decoration: none;
}
.kurs-cta-secondary span {
    margin-left: 0.25rem;
    transition: transform 0.18s;
    display: inline-block;
}
.kurs-cta-secondary:hover span {
    transform: translateX(3px);
}

/* ===================================================================
   COMPARISON GRID (Free vs Pro)
   =================================================================== */
.kurs-compare {
    padding: 4rem 0;
    background: #ffffff;
}
.kurs-compare-heading {
    font-family: "Poppins", sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
}
.kurs-compare-sub {
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    color: #6b7280;
    text-align: center;
    margin: 0 0 2.5rem;
}
.kurs-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto;
}
.kurs-compare-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.kurs-compare-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.1);
}
.kurs-compare-card--free {
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}
.kurs-compare-card--pro {
    border-color: #1C94F5;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    box-shadow: 0 8px 24px -8px rgba(28, 148, 245, 0.25);
}
.kurs-compare-card--pro::before {
    content: "Rekomendowane";
    position: absolute;
    top: 1rem;
    right: -2rem;
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 3rem;
    transform: rotate(35deg);
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.4);
}
.kurs-compare-card-head {
    margin-bottom: 1.5rem;
}
.kurs-compare-tag {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.kurs-compare-card--pro .kurs-compare-tag {
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
}
.kurs-compare-card-head h3 {
    font-family: "Poppins", sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.kurs-compare-card-head p {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}
.kurs-compare-features {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    flex: 1;
}
.kurs-compare-features li {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    color: #4b5563;
    padding: 0.625rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    line-height: 1.4;
    border-bottom: 1px solid #f3f4f6;
}
.kurs-compare-features li:last-child {
    border-bottom: none;
}
.kurs-compare-features li.on {
    color: #1f2937;
}
.kurs-compare-features li.off {
    color: #9ca3af;
    text-decoration: line-through;
    text-decoration-color: #d1d5db;
}
.kurs-compare-features li .fa {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    margin-top: 0.2rem;
}
.kurs-compare-features li.on .fa {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}
.kurs-compare-features li.off .fa {
    background: #f3f4f6;
    color: #9ca3af;
}
.kurs-compare-features strong {
    color: #0f172a;
    font-weight: 700;
}
.kurs-compare-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
    background: #ffffff;
    border: 2px solid #1C94F5;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.kurs-compare-cta:hover {
    background: #f9fafb;
    text-decoration: none;
    color: #1C94F5;
}
.kurs-compare-cta--primary {
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    color: #ffffff;
    border-color: #1C94F5;
    box-shadow: 0 8px 24px -4px rgba(28, 148, 245, 0.4);
}
.kurs-compare-cta--primary:hover {
    background: linear-gradient(135deg, #0f7fd6 0%, #0c6fb8 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(28, 148, 245, 0.55);
}

/* ===================================================================
   SEO SECTION — refreshed copy
   =================================================================== */
.kurs-seo {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    padding: 4rem 0;
    border-top: 1px solid #e5e7eb;
}
.kurs-seo-heading {
    font-family: "Poppins", sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.kurs-seo-text {
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #4b5563;
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}
.kurs-seo-text a {
    color: #1C94F5;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    transition: color 0.15s;
}
.kurs-seo-text a:hover {
    color: #0f7fd6;
}
.kurs-seo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
}
.kurs-seo-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    transition: all 0.2s;
}
.kurs-seo-card:hover {
    transform: translateY(-2px);
    border-color: #1C94F5;
    box-shadow: 0 8px 24px -8px rgba(28, 148, 245, 0.2);
}
.kurs-seo-card-title {
    font-family: "Poppins", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.625rem;
    letter-spacing: -0.005em;
}
.kurs-seo-card-text {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}
.kurs-seo-card-text a {
    color: #1C94F5;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 991.98px) {
    .kurs-hero {
        padding: 3rem 0 2rem;
    }
    .kurs-hero-title {
        font-size: 2.25rem;
    }
    .kurs-hero-sub {
        font-size: 1.05rem;
    }
    .kurs-feature-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .kurs-compare-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .kurs-seo-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}
@media (max-width: 575.98px) {
    .kurs-hero {
        padding: 2rem 0 1.5rem;
    }
    .kurs-hero-title {
        font-size: 1.75rem;
    }
    .kurs-hero-sub {
        font-size: 0.95rem;
        margin-bottom: 1.75rem;
    }
    .kurs-feature-list {
        grid-template-columns: 1fr;
    }
    .kurs-pill {
        font-size: 0.8rem;
    }
    .kurs-cta-button {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
        width: 100%;
        justify-content: center;
    }
    .kurs-compare-card {
        padding: 1.5rem 1.25rem;
    }
    .kurs-compare-card--pro::before {
        right: -2.5rem;
        padding: 0.2rem 3.5rem;
        font-size: 0.65rem;
    }
    .kurs-compare-heading {
        font-size: 1.65rem;
    }
    .kurs-seo-heading {
        font-size: 1.4rem;
    }
}

/* Smooth scroll for the CTA anchor */
html {
    scroll-behavior: smooth;
}

/* ===================================================================
   Answer buttons — MEGA OVERRIDE (final, surgical)
   Forces flex layout regardless of Bootstrap .btn class
   =================================================================== */
#test ul.list-unstyled,
#test .single-choice ul.list-unstyled {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    width: 100% !important;
}
#test .single-choice li,
#test ul.list-unstyled > li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#test .answer-btn,
#test .answer-btn.answer-btn--choice,
#test .answer-btn.answer-btn--yesno {
    /* CRITICAL: this overrides Bootstrap .btn { display: inline-block } */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    vertical-align: top !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative !important;
    cursor: pointer;
    /* override Bootstrap's white-space: nowrap if any */
    white-space: normal !important;
    text-decoration: none !important;
    user-select: none !important;
}
#test .answer-btn:hover:not(:disabled) {
    border-color: #1C94F5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -2px rgba(28, 148, 245, 0.25);
}
#test .answer-btn:active:not(:disabled) {
    transform: translateY(0);
}
#test .answer-btn:disabled {
    cursor: default;
    opacity: 1 !important;  /* override Bootstrap disabled fade */
}
#test .answer-btn--yesno {
    text-align: center !important;
    justify-content: center !important;
    min-height: 64px;
}

/* Letter badge — fixed size, never shrinks */
#test .answer-btn-letter {
    flex: 0 0 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: #1C94F5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    line-height: 1 !important;
    text-align: center !important;
}
#test .answer-btn--choice:hover:not(:disabled) .answer-btn-letter {
    background: #0f7fd6 !important;
    transform: scale(1.05);
}

/* Icon — fixed size, always present (even if empty for spacing) */
#test .answer-btn-icon {
    flex: 0 0 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    line-height: 1 !important;
}

/* Text — takes remaining space, wraps properly */
#test .answer-btn-text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    color: inherit !important;
    /* DO NOT set display: block — in flex context, the item stays as flex item */
}

/* For yes/no buttons the text is the only child span */
#test .answer-btn--yesno .answer-btn-text,
#test .answer-btn--yesno {
    text-align: center !important;
}

/* ==========================================================================
   KURS PAGE — final minimal overrides (replaces AI-slop SaaS hero)
   Follows home page visual identity: Ubuntu font, minimal, no gradients
   ========================================================================== */

/* === Hide old SaaS sections that shouldn't render === */
.kurs-page .kurs-hero,
.kurs-page .kurs-compare,
.kurs-page .kurs-feature-list,
.kurs-page .kurs-cta-button,
.kurs-page .kurs-cta-secondary,
.kurs-page .kurs-pill,
.kurs-page .kurs-hero-blob,
.kurs-page .kurs-compare-card,
.kurs-page .kurs-compare-heading,
.kurs-page .kurs-compare-sub,
.kurs-page .kurs-compare-features,
.kurs-page .kurs-compare-cta,
.kurs-page .kurs-compare-tag {
    display: none !important;
}

/* === Hide Vue bundle's start screen — we have our own ===
   OJO: sólo en la demo pública (.kurs-app), que tiene su propia rejilla de
   categorías. Antes esta regla era global (`#test .app-start-holder`) y ocultaba
   también el configurador de la cuenta (/konto/nauka/test/), con lo que el alumno
   veía el aviso de la prueba gratuita pero NO el selector de categorías ni el
   botón "Rozpocznij naukę": el test no podía arrancar nunca. */
/* RETIRADA: ocultaba la pantalla del test (la app) en la pagina publica.
   Ahora es la unica pantalla de seleccion de /kurs/ (como en el panel). */

/* === Compensate the hidden start screen (sólo demo) === */
.kurs-app #test .kurs-app,
.kurs-app #test {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* === ANSWER BUTTONS — ULTIMATE FIX using display: grid ===
   Grid is more predictable than flex for this kind of bug where
   Bootstrap .btn { display: inline-block } keeps winning. */
#test .answer-btn,
#test .answer-btn.answer-btn--choice,
#test .answer-btn.answer-btn--yesno,
#test button.answer-btn {
    display: grid !important;
    grid-template-columns: 40px 24px 1fr !important;
    grid-template-rows: auto !important;
    column-gap: 1rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 0 0.625rem 0 !important;
    padding: 0.875rem 1.125rem !important;
    text-align: left !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.15s ease !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: normal !important;
    vertical-align: top !important;
}
#test .answer-btn:hover:not(:disabled) {
    border-color: #1C94F5 !important;
    background: #f0f7ff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.2);
}
#test .answer-btn:active:not(:disabled) {
    transform: translateY(0);
}
#test .answer-btn:disabled {
    cursor: default !important;
    opacity: 1 !important;
}

/* Letter badge — column 1 in grid (40px fixed) */
#test .answer-btn-letter {
    grid-column: 1 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #1C94F5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
#test .answer-btn--choice:hover:not(:disabled) .answer-btn-letter {
    background: #0f7fd6 !important;
    transform: scale(1.05);
}

/* Icon — column 2 in grid (24px fixed) */
#test .answer-btn-icon {
    grid-column: 2 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Text — column 3 in grid (takes remaining space, wraps) */
#test .answer-btn-text {
    grid-column: 3 !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    text-align: left !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Yes/No buttons — single centered text, hide the empty letter/icon */
#test .answer-btn--yesno {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
    min-height: 60px !important;
    padding: 1rem !important;
}
#test .answer-btn--yesno .answer-btn-letter,
#test .answer-btn--yesno .answer-btn-icon {
    display: none !important;
}

/* === Test area compactness — fits in viewport === */
#test .question-content {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1rem !important;
    background: #f9fafb !important;
    border-left: 4px solid #1C94F5 !important;
    border-radius: 0 12px 12px 0 !important;
    color: #0f172a !important;
}
#test .media-holder {
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    max-height: 320px !important;
    overflow: hidden !important;
    background: #000 !important;
}
#test .media-holder video,
#test .test-video-player {
    max-height: 320px !important;
    width: 100% !important;
    object-fit: contain !important;
}
#test .media-holder img {
    max-height: 320px !important;
    width: 100% !important;
    object-fit: contain !important;
}
#test .kurs-countdown,
#test .pseudo-btn.bg-green {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
}
#test .question-answers {
    margin-bottom: 0 !important;
}
#test .yes-no {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.625rem !important;
}
@media (max-width: 575.98px) {
    #test .yes-no {
        grid-template-columns: 1fr !important;
    }
}

/* === Compact the right column (counters, prev/next) === */
#test .main-controls .pseudo-btn {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
}
#test .main-controls .row {
    margin-bottom: 0 !important;
}
#test .main-controls button.btn {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* === Mobile compact === */
@media (max-width: 991.98px) {
    #test .kurs-app > .container-xxl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* === Hero home: alinear texto con las content-section en desktop === */
/* "Mniej tremy. Więcej praktyki." está dentro de:
   .container-xxl (~12px padding) > .row (.col padding 15px) >
   .col-lg-6 > .content-holder (padding-left 9% del col).
   Para 1320px container = 12 + 15 + 9%·645 = ~85px desde el viewport.
   El hero-content no tiene row/col, así que su padding-left debe
   cerrar esa diferencia: ~73px ≈ 4.5rem. */
@media (min-width: 992px) {
    .hero-friendly-content {
        padding-left: 4.5rem;
    }
}

/* === Settings-buttons: forzar layout horizontal con specificity alta === */
/* El .settings-buttons del test de Vue tiene clases Bootstrap
   d-none d-lg-flex que no siempre ganan la cascada por el orden
   de carga del bundle compilado. Forzamos con `body` al inicio
   del selector para subir la specificity a 0,1,1, que vence a
   cualquier .d-lg-flex o .settings-buttons solo. */
body ul.settings-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
    gap: 0.75rem !important;
}
body ul.settings-buttons > li {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
body ul.settings-buttons > li > div {
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background-color: #1f2937 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 0.5rem 1rem 0.5rem 1.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
}
body ul.settings-buttons > li > div .fa {
    color: #5cc8ff !important;
    margin-right: 0.4rem !important;
    width: 16px !important;
    text-align: center !important;
}
body ul.settings-buttons > li > div strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body ul.settings-buttons > li > div .btn-yellow {
    background-color: #5cc8ff !important;
    border: none !important;
    color: #0a0a0a !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-left: 0.5rem !important;
}
body ul.settings-buttons > li > div .btn-yellow:hover {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

/* === Answer buttons: fix text overflow / unwanted line breaks === */
/* The .answer-btn-text span has flex: 1 but no min-width: 0, so in
   flexbox it can't shrink below its content width. Long answers like
   "Tak, jeśli nie mnięło od tego czasu więcej niż 7 dni." overflow the
   button or break weirdly. min-width: 0 lets it shrink; overflow-wrap
   breaks long words if needed. */
body #test .answer-btn-text,
#test .answer-btn-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
}
body #test .answer-btn,
#test .answer-btn {
    min-width: 0 !important;
}

/* === Answer buttons: kill the grid + hover blue background ===
   An earlier "mega-override" forced display: grid and a :hover with
   background: #f0f7ff. That made the text wrap inside a giant blue
   oval and the layout inconsistent across questions. We override
   here with `body #test` selector (specificity 0,2,1) which beats
   the previous `#test .answer-btn` (specificity 0,2,0). */
body #test .answer-btn,
body #test .answer-btn.answer-btn--choice,
body #test .answer-btn.answer-btn--yesno,
body #test button.answer-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-template-columns: none !important;
    column-gap: 0.75rem !important;
}
body #test .answer-btn:hover:not(:disabled) {
    background: #ffffff !important;
}
body #test .answer-btn-letter {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: #1C94F5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}
body #test .answer-btn-icon {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body #test .answer-btn-icon:not(:has(> i)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
}
body #test .answer-btn-icon:has(> i) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === Answer text: se ve ENTERO (parte en varias lineas) === */
/* Antes esto forzaba una sola linea con "..." y las respuestas largas
   ("Do momentu przyjazdu zespołu ratownictwa medycznego...") se cortaban sin
   poder leerlas. Medido: 218 px visibles de 977 px necesarios. Ahora el texto
   parte en varias lineas y se lee entero (6 lineas en movil, 3 en escritorio). */
body #test .answer-btn-text,
#test .answer-btn-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    color: #1f2937 !important;
    display: block !important;
}

/* Remove all decorative circles / backgrounds on answer-btn siblings
   that might be covering the text. The Vue component template has
   some pseudo-elements or background images from older versions
   that we want to neutralize. */
body #test .answer-btn::before,
body #test .answer-btn::after,
body #test .answer-btn-letter::before,
body #test .answer-btn-letter::after,
body #test .answer-btn-icon::before,
body #test .answer-btn-icon::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
body #test .answer-btn,
#test .answer-btn {
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* === Inline settings dropdown (ZMIEŃ) === */
.settings-button-item {
    position: relative !important;
}
.kurs-dropdown {
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 240px !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2) !important;
    padding: 0.75rem !important;
    color: #1f2937 !important;
}
.kurs-dropdown-header {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.kurs-dropdown-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}
.kurs-dropdown-list li {
    padding: 0 !important;
    margin: 0 !important;
}
.kurs-dropdown-list label {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.5rem 0.5rem !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    transition: background-color 0.15s ease !important;
}
.kurs-dropdown-list label:hover {
    background-color: #f3f4f6 !important;
}
.kurs-dropdown-list input[type="checkbox"],
.kurs-dropdown-list input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: #1C94F5 !important;
}
.kurs-dropdown-footer {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid #e5e7eb !important;
}
.kurs-dropdown-footer .btn {
    flex: 1 !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.6rem !important;
}

/* === SHOP (sklep) — improved product list page === */
.shop-intro {
    border-bottom: 1px solid #e5e7eb !important;
}
.shop-intro-inner {
    max-width: 56rem !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.875rem !important;
}
.shop-intro-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
.shop-intro-sub {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4b5563 !important;
    margin: 0 !important;
    line-height: 1.55 !important;
    max-width: 48rem !important;
    text-align: center !important;
}
.shop-trust-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem 2rem !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
}
.shop-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.85rem !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.shop-trust-item i {
    color: #1C94F5 !important;
    font-size: 1.1rem !important;
    width: 22px !important;
    text-align: center !important;
    flex: 0 0 22px !important;
}
.shop-trust-item small {
    color: #6b7280 !important;
    font-size: 0.75rem !important;
}
@media (max-width: 575.98px) {
    .shop-trust-strip {
        gap: 0.75rem !important;
    }
    .shop-trust-item {
        flex: 1 1 100% !important;
        justify-content: center !important;
    }
}

/* Toolbar (count + sort) */
.products-list-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 1.5rem !important;
}
.products-count {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4b5563 !important;
}
.products-count strong {
    color: #0a0a0a !important;
    font-weight: 700 !important;
}

/* Product card — modern, image-forward, hover effects */
.product-card {
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.product-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.12) !important;
    border-color: #1C94F5 !important;
}
.product-card-link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}
.product-card-image {
    position: relative !important;
    aspect-ratio: 3 / 2 !important;
    background: #f3f4f6 !important;
    overflow: hidden !important;
}
.product-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transition: transform 0.3s ease !important;
}
.product-card:hover .product-card-image img {
    transform: scale(1.04) !important;
}
.product-card-image-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    color: #cbd5e1 !important;
    font-size: 3rem !important;
}
.product-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10, 148, 245, 0.85) 100%) !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 1rem !important;
    opacity: 0 !important;
    transition: opacity 0.18s ease !important;
}
.product-card:hover .product-card-overlay {
    opacity: 1 !important;
}
.product-card-cta {
    color: #ffffff !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.product-card-body {
    padding: 0.875rem 1rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.product-card-title {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 0 0.375rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.product-card-intro {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #6b7280 !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.product-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 0.625rem !important;
    margin-top: auto !important;
}
.product-card-price {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
}
.product-card-arrow {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: #1C94F5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.product-card:hover .product-card-arrow {
    background: #1C94F5 !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* "Dlaczego te materiały" section */
.shop-why-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    text-align: center !important;
    margin: 0 0 0.5rem !important;
}
.shop-why-sub {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4b5563 !important;
    text-align: center !important;
    max-width: 640px !important;
    margin: 0 auto !important;
}
.shop-why-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    height: 100% !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.shop-why-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.08) !important;
}
.shop-why-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #f0f7ff !important;
    color: #1C94F5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
}
.shop-why-title {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
}
.shop-why-text {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.875rem !important;
    color: #4b5563 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* === PRODUCT DETAIL (single product) === */
.product-breadcrumb {
    background: #f9fafb !important;
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.product-breadcrumb-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
}
.product-breadcrumb-list li {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}
.product-breadcrumb-list li:not(:last-child)::after {
    content: "/" !important;
    color: #cbd5e1 !important;
}
.product-breadcrumb-list a {
    color: #1C94F5 !important;
    text-decoration: none !important;
}
.product-breadcrumb-list a:hover {
    text-decoration: underline !important;
}
.product-breadcrumb-list li[aria-current="page"] span {
    color: #0a0a0a !important;
    font-weight: 600 !important;
}

/* Product gallery */
.product-gallery-main {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background: #f3f4f6 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 0.75rem !important;
    position: relative !important;
}
.product-gallery-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0.5rem !important;
}
.product-gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
}
.product-gallery-thumb {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    background: #f3f4f6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    transition: border-color 0.18s ease !important;
}
.product-gallery-thumb:hover {
    border-color: #1C94F5 !important;
}
.product-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.product-gallery-placeholder {
    aspect-ratio: 4 / 3 !important;
    background: #f3f4f6 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cbd5e1 !important;
    font-size: 4rem !important;
}

/* Product details (right column) */
.product-details-holder {
    padding: 0.5rem 0 0.5rem 0 !important;
}
@media (min-width: 992px) {
    .product-details-holder {
        padding-left: 1rem !important;
    }
}
.product-title {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 800 !important;
    color: #0a0a0a !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}
.product-meta {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1rem !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem !important;
}
.product-meta p:last-child {
    margin-bottom: 0 !important;
}

/* Trust strip in product page */
.product-trust-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 1rem 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 1.5rem !important;
}
.product-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.85rem !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
}
.product-trust-item i {
    color: #1C94F5 !important;
    font-size: 1rem !important;
}

/* Buy box (stuck to bottom on mobile) */
.product-buy-box {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}
.product-price-label {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.25rem !important;
}
.product-price-amount {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #1C94F5 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5rem !important;
}
.product-price-note {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    margin-bottom: 1.25rem !important;
}
.product-buy-cta {
    width: 100% !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 999px !important;
    background: #1C94F5 !important;
    border-color: #1C94F5 !important;
    transition: all 0.18s ease !important;
}
.product-buy-cta:hover {
    background: #0d7fd6 !important;
    border-color: #0d7fd6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px -4px rgba(28, 148, 245, 0.4) !important;
}
.product-payment-methods {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8rem !important;
    color: #6b7280 !important;
}
.product-payment-badge {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    color: #4b5563 !important;
}

/* Product content (description) */
.product-content {
    padding: 3rem 0 !important;
    border-top: 1px solid #e5e7eb !important;
}
.product-content-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 auto 1.5rem !important;
    max-width: 800px !important;
    text-align: center !important;
}
.product-content-body {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    line-height: 1.7 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
.product-content-body p {
    margin-bottom: 1rem !important;
}

/* Related products */
.related-products-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.625rem) !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    text-align: center !important;
    margin: 0 0 0.5rem !important;
}
.related-products-sub {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* === Summary plans (after test ends) — designed for conversion === */
.summary-plans {
    margin: 2.5rem auto 0 !important;
    max-width: 1080px !important;
    text-align: center !important;
    padding: 2rem 1rem !important;
}
.summary-plans-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.2 !important;
}
.summary-plans-sub {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.95rem !important;
    color: #4b5563 !important;
    margin: 0 auto 1.5rem !important;
    max-width: 540px !important;
    line-height: 1.5 !important;
}
.summary-plans-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    margin: 0 auto 1.5rem !important;
    max-width: 960px !important;
}
.summary-plan-card {
    background: #ffffff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 1.5rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.summary-plan-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.12) !important;
}
.summary-plan-card--popular {
    border: 2px solid #1C94F5 !important;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 30%) !important;
    transform: scale(1.04) !important;
    z-index: 1 !important;
}
.summary-plan-card--popular:hover {
    transform: scale(1.04) translateY(-2px) !important;
}
.summary-plan-card--gamechanger {
    border: 2px solid #f7c244 !important;
    background: linear-gradient(180deg, #fff8e6 0%, #ffffff 30%) !important;
    transform: scale(1.04) !important;
    z-index: 1 !important;
}
.summary-plan-card--gamechanger:hover {
    transform: scale(1.04) translateY(-2px) !important;
}
.summary-plan-card--gamechanger .summary-plan-badge {
    background: #f7c244 !important;
    color: #0a0a0a !important;
    box-shadow: 0 2px 6px -1px rgba(217, 165, 51, 0.4) !important;
}
.summary-plan-card--gamechanger .summary-plan-price-amount {
    color: #d49b00 !important;
}
.summary-plan-badge {
    position: absolute !important;
    top: -0.875rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1C94F5 !important;
    color: #ffffff !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 0.3rem 0.85rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px -1px rgba(28, 148, 245, 0.4) !important;
}
.summary-plan-name {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0a0a0a !important;
    margin: 0 0 0.125rem !important;
}
.summary-plan-tagline {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    color: #6b7280 !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
}
.summary-plan-duration {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    margin: 0 0 1rem !important;
}
.summary-plan-price {
    margin: 0 0 1rem !important;
    padding: 0.5rem 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: left !important;
}
.summary-plan-price-amount {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #1C94F5 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
.summary-plan-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    flex: 1 !important;
}
.summary-plan-features li {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.875rem !important;
    color: #1f2937 !important;
    padding: 0.4rem 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    line-height: 1.4 !important;
}
.summary-plan-features li:last-child {
    border-bottom: none !important;
}
.summary-plan-features li::before {
    content: "✓" !important;
    color: #1C94F5 !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.summary-plan-cta {
    width: 100% !important;
    text-align: center !important;
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 0.7rem 1rem !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.18s ease !important;
}
.summary-plans-footnote {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin-top: 1rem !important;
}
.summary-plans-footnote a {
    color: #1C94F5 !important;
    text-decoration: underline !important;
}
.summary-review-btn {
    font-family: 'Ubuntu', 'Karla', sans-serif !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 999px !important;
}
.summary-review-btn:hover {
    color: #0a0a0a !important;
    border-color: #0a0a0a !important;
}
@media (max-width: 768px) {
    .summary-plans-grid {
        grid-template-columns: 1fr !important;
    }
    .summary-plan-card--popular,
    .summary-plan-card--gamechanger {
        transform: none !important;
    }
    .summary-plan-card--popular:hover,
    .summary-plan-card--gamechanger:hover {
        transform: translateY(-2px) !important;
    }
}


/* ============================================================
   /pakiety/ - modern card redesign + new sections
   (trust strip, personas, FAQ, bottom CTA)
   ============================================================ */

/* ==========================================================================
   /pakiety/ — página de paquetes
   Contenido de las tarjetas: details 24/25/26 (marcado limpio, sin estilos en
   línea). El diseño vive aquí, no en el HTML del CMS.
   ========================================================================== */
.plans-content {
    background: #F8FAFC;
    padding-bottom: 3rem;
}
.plans-content .container-xxl { max-width: 1120px; }
.plans-content section + section { margin-top: 3.5rem; }

/* --- Hero --- */
.plans-hero {
    text-align: center;
    padding: 2.75rem 1.5rem 0.5rem;
    max-width: 46rem;
    margin: 0 auto;
}
.plans-hero-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.1);
    padding: 0.35rem 0.875rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.plans-hero-heading {
    font-size: clamp(1.85rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    margin: 0 0 0.85rem;
    text-wrap: balance;
}
.plans-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0 auto;
    max-width: 38rem;
}
.plans-hero-sub strong { color: #111827; font-weight: 600; }

/* --- "En cualquier paquete": se dice una vez, fuera de las tarjetas --- */
.plans-included {
    max-width: 56rem;
    margin: 2.5rem auto 0;
    padding: 1.75rem 1.75rem 1.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.plans-included-heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem;
    text-align: center;
}
.plans-included-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.plans-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #374151;
}
.plans-included-list i {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(28, 148, 245, 0.12);
    color: #1C94F5;
    font-size: 0.7rem;
}
.plans-included-list strong { color: #111827; font-weight: 600; }
.plans-included-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #F3F4F6;
    text-align: center;
    font-size: 0.875rem;
    color: #6B7280;
}

/* --- Tarjetas --- */
.plans-holder { padding-top: 2.5rem; }

.single-plan {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.single-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -14px rgba(28, 148, 245, 0.35), 0 4px 10px -6px rgba(0, 0, 0, 0.08);
    border-color: #BFDBFE;
}
.single-plan--popular {
    border-color: #1C94F5;
    box-shadow: 0 8px 28px -14px rgba(28, 148, 245, 0.45), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Etiqueta "Najczęściej wybierany" que pinta la plantilla */
.single-plan-tag {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: #1C94F5;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 4px 12px -4px rgba(28, 148, 245, 0.6);
}

.single-plan .content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.5;
}

/* Para quién es */
.plan-card-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1C94F5;
    margin-bottom: 0.35rem;
}
.plan-card-name {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
}
.plan-card-tagline {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0 0 1.25rem;
    min-height: 2.8em;
}

/* Precio: lo más importante de la tarjeta */
.plan-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.plan-card-amount {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #111827;
}
.plan-card-amount small {
    font-size: 1.125rem;
    font-weight: 700;
    color: #6B7280;
}
.plan-card-perday {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.plan-card-access {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #F3F4F6;
}
.plan-card-access i { color: #1C94F5; }

/* Qué añade esta tarjeta */
.plan-card-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    text-align: left;
}
.plan-card-features li {
    position: relative;
    margin-bottom: 0.625rem;
    padding-left: 1.85rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #4B5563;
}
.plan-card-features li:last-child { margin-bottom: 0; }
.plan-card-features li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F3F4F6;
    color: #9CA3AF;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.65rem;
    line-height: 1;
}
.plan-card-features li.plan-card-feature--extra {
    color: #111827;
    font-weight: 600;
}
.plan-card-features li.plan-card-feature--extra::before {
    background: rgba(28, 148, 245, 0.14);
    color: #1C94F5;
}

/* Botón: siempre abajo del todo, alineado entre tarjetas */
.single-plan .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    background: #1C94F5 !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px -6px rgba(28, 148, 245, 0.6) !important;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
}
.single-plan .btn:hover {
    background: #0a7fd6 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -6px rgba(28, 148, 245, 0.65) !important;
}
.single-plan .btn i { font-size: 0.875em; transition: transform 0.2s ease; }
.single-plan .btn:hover i { transform: translateX(3px); }

/* La etiqueta antigua del CMS ("must-have" / "game-changer") ya no se usa */
.single-plan .badge { display: none !important; }

@media (max-width: 991.98px) {
    .plan-card-tagline { min-height: 0; }
    .plans-included-list { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .plans-col { width: 100%; }
    .plans-hero { padding: 2rem 1rem 0.5rem; }
    .plans-included { padding: 1.25rem; }
    .plans-included-list { gap: 0.6rem; }
    .plans-holder { padding-top: 2rem; }
}
/* --- Trust strip (compact variant below the plan cards) --- */
.plans-trust-strip--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    text-align: center;
    padding: 1.5rem 1.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    margin: 2rem auto 0;
    max-width: 56rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.plans-trust-strip--compact .plans-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
}
.plans-trust-strip--compact .plans-trust-item--payment { gap: 0.5rem; }
.plans-trust-strip--compact .plans-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    font-size: 1rem;
}
.plans-trust-strip--compact .plans-trust-text {
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4B5563;
}
.plans-trust-strip--compact .plans-trust-text strong { color: #111827; font-weight: 600; }
.plans-trust-strip--compact .payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.plans-trust-strip--compact .payment-logos img { height: 1.5rem; width: auto; }

@media (max-width: 767.98px) {
    .plans-trust-strip--compact {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem;
    }
}

/* --- Ritmo vertical entre bloques --- */
.plans-holder + .plans-trust-strip--compact { margin-top: 2rem; }
.plans-trust-strip--compact + .plans-faq { margin-top: 3rem; }

/* --- Columna y tarjeta destacada --- */
.plans-col {
    position: relative;
    display: flex;
}
.plans-col .single-plan { width: 100%; }

.single-plan--popular {
    border-width: 2px;
    border-color: #1C94F5;
    box-shadow: 0 10px 30px -16px rgba(28, 148, 245, 0.5), 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (min-width: 992px) {
    .single-plan--popular { transform: scale(1.02); }
    .single-plan--popular:hover { transform: scale(1.02) translateY(-3px); }
}
/* --- Trust strip --- */
/* Tres columnas: la franja tiene 3 elementos. Con 4 (como estaba) quedaba una
   columna vacía a la derecha y el contenido se veía pegado a la izquierda. */
.plans-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    margin: 2rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.plans-trust-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    min-width: 0;
    text-align: center;
}
.plans-trust-item--payment {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: auto;
}
.payment-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.payment-logos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.payment-logos img {
    height: 1rem;
    width: auto;
    display: inline-block;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}
.payment-logos img:hover {
    opacity: 1;
}
.plans-trust-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.plans-trust-text {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1F2937;
    min-width: 0;
    text-align: center;
}
.plans-trust-text strong { color: #0a0a0a; font-weight: 700; }
@media (max-width: 991.98px) {
    .plans-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .plans-trust-strip { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; }
    .plans-trust-item { padding: 0.5rem 0.25rem; }
}

/* --- Personas section ("Wybierz pakiet dopasowany do Ciebie") --- */
.plans-personas {
    margin: 2.5rem 0 2rem;
}
.plans-personas-header {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2rem;
}
.plans-personas-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.plans-personas-sub {
    font-size: 1rem;
    line-height: 1.55;
    color: #4B5563;
    margin: 0;
    text-wrap: balance;
}
.plans-personas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.plans-persona {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.5rem;
    transition: border-color 0.2s, transform 0.18s;
}
.plans-persona:hover { border-color: #C7D2FE; transform: translateY(-2px); }
.plans-persona--popular {
    border-color: #1C94F5;
    background: linear-gradient(180deg, #ffffff 0%, #EFF6FF 100%);
    box-shadow: 0 6px 20px -8px rgba(28, 148, 245, 0.2);
}
.plans-persona-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
    margin-bottom: 0.5rem;
}
.plans-persona-eyebrow--popular {
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.plans-persona-eyebrow--popular i { font-size: 0.85em; }
.plans-persona-name {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.plans-persona-tagline {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0 0 0.875rem;
}
.plans-persona-meta {
    font-size: 0.875rem;
    color: #1F2937;
    font-weight: 600;
    border-top: 1px solid #E5E7EB;
    padding-top: 0.75rem;
}
.plans-persona-perday { color: #6B7280; font-weight: 500; }
@media (max-width: 767.98px) {
    .plans-personas-grid { grid-template-columns: 1fr; }
}

/* --- Mobile: 3 columnas -> 1 --- */
/* Antes había aquí una regla que subía al principio la tarjeta del medio (la de
   «Nawigator», 49,90) para destacarla. En el móvil quedaba 49,90 · 27,90 · 84,90:
   ni ordenado ni de barato a caro. Se ha quitado, y así las tres tarjetas salen
   siempre de la más barata a la más cara, en móvil y en escritorio. El estilo de
   «popular» (el destacado, la estrella) se mantiene: lo único que cambia es el
   orden. */
@media (max-width: 991.98px) {
    .plans-holder .row { row-gap: 1.5rem; }
    .plans-col { width: 100%; }
}

/* --- Payment info strip below plans --- */
.plans-payment-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    margin: 1.5rem auto 0;
    font-size: 0.875rem;
    color: #4B5563;
    width: max-content;
    max-width: 100%;
}
.plans-payment-info-label { font-weight: 600; color: #1F2937; }
.plans-payment-info-method { color: #0a0a0a; font-weight: 600; }
.plans-payment-info-sep { color: #9CA3AF; }
@media (max-width: 575.98px) {
    .plans-payment-info { width: 100%; border-radius: 12px; }
}

/* --- FAQ visible --- */
.plans-faq {
    margin: 3rem auto 0;
    max-width: 56rem;
}
.plans-faq-header {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 40rem;
}
.plans-faq-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.plans-faq-sub {
    font-size: 1rem;
    line-height: 1.55;
    color: #4B5563;
    margin: 0;
}
.plans-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.plans-faq-item {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.plans-faq-item[open] {
    border-color: #C7D2FE;
    box-shadow: 0 4px 16px -8px rgba(28, 148, 245, 0.18);
}
.plans-faq-question {
    list-style: none;
    cursor: pointer;
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #0a0a0a;
    line-height: 1.4;
    user-select: none;
}
.plans-faq-question::-webkit-details-marker { display: none; }
.plans-faq-question span { flex: 1; min-width: 0; }
.plans-faq-icon {
    color: #1C94F5;
    font-size: 0.875rem;
    flex: 0 0 1rem;
    transition: transform 0.2s ease;
}
.plans-faq-item[open] .plans-faq-icon { transform: rotate(180deg); }
.plans-faq-question:hover { color: #1C94F5; }
.plans-faq-answer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #1F2937;
}
.plans-faq-answer p { margin: 0; }

/* --- Bottom CTA --- */
.plans-cta-bottom {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    color: #ffffff;
    padding: 3rem 1rem;
    margin-top: 0;
}
.plans-cta-bottom-inner {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}
.plans-cta-bottom-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.plans-cta-bottom-text {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 1.75rem;
}
.plans-cta-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    background: #1C94F5;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 6px 18px -3px rgba(28, 148, 245, 0.5);
}
.plans-cta-bottom-btn:hover {
    background: #0a7fd6;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -3px rgba(28, 148, 245, 0.6);
}
.plans-cta-bottom-btn i { font-size: 1.05em; }

/* ============================================================
   /koszyk/ + /kasa/ - order page redesign
   (stepper, product cards, summary, checkout tabs, invoice,
    payment method cards, custom checkbox, primary button)
   ============================================================ */

/* --- Base override: clean background, no heavy padding --- */
.order-page {
    background: #F8FAFC;
    padding: 1.5rem 0 3rem;
}
.order-page h1 { margin-bottom: 0 !important; }
.order-page .container-xxl { max-width: 1280px; }

/* --- Order header (title + sub) --- */
.order-header {
    margin: 1rem 0 2rem;
    text-align: left;
}
.order-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}
.order-sub {
    font-size: 1rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0;
    max-width: 40rem;
}

/* --- Order stepper (3 steps) --- */
.order-stepper {
    margin: 0 0 1.5rem;
}
.order-stepper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0.75rem 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.order-stepper-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6B7280;
    transition: color 0.2s;
}
.order-stepper-item + .order-stepper-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background: #E5E7EB;
    transform: translate(-50%, -50%);
}
.order-stepper-num {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #F3F4F6;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
    border: 2px solid transparent;
}
.order-stepper-item--done .order-stepper-num {
    background: #10B981;
    color: #ffffff;
}
.order-stepper-item--done .order-stepper-num i { font-size: 0.75em; }
.order-stepper-item--current .order-stepper-num {
    background: #1C94F5;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(28, 148, 245, 0.15);
}
.order-stepper-item--current {
    color: #0a0a0a;
}
.order-stepper-label {
    font-weight: 600;
}
@media (max-width: 575.98px) {
    .order-stepper-list { padding: 0.5rem 0.25rem; }
    .order-stepper-item { font-size: 0.8125rem; gap: 0.4rem; padding: 0.4rem 0.5rem; }
    .order-stepper-num { flex-basis: 1.5rem; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
    .order-stepper-item + .order-stepper-item::before { width: 0.75rem; }
}

/* --- Cart: products list (modern cards) --- */
.order-products-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.order-product-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.order-product-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 4px 12px -4px rgba(28, 148, 245, 0.12);
}
.order-product-image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-product-image a { display: block; width: 100%; height: 100%; }
.order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.order-product-image-placeholder {
    color: #9CA3AF;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
}
.order-product-body {
    flex: 1 1 auto;
    min-width: 0;
}
.order-product-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.order-product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.order-product-title a:hover { color: #1C94F5; }
.order-product-meta {
    font-size: 0.875rem;
    color: #6B7280;
    margin: 0;
}
.order-product-aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
    margin-left: auto;
    text-align: right;
}
.order-product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.order-product-price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.015em;
}
.order-product-price-mult {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-top: 0.125rem;
}
.order-product-price-mult strong { color: #0a0a0a; font-weight: 600; }
.order-product-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #9CA3AF;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}
.order-product-remove i { font-size: 0.9em; }
.order-product-remove:hover {
    background: #FEE2E2;
    color: #B91C1C;
}
@media (max-width: 575.98px) {
    .order-product-card { flex-wrap: wrap; padding: 0.875rem 1rem; }
    .order-product-image { flex-basis: 64px; width: 64px; height: 64px; }
    .order-product-body { flex: 1 1 calc(100% - 80px); }
    .order-product-aside {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
    .order-product-price { align-items: flex-start; }
}

/* --- Cart: back action --- */
.cart-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-start;
}
.cart-action-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4B5563;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    transition: color 0.2s;
}
.cart-action-back:hover { color: #1C94F5; }
.cart-action-back i { font-size: 0.85em; transition: transform 0.2s; }
.cart-action-back:hover i { transform: translateX(-3px); }

/* --- Order summary card (sticky) --- */
.order-summary-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.order-summary-card--sticky {
    position: sticky;
    top: 1rem;
}
.order-summary-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.order-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}
.order-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.order-summary-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.order-summary-row-label {
    color: #0a0a0a;
    font-weight: 500;
}
.order-summary-row-meta {
    color: #6B7280;
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}
.order-summary-row-value {
    color: #0a0a0a;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.order-summary-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 0.75rem 0;
}
.order-summary-row--total {
    font-size: 1.0625rem;
    align-items: baseline;
}
.order-summary-row--total .order-summary-row-label {
    font-weight: 700;
    color: #0a0a0a;
}
.order-summary-row-value--total {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1C94F5;
    letter-spacing: -0.02em;
}
.order-summary-note {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.45;
    margin: 1rem 0 1.25rem;
    text-align: center;
}
.order-summary-trust {
    list-style: none;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.order-summary-trust li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    color: #4B5563;
    line-height: 1.4;
}
.order-summary-trust li i {
    color: #1C94F5;
    font-size: 0.95em;
    flex: 0 0 1rem;
    width: 1rem;
    text-align: center;
}

/* --- Primary checkout button (used in cart, checkout, empty state) --- */
.btn-primary-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1.25rem;
    background: #1C94F5;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 14px -3px rgba(28, 148, 245, 0.4);
    margin-top: 0.5rem;
    font-family: inherit;
}
.btn-primary-checkout:hover {
    background: #0a7fd6;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -3px rgba(28, 148, 245, 0.55);
}
.btn-primary-checkout i { transition: transform 0.2s ease; }
.btn-primary-checkout:hover i { transform: translateX(3px); }
.btn-primary-checkout--ghost {
    background: #ffffff;
    color: #1C94F5;
    border: 2px solid #1C94F5;
    box-shadow: none;
}
.btn-primary-checkout--ghost:hover {
    background: #1C94F5;
    color: #ffffff;
    box-shadow: 0 6px 18px -3px rgba(28, 148, 245, 0.45);
}

/* --- Cart: empty state --- */
.cart-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    max-width: 32rem;
    margin: 2rem auto;
}
.cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 50%;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}
.cart-empty-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.cart-empty-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0 0 1.75rem;
}
.cart-empty-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}
.cart-empty-link {
    color: #4B5563;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}
.cart-empty-link:hover { color: #1C94F5; }

/* ============================================================
   /kasa/ - checkout-specific
   ============================================================ */

/* --- Tabs: Mam konto | Nowe konto | Bez rejestracji --- */
.checkout-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.checkout-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 10px;
    color: #4B5563;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
    text-align: center;
}
.checkout-tab i { font-size: 0.95em; }
.checkout-tab:hover {
    color: #0a0a0a;
    background: rgba(28, 148, 245, 0.04);
}
.checkout-tab--active {
    background: #EFF6FF;
    color: #1C94F5;
    border-color: #1C94F5;
}
.checkout-tab--active:hover {
    background: #DBEAFE;
    color: #1C94F5;
}
@media (max-width: 575.98px) {
    .checkout-tabs { grid-template-columns: 1fr; }
}

/* --- Tab panel: shows/hides the form for the selected tab --- */
.checkout-tab-panel { display: block; }
.checkout-tab-panel[hidden] { display: none !important; }
.checkout-tab-panel--active { display: block; }

/* --- Checkout sections (Account, Faktura) --- */
.checkout-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.checkout-section {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.checkout-section-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.checkout-section-heading--sm {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
}
.checkout-section-sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0 0 1.25rem;
}
.checkout-section + .checkout-section { margin-top: 0; }

/* --- Form grid: 2 columns by default, can collapse --- */
.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.checkout-form-grid:last-child { margin-bottom: 0; }
.checkout-form-grid--2 { grid-template-columns: 1fr 1fr; }
.checkout-form-grid > .form-group { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .checkout-form-grid { grid-template-columns: 1fr; }
}

/* --- Form input overrides (Bootstrap form-control + form-group) --- */
.checkout-form .form-group { margin-bottom: 0.875rem; }
.checkout-form .form-group:last-child { margin-bottom: 0; }
.checkout-form .form-group label:not(.checkout-checkbox-label):not(.custom-control-label) {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
    display: block;
}
.checkout-form .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #0a0a0a;
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.checkout-form .form-control::placeholder {
    color: #9CA3AF;
}
.checkout-form .form-control:hover {
    border-color: #C7D2FE;
}
.checkout-form .form-control:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.12);
}
.checkout-form .form-control.is-invalid {
    border-color: #EF4444;
    background-image: none;
    padding-right: 1rem;
}
.checkout-form .invalid-feedback,
.checkout-form .form-error-message,
.checkout-form .form-group-error {
    display: block;
    color: #B91C1C;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    font-weight: 500;
}
.checkout-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.5rem;
    margin-top: 1.25rem;
}
.checkout-form-actions .btn-primary-checkout {
    width: auto;
    min-width: 12rem;
    margin-top: 0;
}
.checkout-link {
    color: #1C94F5;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.checkout-link:hover { color: #0a7fd6; text-decoration: underline; }

/* --- Invoice section (Chcę otrzymać fakturę) --- */
.checkout-invoice {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.checkout-invoice-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.875rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.checkout-invoice-fields {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #E5E7EB;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding-top 0.25s, margin-top 0.25s;
}
.checkout-invoice-fields--open {
    max-height: 50rem;
    opacity: 1;
}
.checkout-invoice-fields[hidden] { display: none; }

/* --- Custom checkbox (replaces bootstrap-4 .custom-control) --- */
.checkout-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0;
    cursor: pointer;
}
/* When the form theme wraps the input in <div class="form-check">, neutralize the default
   form-check styles and force our flex layout. */
.checkout-checkbox .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-left: 0;
    margin: 0;
    min-height: 0;
}
.checkout-checkbox .form-check-input {
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.125rem 0 0 !important;
    border: 2px solid #C7D2FE;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
    float: none;
    margin-left: 0 !important;
    margin-top: 0.125rem;
}
.checkout-checkbox .form-check-input:hover {
    border-color: #1C94F5;
}
.checkout-checkbox .form-check-input:checked {
    background: #1C94F5;
    border-color: #1C94F5;
}
.checkout-checkbox .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.18);
    border-color: #1C94F5;
}
.checkout-checkbox .form-check-label {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1F2937;
    cursor: pointer;
    user-select: none;
    margin: 0 !important;
    padding-left: 0;
}
/* When we use form_widget outside the form-check wrapper (custom usage) */
.checkout-checkbox-input {
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.125rem 0 0 !important;
    border: 2px solid #C7D2FE;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.checkout-checkbox-input:hover {
    border-color: #1C94F5;
}
.checkout-checkbox-input:checked {
    background: #1C94F5;
    border-color: #1C94F5;
}
.checkout-checkbox-input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.checkout-checkbox-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.18);
}
.checkout-checkbox-label {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #1F2937;
    cursor: pointer;
    user-select: none;
    margin: 0 !important;
}

/* --- Payment method radio cards --- */
.checkout-payment-method {
    margin-top: 1.25rem;
}
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.payment-method-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.payment-method-card {
    flex: 1 1 0;
    min-width: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    position: relative;
    min-height: 4rem;
}
.payment-method-card:hover {
    border-color: #C7D2FE;
    background: #FAFAFA;
}
.payment-method-card--active {
    border-color: #1C94F5;
    background: #EFF6FF;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.12);
}
.payment-method-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}
.payment-method-logo img {
    display: block;
    max-height: 2rem;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.payment-method-check {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #1C94F5;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}
.payment-method-card--active .payment-method-check {
    opacity: 1;
    transform: scale(1);
}
@media (max-width: 575.98px) {
    .payment-method-card { min-width: 100%; }
}

/* --- Consent block (newsletter + terms) --- */
.checkout-consent {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E5E7EB;
}

/* ============================================================
   /konto/* - account panel redesign
   (header with avatar, sidebar nav with icons, section cards,
    form styling, invoice sub-section, danger delete card)
   ============================================================ */

/* --- Base override: clean background --- */
.account-content {
    background: #F8FAFC;
    padding-bottom: 3rem;
}
.account-content .container-xxl { max-width: 1280px; }

/* --- Header: user + plan --- */
.account-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.account-header-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.account-avatar {
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1C94F5 0%, #0a7fd6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px -3px rgba(28, 148, 245, 0.35);
    text-transform: uppercase;
}
.account-avatar span { line-height: 1; }
.account-header-info { min-width: 0; }
.account-greeting {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
    margin: 0 0 0.375rem;
    letter-spacing: -0.015em;
}
.account-role {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.1);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    line-height: 1.4;
}
.account-header-plan {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}
.account-plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    min-width: 0;
}
.account-plan-card--active {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
}
.account-plan-card--inactive {
    background: #F9FAFB;
    border: 1px dashed #D1D5DB;
}
.account-plan-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
}
.account-plan-card--active .account-plan-label { color: #1C94F5; }
.account-plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.25;
}
.account-plan-name--muted { color: #6B7280; font-weight: 600; }
.account-plan-expire {
    font-size: 0.8125rem;
    color: #4B5563;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.125rem;
}
.account-plan-expire i { color: #1C94F5; font-size: 0.95em; }

/* Mobile: stack vertically, center user info, plan card full-width, button full-width */
@media (max-width: 767.98px) {
    .account-header {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 1.25rem 1.25rem 1.5rem;
        gap: 1.25rem;
    }
    .account-header-user {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.625rem;
    }
    .account-avatar {
        flex: 0 0 4rem;
        width: 4rem;
        height: 4rem;
        font-size: 1.75rem;
    }
    .account-greeting {
        font-size: 1.25rem;
        margin: 0 0 0.25rem;
    }
    .account-role {
        font-size: 0.7rem;
    }
    .account-header-plan {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
    }
    .account-plan-card {
        align-items: center;
        text-align: center;
        padding: 0.875rem 1rem;
    }
    .account-plan-expire {
        justify-content: center;
    }
    .account-header-plan > .btn-primary-checkout--sm {
        width: 100%;
        justify-content: center;
    }
}

/* small primary button variant (for header plan action) */
.btn-primary-checkout--sm {
    width: auto;
    padding: 0.625rem 1.125rem;
    font-size: 0.875rem;
    margin-top: 0;
    box-shadow: 0 3px 10px -3px rgba(28, 148, 245, 0.4);
}
.btn-primary-checkout--sm:hover { transform: translateY(-1px); }

/* --- Tab holder: sidebar + content --- */
.account-tab-holder { margin-top: 0.5rem; }
.account-nav-holder { margin-bottom: 1.5rem; }

/* Mobile nav toggle (kept for legacy Bootstrap collapse) */
.account-nav-toggle {
    display: none;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    color: #0a0a0a;
    font-weight: 600;
    cursor: pointer;
}
.account-nav-toggle i { margin-right: 0.5rem; }
.account-nav-toggle:focus { box-shadow: none; outline: none; }
@media (max-width: 991.98px) {
    .account-nav-toggle { display: flex; align-items: center; }
}

/* Sidebar nav */
.account-nav {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.account-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.account-nav-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 0.5rem 0.75rem;
}
.account-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    color: #4B5563;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.18s, color 0.18s;
    line-height: 1.3;
}
.account-nav-link i {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
    color: #9CA3AF;
    transition: color 0.18s;
}
.account-nav-link:hover {
    background: rgba(28, 148, 245, 0.06);
    color: #0a0a0a;
}
.account-nav-link:hover i { color: #1C94F5; }
.account-nav-link--active {
    background: #EFF6FF;
    color: #1C94F5;
    font-weight: 700;
}
.account-nav-link--active i { color: #1C94F5; }
.account-nav-link--logout {
    color: #B91C1C;
    font-weight: 600;
}
.account-nav-link--logout i { color: #B91C1C; }
.account-nav-link--logout:hover {
    background: #FEE2E2;
    color: #B91C1C;
}

/* Tab content area */
.account-tab-content { padding-left: 0; }
@media (min-width: 992px) {
    .account-tab-content { padding-left: 0.5rem; }
}

/* --- Sections inside the tab content --- */
.account-edit { display: flex; flex-direction: column; gap: 1.5rem; }
.account-section { display: flex; flex-direction: column; gap: 0.75rem; }
.account-section-header { padding: 0 0.25rem; }
.account-section-heading {
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
}
.account-section-sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0;
    max-width: 42rem;
}
.account-section--danger .account-section-heading { color: #B91C1C; }
.account-section--danger .account-section-sub { color: #6B7280; }

/* --- Cards (sections container) --- */
.account-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.account-card--danger {
    border-color: #FECACA;
    background: linear-gradient(180deg, #ffffff 0%, #FEF2F2 100%);
}

/* --- Form grid + fields --- */
.account-form { display: flex; flex-direction: column; gap: 1rem; }
.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}
.account-form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 575.98px) {
    .account-form-grid { grid-template-columns: 1fr; }
}
.account-form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.account-form-hint {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.45;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: #F9FAFB;
    border-left: 3px solid #E5E7EB;
    border-radius: 6px;
}
.account-form-actions {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
.account-form-actions .btn-primary-checkout {
    width: auto;
    min-width: 12rem;
    margin-top: 0;
}
.account-form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    cursor: pointer;
}
.account-form-check .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-left: 0;
    margin: 0;
    min-height: 0;
}
.account-invoice-fields {
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px dashed #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding-top 0.25s, margin-top 0.25s;
}
.account-invoice-fields--open {
    max-height: 50rem;
    opacity: 1;
}
.account-invoice-fields[hidden] { display: none; }

/* --- Override form-control inside account forms --- */
.account-form .form-group { margin-bottom: 0; }
.account-form .form-group label:not(.checkout-checkbox-label):not(.custom-control-label) {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
    display: block;
}
.account-form .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #0a0a0a;
    background: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.account-form .form-control::placeholder { color: #9CA3AF; }
.account-form .form-control:hover { border-color: #C7D2FE; }
.account-form .form-control:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.12);
}
.account-form .form-control[disabled],
.account-form .form-control:disabled {
    background: #F3F4F6;
    color: #6B7280;
    cursor: not-allowed;
    border-color: #E5E7EB;
}
.account-form .invalid-feedback,
.account-form .form-error-message,
.account-form .form-group-error {
    display: block;
    color: #B91C1C;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    font-weight: 500;
}

/* --- Danger zone: delete callout + button --- */
.account-danger-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    margin-bottom: 1.25rem;
}
.account-danger-callout-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    background: #DC2626;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.account-danger-callout-body {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #7F1D1D;
}
.account-danger-callout-body strong {
    display: block;
    color: #991B1B;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
}
.account-danger-callout-body ul {
    margin: 0.375rem 0 0;
    padding-left: 1.25rem;
    color: #991B1B;
}
.account-danger-callout-body ul li { margin: 0.125rem 0; }

.account-confirm-text {
    font-size: 0.9375rem;
    color: #4B5563;
    line-height: 1.5;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #fff7ed;
    border-left: 3px solid #fb923c;
    border-radius: 6px;
}

.btn-danger-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #ffffff;
    color: #B91C1C;
    border: 2px solid #DC2626;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    font-family: inherit;
}
.btn-danger-action:hover {
    background: #DC2626;
    color: #ffffff;
    transform: translateY(-1px);
}
.btn-danger-action i { font-size: 0.95em; }

/* ============================================================
   /konto/ - account dashboard
   (welcome banner, plan card with progress, stats, quick actions,
    recent orders)
   ============================================================ */

.account-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Welcome banner --- */
.dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #F8FAFC 100%);
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dashboard-welcome-avatar {
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1C94F5 0%, #0a7fd6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 14px -3px rgba(28, 148, 245, 0.4);
    text-transform: uppercase;
}
.dashboard-welcome-body { flex: 1 1 auto; min-width: 0; }
.dashboard-welcome-heading {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}
.dashboard-welcome-sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #4B5563;
    margin: 0;
    max-width: 44rem;
}

/* --- Grid: 3 stat tiles (1 col each) --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 767.98px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* --- Plan card --- */
.dashboard-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.dashboard-card--plan-active {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #BFDBFE;
}
.dashboard-card--plan-inactive {
    background: #ffffff;
    border: 1px dashed #D1D5DB;
}
.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.dashboard-card-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6B7280;
    margin: 0;
}
.dashboard-card--plan-active .dashboard-card-heading { color: #1C94F5; }
.dashboard-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}
.dashboard-card-badge--active {
    background: #10B981;
    color: #ffffff;
}
.dashboard-card-badge--inactive {
    background: #FEF3C7;
    color: #92400E;
}
.dashboard-plan-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.dashboard-plan-progress {
    height: 0.5rem;
    background: rgba(28, 148, 245, 0.15);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.dashboard-plan-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1C94F5 0%, #0a7fd6 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
    min-width: 4px;
}
.dashboard-plan-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #1F2937;
    flex-wrap: wrap;
}
.dashboard-plan-progress-info strong { color: #1C94F5; font-weight: 700; }
.dashboard-plan-progress-info i { color: #1C94F5; }
.dashboard-plan-progress-end { color: #6B7280; font-size: 0.8125rem; }

.dashboard-plan-empty {
    text-align: center;
    padding: 0.75rem 0 0.25rem;
}
.dashboard-plan-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 50%;
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
}
.dashboard-plan-empty p {
    margin: 0;
    font-size: 0.9375rem;
    color: #4B5563;
    line-height: 1.5;
}

.dashboard-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.5rem;
}
.dashboard-card-link {
    color: #1C94F5;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}
.dashboard-card-link:hover { color: #0a7fd6; }
.dashboard-card-link i { font-size: 0.85em; transition: transform 0.2s; }
.dashboard-card-link:hover i { transform: translateX(3px); }

/* --- Stat tiles --- */
.dashboard-stat {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
    min-height: 5rem;
}
.dashboard-stat:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.2);
    color: inherit;
}
.dashboard-stat-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}
.dashboard-stat-icon--orders { background: rgba(28, 148, 245, 0.1); color: #1C94F5; }
.dashboard-stat-icon--files  { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.dashboard-stat-icon--pages  { background: rgba(16, 185, 129, 0.12); color: #059669; }
.dashboard-stat-body { display: flex; flex-direction: column; min-width: 0; }
.dashboard-stat-value {
    font-size: 1.625rem;
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1;
    letter-spacing: -0.02em;
}
.dashboard-stat-label {
    font-size: 0.8125rem;
    color: #6B7280;
    font-weight: 500;
    margin-top: 0.125rem;
    line-height: 1.2;
}
.dashboard-stat-arrow {
    margin-left: auto;
    color: #C7D2FE;
    font-size: 0.875rem;
    transition: color 0.2s, transform 0.2s;
}
.dashboard-stat:hover .dashboard-stat-arrow {
    color: #1C94F5;
    transform: translateX(3px);
}

/* --- Sections (quick actions, recent orders) --- */
.dashboard-section {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dashboard-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.dashboard-section-heading {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.dashboard-section-header-row .dashboard-section-heading { margin: 0; }
.dashboard-section-link {
    color: #1C94F5;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}
.dashboard-section-link:hover { color: #0a7fd6; }
.dashboard-section-link i { font-size: 0.85em; transition: transform 0.2s; }
.dashboard-section-link:hover i { transform: translateX(3px); }

/* --- Quick actions grid --- */
.dashboard-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 767.98px) {
    .dashboard-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .dashboard-actions-grid { grid-template-columns: 1fr; }
}
.dashboard-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.dashboard-action:hover {
    border-color: #1C94F5;
    background: #ffffff;
    transform: translateY(-2px);
    color: inherit;
}
.dashboard-action-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    color: #1C94F5;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.dashboard-action:hover .dashboard-action-icon {
    background: #1C94F5;
    color: #ffffff;
    border-color: #1C94F5;
}
.dashboard-action-body { display: flex; flex-direction: column; min-width: 0; }
.dashboard-action-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.25;
}
.dashboard-action-sub {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.3;
    margin-top: 0.125rem;
}

/* --- Recent orders list --- */
.dashboard-orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dashboard-order-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.dashboard-order-item:hover {
    border-color: #1C94F5;
    background: #ffffff;
    transform: translateX(3px);
    color: inherit;
}
.dashboard-order-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.dashboard-order-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dashboard-order-id {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.25;
}
.dashboard-order-date {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-top: 0.125rem;
}
.dashboard-order-total {
    font-size: 1rem;
    font-weight: 800;
    color: #1C94F5;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

/* --- Empty state (no orders) --- */
.dashboard-empty {
    text-align: center;
    padding: 1rem 0.5rem;
}
.dashboard-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
}
.dashboard-empty p {
    font-size: 0.9375rem;
    color: #4B5563;
    margin: 0 0 1.25rem;
}

/* ================================================================
   ACCOUNT DASHBOARD — Polish platform style
   ================================================================ */

/* --- Resource tiles: subtle, secondary role --- */
.dashboard-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
    gap: 0.75rem;
}
@media (max-width: 575.98px) {
    .dashboard-resources { grid-template-columns: 1fr; }
}
.dashboard-resource {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.dashboard-resource:hover {
    border-color: #1C94F5;
    background: #ffffff;
    transform: translateY(-1px);
    color: inherit;
}
.dashboard-resource-icon {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
}
.dashboard-resource--videos .dashboard-resource-icon { background: rgba(168, 85, 247, 0.12); color: #7C3AED; }

/* --- Tienda dentro del panel (/konto/) --- */
.dashboard-resource--shop .dashboard-resource-icon { background: rgba(28, 148, 245, 0.12); color: #1C94F5; }
/* Sin plan activo la tarjeta invita a comprar */
.dashboard-resource--shop-cta {
    background: rgba(28, 148, 245, 0.05);
    border-color: rgba(28, 148, 245, 0.45);
}
.dashboard-resource--shop-cta:hover {
    background: rgba(28, 148, 245, 0.09);
    border-color: #1C94F5;
}
.dashboard-resource--shop .dashboard-resource-label { color: #4B5563; }
.dashboard-resource-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1;
    letter-spacing: -0.02em;
}
.dashboard-resource-label {
    font-size: 0.8125rem;
    color: #6B7280;
    font-weight: 500;
    line-height: 1.3;
    margin-left: 0.125rem;
}

/* --- Szybki dostęp: 4 main action cards --- */
.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 991.98px) {
    .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .dashboard-quick-grid { grid-template-columns: 1fr; }
}
.dashboard-secondary-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    font-size: 0.875rem;
    color: #475569;
}
.dashboard-secondary-link i { color: #1C94F5; }
.dashboard-secondary-link a { color: #1C94F5; font-weight: 700; text-decoration: none; }
.dashboard-secondary-link a:hover { text-decoration: underline; }
.dashboard-quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.dashboard-quick-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1C94F5, #0a7fd6);
    opacity: 0;
    transition: opacity 0.2s;
}
.dashboard-quick-card:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.18);
    color: inherit;
}
.dashboard-quick-card:hover::before { opacity: 1; }
.dashboard-quick-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.dashboard-quick-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.dashboard-quick-card-sub {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.4;
}

/* --- 2-col split: article (light) + instructors (heavy) --- */
.dashboard-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .dashboard-split {
        grid-template-columns: 1fr;
    }
}

/* Article pick — lightweight, left column */
.dashboard-article-pick {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1.125rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.dashboard-article-pick-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1C94F5;
}
.dashboard-article-pick-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -0.01em;
}
.dashboard-article-pick-title a {
    color: inherit;
    text-decoration: none;
}
.dashboard-article-pick-title a:hover { color: #1C94F5; }
.dashboard-article-pick-cat {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 0;
}
.dashboard-article-pick-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1C94F5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.5rem;
    transition: gap 0.2s;
}
.dashboard-article-pick-link:hover { gap: 0.4rem; color: #0a7fd6; }

/* Instructors block — heavy, right column */
.dashboard-instructors-block {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dashboard-instructors-head {
    margin-bottom: 0.875rem;
}
.dashboard-instructors-head h2 {
    font-size: 1rem;
    font-weight: 800;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
}
.dashboard-instructors-head p {
    font-size: 0.8125rem;
    color: #6B7280;
    margin: 0;
}

/* Instructor filter form */
.dashboard-instructor-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dashboard-instructor-filters select {
    flex: 1 1 120px;
    min-width: 0;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #374151;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dashboard-instructor-filters select:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.12);
}
.dashboard-instructor-filters button {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    background: #1C94F5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.dashboard-instructor-filters button:hover { background: #0a7fd6; }

/* Instructor list */
.dashboard-instructors-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.dashboard-instructor-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.dashboard-instructor-row:hover {
    border-color: #1C94F5;
    background: #ffffff;
    transform: translateX(2px);
    color: inherit;
}
.dashboard-instructor-avatar-sm {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1C94F5, #0a7fd6);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
}
.dashboard-instructor-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.dashboard-instructor-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.dashboard-instructor-row-body > strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0a0a0a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-instructor-row-meta {
    font-size: 0.75rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.dashboard-instructor-row-meta i {
    color: #9CA3AF;
    font-size: 0.7rem;
}
.dashboard-instructor-row-cats {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.125rem;
}
.badge-cat {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.dashboard-instructor-rating-sm {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #F59E0B;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}
.dashboard-instructor-rating-sm i { font-size: 0.7rem; }

.dashboard-instructors-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1C94F5;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.dashboard-instructors-more:hover {
    background: rgba(28, 148, 245, 0.07);
    color: #0a7fd6;
}
.dashboard-instructors-more i { transition: transform 0.2s; }
.dashboard-instructors-more:hover i { transform: translateX(3px); }

/* Car offer banner */
.dashboard-car-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #0a1628 100%);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dashboard-car-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.25);
    color: inherit;
}
.dashboard-car-banner-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(28, 148, 245, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.dashboard-car-banner-content { flex: 1 1 auto; position: relative; }
.dashboard-car-banner-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #60A5FA;
    margin-bottom: 0.25rem;
}
.dashboard-car-banner-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.dashboard-car-banner-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}
.dashboard-car-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 0.625rem;
    padding: 0.4rem 0.875rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.dashboard-car-banner:hover .dashboard-car-banner-cta { background: rgba(255, 255, 255, 0.25); }
.dashboard-car-banner-cta i { transition: transform 0.2s; }
.dashboard-car-banner:hover .dashboard-car-banner-cta i { transform: translateX(3px); }
.dashboard-car-banner-icon {
    flex: 0 0 3.5rem;
    height: 3.5rem;
    background: rgba(28, 148, 245, 0.2);
    border: 1px solid rgba(28, 148, 245, 0.3);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #60A5FA;
    position: relative;
}
@media (max-width: 575.98px) {
    .dashboard-car-banner-icon { display: none; }
}

/* Banner imagen promocional */
.dashboard-promo-img-link {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dashboard-promo-img-link:hover { opacity: 0.9; transform: translateY(-1px); }
.dashboard-promo-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    object-fit: cover;
}

/* --- Account course (Tryb nauki) + dashboard access note --- */
.account-course-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 1rem;
}
.account-course-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.account-course-status i { font-size: 1rem; }
.account-course-status--active {
    background: #eafaf0;
    border: 1px solid #16a34a;
    color: #14532d;
}
.account-course-status--trial {
    background: #eaf4ff;
    border: 1px solid #1C94F5;
    color: #0a3a5c;
}
.account-course-status--locked {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #7c4a03;
}
.account-course-status--locked a { color: #1C94F5; font-weight: 700; }

.dashboard-access-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.dashboard-access-note i { font-size: 1rem; }
.dashboard-access-note--active {
    background: #eafaf0;
    border: 1px solid #16a34a;
    color: #14532d;
}
.dashboard-access-note--trial {
    background: #eaf4ff;
    border: 1px solid #1C94F5;
    color: #0a3a5c;
}
.dashboard-access-note a { color: #1C94F5; font-weight: 700; }

/* --- Study topics (Tryb nauki — lista kategorii) --- */
.account-course-lead {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
    max-width: 720px;
}
.account-course-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #1C94F5;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.account-course-back:hover { text-decoration: underline; }
.account-course-footnote {
    color: #647569;
    font-size: 0.82rem;
    margin: 1.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.study-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.study-topic-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.study-topic-card:hover {
    border-color: #1C94F5;
    box-shadow: 0 4px 14px rgba(28, 148, 245, 0.10);
    transform: translateY(-1px);
}
.study-topic-emoji {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.study-topic-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.study-topic-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.study-topic-count {
    font-size: 0.78rem;
    color: #647569;
}
.study-topic-arrow {
    color: #94a3b8;
    font-size: 1.1rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.study-topic-card:hover .study-topic-arrow {
    color: #1C94F5;
    transform: translateX(2px);
}

/* --- Study app (Tryb nauki — visual del repo neerlandés, dark cards sobre fondo plataforma) --- */
.study-app {
    background: transparent;
    color: inherit;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
}
.study-app-header {
    max-width: 56rem;
    margin: 0 auto 1.5rem;
}
.study-app-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1C94F5;
    margin: 0 0 0.4rem;
}
.study-app-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.study-app-subtitle {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}
.study-app-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 56rem;
    margin: 0 auto 1rem;
}
.study-app-back:hover {
    color: #1C94F5;
}
.study-app-footnote {
    max-width: 56rem;
    margin: 1.5rem auto 0;
    color: #64748b;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.study-app-footnote i {
    color: #94a3b8;
}
.study-topics-grid-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .study-topics-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.study-topic-card-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.study-topic-card-v2:hover {
    border-color: #2563eb;
    background: #f8fafc;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}
.study-topic-emoji-v2 {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.study-topic-body-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.study-topic-name-v2 {
    font-weight: 500;
    color: #0f172a;
    margin: 0;
    transition: color 0.15s ease;
}
.study-topic-card-v2:hover .study-topic-name-v2 {
    color: #2563eb;
}
.study-topic-count-v2 {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}
.study-topic-arrow-v2 {
    color: #94a3b8;
    font-size: 1.125rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.study-topic-card-v2:hover .study-topic-arrow-v2 {
    color: #2563eb;
    transform: translateX(2px);
}
.study-app #test {
    max-width: 56rem;
    margin: 0 auto;
}

/* --- Study runner (Tryb nauki — runner standalone, idéntico al repo neerlandés) --- */
.study-theory {
    max-width: 56rem;
    margin: 0 auto 1.5rem;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 0.4rem 1.25rem 1rem;
}
.study-theory-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.65rem 0;
    font-weight: 700;
    color: #0f172a;
    list-style: none;
}
.study-theory-summary::-webkit-details-marker { display: none; }
.study-theory-icon { font-size: 1.1rem; }
.study-theory-title { font-size: 1rem; }
.study-theory-hint {
    font-weight: 500;
    font-size: 0.75rem;
    color: #64748b;
    margin-left: auto;
}
.study-theory-list {
    margin: 0;
    padding-left: 1.15rem;
}
.study-theory-list li {
    color: #1e293b;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.45rem;
}
.study-theory-list li::marker { color: #1C94F5; }
.study-runner {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.study-loading {
    color: #64748b;
    font-size: 0.875rem;
    padding: 1rem 0;
}
.study-qcard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.15s ease;
}
.study-qcard:hover {
    border-color: #cbd5e1;
}
.study-qnum {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.study-qtext {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}
.study-qimg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 16rem;
    margin: 0 0 1rem;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
}
.study-qopts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.study-qopt {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #1e293b;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.study-qopt:hover:not(:disabled) {
    border-color: #2563eb;
    background: #eff6ff;
}
.study-qopt:disabled {
    cursor: default;
    opacity: 0.65;
}
.study-qopt-letter {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
}
.study-qopt-text {
    flex: 1;
    min-width: 0;
}
.study-qopt.is-correct {
    border-color: #16a34a;
    background: #f0fdf4;
    opacity: 1;
}
.study-qopt.is-correct .study-qopt-letter {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}
.study-qopt.is-wrong {
    border-color: #dc2626;
    background: #fef2f2;
    opacity: 1;
}
.study-qopt.is-wrong .study-qopt-letter {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
.study-qreveal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    color: #1C94F5;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}
.study-qreveal:hover:not(:disabled) {
    color: #0c6dc7;
    text-decoration: underline;
}
.study-qreveal:disabled,
.study-qreveal.is-done {
    color: #94a3b8;
    cursor: default;
    text-decoration: none;
}
.study-qexpl {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.55;
    background: #f1f5f9;
    border-left: 3px solid #cbd5e1;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin-top 0.2s ease;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.study-qexpl.is-open {
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.study-qfeedback {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.55rem 0.8rem;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}
.study-qfeedback.is-visible { display: flex; }
.study-qfeedback.is-correct { background: #f0fdf4; color: #15803d; }
.study-qfeedback.is-wrong { background: #fef2f2; color: #b91c1c; }
.study-qfeedback.is-correct::before { content: '✔'; font-weight: 700; }
.study-qfeedback.is-wrong::before { content: '✖'; font-weight: 700; }
.study-qexpl-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1C94F5;
    margin-bottom: 0.3rem;
}
.study-qexpl-text { display: block; }

/* ============================================================
   TEORIA — zasady ruchu i katalog znaków
   ============================================================ */
.theory-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.theory-head .account-course-heading { margin: 0; }
.theory-pill,
.theory-card-count,
.theory-group-count {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.7;
    border-radius: 999px;
    padding: 0 0.55rem;
    white-space: nowrap;
}
.theory-pill {
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
}
.account-course-footnote a { color: #1C94F5; font-weight: 600; text-decoration: none; }
.account-course-footnote a:hover { text-decoration: underline; }

.theory-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 2rem 0 0.75rem;
}

/* Wspólny wzorzec karty — zgodny z .dashboard-quick-card */
.theory-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.125rem 1.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.theory-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1C94F5, #0a7fd6);
    opacity: 0;
    transition: opacity 0.2s;
}
.theory-card:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.18);
    color: inherit;
}
.theory-card:hover::before { opacity: 1; }
.theory-card--feature { margin-bottom: 0.25rem; }

.theory-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
}
.theory-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}
.theory-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.theory-card-desc {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.5;
}
.theory-card-count {
    flex: 0 0 auto;
    align-self: center;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
}

.theory-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.75rem;
}
@media (max-width: 575.98px) {
    .theory-cat-grid { grid-template-columns: 1fr; }
}

/* --- Katalog znaków --- */
.theory-signs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.75rem;
}
.theory-sign {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.theory-sign:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(28, 148, 245, 0.35);
}
.theory-sign-image {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
}
.theory-sign-image img {
    max-width: 64px;
    max-height: 60px;
    width: auto;
    height: auto;
    display: block;
}
.theory-sign-noimg {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94A3B8;
    text-align: center;
    padding: 0 0.25rem;
}
.theory-sign-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.theory-sign-code {
    align-self: flex-start;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.08);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
}
.theory-sign-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.theory-sign-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B7280;
    margin: 0;
}
@media (max-width: 575.98px) {
    .theory-sign { flex-direction: column; }
}

/* --- Indeks przepisów --- */
.theory-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}
.theory-jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.theory-jump a:hover { border-color: #1C94F5; color: #1C94F5; }
.theory-jump-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6B7280;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 0 0.35rem;
}
.theory-jump a:hover .theory-jump-count { color: #1C94F5; background: rgba(28, 148, 245, 0.1); }

.theory-group {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.5rem 1rem;
    margin-bottom: 1rem;
    scroll-margin-top: 1rem;
}
.theory-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 0.35rem;
}
.theory-group-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    margin: 0;
}
.theory-group-count { color: #6B7280; background: #F3F4F6; }

.theory-links {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2.5rem;
}
.theory-links li { break-inside: avoid; }
.theory-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 0.875rem;
    color: #334155;
    text-decoration: none;
    transition: color 0.15s;
}
.theory-links a i {
    flex: 0 0 auto;
    font-size: 0.65rem;
    color: #CBD5E1;
    transition: color 0.15s, transform 0.15s;
}
.theory-links a:hover { color: #1C94F5; }
.theory-links a:hover i { color: #1C94F5; transform: translateX(2px); }
@media (max-width: 767.98px) {
    .theory-links { columns: 1; }
    .theory-group { padding: 1.1rem 1.15rem 0.85rem; }
}

/* --- Artykuł --- */
.theory-article {
    max-width: 46rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.75rem 2rem;
}
.theory-article-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1C94F5;
    margin: 0 0 0.5rem;
}
.theory-article-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: #0a0a0a;
    margin: 0 0 0.9rem;
}
.theory-article-body {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: #334155;
    margin: 0;
}
.theory-remember {
    margin-top: 1.5rem;
    padding: 1.15rem 1.35rem;
    background: #F0F7FF;
    border: 1px solid #D6E9FF;
    border-radius: 12px;
}
.theory-remember-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1C94F5;
    margin: 0 0 0.6rem;
}
.theory-remember-title i { font-size: 0.8rem; }
.theory-remember-list {
    margin: 0;
    padding-left: 1.15rem;
}
.theory-remember-list li {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #1e293b;
    margin-bottom: 0.45rem;
}
.theory-remember-list li:last-child { margin-bottom: 0; }
.theory-remember-list li::marker { color: #1C94F5; }
@media (max-width: 575.98px) {
    .theory-article { padding: 1.25rem 1.15rem; }
    .theory-article-title { font-size: 1.2rem; }
}

/* --- Hub wyboru trybu nauki --- */
.learn-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (max-width: 991.98px) {
    .learn-hub-grid { grid-template-columns: 1fr; }
}
.learn-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.75rem 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.learn-hub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1C94F5, #0a7fd6);
    opacity: 0;
    transition: opacity 0.2s;
}
.learn-hub-card:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.18);
    color: inherit;
}
.learn-hub-card:hover::before { opacity: 1; }
.learn-hub-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}
.learn-hub-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    text-align: center;
}

/* ============================================================
   PROPOZYCJE FILMÓW Z KATALOGU (odblokowanie po zakupie)
   ============================================================ */
.video-offers {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid #E5E7EB;
}
.video-offers-heading {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    margin: 0 0 0.35rem;
}
.video-offers-lead {
    font-size: 0.875rem;
    color: #6B7280;
    margin: 0 0 1.25rem;
}
.video-offers-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.video-offers-head .video-offers-lead { margin-bottom: 0; }
.video-offers-nav {
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
}
.carousel-btn {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.carousel-btn:hover {
    border-color: #1C94F5;
    color: #1C94F5;
    background: rgba(28, 148, 245, 0.06);
}
.video-offers-carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
    display: flex;
    gap: 0.75rem;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.carousel-slide {
    flex: 0 0 calc(50% - 0.375rem);
    min-width: 0;
}
@media (max-width: 767.98px) {
    .carousel-slide { flex: 0 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .carousel-track { transition: none; }
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
}
.carousel-dot {
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #CBD5E1;
    cursor: pointer;
    transition: background 0.15s, width 0.2s;
}
.carousel-dot.is-active {
    width: 1.25rem;
    border-radius: 999px;
    background: #1C94F5;
}
.video-offer {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.video-offer:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.18);
}
.video-offer-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #EAF4FF 0%, #F8FAFC 100%);
}
.video-offer-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-offer-play {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #1C94F5;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px -4px rgba(28, 148, 245, 0.5);
    transition: transform 0.18s, background 0.18s;
}
.video-offer-preview:hover .video-offer-play,
.video-offer-preview:focus-visible .video-offer-play {
    background: #0a7fd6;
    transform: scale(1.06);
}
.video-offer-tag {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}
.video-offer-locked {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}
.video-offer-locked i { font-size: 1.15rem; }
.video-offer-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 0.9rem 1rem 1rem;
}
.video-offer-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin: 0;
}
.video-offer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
}
.video-offer-price {
    font-size: 1rem;
    font-weight: 800;
    color: #0a0a0a;
    letter-spacing: -0.02em;
}
.video-offers-note {
    min-height: 1.2rem;
    margin: 0.9rem 0 0;
    font-size: 0.8125rem;
    color: #6B7280;
}
.video-offers-note a { color: #1C94F5; font-weight: 700; text-decoration: none; }
.video-offers-note a:hover { text-decoration: underline; }

/* ============================================================
   MOJE FILMY — karty z zapowiedzią, pełnym filmem i stanem obejrzenia
   ============================================================ */
.my-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}
.my-videos-empty {
    color: #6B7280;
    font-size: 0.9375rem;
    margin: 0;
}
.my-video {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
}
.my-video:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, 0.18);
}
.my-video-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0F172A;
}
.my-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
}
.my-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.82;
    transition: opacity 0.2s, transform 0.3s;
}
.my-video-poster:hover img,
.my-video-poster:focus-visible img {
    opacity: 1;
    transform: scale(1.03);
}
.my-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s, background 0.18s;
}
.my-video-poster:hover .my-video-play,
.my-video-poster:focus-visible .my-video-play {
    background: #ffffff;
    transform: translate(-50%, -50%) scale(1.08);
}
.my-video-badge,
.my-video-tag {
    position: absolute;
    z-index: 2;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}
.my-video-badge { top: 0.6rem; right: 0.6rem; }
.my-video-tag {
    left: 0.6rem;
    bottom: 0.6rem;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
}
.my-video-badge--done { background: #16A34A; color: #ffffff; }
.my-video-badge--started { background: #F59E0B; color: #ffffff; }
.my-video-badge--new { background: rgba(28, 148, 245, 0.95); color: #ffffff; }
.my-video-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 0.9rem 1rem 1rem;
}
.my-video-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin: 0;
}
.my-video-title a { color: #0a0a0a; text-decoration: none; }
.my-video-title a:hover { color: #1C94F5; }
.my-video-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}
.my-video-preview {
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.my-video-preview:hover { border-color: #1C94F5; color: #1C94F5; }
.my-video-meta {
    margin: 0;
    font-size: 0.75rem;
    color: #94A3B8;
}
.video-modal-status {
    min-height: 1.2rem;
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* ============================================================
   KASA W MODALU
   ============================================================ */
.checkout-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.checkout-modal.is-open { display: flex; }
.checkout-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.checkout-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 34rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.checkout-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: #F1F5F9;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.checkout-modal-close:hover { background: #E2E8F0; color: #0f172a; }
.checkout-modal-title {
    margin: 0;
    padding: 1.25rem 1.5rem 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
}
.checkout-modal-body { padding: 0 1.5rem 1.5rem; }

.checkout-items {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}
.checkout-items li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.875rem;
    color: #334155;
}
.checkout-item-name { min-width: 0; }
.checkout-item-price { flex: 0 0 auto; font-weight: 700; color: #0a0a0a; }
.checkout-item-remove {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    background: #ffffff;
    color: #94A3B8;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.checkout-item-remove:hover {
    border-color: #DC2626;
    color: #DC2626;
    background: #FEF2F2;
}
.checkout-item-remove:disabled { opacity: 0.5; cursor: default; }
.checkout-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #6B7280;
}
.checkout-total strong {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0a0a0a;
}
.checkout-empty {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #6B7280;
}

.checkout-methods {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
.checkout-label {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7280;
}
.checkout-method {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.checkout-method:hover { border-color: #1C94F5; background: rgba(28, 148, 245, 0.04); }
.checkout-method input {
    order: 3;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}
.checkout-method-icon {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.checkout-method:has(input:checked) {
    border-color: #1C94F5;
    background: rgba(28, 148, 245, 0.06);
    color: #0a0a0a;
}

.checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.checkout-fields > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="password"],
.checkout-form input:not([type]) {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #0f172a;
    background: #ffffff;
}
.checkout-form input:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.15);
}
.checkout-form ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    color: #B91C1C;
}

.checkout-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #475569;
    cursor: pointer;
}
.checkout-check input { flex: 0 0 auto; margin-top: 0.15rem; }
.checkout-invoice { margin-bottom: 0.5rem; }

.checkout-error {
    display: none;
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #FEF2F2;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #B91C1C;
}
.checkout-error.is-visible { display: block; }

.checkout-submit {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
}
.checkout-footnote {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    color: #94A3B8;
}
@media (max-width: 575.98px) {
    .checkout-modal-dialog { max-height: calc(100vh - 1rem); }
    .checkout-fields { grid-template-columns: 1fr; }
    .checkout-modal-title { padding: 1rem 1.15rem 0.6rem; }
    .checkout-modal-body { padding: 0 1.15rem 1.25rem; }
}

/* ============================================================
   OCZEKIWANIE NA POTWIERDZENIE PŁATNOŚCI
   ============================================================ */
.payment-state { padding: 1rem 0; }
.payment-state > i {
    display: block;
    margin-bottom: 1rem;
    font-size: 3rem;
    color: #16A34A;
}
.payment-spinner {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border: 3px solid #E2E8F0;
    border-top-color: #1C94F5;
    border-radius: 50%;
    animation: payment-spin 0.9s linear infinite;
}
.payment-spinner--done {
    border-color: #16A34A;
    animation: none;
}
@keyframes payment-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .payment-spinner { animation-duration: 2.5s; }
}
.payment-state-note {
    min-height: 1.2rem;
    font-size: 0.875rem;
    color: #6B7280;
}
.payment-state-note a { color: #1C94F5; font-weight: 700; }

/* ============================================================
   PANEL INSTRUKTORA — kafelki, panele, wiadomości
   ============================================================ */
.dashboard-resources--four {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.dashboard-resource--amber .dashboard-resource-icon { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.dashboard-resource--emerald .dashboard-resource-icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.dashboard-resource--violet .dashboard-resource-icon { background: rgba(168, 85, 247, 0.12); color: #7C3AED; }
.dashboard-resource--blue .dashboard-resource-icon { background: rgba(28, 148, 245, 0.12); color: #1C94F5; }

.dashboard-quick-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #DC2626;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}
.dashboard-quick-card-icon { position: relative; }

.instr-panel {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.4rem;
}
.instr-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.instr-split-col { min-width: 0; }
@media (max-width: 991.98px) {
    .instr-split { grid-template-columns: 1fr; }
}
.instr-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.instr-panel-head--page {
    align-items: flex-start;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #F1F5F9;
}
.instr-panel-head .dashboard-section-heading { margin: 0; }
.instr-panel-more {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1C94F5;
    text-decoration: none;
}
.instr-panel-more:hover { text-decoration: underline; }
.instr-panel-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6B7280;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.instr-page-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    margin: 0;
}
.instr-page-lead {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: #6B7280;
}
.instr-empty {
    margin: 0;
    padding: 1rem 0;
    font-size: 0.875rem;
    color: #6B7280;
}
.instr-link { color: #1C94F5; font-weight: 600; text-decoration: none; font-size: 0.8125rem; }
.instr-link:hover { text-decoration: underline; }

/* --- Filtry --- */
.instr-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.instr-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.instr-filter:hover { border-color: #1C94F5; color: #1C94F5; }
.instr-filter.is-active { border-color: #1C94F5; background: rgba(28, 148, 245, 0.08); color: #1C94F5; }
.instr-filter-count {
    font-size: 0.6875rem;
    font-weight: 700;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 0 0.35rem;
    color: #6B7280;
}
.instr-filter.is-active .instr-filter-count { background: rgba(28, 148, 245, 0.15); color: #1C94F5; }

/* --- Liste de messages --- */
.instr-msg-list { list-style: none; margin: 0; padding: 0; }
.instr-msg { border-bottom: 1px solid #F3F4F6; }
.instr-msg:last-child { border-bottom: 0; }
.instr-msg a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.15s;
}
.instr-msg a:hover { background: #F8FAFC; }
.instr-msg--unread a { background: rgba(28, 148, 245, 0.05); }
.instr-msg--unread a:hover { background: rgba(28, 148, 245, 0.1); }
.instr-msg-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.instr-msg-from {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0a0a0a;
}
.instr-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #1C94F5;
    flex: 0 0 auto;
}
.instr-msg-date { flex: 0 0 auto; font-size: 0.75rem; color: #94A3B8; }
.instr-msg-subject { font-size: 0.8125rem; font-weight: 600; color: #334155; }
.instr-msg-excerpt { font-size: 0.8125rem; color: #6B7280; line-height: 1.45; }
.instr-msg-list--full .instr-msg a { padding: 0.85rem 0.75rem; }

/* --- Détail du message --- */
.instr-msg-detail-meta {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}
.instr-msg-detail-row { display: flex; gap: 0.75rem; font-size: 0.875rem; }
.instr-msg-detail-label {
    flex: 0 0 5rem;
    color: #6B7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0.1rem;
}
.instr-msg-detail-value { color: #0f172a; min-width: 0; word-break: break-word; }
.instr-msg-detail-value a { color: #1C94F5; font-weight: 600; text-decoration: none; }
.instr-msg-detail-value a:hover { text-decoration: underline; }
.instr-msg-body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #1e293b;
    padding: 0.5rem 0 1.25rem;
    border-bottom: 1px solid #F1F5F9;
}
.instr-msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.btn-danger-outline { color: #B91C1C; border-color: #FECACA; }
.btn-danger-outline:hover { background: #FEF2F2; border-color: #DC2626; color: #B91C1C; }

/* --- Tableau --- */
.instr-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.instr-table th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 0 0.5rem 0.5rem;
    border-bottom: 1px solid #F1F5F9;
}
.instr-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #F3F4F6;
    color: #334155;
    vertical-align: middle;
}
.instr-table tr:last-child td { border-bottom: 0; }
.instr-result {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.instr-result--pass { background: #DCFCE7; color: #15803D; }
.instr-result--fail { background: #FEE2E2; color: #B91C1C; }
.instr-result--open { background: #F3F4F6; color: #6B7280; }

/* --- Carte du profil public --- */
.instr-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.5rem;
}
.instr-profile-card--empty { border-style: dashed; }
.instr-profile-card-body { min-width: 0; }
.instr-profile-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.instr-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.5rem;
}
.instr-profile-status--public { background: #DCFCE7; color: #15803D; }
.instr-profile-status--draft { background: #FEF3C7; color: #B45309; }
.instr-profile-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    margin: 0 0 0.2rem;
}
.instr-profile-meta { margin: 0; font-size: 0.8125rem; color: #6B7280; }
.instr-profile-meta i { color: #F59E0B; }

@media (max-width: 767.98px) {
    .instr-panel { padding: 1.1rem 1.15rem; }
    .instr-profile-card { padding: 1.1rem 1.15rem; }
    .instr-msg-detail-label { flex-basis: 100%; }
    .instr-msg-detail-row { flex-direction: column; gap: 0.1rem; }
}

/* --- Cabecera del instructor: vistas del perfil en vez de paquete --- */
.account-plan-card--instructor {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    min-width: 11rem;
}
.account-instr-views {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #0a0a0a;
    margin: 0.1rem 0 0.2rem;
}
.account-instr-sep { margin: 0 0.2rem; opacity: 0.55; }

/* --- Badge de no leídos en el menú --- */
.account-nav-badge {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #DC2626;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

/* --- Intentos recientes: lista, no tabla (los títulos largos se recortan) --- */
.instr-attempts { list-style: none; margin: 0; padding: 0; }
.instr-attempt { border-bottom: 1px solid #F3F4F6; }
.instr-attempt:last-child { border-bottom: 0; }
.instr-attempt a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.instr-attempt a:hover { background: #F8FAFC; }
.instr-attempt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}
.instr-attempt-student {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0a0a0a;
}
.instr-attempt-test {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: #475569;
}
.instr-attempt-date { font-size: 0.75rem; color: #94A3B8; }

/* --- Tablas: nunca desbordan el contenedor --- */
.instr-table-scroll { overflow-x: auto; }
.instr-cell-title {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .account-instr-views { font-size: 1.5rem; }
}

/* ============================================================
   EDYCJA PROFILU INSTRUKTORA (/konto/instruktor/strona/)
   Misma identidad que el resto del panel: radio 14px, borde
   #E5E7EB, sombra suave y acento #1C94F5.
   ============================================================ */
.ivp-breadcrumb { margin-bottom: 1rem; }
.ivp-breadcrumb a {
    color: #1C94F5;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}
.ivp-breadcrumb a:hover { text-decoration: underline; }

/* Cabecera en dos columnas: texto a la izquierda, acciones a la derecha y
   centradas verticalmente respecto al texto. */
.ivp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ivp-page-head-main { min-width: 0; }
.ivp-page-head h1 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    margin: 0 0 0.25rem;
}
.ivp-page-head p { margin: 0; font-size: 0.9375rem; color: #6B7280; }
.ivp-page-head code {
    background: #F3F4F6;
    padding: 0 0.4rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.ivp-alert {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.ivp-alert--ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.ivp-alert--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

.ivp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .ivp-grid { grid-template-columns: 1fr; }
}
.ivp-form-col { min-width: 0; }

.ivp-section-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
}
.ivp-form { display: flex; flex-direction: column; gap: 1rem; }

.ivp-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ivp-field label,
.ivp-media-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
}
.ivp-input,
.ivp-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ivp-input:focus,
.ivp-textarea:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, 0.12);
}
.ivp-textarea { resize: vertical; min-height: 110px; }
.ivp-field small { font-size: 0.75rem; color: #94A3B8; line-height: 1.45; }

.ivp-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
@media (max-width: 575.98px) {
    .ivp-row-2 { grid-template-columns: 1fr; }
}

.ivp-divider { height: 1px; background: #F1F5F9; margin: 0.75rem 0; }
.ivp-h2 {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
    margin: 0;
}
.ivp-help { font-size: 0.8125rem; color: #6B7280; margin: 0 0 0.75rem; line-height: 1.5; }

/* Zdjęcia */
.ivp-media-grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 575.98px) {
    .ivp-media-grid { grid-template-columns: 1fr; }
}
.ivp-media { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ivp-media-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ivp-media-preview--wide { aspect-ratio: 16 / 6; }
.ivp-media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivp-media-empty { color: #CBD5E1; font-size: 1.75rem; }
.ivp-file { font-size: 0.8125rem; color: #475569; width: 100%; }
.ivp-file::file-selector-button {
    padding: 0.45rem 0.8rem;
    margin-right: 0.6rem;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}
.ivp-file::file-selector-button:hover { border-color: #1C94F5; color: #1C94F5; }

/* Kolekcje: rejony i pakiety */
.ivp-collection { display: flex; flex-direction: column; gap: 0.5rem; }
.ivp-collection-row { display: flex; align-items: center; gap: 0.5rem; }
.ivp-collection-row--plan { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; }
.ivp-input--price { text-align: right; }
.ivp-remove {
    flex: 0 0 auto;
    width: 2.375rem;
    height: 2.375rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
    color: #94A3B8;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ivp-remove:hover { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }

/* Interruptor de publicación */
.ivp-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
}
.ivp-switch input { margin-top: 0.15rem; flex: 0 0 auto; }

/* Disponibilidad */
.ivp-availability-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
@media (max-width: 575.98px) {
    .ivp-availability-toggle { grid-template-columns: 1fr; }
}
.ivp-availability-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ivp-availability-option i { font-size: 1.125rem; color: #9CA3AF; }
.ivp-availability-option input { position: absolute; opacity: 0; pointer-events: none; }
.ivp-availability-option:hover { border-color: #1C94F5; }
.ivp-availability-option:has(input[value="yes"]:checked) { background: #10B981; border-color: #059669; color: #ffffff; }
.ivp-availability-option:has(input[value="yes"]:checked) i { color: #ffffff; }
.ivp-availability-option:has(input[value="no"]:checked) { background: #DC2626; border-color: #B91C1C; color: #ffffff; }
.ivp-availability-option:has(input[value="no"]:checked) i { color: #ffffff; }

/* Servicios en tarjetas */
.ivp-group {
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.ivp-h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 0.625rem;
}
.ivp-h3 i { color: #1C94F5; }
.ivp-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.375rem; }
.ivp-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ivp-check:hover { border-color: #1C94F5; background: #F0F9FF; }
.ivp-check input { margin: 0; }
.ivp-check input:checked + span { color: #1C94F5; font-weight: 700; }

.ivp-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; padding-top: 0.5rem; }

/* Galería */
.ivp-gallery-upload { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.ivp-gallery-upload .ivp-file { flex: 1 1 16rem; }
.ivp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
.ivp-gallery-item {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    aspect-ratio: 4 / 3;
}
.ivp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivp-gallery-item form { position: absolute; top: 0.4rem; right: 0.4rem; margin: 0; }
.ivp-gallery-remove {
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.ivp-gallery-remove:hover { background: #DC2626; }

/* Panel de vista previa */
.ivp-preview-card {
    position: sticky;
    top: 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}
.ivp-preview-label {
    display: inline-block;
    margin-bottom: 0.625rem;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, 0.1);
    color: #1C94F5;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ivp-preview-card h3 { font-size: 1rem; font-weight: 800; color: #0a0a0a; margin: 0 0 0.375rem; }
.ivp-preview-card p { font-size: 0.8125rem; color: #6B7280; margin: 0 0 1rem; line-height: 1.5; }
.ivp-preview-blocks { display: flex; flex-direction: column; gap: 0.5rem; }
.ivp-preview-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.8125rem;
}
.ivp-preview-block strong { display: flex; align-items: center; gap: 0.4rem; color: #0a0a0a; font-weight: 700; }
.ivp-preview-block strong i { color: #1C94F5; }
.ivp-preview-block span { color: #6B7280; font-size: 0.75rem; }
.ivp-preview-empty {
    margin: 0;
    padding: 0.75rem;
    border-radius: 10px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 0.8125rem;
}

/* ============================================================================
   Panel del alumno — acceso directo a instructores.
   Sustituye al antiguo bloque con buscador y listado, que alargaba el panel.
   Misma identidad visual que el resto de tarjetas del panel.
   ============================================================================ */
.dashboard-instructor-cta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dashboard-instructor-cta:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, .18);
    text-decoration: none;
}

.dashboard-instructor-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(28, 148, 245, .1);
    color: #1C94F5;
    font-size: 1.05rem;
}

.dashboard-instructor-cta-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dashboard-instructor-cta-body strong {
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.95rem;
}

.dashboard-instructor-cta-body span {
    color: #6B7280;
    font-size: 0.8125rem;
}

.dashboard-instructor-cta-arrow {
    margin-left: auto;
    color: #9CA3AF;
    transition: color .18s ease, transform .18s ease;
}

.dashboard-instructor-cta:hover .dashboard-instructor-cta-arrow {
    color: #1C94F5;
    transform: translateX(3px);
}

/* ============================================================================
   Panel del alumno — progreso de aprendizaje y "siguiente paso".
   Objetivo: que el alumno vea de un vistazo cuánto lleva y qué hacer ahora,
   sin tener que buscar la página de estadísticas.
   ============================================================================ */
.dashboard-progress {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .dashboard-progress { grid-template-columns: 1fr; }
}

.dashboard-progress-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.dashboard-progress-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dashboard-progress-label {
    color: #6B7280;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.dashboard-progress-stage {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, .1);
    color: #0a7fd6;
    font-size: 0.75rem;
    font-weight: 600;
}

.dashboard-progress-value {
    margin-left: auto;
    color: #0a0a0a;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.dashboard-progress-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #E5E7EB;
    overflow: hidden;
}

.dashboard-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1C94F5, #0a7fd6);
    transition: width .4s ease;
}

.dashboard-progress-meta {
    margin: 0;
    color: #6B7280;
    font-size: 0.8125rem;
}

.dashboard-progress-meta strong { color: #0a0a0a; }

.dashboard-next-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(28, 148, 245, .35);
    background: linear-gradient(180deg, rgba(28, 148, 245, .07), rgba(28, 148, 245, .02));
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dashboard-next-step:hover {
    border-color: #1C94F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(28, 148, 245, .25);
    text-decoration: none;
}

.dashboard-next-step-label {
    color: #0a7fd6;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dashboard-next-step-title {
    color: #0a0a0a;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.dashboard-next-step-text {
    color: #6B7280;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.dashboard-next-step-cta {
    margin-top: auto;
    padding-top: 0.6rem;
    color: #1C94F5;
    font-weight: 700;
    font-size: 0.875rem;
}

.dashboard-next-step-cta i { transition: transform .18s ease; }
.dashboard-next-step:hover .dashboard-next-step-cta i { transform: translateX(3px); }

/* Tarjeta "Powtórka błędów" en el centro de aprendizaje */
.learn-hub-card--mistakes { border-color: rgba(28, 148, 245, .3); }

.learn-hub-meta {
    color: #6B7280;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Estado vacío de la powtórka de errores */
.mistakes-empty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ============================================================================
   Perfil público del instructor — acciones de la cabecera.
   Sustituye al fragmento de texto "/instruktorzy/slug/" por botones de verdad
   (ver la página, copiar el enlace, compartir).
   Nota: .btn-outline NO está definido en el CSS público (solo en
   internal-exam.css, que esta página no carga), así que los botones que ya
   usaban esa clase salían sin estilo; aquí se cubren.
   ============================================================================ */
.ivp-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0;
}

.ivp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}

.ivp-btn--primary {
    background: #1C94F5;
    color: #ffffff;
}

.ivp-btn--primary:hover {
    background: #0a7fd6;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(28, 148, 245, .5);
    text-decoration: none;
}

.ivp-btn--ghost {
    background: #ffffff;
    border-color: #E5E7EB;
    color: #0a0a0a;
}

.ivp-btn--ghost:hover {
    border-color: #1C94F5;
    color: #0a7fd6;
    text-decoration: none;
}

.ivp-btn.is-done {
    border-color: #059669;
    color: #059669;
}

.ivp-head-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 0.875rem;
    line-height: 1.45;
}

.ivp-head-note i { margin-top: 0.2rem; }

/* Botones que ya existían con .btn-outline (sin estilo en esta página) */
.ivp-actions .btn-outline,
.ivp-form .btn-outline {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    color: #0a0a0a;
}

.ivp-actions .btn-outline:hover,
.ivp-form .btn-outline:hover {
    border-color: #1C94F5;
    color: #0a7fd6;
}

.ivp-head-note span { display: block; }

.ivp-head-note-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: #92400E;
    font-weight: 700;
    text-decoration: underline;
}

.ivp-head-note-link:hover { color: #78350f; }

/* ============================================================================
   Panel del instructor — Kursanci (pre-registro).
   Misma tarjeta que el resto del panel (.instr-panel) y mismos chips de filtro
   (.instr-filter) que Wiadomości, para que la página no parezca de otro sitio.
   ============================================================================ */
.instr-add {
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.instr-add-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    transition: background-color .18s ease;
}

.instr-add-summary::-webkit-details-marker { display: none; }
.instr-add-summary:hover { background: #F9FAFB; }

.instr-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: rgba(28, 148, 245, .1);
    color: #1C94F5;
    font-size: 1.05rem;
}

.instr-add-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.instr-add-text strong { color: #0a0a0a; font-weight: 700; font-size: 0.95rem; }
.instr-add-text span { color: #6B7280; font-size: 0.8125rem; line-height: 1.4; }

.instr-add-chevron {
    margin-left: auto;
    color: #9CA3AF;
    transition: transform .2s ease, color .2s ease;
}

.instr-add[open] .instr-add-chevron { transform: rotate(180deg); color: #1C94F5; }

.instr-add-body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid #F1F5F9;
}

.instr-add-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 0.25rem;
}

@media (max-width: 767.98px) {
    .instr-add-grid { grid-template-columns: 1fr; }
}

.instr-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }

.instr-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6B7280;
}

.instr-field input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #0a0a0a;
    background: #ffffff;
}

.instr-field input:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, .12);
}

.instr-field ul {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    color: #dc2626;
    font-size: 0.8125rem;
}

.instr-add-actions { margin-top: 1rem; }

.instr-add-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: 10px;
    background: #1C94F5;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.instr-add-actions .btn-primary:hover {
    background: #0a7fd6;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(28, 148, 245, .5);
}

/* ---------- Lista de kursantów ---------- */
.instr-students {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #F1F5F9;
}

.instr-student {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid #F3F4F6;
}

.instr-student:last-child { border-bottom: 0; }

.instr-student-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, .1);
    color: #0a7fd6;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.instr-student-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}

.instr-student-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.instr-student-name { color: #0a0a0a; font-weight: 700; font-size: 0.95rem; }

.instr-student-email {
    color: #6B7280;
    font-size: 0.8125rem;
    text-decoration: none;
    word-break: break-all;
}

.instr-student-email:hover { color: #1C94F5; text-decoration: underline; }

.instr-student-hint { color: #92400E; font-size: 0.8125rem; line-height: 1.4; }

.instr-student-meta { color: #9CA3AF; font-size: 0.75rem; }

.instr-student-badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.instr-student-badge--pending { background: rgba(217, 119, 6, .12); color: #92400e; }
.instr-student-badge--active  { background: rgba(5, 150, 105, .12); color: #065f46; }

.instr-student-action { flex: 0 0 auto; margin: 0; }

@media (max-width: 575.98px) {
    .instr-student { flex-wrap: wrap; }
    .instr-student-action { width: 100%; }
}

/* .btn-outline no estaba definido en el CSS público (solo en internal-exam.css),
   así que los botones del panel que usaban esa clase salían sin estilo. */
.btn-outline {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    color: #0a0a0a;
    border-radius: 10px;
    font-weight: 600;
}

.btn-outline:hover {
    border-color: #1C94F5;
    color: #0a7fd6;
    background: #ffffff;
}

.instr-student-action .btn-outline.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
}

/* ============================================================================
   Opiniones de instructores — formulario público, widget de estrellas y
   "tu opinión". Sigue la identidad: tarjeta blanca, borde #E5E7EB, radio 14px.
   La estrella se dibuja con CSS (\2605 = ★) para no depender de la fuente de
   iconos, que cambia de versión.
   ============================================================================ */
.ip-review-form {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.ip-review-form-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0a0a0a;
}

.ip-review-form-lead {
    margin: 0 0 0.9rem;
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* ---------- Widget de estrellas ---------- */
.ip-rate {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0.15rem 0 0.35rem;
}

.ip-rate .ip-rate-item { display: inline-block; }
.ip-rate .form-check { display: block; margin: 0; padding: 0; min-height: 0; }

/* El radio sigue existiendo (accesible por teclado) pero no se ve. */
.ip-rate .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.ip-rate .form-check-label {
    display: block;
    margin: 0;
    padding: 0.1rem;
    font-size: 0;          /* oculta el número; solo se ve la estrella */
    line-height: 1;
    cursor: pointer;
}

.ip-rate .form-check-label::before {
    content: '\2605';
    font-size: 1.9rem;
    line-height: 1;
    color: #D1D5DB;
    transition: color .15s ease, transform .15s ease;
}

.ip-rate .form-check-label:hover::before { transform: scale(1.08); }

/* Marcada, y las anteriores (la clase .is-on la pone el JS) */
.ip-rate .form-check-input:checked + .form-check-label::before,
.ip-rate .form-check-label.is-on::before { color: #F59E0B; }

.ip-rate .form-check-input:focus + .form-check-label::before {
    outline: 2px solid #1C94F5;
    outline-offset: 2px;
    border-radius: 3px;
}

.ip-rate + ul,
.ip-review-form ul {
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    list-style: none;
    color: #dc2626;
    font-size: 0.8125rem;
}

/* ---------- Campo de comentario ---------- */
.ip-review-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.5rem 0 0.9rem;
}

.ip-review-field label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6B7280;
}

.ip-review-field textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
    color: #0a0a0a;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
}

.ip-review-field textarea:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, .12);
}

/* ---------- "Tu opinión" (ya opinó) ---------- */
.ip-review-mine {
    background: rgba(5, 150, 105, .06);
    border: 1px solid rgba(5, 150, 105, .25);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}

.ip-review-mine-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    color: #065f46;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ip-review-mine .ip-review-text { margin: 0.4rem 0 0.25rem; }

/* ============================================================================
   Panel del instructor — Opinie.
   Mismo patrón de lista que el resto del panel (.instr-*), con la variante de
   "reportada" y el formulario de reporte plegable.
   ============================================================================ */
.instr-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #F1F5F9;
}

.instr-review {
    padding: 1rem 0.25rem;
    border-bottom: 1px solid #F3F4F6;
}

.instr-review:last-child { border-bottom: 0; }

.instr-review.is-reported {
    background: rgba(220, 38, 38, .03);
    border-radius: 10px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.instr-review-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.instr-review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, .1);
    color: #0a7fd6;
    font-weight: 700;
    font-size: 0.85rem;
}

.instr-review-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }

.instr-review-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.instr-review-author { color: #0a0a0a; font-weight: 700; font-size: 0.9375rem; }
.instr-review-stars { color: #F59E0B; font-size: 0.8rem; letter-spacing: 0.05em; }
.instr-review-date { color: #9CA3AF; font-size: 0.75rem; }
.instr-review-text { margin: 0; color: #374151; font-size: 0.875rem; line-height: 1.5; }
.instr-review-text--empty { color: #9CA3AF; font-style: italic; }

.instr-review-badge {
    flex: 0 0 auto;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: rgba(220, 38, 38, .12);
    color: #991b1b;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.instr-review-reported {
    margin: 0.6rem 0 0;
    color: #991b1b;
    font-size: 0.8125rem;
}

.instr-review-report { margin-top: 0.6rem; }

.instr-review-report > summary {
    display: inline-block;
    cursor: pointer;
    color: #6B7280;
    font-size: 0.8125rem;
    font-weight: 600;
    list-style: none;
}

.instr-review-report > summary::-webkit-details-marker { display: none; }
.instr-review-report > summary:hover { color: #dc2626; text-decoration: underline; }

.instr-review-report form {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 34rem;
}

.instr-review-report textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}

.instr-review-report textarea:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, .12);
}

.instr-review-report .btn-outline { align-self: flex-start; }

/* ---------- Lista de kursantów: acciones ---------- */
.instr-student-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.instr-student-flag {
    color: #9CA3AF;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.instr-student-flag--done { color: #065f46; font-weight: 700; }

@media (max-width: 575.98px) {
    .instr-student-actions { align-items: flex-start; width: 100%; }
}

/* Etiqueta BONUS en los vídeos de regalo del paquete.
   Va arriba a la izquierda para no chocar con el estado (arriba derecha)
   ni con el tipo (abajo izquierda). Color violeta, distinto del verde/ámbar/azul
   de los estados, para que se lea como "regalo". */
.my-video-badge--bonus {
    top: 0.6rem;
    right: auto;
    left: 0.6rem;
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(124, 58, 237, .45);
}

.my-video-badge--bonus i { margin-right: 0.15rem; }

/* ============================================================================
   "Listo para el examen estatal" — aparece al alcanzar 92% de acierto
   (WORD exige 68 de 74 puntos) con al menos la mitad de la base practicada.
   ============================================================================ */
.dashboard-ready {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(5, 150, 105, .3);
    background: linear-gradient(135deg, rgba(5, 150, 105, .1), rgba(5, 150, 105, .03));
}

.dashboard-ready-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    font-size: 1rem;
}

.dashboard-ready-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.dashboard-ready-body strong { color: #065f46; font-size: 0.95rem; font-weight: 800; }
.dashboard-ready-body span { color: #047857; font-size: 0.8125rem; line-height: 1.45; }

/* Resumen de estadísticas por categoría + meta del examen estatal. */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
    .stats-summary { grid-template-columns: 1fr; }
}

.stats-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.stats-summary-label {
    color: #6B7280;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stats-summary-value { color: #0a0a0a; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }

.stats-goal {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: rgba(28, 148, 245, .07);
    color: #0a7fd6;
    font-size: 0.875rem;
    line-height: 1.45;
}

.stats-goal strong { color: #0a5fa6; }

/* ==========================================================================
   11. Teoría adaptada a la categoría del alumno
   - .theory-scope: aviso de "material para tu categoría"
   - .theory-others: bloque plegable con los temas de otras categorías
   - .theory-tag: etiqueta que dice a quién pertenece un tema
   ========================================================================== */
.theory-scope {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #1C94F5;
    border-radius: 14px;
    background: #F8FAFF;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.5;
}
.theory-scope i { color: #1C94F5; margin-top: 0.15rem; }
.theory-scope strong { color: #111827; }

.theory-others {
    margin-top: 2rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.theory-others > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    font-weight: 700;
    color: #111827;
    list-style: none;
}
.theory-others > summary::-webkit-details-marker { display: none; }
.theory-others > summary:hover { background: #F9FAFB; }
.theory-others > summary i { transition: transform 0.2s ease; color: #6B7280; }
.theory-others[open] > summary { border-bottom: 1px solid #E5E7EB; }
.theory-others[open] > summary i { transform: rotate(180deg); }

.theory-others-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
    font-size: 0.75rem;
    line-height: 1.7;
}
.theory-others-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.85rem 1.1rem 0;
    color: #4B5563;
    font-size: 0.85rem;
    line-height: 1.55;
}
.theory-others-note i { color: #1C94F5; margin-top: 0.2rem; }
.theory-others .theory-group { padding: 0 1.1rem; }
.theory-others .theory-group:last-child { padding-bottom: 1.1rem; }

.theory-tag {
    display: inline-block;
    margin-left: auto;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #F3F4F6;
    color: #4B5563;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.8;
    white-space: nowrap;
}

.theory-others-note--inline {
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #1C94F5;
    border-radius: 14px;
    background: #F8FAFF;
}
.theory-others-note--inline strong { color: #111827; }

/* ==========================================================================
   15. Compartir el progreso con el instructor + invitar al instructor
   - .test-share-bar   franja fija arriba del test (no se puede cerrar)
   - .test-finish-share  bloque de cierre, debajo del test
   - .shared-progress*   página pública que ve el instructor
   - .invite-banner      aviso en el alta del instructor
   ========================================================================== */
.test-share-bar {
    position: static;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #1C94F5;
    border-radius: 14px;
    background: #F8FAFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.test-share-text {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 16rem;
    flex: 1 1 22rem;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.45;
}
.test-share-text i { color: #1C94F5; margin-top: 0.15rem; }
.test-share-text strong { color: #111827; }

.test-share-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 22rem;
    justify-content: flex-end;
}
.test-share-input {
    width: 100%;
    max-width: 20rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    color: #4B5563;
    font-size: 0.8rem;
    text-overflow: ellipsis;
}
.test-share-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid #1C94F5;
    border-radius: 999px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.test-share-copy:hover { background: #0a7fd6; border-color: #0a7fd6; }
.test-share-copy.is-copied { background: #16a34a; border-color: #16a34a; }

.test-finish-share {
    margin: 2rem 0 0;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.test-finish-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.test-finish-title i { color: #1C94F5; }
.test-finish-list { margin: 0; padding: 0; list-style: none; }
.test-finish-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px solid #F3F4F6;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.5;
}
.test-finish-list li:first-child { border-top: 0; }
.test-finish-list i { color: #1C94F5; margin-top: 0.2rem; }
.test-finish-list strong { color: #111827; }
.test-finish-list a { color: #1C94F5; font-weight: 600; text-decoration: none; }
.test-finish-list a:hover { text-decoration: underline; }
.test-finish-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #F3F4F6;
}
.test-finish-link {
    color: #1C94F5;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.test-finish-link:hover { text-decoration: underline; }

/* Página pública de progreso compartido */
.shared-progress { padding: 3rem 0 4rem; }
.shared-progress-card {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.shared-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.shared-progress-title {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
}
.shared-progress-lead { margin: 0 0 1.25rem; color: #4B5563; line-height: 1.6; }
.shared-progress-category {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    color: #374151;
    font-size: 0.9rem;
}
.shared-progress-category i { color: #1C94F5; }
.shared-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.shared-progress-tile {
    padding: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #F9FAFB;
    text-align: center;
}
.shared-progress-tile-label {
    display: block;
    color: #6B7280;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.shared-progress-tile-value {
    display: block;
    margin: 0.35rem 0 0.15rem;
    color: #111827;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}
.shared-progress-tile-note { display: block; color: #6B7280; font-size: 0.78rem; }
.shared-progress-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #F9FAFB;
    color: #4B5563;
}
.shared-progress-empty i { color: #1C94F5; }
.shared-progress-foot {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid #F3F4F6;
    color: #4B5563;
    font-size: 0.88rem;
    line-height: 1.6;
}
.shared-progress-foot a { color: #1C94F5; font-weight: 600; text-decoration: none; }
.shared-progress-foot a:hover { text-decoration: underline; }

/* Aviso de invitación en el alta del instructor */
.invite-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #1C94F5;
    border-radius: 14px;
    background: #F8FAFF;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.5;
}
.invite-banner i { color: #1C94F5; margin-top: 0.15rem; }
.invite-banner strong { color: #111827; }

@media (max-width: 767.98px) {
    .test-share-actions { justify-content: flex-start; }
    .test-share-input { max-width: 100%; }
    .shared-progress-card { padding: 1.25rem; }
}

/* ==========================================================================
   17. Progreso del kursant w ficha del instructor
   ========================================================================== */
.instr-student-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.40rem 0.9rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #F3F4F6;
}
.instr-student-progress-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.instr-student-progress-label {
    color: #6B7280;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.instr-student-progress-item strong {
    color: #111827;
    font-size: 0.95rem;
}
.instr-student-progress-cat {
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(28, 148, 245, 0.08);
    color: #1C94F5;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.7;
}
.instr-student-progress-note {
    color: #9CA3AF;
    font-size: 0.75rem;
}
.instr-student-progress--empty {
    display: block;
    color: #9CA3AF;
    font-size: 0.8rem;
}

/* --- Los 4 puntos (detail 14) dentro de la banda oscura de categorías --- */
.categories-friendly-features {
    margin-top: 2.5rem;
}
.categories-friendly .features-friendly-grid .item {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.categories-friendly .features-friendly-grid .item:hover {
    border-color: rgba(28, 148, 245, 0.65);
    box-shadow: 0 14px 30px -14px rgba(28, 148, 245, 0.55);
}
.categories-friendly .features-friendly-grid .item img {
    opacity: 0.96;
}
.categories-friendly .features-friendly-grid .item span {
    color: #F3F4F6;
}
@media (max-width: 991.98px) {
    .categories-friendly-features {
        margin-top: 1.75rem;
    }
}
/* ==========================================================================
   Wiadomości: kursant ↔ jego instruktor
   (menú, tarjeta del panel, hilo de la conversación y lista de kursanci)
   ========================================================================== */
.msg-page {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.instr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1C94F5;
    text-decoration: none;
    white-space: nowrap;
}
.instr-back-link:hover { text-decoration: underline; }

/* ---------- Cabecera con el interlocutor ---------- */
.msg-partner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.msg-partner-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E8F3FE;
    color: #0a7fd6;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-partner-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.msg-partner-role {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
}
.msg-partner-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0a0a0a;
    line-height: 1.2;
}
.msg-partner-email {
    font-size: 0.8125rem;
    color: #6B7280;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.msg-partner-email:hover { color: #1C94F5; }
.msg-partner-link {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1C94F5;
    text-decoration: none;
    white-space: nowrap;
}
.msg-partner-link:hover { text-decoration: underline; }

/* ---------- Hilo ---------- */
.msg-panel {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    overflow: hidden;
}
.msg-thread {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem;
    background: #F9FAFB;
    max-height: min(58vh, 520px);
    min-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.msg-row {
    display: flex;
    justify-content: flex-start;
}
.msg-row--mine { justify-content: flex-end; }
.msg-bubble {
    max-width: min(78%, 560px);
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px 14px 14px 4px;
    padding: 0.6rem 0.85rem 0.45rem;
}
.msg-row--mine .msg-bubble {
    background: #1C94F5;
    border-color: #1C94F5;
    border-radius: 14px 14px 4px 14px;
}
.msg-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #111827;
    overflow-wrap: anywhere;
}
.msg-row--mine .msg-body { color: #fff; }
.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: #9CA3AF;
}
.msg-row--mine .msg-meta { color: rgba(255, 255, 255, .9); }
.msg-meta-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.msg-empty {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9375rem;
    color: #6B7280;
}
.msg-truncated {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    color: #6B7280;
}

/* ---------- Caja de escritura ---------- */
.msg-composer {
    border-top: 1px solid #E5E7EB;
    padding: 1rem 1.1rem 1.1rem;
    background: #fff;
}
.msg-composer-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #374151;
}
.msg-composer-input {
    width: 100%;
    min-height: 96px;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #111827;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    resize: vertical;
}
.msg-composer-input:focus {
    outline: none;
    border-color: #1C94F5;
    box-shadow: 0 0 0 3px rgba(28, 148, 245, .15);
}
.msg-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}
.msg-composer-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: #6B7280;
}

/* ---------- Estado vacío (sin instructor) ---------- */
.msg-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px dashed #D1D5DB;
    border-radius: 14px;
}
.msg-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F3FE;
    color: #1C94F5;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-empty-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
}
.msg-empty-text {
    margin: 0;
    max-width: 520px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #6B7280;
}

/* ---------- Avisos de mensajes nuevos ---------- */
.msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
}
.msg-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #6B7280;
}
.msg-preview--unread {
    color: #111827;
    font-weight: 600;
}
.instr-student-chat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0a7fd6;
    background: #E8F3FE;
    border: 1px solid #CFE6FD;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.instr-student-chat:hover {
    background: #1C94F5;
    border-color: #1C94F5;
    color: #fff;
}
.instr-student-chat.is-unread {
    background: #1C94F5;
    border-color: #1C94F5;
    color: #fff;
}
.instr-student-chat.is-unread .msg-badge {
    background: #fff;
    color: #1C94F5;
}

/* ---------- Tarjeta del panel del kursant ---------- */
.dashboard-resource--messages .dashboard-resource-icon { color: #1C94F5; }
.dashboard-resource-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
}
.dashboard-resource--messages {
    position: relative;
}

@media (max-width: 575.98px) {
    .msg-bubble { max-width: 88%; }
    .msg-thread { max-height: 65vh; padding: 0.9rem; }
    .msg-composer-actions { flex-direction: column-reverse; align-items: stretch; }
    .msg-composer-actions .btn-primary-checkout { justify-content: center; }
    .msg-partner { flex-wrap: wrap; }
    .msg-partner-link { margin-left: 0; }
}
/* Remate: tarjeta de mensajes del panel y vista previa en la lista de kursanci */
.dashboard-resource--messages .dashboard-resource-icon {
    background: rgba(28, 148, 245, 0.12);
    color: #1C94F5;
}
.dashboard-resource--messages-unread {
    background: rgba(28, 148, 245, 0.05);
    border-color: rgba(28, 148, 245, 0.45);
}
.dashboard-resource--messages-unread:hover {
    background: rgba(28, 148, 245, 0.09);
    border-color: #1C94F5;
}
a.msg-preview {
    text-decoration: none;
    color: #6B7280;
}
a.msg-preview:hover { color: #1C94F5; }
a.msg-preview strong { color: #374151; font-weight: 700; }
a.msg-preview--unread strong { color: #0a7fd6; }
/* ==========================================================================
   «Co powtórzyć» — repaso tras un test (kursant)
   Lo usan el resultado del egzamin interno (Twig) y el resumen del test de
   práctica (la app Vue pide este trozo por la API), así que vive en app.css,
   que se carga en las dos páginas.
   ========================================================================== */
.exam-review {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-left: 4px solid #1C94F5;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    text-align: left;
}
.exam-review-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0a0a0a;
}
.exam-review-title i { color: #1C94F5; }
.exam-review-verdict {
    margin: 0 0 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #374151;
}
.exam-review-verdict strong { color: #0a0a0a; }
.exam-review-verdict--clean {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    color: #065F46;
    font-weight: 600;
}

.exam-review-list {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}
.exam-review-item {
    padding: 0.7rem 0.85rem;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}
.exam-review-item-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.exam-review-code {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #E8F3FE;
    color: #0a7fd6;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.exam-review-fail {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}
.exam-review-lost {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #991B1B;
    white-space: nowrap;
}
.exam-review-bar {
    height: 6px;
    border-radius: 999px;
    background: #E5E7EB;
    overflow: hidden;
}
.exam-review-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1C94F5;
}
.exam-review-bar.is-low span { background: #DC2626; }
.exam-review-bar.is-mid span { background: #F59E0B; }
.exam-review-bar.is-high span { background: #059669; }
.exam-review-accuracy {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #6B7280;
}
.exam-review-sample {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #4B5563;
}
.exam-review-sample-label { font-weight: 700; color: #374151; }
.exam-review-more {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
    color: #6B7280;
}

.exam-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.exam-review-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #F8FAFC;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}
.exam-review-cta:hover {
    border-color: #1C94F5;
    background: #fff;
    color: #0a7fd6;
}
.exam-review-cta--primary {
    background: #1C94F5;
    border-color: #1C94F5;
    color: #fff;
}
.exam-review-cta--primary:hover {
    background: #0a7fd6;
    border-color: #0a7fd6;
    color: #fff;
}
.exam-review-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B7280;
}

@media (max-width: 575.98px) {
    .exam-review { padding: 1rem; }
    .exam-review-lost { margin-left: 0; }
    .exam-review-actions .exam-review-cta { flex: 1 1 100%; justify-content: center; }
}
/* ==========================================================================
   Pakiety i sklep DENTRO del panel (/konto/pakiety/)
   Reutiliza las tarjetas de /pakiety/ (.single-plan, .plan-card-*, .plans-*);
   aquí sólo va lo propio: cabecera, estado del plan, bonus y el resto del panel.
   ========================================================================== */
.account-shop { display: block; }

.account-shop-head { margin-bottom: 1.25rem; }
.account-shop-title {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0a0a0a;
}
.account-shop-lead {
    margin: 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #6B7280;
}

/* ---------- Estado del plan ---------- */
.account-shop-status {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.account-shop-status--active { border-left: 4px solid #059669; background: #F6FEF9; }
.account-shop-status--inactive { border-left: 4px solid #1C94F5; background: #F5FAFF; }
.account-shop-status-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.account-shop-status--active .account-shop-status-icon { background: #D1FAE5; color: #047857; }
.account-shop-status--inactive .account-shop-status-icon { background: #E0EFFE; color: #0a7fd6; }
.account-shop-status-body { display: flex; flex-direction: column; gap: 0.15rem; }
.account-shop-status-body strong { font-size: 1rem; font-weight: 800; color: #0a0a0a; }
.account-shop-status-body span { font-size: 0.875rem; line-height: 1.55; color: #4B5563; }
.account-shop-status-body span strong { font-size: inherit; color: #111827; }

/* ---------- Secciones ---------- */
.account-shop-section { margin-bottom: 1.5rem; }
.account-shop-heading {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0a0a0a;
}
.account-shop-section .plans-holder { padding-top: 1rem; }

/* El plan que el alumno ya tiene: etiqueta verde en vez de la de "más elegido" */
.single-plan-tag--current {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}

/* Vídeos de regalo de cada plan */
.account-shop-bonus {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.75rem 0.25rem 0;
    font-size: 0.875rem;
    color: #374151;
}
.account-shop-bonus i { color: #1C94F5; }
.account-shop-bonus strong { color: #0a0a0a; }
.account-shop-bonus-note { color: #6B7280; font-size: 0.8125rem; }
.account-shop-plan-note {
    margin: 0.25rem 0.25rem 0;
    font-size: 0.8125rem;
    color: #6B7280;
}

/* ---------- Lo que incluye cualquier paquete ---------- */
.account-shop-included { margin: 2rem 0 1.5rem; }

/* ---------- Resto del catálogo ---------- */
.account-shop-more { margin-top: 2rem; }
.account-shop-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.account-shop-more-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
}
.account-shop-more-card:hover {
    border-color: #1C94F5;
    background: #fff;
    transform: translateY(-1px);
    color: inherit;
}
.account-shop-more-icon {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 148, 245, .12);
    color: #1C94F5;
}
.account-shop-more-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.account-shop-more-body strong { font-size: 0.9375rem; font-weight: 700; color: #0a0a0a; }
.account-shop-more-body span { font-size: 0.8125rem; color: #6B7280; }
.account-shop-more-arrow { margin-left: auto; color: #1C94F5; font-size: 0.875rem; }

.account-shop-footnote {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: #6B7280;
}
.account-shop-footnote a { color: #1C94F5; font-weight: 600; }
.account-shop-footnote-note { color: #9CA3AF; }

@media (max-width: 991.98px) {
    .account-shop-status { padding: 0.9rem 1rem; }
    .plans-trust-strip--compact { grid-template-columns: 1fr; }
}
/* En el panel la columna es más estrecha que en /pakiety/: la tarjeta, la
   etiqueta y la línea de bonus tienen que ir UNA DEBAJO DE OTRA. Con el
   `display:flex` de /pakiety/ se ponían en fila y se repartían el ancho, así que
   la tarjeta se quedaba en 214px y el texto se rompía en cada palabra. */
.account-shop .plans-col { display: block; }
.account-shop .plans-col .single-plan { padding: 1.5rem 1.25rem 1.25rem; }
.account-shop .account-shop-bonus,
.account-shop .account-shop-plan-note { width: 100%; }

@media (min-width: 992px) {
    .account-shop .single-plan--popular { transform: none; }
    .account-shop .single-plan--popular:hover { transform: translateY(-3px); }
}
/* --------------------------------------------------------------------------
   Tarjetas de vídeos NO comprados (carrusel "Pozostałe filmy w katalogu"):
   miniatura del vídeo, para que se vea de qué va antes de comprarlo y se
   pueda pulsar para ver la zapowiedź.
   -------------------------------------------------------------------------- */
.video-offer-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Velo suave para que se lean la etiqueta y el botón sobre la foto */
.video-offer-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .38) 100%);
}
/* El botón y el candado van por encima del velo */
.video-offer-preview,
.video-offer-locked { z-index: 1; }

/* Sin zapowiedź: se enseña la miniatura del vídeo completo, en gris y a media luz */
.video-offer-media--locked .video-offer-thumb { filter: grayscale(.55) brightness(.9); }
.video-offer-media--locked::after { background: rgba(15, 23, 42, .5); }
.video-offer-media--locked .video-offer-locked { color: #E5E7EB; }
.video-offer-media--locked .video-offer-locked span { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
/* ==========================================================================
   Panel del kursant (/konto/): orden, jerarquía y ritmo
   Reescribe las reglas del panel viejo que quedaban más arriba. La idea:
   un solo ritmo vertical entre bloques, cada bloque en su caja con su título,
   tarjetas del mismo tamaño y ningún hueco vacío.
   ========================================================================== */
.account-dashboard--clean {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* Los bloques ya no llevan márgenes sueltos: el ritmo lo marca el gap */
.account-dashboard--clean > * { margin: 0; }

/* ---------- Título de bloque ---------- */
.dashboard-section-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.15rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0a0a0a;
}
.dashboard-section-heading i { color: #1C94F5; font-size: 0.95em; }

/* ---------- 1) Progreso + siguiente paso ---------- */
.dashboard-progress {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
}
.dashboard-progress-card { padding: 1.35rem 1.5rem; gap: 0.6rem; }
.dashboard-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
/* El número es el protagonista del bloque */
.dashboard-progress-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.dashboard-progress-card--start .dashboard-progress-value { font-size: 1.4rem; }
.dashboard-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: #EEF2F7;
    overflow: hidden;
}
.dashboard-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1C94F5, #0a7fd6);
}
.dashboard-progress-meta { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #6B7280; }
.dashboard-next-step { padding: 1.35rem 1.5rem; justify-content: center; }
.dashboard-next-step-title { font-size: 1.0625rem; }

/* ---------- 2) Seguir estudiando ---------- */
.dashboard-quick-card {
    min-height: 156px;
    padding: 1.15rem 1.2rem;
}
.dashboard-quick-card-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(28, 148, 245, .10);
    color: #1C94F5;
}
.dashboard-quick-card-title { font-size: 1rem; font-weight: 700; color: #0a0a0a; }
.dashboard-quick-card-sub { font-size: 0.8125rem; line-height: 1.45; color: #6B7280; }
.dashboard-quick-card-arrow {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    color: #CBD5E1;
    font-size: 0.8rem;
    transition: color .18s ease, transform .18s ease;
}
.dashboard-quick-card:hover .dashboard-quick-card-arrow { color: #1C94F5; transform: translateX(2px); }
/* Con tareas pendientes del instructor: se nota sin gritar */
.dashboard-quick-card--todo {
    border-color: rgba(28, 148, 245, .45);
    background: rgba(28, 148, 245, .03);
}
.dashboard-quick-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 3) Materiales y plan ---------- */
/* Tres columnas iguales: antes eran `minmax(15rem, 20rem)` y, con la raíz a 20px,
   sólo cabían dos y la tercera caía a otra fila dejando medio hueco. */
.dashboard-resources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.dashboard-resource {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 146px;
    padding: 1.15rem 1.25rem;
    position: relative;
}
.dashboard-resource-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}
.dashboard-resource--videos .dashboard-resource-icon { background: rgba(124, 58, 237, .12); color: #7C3AED; }
.dashboard-resource--messages .dashboard-resource-icon { background: rgba(28, 148, 245, .12); color: #1C94F5; }
.dashboard-resource--shop .dashboard-resource-icon { background: rgba(16, 185, 129, .12); color: #059669; }
.dashboard-resource-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.dashboard-resource-label { font-size: 0.875rem; line-height: 1.4; margin-left: 0; }
.dashboard-resource-arrow {
    position: absolute;
    right: 1.15rem;
    top: 1.35rem;
    color: #CBD5E1;
    font-size: 0.8rem;
    transition: color .18s ease, transform .18s ease;
}
.dashboard-resource:hover .dashboard-resource-arrow { color: #1C94F5; transform: translateX(2px); }
.dashboard-resource--messages-unread .dashboard-resource-arrow { color: #1C94F5; }

/* ---------- 4) Para él ---------- */
.dashboard-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.dashboard-split--single { grid-template-columns: 1fr; }
.dashboard-instructor-cta { height: 100%; align-items: flex-start; }
.dashboard-instructor-cta--mine { align-items: center; }
.dashboard-instructor-cta-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B7280;
}
.dashboard-instructor-cta-quote {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #4B5563;
}
.dashboard-instructor-cta-action {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: #1C94F5;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.dashboard-instructor-cta--mine:hover .dashboard-instructor-cta-action { background: #0a7fd6; }
.dashboard-article-pick { height: 100%; }

/* ---------- 5) Oferta del socio ---------- */
.dashboard-partner { display: block; }
.dashboard-partner-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9CA3AF;
}
/*
 * La imagen entera, sin recortar.
 *
 * Es un banner de 9050x3017 (proporción 3:1). Con `max-height: 132px` y
 * `object-fit: cover` sólo se veía una franja del centro: el mensaje salía
 * cortado por arriba y por abajo. Ahora respeta su proporción — mismo ancho,
 * más alto — y se ve completa.
 */
.dashboard-promo-img {
    max-height: none;
    height: auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1199.98px) {
    .dashboard-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .dashboard-progress { grid-template-columns: 1fr; }
    .dashboard-split { grid-template-columns: 1fr; }
    .dashboard-quick-card { min-height: 0; }
}
@media (max-width: 767.98px) {
    .dashboard-resources { grid-template-columns: 1fr; }
    .dashboard-resource { min-height: 0; }
    .dashboard-instructor-cta--mine { flex-wrap: wrap; }
    .dashboard-instructor-cta-action { margin-left: 0; }
}
/* La flecha de las tarjetas de materiales, en el mismo sitio que en las de
   acción (abajo a la derecha): así los dos tipos de tarjeta se leen igual. */
.dashboard-resource-arrow {
    top: auto;
    bottom: 1.15rem;
    right: 1.2rem;
}
/* --------------------------------------------------------------------------
   Rejillas del panel que se adaptan solas.

   - Materiales: `auto-fit` con mínimo de 220px. Así N tarjetas LLENAN la fila:
     con 2 no queda un tercio vacío y en tablet caben las tres (antes eran
     `minmax(15rem, 20rem)`, que con la raíz a 20px sólo dejaba 2 por fila).
   - Accesos rápidos: 4 columnas sólo cuando hay ancho de verdad; entre 992 y
     1200 el panel se queda en ~700px y las tarjetas salían de 160px.
   -------------------------------------------------------------------------- */
.dashboard-resources { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dashboard-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .dashboard-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .dashboard-resources { grid-template-columns: 1fr; }
}

/* En tablet (panel de ~620px) con mínimo de 220px sólo cabían 2 y la tercera caía
   sola dejando medio hueco: con 190px entran las tres en una fila. */
.dashboard-resources { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* ==========================================================================
   /konto/pakiety/ — "W każdym pakiecie masz to samo", rediseñado
   --------------------------------------------------------------------------
   Antes era una lista con checks dentro de una caja blanca (y debajo, la
   franja de garantías, que se ha quitado de esta página). Ahora son cuatro
   tarjetas con su icono y el dato concreto, y la frase que compara los
   paquetes como aviso destacado. El bloque deja de ser una caja para no meter
   cajas dentro de cajas: el peso visual lo llevan las tarjetas.
   ========================================================================== */
.account-shop-included {
    max-width: none;
    margin: 2rem 0 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.account-shop-included .plans-included-heading {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.included-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.included-card:hover {
    border-color: rgba(28, 148, 245, 0.45);
    transform: translateY(-1px);
}

.included-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(28, 148, 245, 0.10);
    color: #1C94F5;
}
.included-icon--exam { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.included-icon--stats { background: rgba(16, 185, 129, 0.12); color: #059669; }
.included-icon--devices { background: rgba(245, 158, 11, 0.14); color: #B45309; }

.included-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.included-body strong {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0a0a0a;
}
.included-body span {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B7280;
}

/* La frase que compara los paquetes, como aviso y no como pie de lista */
.included-note {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1rem 0 0;
    padding: 0.9rem 1.15rem;
    border: 1px dashed rgba(28, 148, 245, 0.35);
    border-radius: 12px;
    background: rgba(28, 148, 245, 0.05);
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
    text-align: left;
}
.included-note i {
    flex: 0 0 auto;
    color: #1C94F5;
    font-size: 1rem;
}

@media screen and (max-width: 991.98px) {
    .included-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 575.98px) {
    .included-card { padding: 1rem; gap: 0.75rem; }
    .included-icon { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; }
    .included-note { align-items: flex-start; padding: 0.85rem 1rem; }
}
/* --------------------------------------------------------------------------
   /konto/pakiety/ — las líneas de bonus ("1 film w bonusie") se pintaban FUERA
   de su columna: `.single-plan` lleva `height: 100%` y la columna no era flex,
   así que la columna medía lo que la tarjeta y el texto se salía por debajo.
   Con la columna en flex-column y la tarjeta con `flex: 1`, la columna mide
   tarjeta + bonus + nota (el bloque siguiente ya no se le echa encima) y las
   tres tarjetas siguen teniendo la misma altura.
   -------------------------------------------------------------------------- */
.account-shop .plans-col {
    display: flex;
    flex-direction: column;
}

.account-shop .plans-col .single-plan {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
}
/* ==========================================================================
   Panel del instructor: prośby o współpracę  ·  Panel del alumno: prośba enviada
   ========================================================================== */

/* --- Aviso "N nuevas" de la cabecera --- */
.instr-req-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: #1C94F5;
    color: #ffffff;
    font-size: .8125rem;
    font-weight: 800;
    white-space: nowrap;
}

/* --- Lista de solicitudes pendientes --- */
.instr-req-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.instr-req {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.instr-req-main {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    flex: 1 1 22rem;
    min-width: 0;
}

.instr-req-avatar {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #E8F3FE;
    color: #0a7fd6;
    font-size: .9375rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.instr-req-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.instr-req-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.instr-req-name { font-size: 1rem; font-weight: 800; color: #0a0a0a; }
.instr-req-date { font-size: .75rem; color: #9CA3AF; }

.instr-req-meta { margin: 0; font-size: .8125rem; line-height: 1.5; color: #6B7280; }
.instr-req-meta i { color: #9CA3AF; }
.instr-req-none { color: #B45309; font-weight: 700; }

.instr-req-message {
    margin: .3rem 0 0;
    padding: .7rem .9rem;
    border-left: 3px solid #1C94F5;
    border-radius: 8px;
    background: #F5FAFF;
    font-size: .875rem;
    line-height: 1.5;
    color: #374151;
}

.instr-req-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex: 0 0 auto;
}
.instr-req-actions form { margin: 0; }

.instr-req-reject summary { cursor: pointer; list-style: none; }
.instr-req-reject summary::-webkit-details-marker { display: none; }
.instr-req-reject[open] { width: 100%; max-width: 22rem; }
.instr-req-label {
    display: block;
    margin: .65rem 0 .3rem;
    font-size: .75rem;
    font-weight: 700;
    color: #6B7280;
}
.instr-req-textarea {
    width: 100%;
    margin-bottom: .5rem;
    padding: .55rem .7rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-family: inherit;
    font-size: .875rem;
}

/* --- Sin solicitudes --- */
.instr-req-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #CBD5E1;
    border-radius: 16px;
}
.instr-req-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F3FE;
    color: #1C94F5;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.instr-req-empty-title { margin: 0; font-size: 1.0625rem; font-weight: 800; color: #0a0a0a; }
.instr-req-empty-text { margin: 0; max-width: 52ch; font-size: .875rem; line-height: 1.6; color: #6B7280; }

/* --- Historial --- */
.instr-req-history { margin-top: 1.75rem; }
.instr-req-history-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 800; color: #0a0a0a; }
.instr-req-history-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.instr-req-history-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .7rem .9rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-size: .875rem;
    color: #374151;
}
.instr-req-history-name { font-weight: 700; color: #0a0a0a; }
.instr-req-history-status.is-accepted { color: #047857; font-weight: 700; }
.instr-req-history-status.is-rejected { color: #6B7280; font-weight: 700; }
.instr-req-history-date { margin-left: auto; font-size: .75rem; color: #9CA3AF; }

/* --- Panel del alumno: solicitud enviada esperando respuesta --- */
.dashboard-instructor-cta--pending {
    border-color: rgba(28, 148, 245, .45);
    background: linear-gradient(180deg, rgba(28, 148, 245, .07), rgba(28, 148, 245, .02));
    cursor: default;
}
.dashboard-instructor-cta--pending .dashboard-instructor-cta-icon {
    background: rgba(28, 148, 245, .12);
    color: #1C94F5;
    border-radius: 12px;
}

@media (max-width: 575.98px) {
    .instr-req { padding: 1rem; }
    .instr-req-actions { align-items: stretch; width: 100%; }
    .instr-req-reject[open] { max-width: none; }
}
/* ==========================================================================
   Test — «Dlaczego to nie ta odpowiedź?»
   --------------------------------------------------------------------------
   Cuando el alumno falla en el modo estudio, debajo de las respuestas aparece
   el porqué: qué comprueba la pregunta, qué importa para la seguridad y la
   base legal (las tres columnas del catálogo oficial). Se cierra con
   «Rozumiem» y cada pregunta vuelve a empezar cerrada.
   ========================================================================== */
.answer-why {
    margin: 1.25rem 0 0;
    padding: 1.15rem 1.25rem 1.25rem;
    border: 1px solid rgba(28, 148, 245, .35);
    border-left: 4px solid #1C94F5;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 148, 245, .07), rgba(28, 148, 245, .02));
}

.answer-why-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
}

.answer-why-icon {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #1C94F5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.answer-why-head strong {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0a0a0a;
}

.answer-why-sub {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: #6B7280;
}

.answer-why-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0 0 1rem;
}

.answer-why-list dt {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #0a7fd6;
}

.answer-why-list dd {
    margin: .15rem 0 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: #374151;
}

.answer-why-source {
    font-size: .8125rem !important;
    color: #6B7280 !important;
}

.answer-why-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

.answer-why-btn {
    min-height: 44px;
    padding: .55rem 1.35rem;
    border-radius: 999px;
    font-weight: 700;
}

.answer-why-hint {
    font-size: .75rem;
    color: #6B7280;
}

@media (max-width: 575.98px) {
    .answer-why { padding: 1rem; }
    .answer-why-actions { flex-direction: column; align-items: stretch; }
    .answer-why-btn { width: 100%; }
    .answer-why-hint { text-align: center; }
}
/* ==========================================================================
   Test — ventana «Dlaczego to nie ta odpowiedź?»
   --------------------------------------------------------------------------
   Antes era un bloque debajo de las respuestas y el test seguía solo a los
   1,4s: no daba tiempo a leerlo. Ahora es una ventana que PARA el test hasta
   que el alumno pulsa «Rozumiem», con una carita distinta en cada fallo.
   ========================================================================== */
.answer-why-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(2px);
    animation: answerWhyIn 0.18s ease-out;
}

@keyframes answerWhyIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.answer-why {
    width: 100%;
    max-width: 34rem;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem 1.6rem 1.35rem;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
    text-align: left;
    animation: answerWhyPop 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes answerWhyPop {
    from { transform: translateY(10px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.answer-why-face {
    font-size: 3.25rem;
    line-height: 1;
    text-align: center;
    margin-bottom: 0.5rem;
}

.answer-why-title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    color: #0a0a0a;
}

.answer-why-mood {
    margin: 0 0 1.15rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    color: #6B7280;
}

.answer-why-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 3px solid #1C94F5;
    border-radius: 10px;
    background: #F5FAFF;
}

.answer-why-list dt {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0a7fd6;
}

.answer-why-list dd {
    margin: 0.15rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #374151;
}

.answer-why-source {
    font-size: 0.8125rem !important;
    color: #6B7280 !important;
}

.answer-why-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.answer-why-btn {
    width: 100%;
    max-width: 20rem;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

.answer-why-hint {
    font-size: 0.75rem;
    color: #9CA3AF;
    text-align: center;
}

@media (max-width: 575.98px) {
    .answer-why-overlay { padding: 0.75rem; align-items: flex-end; }
    .answer-why { max-height: 92vh; padding: 1.25rem 1.15rem 1.15rem; }
    .answer-why-face { font-size: 2.75rem; }
    .answer-why-title { font-size: 1.125rem; }
    .answer-why-list { padding: 0.85rem 0.9rem; }
    .answer-why-list dd { font-size: 0.875rem; }
}
/* ==========================================================================
   Test — consejo del resumen
   Un párrafo en lenguaje humano según cómo ha ido el test, para que el alumno
   sepa qué hacer ahora y no se sienta juzgado por el resultado.
   ========================================================================== */
.summary-advice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.4rem;
    border-radius: 16px;
    background: #F5FAFF;
    border: 1px solid #D6EAFB;
    text-align: left;
}

.summary-advice.is-great {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.summary-advice.is-low,
.summary-advice.is-mid {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.summary-advice-emoji {
    flex: 0 0 auto;
    font-size: 2.25rem;
    line-height: 1;
}

.summary-advice-title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
}

.summary-advice-text {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #374151;
}

.summary-advice-tip {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #6B7280;
}

.summary-advice-tip strong {
    color: #1C94F5;
}

/* Tarjetas por puntuación: cuando no hay datos, se dice claramente */
.app-results-holder .points-results .result .points-empty {
    color: #6B7280;
    font-style: italic;
}

@media (max-width: 575.98px) {
    .summary-advice {
        padding: 1rem 1.1rem;
        gap: 0.75rem;
    }

    .summary-advice-emoji { font-size: 1.75rem; }
    .summary-advice-title { font-size: 1rem; }
    .summary-advice-text { font-size: 0.875rem; }
}
/* ==========================================================================
   /pakiety/ — franja de garantías («Bezpieczna płatność»)
   --------------------------------------------------------------------------
   Estaba definida DOS veces: `.plans-trust-strip--compact` (arriba) y
   `.plans-trust-strip` (más abajo). Al ir después, la segunda ganaba y pedía
   CUATRO columnas para tres elementos: quedaba una columna vacía de ~290px a la
   derecha, el contenido se veía pegado a la izquierda y se perdían el centrado
   (`margin: auto`) y el ancho máximo. Los logos quedaban sueltos y sin
   separación respecto del texto.

   Aquí va una sola definición, con las dos clases juntas (más especificidad:
   no depende del orden), con separadores entre columnas y una fila ordenada de
   logos. En el móvil se apila, con separadores horizontales.
   ========================================================================== */
.plans-trust-strip.plans-trust-strip--compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 56rem;
    margin: 2rem auto 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    text-align: center;
    overflow: hidden;
}

.plans-trust-strip.plans-trust-strip--compact .plans-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

/* Separador vertical entre columnas */
.plans-trust-strip.plans-trust-strip--compact .plans-trust-item + .plans-trust-item {
    border-left: 1px solid #EEF2F7;
}

.plans-trust-strip.plans-trust-strip--compact .plans-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, 0.10);
    color: #1C94F5;
    font-size: 1.05rem;
}

/* En la primera columna el icono y el título van juntos y los logos debajo */
.plans-trust-strip.plans-trust-strip--compact .payment-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.plans-trust-strip.plans-trust-strip--compact .plans-trust-text {
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4B5563;
}

.plans-trust-strip.plans-trust-strip--compact .plans-trust-text strong {
    color: #0a0a0a;
    font-weight: 700;
}

/* Los tres logos, en fila y con aire entre ellos */
.plans-trust-strip.plans-trust-strip--compact .payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.15rem;
}

.plans-trust-strip.plans-trust-strip--compact .payment-logos img {
    height: 1.5rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: contain;
}

@media screen and (max-width: 991.98px) {
    .plans-trust-strip.plans-trust-strip--compact {
        grid-template-columns: 1fr;
        max-width: none;
    }

    /* Apilado: icono a la izquierda y texto a la derecha, más fácil de leer */
    .plans-trust-strip.plans-trust-strip--compact .plans-trust-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 1rem 1.15rem;
        text-align: left;
    }

    .plans-trust-strip.plans-trust-strip--compact .plans-trust-item + .plans-trust-item {
        border-left: 0;
        border-top: 1px solid #EEF2F7;
    }

    .plans-trust-strip.plans-trust-strip--compact .payment-label {
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
    }

    .plans-trust-strip.plans-trust-strip--compact .plans-trust-item--payment {
        flex-direction: column;
        align-items: flex-start;
    }

    .plans-trust-strip.plans-trust-strip--compact .payment-logos {
        justify-content: flex-start;
        padding-left: 3.4rem;   /* alineado con el texto, no con el icono */
    }

    /* El texto va con su icono a la izquierda: `.plans-trust-text` trae
       `text-align: center` del bloque antiguo y lo centraba todo. */
    .plans-trust-strip.plans-trust-strip--compact .plans-trust-text,
    .plans-trust-strip.plans-trust-strip--compact .payment-label {
        text-align: left;
    }
}

@media screen and (max-width: 575.98px) {
    .plans-trust-strip.plans-trust-strip--compact .plans-trust-item {
        padding: 0.9rem 1rem;
    }

    .plans-trust-strip.plans-trust-strip--compact .payment-logos {
        padding-left: 0;
        gap: 0.5rem;
    }

    .plans-trust-strip.plans-trust-strip--compact .payment-logos img {
        height: 1.35rem;
    }
}
/* ==========================================================================
   Examen oficial — pantalla de inicio y reloj
   --------------------------------------------------------------------------
   El examen simula el de WORD: 32 preguntas, 74 puntos, 68 para aprobar y 25
   minutos. Antes de empezar se explican las reglas; durante el examen se ve el
   tiempo total que queda (y se pone en rojo en los últimos 5 minutos).
   ========================================================================== */
.exam-rules {
    max-width: 46rem;
    margin: 0 auto 2rem;
    padding: 1.5rem 1.6rem;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    text-align: left;
}

.exam-rules-heading {
    margin: 0 0 1.1rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
    text-align: center;
}

.exam-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exam-rules-list li {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.exam-rules-list strong {
    flex: 0 0 9.5rem;
    color: #1C94F5;
    font-weight: 700;
    font-size: 0.9375rem;
}

.exam-rules-list span {
    color: #4B5563;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Reloj del examen: cifras de ancho fijo para que no baile al cambiar el segundo */
.exam-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.exam-clock--low {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
}

@media (max-width: 575.98px) {
    .exam-rules {
        padding: 1.15rem 1.1rem;
    }

    .exam-rules-list li {
        flex-direction: column;
        gap: 0.15rem;
    }

    .exam-rules-list strong {
        flex: none;
    }
}
/* ==========================================================================
   Panel — tarjeta del PRIMER PASO («Pierwszy krok · Zaczynamy»)
   --------------------------------------------------------------------------
   Antes era una etiqueta, una palabra grande y un párrafo sueltos. Ahora lleva
   su icono, un fondo suave y el texto ordenado, para que la primera impresión
   del panel no sea un bloque de texto.
   ========================================================================== */
.dashboard-progress-card--start {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #F5FAFF 0%, #FFFFFF 65%);
    border: 1px solid #D6EAFB;
    border-left: 4px solid #1C94F5;
}

.dashboard-progress-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, 0.12);
    color: #1C94F5;
    font-size: 1.15rem;
}

.dashboard-progress-start-body { min-width: 0; }

.dashboard-progress-card--start .dashboard-progress-label {
    display: block;
    margin-bottom: 0.15rem;
}

.dashboard-progress-card--start .dashboard-progress-value {
    display: block;
    margin-bottom: 0.4rem;
    color: #0a7fd6;
}

.dashboard-progress-card--start .dashboard-progress-meta {
    max-width: 46rem;
}

@media screen and (max-width: 575.98px) {
    .dashboard-progress-card--start {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* ==========================================================================
   /pakiety/ — tarjetas de plan
   --------------------------------------------------------------------------
   Los textos de las tarjetas viven en la base (details_translations.field1) y
   ahora dicen exactamente lo pedido: «Pakiet» + nombre, la frase corta, los
   días de acceso, «Cena: X zł» y las características.
   ========================================================================== */

/* «Cena:» en pequeño y suave delante del importe, que sigue siendo el grande */
.plan-card-price .plan-card-price-label {
    display: inline-block;
    margin-right: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #6B7280;
    text-transform: none;
    vertical-align: middle;
}

/* El nombre del plan va en minúscula (es el nombre de marca); un poco más de
   aire con la etiqueta «Pakiet» encima */
.plan-card-name {
    margin-top: 0.15rem;
}

/* La lista de características respira mejor con seis puntos */
.plan-card-features {
    margin-bottom: 1rem;
}

.plan-card-features li + li {
    margin-top: 0.4rem;
}
/* Botón de cerrar de la barra de compartir: discreto, arriba a la derecha */
.test-share-bar { position: relative; }

.test-share-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9CA3AF;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.test-share-close:hover,
.test-share-close:focus-visible {
    background: #F3F4F6;
    color: #111827;
}
/* ==========================================================================
   Página de progreso compartida — desglose por parte y puntuación
   Para que el instructor vea de un vistazo dónde flojea el alumno.
   ========================================================================== */
.shared-progress-breakdown {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.35rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    text-align: left;
}

.shared-progress-breakdown-heading {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0a0a0a;
}

.shared-progress-breakdown-part + .shared-progress-breakdown-part {
    margin-top: 1.1rem;
}

.shared-progress-breakdown-part-title {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1C94F5;
}

.shared-progress-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shared-progress-breakdown-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.shared-progress-breakdown-points {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #374151;
}

.shared-progress-breakdown-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #EEF2F7;
    overflow: hidden;
}

.shared-progress-breakdown-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #22C55E;
}

.shared-progress-breakdown-bar > span.is-mid { background: #F59E0B; }
.shared-progress-breakdown-bar > span.is-low { background: #EF4444; }

.shared-progress-breakdown-numbers {
    font-size: 0.8125rem;
    color: #6B7280;
    white-space: nowrap;
}

.shared-progress-breakdown-numbers strong { color: #0a0a0a; }
.shared-progress-breakdown-numbers .is-wrong { color: #B91C1C; font-weight: 600; }

.shared-progress-breakdown-tip {
    margin: 1.1rem 0 0;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid #1C94F5;
    border-radius: 10px;
    background: #F5FAFF;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #374151;
}

@media screen and (max-width: 575.98px) {
    .shared-progress-breakdown-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}
/* ==========================================================================
   MODO TEST — mientras se responde, todo cabe en la pantalla
   --------------------------------------------------------------------------
   La página del test arrastraba cabecera, barra superior, el título de la
   sección, la barra de compartir y el pie del sitio: 2137px de alto con una
   ventana de 900, o sea 1237px de scroll para ver una sola pregunta.

   Mientras se responde (`body.test-running`, lo pone la app del test al entrar
   en el paso de preguntas) se retira ese chrome y se compacta el ritmo vertical.
   La identidad visual no cambia: las tarjetas, la tipografía y los colores del
   test siguen igual.
   ========================================================================== */
body.test-running .site-footer,
body.test-running .footer-top,
body.test-running .bottom-content,
body.test-running .top-bar,
body.test-running .top-bar-spacer,
body.test-running .account-course-heading,
body.test-running .account-course-status,
body.test-running .test-share-bar,
body.test-running .account-panel-heading { display: none !important; }

/* Menos aire arriba y abajo: el test empieza pegado al menú del panel */
body.test-running .main-content,
body.test-running .account-content { padding-top: 0 !important; padding-bottom: 0 !important; }
body.test-running .container-xxl { padding-top: 0 !important; }

/* La foto o el vídeo de la pregunta, con tope de altura para que quepa el resto */
body.test-running .media-holder { margin-bottom: 0.75rem !important; }
body.test-running .media-holder img,
body.test-running .media-holder video {
    max-height: 34vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

/* Texto, respuestas y controles, algo más juntos */
body.test-running .question-content { margin-bottom: 0.6rem !important; }
body.test-running .question-holder { margin-bottom: 0.6rem !important; }
body.test-running .question-answers .answer-btn { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
body.test-running .settings-buttons { margin-bottom: 0.75rem !important; }
body.test-running .main-controls .pseudo-btn { margin-bottom: 0.5rem !important; }

/* Los botones de la derecha, sin huecos enormes */
body.test-running .main-controls .btn { margin-bottom: 0.4rem !important; }
/* --------------------------------------------------------------------------
   Modo test, segunda pasada: lo que aún empujaba la página hacia abajo.

   1. La tarjeta de saludo del panel («Cześć, Ola / TWÓJ PAKIET») ocupaba ~120px
      y durante un examen no aporta nada: se retira.
   2. El vídeo traía su propia altura (320px medidos) y no respetaba el tope:
      se le pone con `!important`, y al contenedor también, para que quepa la
      pregunta, las respuestas y los botones.
   -------------------------------------------------------------------------- */
body.test-running .account-header { display: none !important; }

body.test-running .media-holder {
    max-height: 32vh !important;
    overflow: hidden;
}

body.test-running .media-holder video,
body.test-running .test-video-player {
    display: block;
    max-height: 32vh !important;
    height: 32vh !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}
/* ==========================================================================
   Test — la opción ELEGIDA tiene que verse
   --------------------------------------------------------------------------
   En el examen no hay verde ni rojo (no se revela nada), así que la única señal
   al pulsar una respuesta es el estado «elegida». No se veía: las reglas de las
   tarjetas (`body #test .answer-btn…`, con un id, ganan a
   `.question-answers button.answer-selected`) dejaban el fondo blanco y parecía
   que el clic no se había registrado.

   `:not(.answer-correct):not(.answer-wrong)` es importante: en el modo estudio la
   respuesta se marca en verde o rojo y ahí NO debe pintarse de azul.
   ========================================================================== */
body #test .answer-btn.answer-selected:not(.answer-correct):not(.answer-wrong) {
    background-color: #E8F3FE !important;
    border-color: #1C94F5 !important;
    color: #0a0a0a !important;
    box-shadow: inset 0 0 0 1px #1C94F5;
}

body #test .answer-btn.answer-selected:not(.answer-correct):not(.answer-wrong) .answer-btn-letter {
    background-color: #1C94F5 !important;
    border-color: #1C94F5 !important;
    color: #ffffff !important;
}
/* ==========================================================================
   Test — los avisos de respuesta tienen que VERSE
   --------------------------------------------------------------------------
   Al pasar las respuestas a tarjetas blancas, el verde y el rojo del tema
   quedaron tapados por el fondo blanco (mi selector lleva `#test` y gana), y el
   icono de la respuesta correcta se quedaba **blanco sobre blanco**: en el modo
   estudio no se veía si habías acertado.

   Aquí se devuelve el aviso con la identidad de la web (verde y rojo suaves,
   borde marcado y el icono en su color), y `answer-selected` (azul) queda para el
   examen, donde no se revela nada.
   ========================================================================== */
body #test .answer-btn.answer-correct,
body #test .answer-btn.answer-btn--choice.answer-correct,
body #test .answer-btn.answer-btn--yesno.answer-correct {
    background-color: #F2F9E6 !important;
    border-color: #8CC63F !important;
    color: #1f2937 !important;
}

body #test .answer-btn.answer-correct .answer-btn-icon,
body #test .answer-btn.answer-correct .answer-btn-icon i {
    color: #4E8A0F !important;
    background-color: transparent !important;
}

body #test .answer-btn.answer-correct .answer-btn-letter {
    background-color: #8CC63F !important;
    border-color: #8CC63F !important;
    color: #ffffff !important;
}

body #test .answer-btn.answer-wrong,
body #test .answer-btn.answer-btn--choice.answer-wrong,
body #test .answer-btn.answer-btn--yesno.answer-wrong {
    background-color: #FEF2F2 !important;
    border-color: #DC3545 !important;
    color: #1f2937 !important;
}

body #test .answer-btn.answer-wrong .answer-btn-icon,
body #test .answer-btn.answer-wrong .answer-btn-icon i {
    color: #DC3545 !important;
    background-color: transparent !important;
}

body #test .answer-btn.answer-wrong .answer-btn-letter {
    background-color: #DC3545 !important;
    border-color: #DC3545 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   /kurs/ — un solo selector de categoria
   La pagina tenia su propia lista (negra) y ademas estaba la de la app.
   La de la app es la que funciona (la misma que en /konto/nauka/test/),
   asi que se oculta la estatica para que no haya dos.
   ========================================================================== */
/* (retirada: el selector negro vuelve a ser visible; la app ya no necesita la lista) */

/* Restaurada: la borro por error una limpieza automatica mia anterior.
   Oculta el h2 del componente Vue cuando es hermano de .app-start-holder
   (no hijo), para no duplicar el titulo en el layout friendly. */
.categories-friendly h2.mt-5.mb-4 { display: none; }

/* ==========================================================================
   /kurs/ — UNA SOLA PANTALLA DE SELECCION (solo el demo publico)
   --------------------------------------------------------------------------
   La pagina tenia DOS selectores de categoria: la lista negra estatica de la
   plantilla (arriba) y la pantalla de inicio de la app (debajo). Medido en el
   navegador: la estatica NO funciona (su boton se queda deshabilitado, porque
   el JS de la pagina se queda con el nodo viejo) y la de la app SI funciona
   (es la misma que la de /konto/nauka/test/).
   Asi que se oculta la estatica y se queda la de la app, con sus iconos.
   Solo afecta a /kurs/: el panel no tiene .kurs-page ni .kurs-categories.
   ========================================================================== */
.kurs-page .kurs-categories { display: none !important; }

/* --------------------------------------------------------------------------
   ICONOS EN LAS CATEGORIAS DE LA APP — solo en /kurs/
   Los botones de la app son de texto: aqui se les pone delante el mismo
   icono que tenia la lista estatica. El orden es el que devuelve la app:
   A A1 A2 moto · AM bici · B B1 coche · C C1 camion · D D1 bus · PT metro · T tractor
   Los escapes tienen que ser \fNNNN: sin la barra invertida se imprime texto.
   -------------------------------------------------------------------------- */
.kurs-page #test .categories-list li { display: flex; }

.kurs-page #test .categories-list button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 6.5rem;
    padding: 0.75rem 0.5rem;
    line-height: 1.1;
}

.kurs-page #test .categories-list button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.35rem;
    color: inherit;
}

.kurs-page #test .categories-list li:nth-child(1 ) button::before { content: "\f21c"; } /* A  motocykl */
.kurs-page #test .categories-list li:nth-child(2 ) button::before { content: "\f21c"; } /* A1 motocykl */
.kurs-page #test .categories-list li:nth-child(3 ) button::before { content: "\f21c"; } /* A2 motocykl */
.kurs-page #test .categories-list li:nth-child(4 ) button::before { content: "\f206"; } /* AM motorower */
.kurs-page #test .categories-list li:nth-child(5 ) button::before { content: "\f1b9"; } /* B  samochod */
.kurs-page #test .categories-list li:nth-child(6 ) button::before { content: "\f1b9"; } /* B1 samochod */
.kurs-page #test .categories-list li:nth-child(7 ) button::before { content: "\f0d1"; } /* C  ciezarowka */
.kurs-page #test .categories-list li:nth-child(8 ) button::before { content: "\f0d1"; } /* C1 ciezarowka */
.kurs-page #test .categories-list li:nth-child(9 ) button::before { content: "\f207"; } /* D  autobus */
.kurs-page #test .categories-list li:nth-child(10) button::before { content: "\f207"; } /* D1 autobus */
.kurs-page #test .categories-list li:nth-child(11) button::before { content: "\f239"; } /* PT tramwaj */
.kurs-page #test .categories-list li:nth-child(12) button::before { content: "\f0d1"; } /* T  ciagnik */

/* ==========================================================================
   BARRA DE AJUSTES DEL TEST EN MOVIL — UNA SOLA FILA
   --------------------------------------------------------------------------
   Medido a 390 px: la barra ocupaba 224 px de alto porque los tres items se
   apilaban (y=581, 660, 739) y el boton "Ustawienia" quedaba debajo. Ahora los
   tres van en una fila a tercios iguales (111 px cada uno) y la barra baja a
   122 px. El boton "Ustawienia" se oculta: ya no hace falta, porque la barra
   esta siempre visible (body ul.settings-buttons ya la muestra en todos los
   anchos). Solo aplica hasta 991.98 px: en escritorio no cambia nada.
   ========================================================================== */
@media (max-width: 991.98px) {
    body ul.settings-buttons {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        margin-bottom: 1rem !important;
    }
    body ul.settings-buttons > li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body ul.settings-buttons > li > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem !important;
        width: 100% !important;
        padding: 0.45rem 0.35rem !important;
        border-radius: 12px !important;
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    body ul.settings-buttons > li > div span {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
    body ul.settings-buttons > li > div .btn-yellow {
        margin-left: 0 !important;
        margin-top: 0.2rem !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6rem !important;
    }
    /* El boton "Ustawienia" ya no hace falta: la barra de ajustes esta siempre
       visible. Se oculta su COLUMNA entera (es la unica con el icono de
       engranaje, medido: 1 sola coincidencia) y "Zakończ" ocupa la fila. */
    body #test .col-6:has(i.fa-cog) {
        display: none !important;
    }
    body #test .row.mb-2 > .col-6.ps-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   MOVIL: remates del test (escritorio NO se toca)
   --------------------------------------------------------------------------
   1. La barra "Przewiń o 50 pytań" (dos flechas dobles) sobra en el movil.
   2. Las tres cards de ajustes iban con alturas distintas (medido: 104 / 120 /
      120 px). Ahora las tres miden lo mismo y estan alineadas.
   3. El contador ("1 z 21") y la eficacia ("0%") no cuadraban: el contador
      media 175 px pegado a la izquierda y la eficacia 370 px empezando en x=5
      (se salia 10 px por lado por los margenes negativos de .row). Ahora los
      dos miden el ancho completo del contenedor y el contenido va centrado.
   4. El boton "Zakończ" pasa DEBAJO de los dos. Su contenedor
      (.d-lg-none.mb-4) tiene exactamente esos dos hijos (.row.mb-2), asi que
      basta convertirlo en columna y darles un order.

   NOTA de especificidad: los selectores llevan #test a proposito. El CSS con
   alcance del bundle de Vue usa clase + atributo (especificidad 0,2,0) y
   ganaba a `body ul.settings-buttons > li` (0,1,3): medido, el contenedor
   seguia con align-items:center y los <li> en display:block. Con #test
   (1,1,2) se gana sin anadir mas !important.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* 1. barra de saltar 50 preguntas */
    body #test .pseudo-btn.with-buttons {
        display: none !important;
    }

    /* 2. cards de ajustes: mismo ancho y misma altura */
    body #test ul.settings-buttons {
        align-items: stretch !important;
    }
    body #test ul.settings-buttons > li {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
    }
    body #test ul.settings-buttons > li > div {
        height: 100% !important;
        min-height: 120px !important;
        justify-content: flex-start !important;
    }

    /* 3. contador y eficacia: ancho completo y centrados */
    body #test .d-lg-none.mb-4 .row.mb-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body #test .d-lg-none.mb-4 .row.mb-2 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body #test .d-lg-none.mb-4 .pseudo-btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 4. "Zakończ" debajo de los dos */
    body #test .d-lg-none.mb-4 {
        display: flex !important;
        flex-direction: column !important;
    }
    body #test .d-lg-none.mb-4 > .row.mb-2:nth-child(1) { order: 3 !important; }
    body #test .d-lg-none.mb-4 > .row.mb-2:nth-child(2) { order: 1 !important; }
}

/* ==========================================================================
   MOVIL: SELECTOR DE CATEGORIAS EN CUADRICULA
   --------------------------------------------------------------------------
   Medido en movil: la lista venia ya como grid pero de UNA columna, es decir
   12 botones uno debajo de otro (1140 px de alto, filas=12). En cuadricula de
   3 columnas son 4 filas y 460 px, con todas las celdas del mismo tamano; a
   partir de 576 px (movil grande / tablet) son 4 columnas.
   Solo hasta 991.98 px y solo en la pagina del demo (.kurs-page): el panel de
   alumno (/konto/nauka/test/) no cambia nada.
   ========================================================================== */
@media (max-width: 991.98px) {
    .kurs-page #test .app-settings-holder .categories-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr !important;
        gap: 0.4rem !important;
        justify-content: normal !important;
        align-items: stretch !important;
    }
    .kurs-page #test .app-settings-holder .categories-list > li {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .kurs-page #test .app-settings-holder .categories-list > li > button {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 0.6rem 0.35rem !important;
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }
    .kurs-page #test .app-settings-holder .categories-list > li > button::before {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .kurs-page #test .app-settings-holder .categories-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   AVISO DEL PAGO CON CRIPTOMONEDAS EN LA KASA
   --------------------------------------------------------------------------
   Solo se pinta cuando el pedido llega al minimo de la pasarela (la opcion
   de crypto no se ofrece por debajo). Estilo discreto, acorde con la kasa.
   ========================================================================== */
.checkout-crypto-note {
    display: block;
    margin: 0.75rem 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: #f3f6fb;
    border: 1px solid #dbe4f0;
    color: #374151;
    font-size: 0.82rem;
    line-height: 1.35;
}
.checkout-crypto-note .fab,
.checkout-crypto-note .fa {
    color: #f7931a;
}

/* Linea de criptomonedas en la tarjeta del plan (aviso al cliente) */
.plan-card-features .plan-card-feature--crypto {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.plan-card-features .plan-card-feature--crypto .fab {
    color: #f7931a;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}
/* ============================================================
   HOME 2026 — hero centrado + cabecera compacta.
   Al final del fichero a propósito: misma especificidad que las reglas
   de arriba + posición posterior = gana la cascada.
   ============================================================ */

/* ---------- 1. El test de categorías, dentro del hero ---------- */
.hero-friendly .hero-friendly-test { margin: 0 auto 1.75rem; max-width: 100%; }
.hero-friendly .app-settings-holder { margin: 0; }
.hero-friendly .app-settings-holder > .small { display: none; }
.hero-friendly .app-settings-holder > ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.hero-friendly .app-settings-holder > ul li { padding: 0 !important; margin: 0 !important; }
.hero-friendly .app-settings-holder > ul li .btn {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem;
    min-height: 4.2rem;
    padding: 0.65rem 0.3rem !important;
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-friendly .app-settings-holder > ul li .btn i {
    font-size: 1.3rem !important;
    line-height: 1;
    color: #1C94F5;
    transition: color 0.2s ease;
}
.hero-friendly .app-settings-holder > ul li .btn .category-tile-label {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
.hero-friendly .app-settings-holder > ul li .btn:hover,
.hero-friendly .app-settings-holder > ul li .btn:focus-visible {
    background: #1C94F5 !important;
    color: #ffffff !important;
    border-color: #1C94F5 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(28, 148, 245, 0.45);
}
.hero-friendly .app-settings-holder > ul li .btn:hover i,
.hero-friendly .app-settings-holder > ul li .btn:focus-visible i { color: #ffffff; }
@media (min-width: 576px) {
    .hero-friendly .app-settings-holder > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
}
@media (min-width: 992px) {
    .hero-friendly .app-settings-holder > ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem; }
}
@media (min-width: 1200px) {
    .hero-friendly .app-settings-holder > ul { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- 2. Hero centrado (todo el ancho, sin columna a la izquierda) ---------- */
.hero-friendly-content { max-width: 100%; margin: 0 auto; text-align: center; }
.hero-friendly h1 { text-align: center; margin-left: auto; margin-right: auto; }
.hero-friendly .hero-friendly-content p,
.hero-friendly-content > p { text-align: center; margin-left: auto; margin-right: auto; }
.hero-friendly .hero-friendly-ctas { justify-content: center; }

@media (min-width: 992px) {
    .hero-friendly {
        min-height: 0;
        padding: 3rem 0 3.25rem;
        background-position: right -12rem center;
        background-size: 100% auto;
    }
    /* velo blanco: la foto se intuye, el texto manda */
    .hero-friendly::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.88) 45%,
            rgba(255, 255, 255, 0.80) 70%,
            rgba(255, 255, 255, 0.92) 100%);
    }
    .hero-friendly-content { max-width: 72rem; padding-left: 0; }
    .hero-friendly h1 {
        font-size: clamp(2.1rem, 3.4vw, 3rem);
        line-height: 1.05;
        white-space: nowrap;
        text-wrap: nowrap;
        margin: 0 auto 0.8rem;
    }
    .hero-friendly .hero-friendly-content p,
    .hero-friendly-content > p {
        max-width: 46rem;
        font-size: 1.0625rem;
        margin: 0 auto 2rem;
    }
    .hero-friendly-float { right: 1.25rem; max-width: 8.5%; opacity: 0.95; }
}

/* ---------- 3. Cabecera compacta ---------- */
@media (min-width: 992px) {
    /* franja superior (Instruktorzy / nauka / egzamin / pakiety) */
    body:not(.app-page) .top-bar { padding-top: 0.2rem; padding-bottom: 0.2rem; }
    body:not(.app-page) .top-bar .nav { gap: 0.35rem 0.9rem; }
    body:not(.app-page) .top-bar .nav .nav-link {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.25;
        padding: 0.2rem 0.6rem;
    }
    body:not(.app-page) .top-bar .nav .nav-link img { width: 1.25rem; height: 1.25rem; }

    /* navbar principal: menos aire arriba/abajo */
    body:not(.app-page) header > .navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    body:not(.app-page) header > .navbar .container-fluid {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        gap: 1rem;
    }
    body:not(.app-page) header .logo { width: 11rem; }
    body:not(.app-page) header .main-menu { flex-wrap: nowrap; flex-shrink: 0; }
    body:not(.app-page) header .main-menu a {
        padding: 0.4rem 0.7rem !important;
        line-height: 1.25;
        white-space: nowrap;
    }
    body:not(.app-page) header .social-menu { margin: 0 0.25rem; flex-shrink: 0; }
    body:not(.app-page) header .social-menu .nav-link {
        padding: 0.4rem 0.42rem !important;
        line-height: 1;
    }
    body:not(.app-page) header .buttons-menu { flex-shrink: 0; }
    body:not(.app-page) header .buttons-menu .nav-link {
        padding: 0.4rem 0.85rem !important;
        line-height: 1.25;
    }
    body:not(.app-page) header .buttons-menu .btn-cart { padding: 0.3rem 0.5rem !important; line-height: 1; }
    body:not(.app-page) header .buttons-menu .btn-cart i { font-size: 1.3rem; }
}

/* ---------- 4. Icono de X (Twitter) en los menús sociales ---------- */
.social-menu .social-icon-x {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}
/* ---------- 5. Ajuste: los 12 botones pueden usar más ancho ----------
   `.app-start-holder` viene con max-width: 900px de custom.css; en el hero
   centrado hay sitio de sobra y con 900px cada botón quedaba en ~62px. */
.hero-friendly .app-start-holder { max-width: 58rem; }
/* ---------- 6. Altura del hero ----------
   Con el contenido centrado el hero se quedaba en 451 px (antes 600). Se fija
   una altura mínima y se reparte el aire: el contenido va centrado en vertical
   por el `align-items: center` de .hero-friendly. */
@media (min-width: 992px) {
    .hero-friendly {
        min-height: 32rem;
        padding: 4rem 0 4.5rem;
    }
    .hero-friendly h1 {
        font-size: clamp(2.2rem, 3.5vw, 3.05rem);
        margin: 0 auto 1rem;
    }
    .hero-friendly .hero-friendly-content p,
    .hero-friendly-content > p { margin: 0 auto 2.5rem; }
    .hero-friendly .hero-friendly-test { margin: 0 auto 2rem; }
}
@media (min-width: 1200px) {
    .hero-friendly { min-height: 34rem; padding: 4.5rem 0 5rem; }
}
/* ---------- 7. La foto debe llegar a los dos bordes ----------
   Con `100% auto` + `right -12rem` la imagen (1024x493) no cubría el ancho
   completo y quedaban franjas blancas a los lados. Con `cover` llena el hero
   entero y el recorte es mínimo (a 1440 px la foto sale 1440x693 para un hero
   de 680). */
@media (min-width: 992px) {
    .hero-friendly {
        background-size: cover;
        background-position: center right;
    }
}
/* ---------- 8. Velo del hero: menos blanco (la foto se ve más) ----------
   Antes: 0.94 / 0.88 / 0.80 / 0.92. Ahora se aclara sobre todo abajo (los
   botones de categoría son tarjetas blancas y no necesitan tanto velo) y se
   mantiene más denso arriba, donde van el titular y el subtítulo.
   El contraste se comprueba midiendo el pixel real de la foto, no a ojo. */
@media (min-width: 992px) {
    .hero-friendly::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.77) 34%,
            rgba(255, 255, 255, 0.62) 58%,
            rgba(255, 255, 255, 0.56) 80%,
            rgba(255, 255, 255, 0.64) 100%);
    }
}
/* ---------- 9. Legibilidad del subtítulo con el velo más ligero ----------
   Medido: el titular da 12,5:1 (AA pide 3:1) y los botones 9:1, pero el
   subtítulo caía a 4,12:1 donde la foto es más oscura (AA pide 4,5:1).
   Se arregla con dos ajustes que no tapan la foto: un poco más de velo solo
   en esa franja y el gris del texto un punto más oscuro. */
.hero-friendly .hero-friendly-content p,
.hero-friendly-content > p { color: #374151; }
@media (min-width: 992px) {
    .hero-friendly::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.80) 34%,
            rgba(255, 255, 255, 0.64) 58%,
            rgba(255, 255, 255, 0.58) 80%,
            rgba(255, 255, 255, 0.66) 100%);
    }
}
/* ---------- 10. La franja de accesos rápidos pasa a vivir dentro del hero ----------
   En la home (única página con .hero-friendly), el .top-bar se sube dentro del
   hero: fondo transparente con un velo suave arriba para que el texto siga
   legible, y el hero se estira hacia arriba 2.6rem (la altura de la franja)
   para que la foto quede por detrás. La barra fija de móvil (<992px) no se
   toca: sigue igual. */
@media (min-width: 992px) {
    body:has(> .hero-friendly) .top-bar {
        height: 2.6rem;
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.10) 100%);
        border-bottom: 0;
        position: relative;
        z-index: 3;
    }
    body:has(> .hero-friendly) .hero-friendly {
        margin-top: -2.6rem;
        padding-top: 7.1rem;
    }
}
/* ---------- 11. Franja del hero más grande ----------
   Sube la altura de 2.6rem a 3.1rem (62 px), el texto a 1.05rem y los iconos a
   1.5rem. Como la franja es más alta, el hero se estira lo mismo (-3.1rem) y el
   padding de arriba se compensa para que el titular no se mueva. */
@media (min-width: 992px) {
    body:has(> .hero-friendly) .top-bar {
        height: 3.1rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    body:has(> .hero-friendly) .top-bar .nav { gap: 0.5rem 1.4rem; }
    body:has(> .hero-friendly) .top-bar .nav .nav-link {
        font-size: 1.05rem;
        font-weight: 600;
        padding: 0.3rem 0.7rem;
    }
    body:has(> .hero-friendly) .top-bar .nav .nav-link img { width: 1.5rem; height: 1.5rem; }
    body:has(> .hero-friendly) .hero-friendly {
        margin-top: -3.1rem;
        padding-top: 7.6rem;
    }
}
/* ---------- 12. Footer: bloque de métodos de pago ----------
   Antes solo estaba la insignia de Tpay. Ahora es un bloque con etiqueta y tres
   logos: la insignia blanca de Tpay (pensada para fondo oscuro) y PayPal y
   criptomonedas en cápsulas blancas, porque sus logos son oscuros y sobre el
   negro del pie no se leerían. Los tres a la misma altura (2.5rem). */
.footer-payments {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
.footer-payments-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}
.footer-payments-logos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-payments .footer-tpay { display: inline-flex; align-items: center; }
.footer-payments .footer-tpay img { height: 2.5rem; width: auto; display: block; }
.footer-pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 4.25rem;
    padding: 0 0.55rem;
    background: #ffffff;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-pay-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(255, 255, 255, 0.55);
}
.footer-pay-chip img { display: block; height: 1.1rem; width: auto; }
@media (max-width: 767.98px) {
    .footer-payments { order: 2; width: 100%; align-items: center; }
    .footer-payments-logos { flex-wrap: wrap; justify-content: center; }
    .footer-pay-chip { min-width: 3.75rem; }
}
/* ---------- 12b. Ajuste del pie: que el centro siga en una línea ----------
   El bloque de pagos (416 px) dejaba al centro sin sitio y "Regulamin" caía a
   una segunda línea. Se recorta el bloque (insignia 2.25rem, cápsulas 3.75rem)
   y el hueco de la fila, y en móvil la insignia de Tpay ocupa su propia línea
   para que no se encoja y quede a la misma altura que las cápsulas. */
@media (min-width: 768px) {
    .footer-row { gap: 1.25rem; }
}
.footer-payments .footer-tpay img { height: 2.25rem; }
.footer-pay-chip { min-width: 3.75rem; height: 2.25rem; }
.footer-pay-chip img { height: 1.2rem; }
@media (max-width: 767.98px) {
    .footer-payments .footer-tpay { flex-basis: 100%; justify-content: center; }
    .footer-pay-chip { min-width: 3.5rem; height: 2.25rem; }
}
/* ---------- 12c. Pie: el copyright nunca parte y la insignia no se encoge ----------
   1) responsive.css pone `max-height: 1.75rem` a .footer-tpay img en móvil, y
      max-height gana a mi height: la insignia salía 10 px más baja que las
      cápsulas. Se iguala.
   2) Por debajo de 1600 px el bloque de pagos (387 px) dejaba al centro sin
      sitio y "Regulamin" caía a una segunda línea: en esa franja el bloque de
      pagos pasa a su propia línea, alineado a la derecha. */
@media (max-width: 767.98px) {
    .footer-payments .footer-tpay img { max-height: 2.25rem; }
}
@media (min-width: 768px) and (max-width: 1599.98px) {
    .footer-payments { flex-basis: 100%; }
}
/* ---------- 12d. La insignia de Tpay, con la misma altura en todas las franjas ----------
   responsive.css le pone max-height en varios tramos (1.75rem en móvil, 2rem
   hasta 991px). Se neutraliza para que mida lo mismo que las cápsulas. */
.footer-payments .footer-tpay img { max-height: 3rem; }
/* ============================================================
   PIE REDISEÑADO — 4 columnas (marca · navegación · contacto · pagos)
   y barra inferior con el copyright y el crédito.
   ============================================================ */
.site-footer { background: #000000; color: #ffffff; }

.footer-main { padding: 3rem 0 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
    gap: 2rem 2.5rem;
    align-items: start;
}
.footer-col { min-width: 0; }

.footer-brand { display: inline-block; line-height: 0; text-decoration: none; transition: opacity 0.2s ease; }
.footer-brand:hover { opacity: 0.85; }
.footer-logo { display: block; height: 2.5rem; width: auto; max-width: 100%; }

.footer-col-heading {
    color: #ffffff;
    font-family: 'Ubuntu', 'Karla', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 1rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover { color: #ffffff; }
.footer-links i { color: #1C94F5; font-size: 1rem; line-height: 1; }

.footer-social { margin-top: 1.25rem; }
.footer-social-label { display: block; color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; margin-bottom: 0.5rem; }
.footer-social .social-menu { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.footer-social .social-menu .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social .social-menu .nav-link:hover { background: #1C94F5; color: #ffffff; transform: translateY(-1px); }
.footer-social .social-icon-x { width: 1em; height: 1em; }

/* Métodos de pago */
.footer-payments-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.footer-col--payments .footer-tpay { display: inline-flex; align-items: center; }
.footer-col--payments .footer-tpay img { display: block; height: 2.25rem; max-height: 3rem; width: auto; }
.footer-pay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    min-width: 3.75rem;
    padding: 0 0.6rem;
    background: #ffffff;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-pay-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(255, 255, 255, 0.55); }
.footer-pay-chip img { display: block; height: 1.15rem; width: auto; }

/* Barra inferior */
.footer-bottom { padding: 1.25rem 0; background: #000000; }
.footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.footer-line {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
.footer-line a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s ease; }
.footer-line a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* Adaptación */
@media (max-width: 1199.98px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .footer-main { padding: 2rem 0 1.75rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
    .footer-col-heading { margin-bottom: 0.75rem; }
    .footer-links { align-items: center; }
    .footer-social .social-menu { justify-content: center; }
    .footer-payments-logos { justify-content: center; }
    .footer-bottom-row { justify-content: center; text-align: center; }
    .footer-line { justify-content: center; }
}

/* ---------- Pie rediseñado: arreglos ---------- */

/* 1) BUG: los enlaces legales eran negros sobre negro. custom.css tiene
      `.footer-bottom a { color: #000 !important }`, así que "Polityka
      prywatności" y "Regulamin" llevaban tiempo invisibles. Se gana la cascada. */
.footer-bottom .footer-line a { color: rgba(255, 255, 255, 0.88) !important; }
.footer-bottom .footer-line a:hover { color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .footer-line span { color: rgba(255, 255, 255, 0.6); }

/* 2) Columna de pagos: la insignia de Tpay (es ancha) ocupa su propia línea y
      las cápsulas van debajo en una fila, para que ninguna quede suelta. */
.footer-col--payments .footer-tpay { flex: 0 0 100%; }
.footer-payments-logos { align-items: center; }

/* 3) En móvil, la regla antigua `.footer-tpay { order: 2 }` mandaba la insignia
      al final de la fila; se neutraliza para que quede primera, como en escritorio. */
@media (max-width: 767.98px) {
    .footer-col--payments .footer-tpay { order: 0; }
    /* 4) Pie móvil más compacto: navegación y contacto, en dos columnas. */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
    .footer-col--brand,
    .footer-col--payments { grid-column: 1 / -1; }
    .footer-links { gap: 0.45rem; }
    .footer-links a { font-size: 0.875rem; }
    .footer-links--contact a { overflow-wrap: anywhere; }
    .footer-social { margin-top: 1rem; }
    .footer-social .social-menu .nav-link { width: 2rem; height: 2rem; }
}

/* ---------- Pie: navegación debajo del logo ----------
   Los cuatro enlaces (Sklep, Pakiety, Poradniki, Kontakt) dejan de ser una
   columna con título y pasan a ir debajo del logo, alineados con él, en una o
   dos líneas según el ancho. El pie queda en 3 columnas en escritorio.

   OJO con la cascada: la rejilla de 2 columnas del bloque anterior está dentro
   de un @media que aparece ANTES en el fichero, así que hay que volver a
   declararla aquí (si no, la de 3 columnas de arriba ganaría también en tablet). */
.footer-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr);
}
.footer-links--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.6rem;
    margin-top: 1.25rem;
}
.footer-links--inline a { font-size: 0.9375rem; }

@media (max-width: 1199.98px) {
    /* Marca + navegación a todo el ancho; contacto y pagos, lado a lado */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    /* Una columna: marca+navegación, contacto y pagos, los tres centrados */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col--brand { grid-column: auto; }
    .footer-links--inline { justify-content: center; gap: 0.35rem 1.15rem; }
}

/* ---------- Pie: solo cambia la navegación ----------
   Se recupera la rejilla de 4 columnas del pie (contacto y métodos de pago
   vuelven exactamente a donde estaban). Lo único que cambia es que el bloque de
   la marca ocupa las dos primeras columnas y lleva la navegación debajo del
   logo, en una sola fila.

   OJO con la cascada: la rejilla de 3 columnas de arriba está en una regla
   posterior, así que hay que volver a declarar la de 4 aquí. */
.footer-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.7fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
    gap: 2rem 2.5rem;
}
.footer-col--brand { grid-column: 1 / span 2; }

/* Navegación: una fila bajo el logo, sin título de columna */
.footer-links--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.6rem;
    margin-top: 1.25rem;
}
.footer-links--inline a { font-size: 0.9375rem; }

@media (max-width: 1199.98px) {
    /* Marca + navegación a todo el ancho; contacto y pagos, lado a lado */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    /* Una columna, todo centrado */
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-col--brand { grid-column: auto; }
    .footer-links--inline { justify-content: center; gap: 0.35rem 1.15rem; }
}

/* ---------- Pie: navegación centrada respecto al logo ----------
   El bloque de marca es un inline-flex en columna: su ancho lo marca el logo
   (es el hijo más ancho) y la navegación se centra dentro, así que queda
   centrada respecto al logo y no pegada a su borde izquierdo. */
.footer-brand-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.footer-brand-block .footer-brand { align-self: center; }
.footer-brand-block .footer-links--inline {
    justify-content: center;
    width: 100%;
    margin-top: 1.25rem;
}
/* ============================================================
   CARRITO — carrusel de ofertas "Może Cię zainteresować"
   y avisos de "ya tienes este producto".
   ============================================================ */
.cart-offers { margin-top: 2.5rem; }

.cart-offers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cart-offers-heading {
    font-family: 'Ubuntu', 'Karla', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
    margin: 0;
}
.cart-offers-nav { display: flex; gap: 0.5rem; }
.cart-offers-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    color: #0a0a0a;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cart-offers-arrow:hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #ffffff;
    transform: translateY(-1px);
}
.cart-offers-arrow:focus-visible { outline: 2px solid #1C94F5; outline-offset: 2px; }

/* Pista con scroll horizontal y snap: carrusel sin dependencias */
.cart-offers-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0.25rem 1rem;
    margin: 0 -0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cart-offers-track::-webkit-scrollbar { height: 8px; }
.cart-offers-track::-webkit-scrollbar-thumb { background: rgba(10, 10, 10, 0.18); border-radius: 999px; }

.cart-offer-card {
    flex: 0 0 auto;
    width: 15.5rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E9ECF1;
    border-radius: 14px;
    padding: 0.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cart-offer-card:hover {
    border-color: #D7DEE8;
    box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.35);
    transform: translateY(-2px);
}
.cart-offer-image {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #F5F7FA;
    aspect-ratio: 4 / 3;
}
.cart-offer-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-offer-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    /* dos líneas de alto fijo: así los pies de las tarjetas quedan alineados */
    min-height: 2.6rem;
    margin: 0.75rem 0 0.5rem;
}
.cart-offer-title a { color: #0a0a0a; text-decoration: none; }
.cart-offer-title a:hover { color: #1C94F5; }
.cart-offer-owned {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    color: #0F7B3F;
    font-size: 0.8125rem;
}
.cart-offer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}
.cart-offer-price { font-size: 1.0625rem; font-weight: 800; color: #0a0a0a; white-space: nowrap; }
.cart-offer-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: #0a0a0a;
    border: 1.5px solid #0a0a0a;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.cart-offer-add:hover { background: #1C94F5; border-color: #1C94F5; transform: translateY(-1px); }
.cart-offer-add:disabled { opacity: 0.6; cursor: default; transform: none; }
.cart-offer-add.is-loading i { animation: cart-offer-spin 0.9s linear infinite; }
@keyframes cart-offer-spin { to { transform: rotate(360deg); } }

/* Aviso «ya tienes este producto»: ficha del producto y carrito */
.product-owned-note,
.order-product-owned {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
    background: rgba(15, 123, 63, 0.08);
    border: 1px solid rgba(15, 123, 63, 0.22);
    border-radius: 10px;
    color: #0F7B3F;
    font-size: 0.875rem;
    line-height: 1.35;
}
.order-product-owned { margin: 0.5rem 0 0; padding: 0.4rem 0.6rem; font-size: 0.8125rem; }

/* Aviso flotante al añadir al carrito */
.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1080;
    max-width: min(92vw, 26rem);
    padding: 0.75rem 1.1rem;
    background: #0a0a0a;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 1.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cart-toast.is-error { background: #B42318; }

@media (max-width: 575.98px) {
    .cart-offers { margin-top: 1.75rem; }
    .cart-offers-head { margin-bottom: 0.75rem; }
    .cart-offers-arrow { display: none; }
    .cart-offer-card { width: 13rem; }
}
/* ---------- Pie móvil: la insignia de Tpay, centrada ----------
   En móvil la insignia ocupa toda la fila (`flex-basis: 100%`) y su contenido
   quedaba pegado a la izquierda (desvío de 78 px respecto al centro de la
   columna). El resto del bloque de pagos (etiqueta y cápsulas) ya va centrado,
   así que solo faltaba esto. */
@media (max-width: 767.98px) {
    .footer-col--payments .footer-tpay {
        justify-content: center;
    }
}
/* ---------- Franja de accesos: mismo tamaño en TODAS las páginas ----------
   La franja grande (62 px de alto, texto 21 px, iconos 30 px) solo se aplicaba
   en la portada, porque esas reglas iban atadas a `body:has(> .hero-friendly)`.
   En el resto de páginas se veía más pequeña (46 px / 17 px / 29 px). Ahora las
   medidas de la portada son las generales: en cualquier página que se muestre,
   la franja se ve igual.

   En móvil (<992px) la franja es la barra fija de abajo y ya era igual en todas
   las páginas: no se toca. */
@media (min-width: 992px) {
    body:not(.app-page) .top-bar {
        display: flex;
        align-items: center;
        height: 3.1rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    body:not(.app-page) .top-bar .nav {
        gap: 0.5rem 1.4rem;
    }
    body:not(.app-page) .top-bar .nav .nav-link {
        font-size: 1.05rem;
        font-weight: 600;
        padding: 0.3rem 0.7rem;
    }
    body:not(.app-page) .top-bar .nav .nav-link img {
        width: 1.5rem;
        height: 1.5rem;
    }
}
/* ---------- Hero: la foto, más visible ----------
   Se aclara otro escalón el velo blanco (antes 0.86/0.80/0.64/0.58/0.66):
   ahora la foto se ve más, sobre todo en la mitad inferior, y el velo se
   mantiene más denso arriba, donde van el titular y el subtítulo.
   El contraste se comprueba midiendo el píxel real de la foto bajo cada texto. */
@media (min-width: 992px) {
    .hero-friendly::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.80) 0%,
            rgba(255, 255, 255, 0.72) 34%,
            rgba(255, 255, 255, 0.55) 58%,
            rgba(255, 255, 255, 0.48) 80%,
            rgba(255, 255, 255, 0.56) 100%);
    }
}
/* ---------- Hero: la foto SIN velo ----------
   A petición expresa: se quita por completo el velo blanco del hero, en todas
   las resoluciones (antes el ::before pintaba un degradado blanco encima de la
   foto). No queda ninguna capa, ni transparencia ni filtro: la foto se ve tal
   cual, y también en móvil. */
.hero-friendly::before {
    background: none;
}
/* ---------- Hero: el gráfico flotante, un poco más arriba ----------
   Va posicionado con `top: 50%` (centrado en vertical). Se sube al 42% para
   que quede por encima del centro. La animación no hay que tocarla: solo mueve
   el `transform`, que sigue siendo relativo a la nueva posición. */
.hero-friendly-float {
    top: 42%;
}
/* ---------- Portada: la franja de accesos, sin fondo ----------
   En la portada la franja va dentro del hero y llevaba un degradado blanco
   (rgba 0.72 -> 0.10) para que el texto se leyera sobre la imagen. A petición
   expresa se quita: queda totalmente transparente, sin filtro.
   En el resto de páginas NO se toca: allí la franja es una banda propia sobre
   el fondo blanco de la página y mantiene su fondo. */
@media (min-width: 992px) {
    body:has(> .hero-friendly) .top-bar {
        background: none;
    }
}
/* ============================================================
   PANEL DEL ALUMNO
   1) /konto/nauka/teoria/: el texto de introducción, en una sola línea en
      escritorio, y "Znaki drogowe" con el mismo tamaño y grosor que "Teoria".
   2) /konto/wiadomosci/: tarjeta "Poleć znajomym" (WhatsApp + compartir + copiar).
   ============================================================ */

/* --- 1. Página de teoría --- */
/* El texto mide 832 px a 19px. El contenedor es 920 px a partir de 1366 y
   815 px a 1200: a 18 px son 788 px, así que entra en una línea desde 1200. */
@media (min-width: 1200px) {
    .account-course-lead {
        max-width: none;
        white-space: nowrap;
        font-size: 18px;
    }
}

/* "Znaki drogowe": mismo cuerpo y grosor que el título "Teoria" (28px/800) */
.theory-section-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

/* --- 2. Tarjeta "Poleć znajomym" --- */
.refer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
    align-items: center;
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
}
.refer-body {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}
.refer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(28, 148, 245, 0.12);
    color: #1C94F5;
    font-size: 1.15rem;
}
.refer-title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0a0a0a;
}
.refer-text {
    margin: 0;
    color: #4B5563;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.refer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.refer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.refer-btn:hover { transform: translateY(-1px); }
.refer-btn--whatsapp { background: #25D366; color: #ffffff; }
.refer-btn--whatsapp:hover { background: #1EBE5A; }
.refer-btn--share,
.refer-btn--copy {
    background: #ffffff;
    border-color: #E5E7EB;
    color: #0a0a0a;
}
.refer-btn--share:hover,
.refer-btn--copy:hover { border-color: #0a0a0a; }
.refer-link {
    grid-column: 1 / -1;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px dashed #D1D5DB;
    border-radius: 10px;
    background: #F9FAFB;
    color: #4B5563;
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    .refer-card {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .refer-actions { width: 100%; }
    .refer-btn { flex: 1 1 auto; }
}

/* ---------- Portada: etiqueta encima de las tarjetas de categoría ----------
   "Wybierz kategorię:" va en la plantilla (no en el componente Vue), justo
   encima de donde se monta el selector de categorías del hero.
   Se usa un selector con dos clases porque la regla del subtítulo
   (`.hero-friendly-content > p`) tiene más especificidad y le ganaba el peso. */
.hero-friendly .hero-friendly-content .hero-friendly-test-label {
    /* 58rem = 1160px, el mismo ancho que la rejilla de tarjetas, y con los
       margenes automaticos para que quede centrada igual que ellas (la regla
       del subtitulo le pone max-width: 46rem y el margin: auto la centra). */
    max-width: 58rem;
    margin: 0 auto 0.7rem;
    font-family: 'Ubuntu', 'Karla', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a0a0a;
    text-align: center;
    letter-spacing: 0.01em;
}

@media (max-width: 767.98px) {
    .hero-friendly .hero-friendly-content .hero-friendly-test-label {
        font-size: 1rem;
        margin-bottom: 0.55rem;
    }
}
/* ============================================================
/* ---------- Portada: primera parte del subtítulo en el azul de la marca ----------
   Petición expresa: "Wybierz kategorie i poznaj najprostszą formę nauki." en el
   azul #1C94F5 que usa la web, y "Pełna, aktualna baza WORD 2026." en negro.

   Dato medido: ese azul sobre la ilustración da 2,48:1 contra el fondo (por
   debajo del mínimo de 3:1 para texto grande). Para acercarlo al mínimo sin
   cambiar el color, el texto va en peso 700 (así cuenta como texto grande) y
   lleva un halo blanco muy suave que aclara justo los píxeles que rodean las
   letras: en el borde del glifo el contraste sube a ~3,1:1 (AA texto grande).
   Si algún día se quiere leer sin depender de eso, el azul #0B589E mide 5,6:1. */
.hero-friendly .hero-friendly-content > p:not(.hero-friendly-test-label) {
    color: #1C94F5;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}
.hero-friendly .hero-friendly-content > p strong {
    color: #0a0a0a;
    font-weight: 700;
    text-shadow: none;
}
/* ---------- Portada: la franja del hero con el estilo del botón ghost ----------
   Los cuatro accesos de la franja — Instruktorzy, Rozpocznij naukę, Rozpocznij
   egzamin y Pakiety — llevan el diseño del botón `.btn-ghost.btn-pill` pero con
   el fondo TRANSPARENTE: solo el contorno negro de 1.5px y el texto en negrita
   (así se ve la ilustración por dentro). Al pasar el ratón se rellenan con el
   azul del botón "Zacznij naukę" (#1C94F5), el texto pasa a blanco y el botón
   sube 2px.

   Los iconos de la franja son <img> SVG negros (no heredan el color), así que en
   el hover se invierten con `filter: brightness(0) invert(1)` para que se vean
   blancos sobre el azul.

   Solo en la portada: en el resto de páginas la franja mantiene su aspecto. */
@media (min-width: 992px) {
    body:has(> .hero-friendly) .top-bar .nav .nav-link {
        position: relative;
        background: transparent;
        color: #0a0a0a;
        border: 1.5px solid #0a0a0a;
        border-radius: 999px;
        font-weight: 700;
        letter-spacing: 0.01em;
        padding: 0.45rem 1.1rem;
        transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                    box-shadow 0.2s ease,
                    background-color 0.2s ease,
                    color 0.2s ease,
                    border-color 0.2s ease;
    }
    /* Mismo efecto que los enlaces del navbar (Sklep, Pakiety, Poradniki,
       Kontakt): el texto se pone azul y aparece un fondo azul muy tenue (6%).
       Aqui se mantiene ademas el contorno de la pildora, que pasa a azul.
       Sin subrayado (a peticion expresa). */
    body:has(> .hero-friendly) .top-bar .nav .nav-link:hover,
    body:has(> .hero-friendly) .top-bar .nav .nav-link:focus-visible {
        background: rgba(28, 148, 245, 0.06);
        border-color: #1C94F5;
        color: #1C94F5;
    }

    /* Los iconos son SVG negros y no heredan el color: este filtro los tine del
       azul de la marca. Medido en el navegador: deja rgb(29,149,248) frente al
       objetivo rgb(28,148,245) (diferencia de 3, imperceptible). */
    body:has(> .hero-friendly) .top-bar .nav .nav-link:hover img,
    body:has(> .hero-friendly) .top-bar .nav .nav-link:focus-visible img {
        filter: invert(45%) sepia(99%) saturate(2000%) hue-rotate(185deg) brightness(100%) contrast(95%);
    }
}
/* ============================================================
   /kurs/ y el panel del alumno — MÓVIL: la pregunta, a mano
   ============================================================
   Medido antes (390x844): la pregunta empezaba en y=1162 y los botones de
   respuesta en y=1316..1479 (1,6 pantallas de scroll para VER las respuestas).
   La causa no era la pregunta, sino todo lo que había encima: el hero de
   marketing, el selector de categorías, el panel de configuración y el panel de
   inicio de la propia aplicación.

   Cuando hay una pregunta en pantalla (`:has(.question-holder)`, que ya se usa
   en la web), en móvil:
     - se oculta todo lo de arriba (marketing, selector, configuración, inicio);
     - la barra de acciones (Poprzednie / Następne) se fija abajo, al alcance del
       pulgar, con fondo blanco y su sombra;
     - el contenido se compacta y los medios se limitan en alto.

   Solo móvil: en escritorio no cambia absolutamente nada. */
@media (max-width: 767.98px) {

    /* --- 1) Fuera lo de arriba mientras hay pregunta --- */
    .kurs-page:has(.question-holder) > .kurs-compact-header,
    .kurs-page:has(.question-holder) .kurs-categories,
    .kurs-page:has(.question-holder) .kurs-config,
    .kurs-page:has(.question-holder) .kurs-categories-cta {
        display: none !important;
    }

    .kurs-app:has(.question-holder) .app-start-holder,
    .kurs-app:has(.question-holder) .app-settings-holder,
    #test:has(.question-holder) .app-start-holder,
    #test:has(.question-holder) .app-settings-holder {
        display: none !important;
    }

    /* Panel del alumno: título, estado y barra de compartir, fuera durante el test */
    .account-course:has(.question-holder) .account-course-heading,
    .account-course:has(.question-holder) .account-course-status,
    .account-course:has(.question-holder) .test-share-bar {
        display: none !important;
    }

    /* --- 2) Modo test en movil: pantalla enfocada, sin cabecera del sitio --- */
    body:has(.question-holder) header,
    body:has(.question-holder) .top-bar {
        display: none !important;
    }

    /* --- 2b) La pregunta, compacta y sin margenes de mas --- */
    .kurs-app:has(.question-holder) .container-xxl,
    #test:has(.question-holder) .container-xxl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.5rem;
    }
    /* La configuracion del test ("Kategoria / Punktacja / Kolejnosc"), compacta.
       Solo se tocan tamanos, no el display: asi el boton "Ustawienia" sigue
       pudiendo abrirla o cerrarla. */
    .kurs-app:has(.question-holder) ul.settings-buttons,
    #test:has(.question-holder) ul.settings-buttons {
        gap: 0.2rem 0.5rem;
        margin-bottom: 0.35rem !important;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
    .kurs-app:has(.question-holder) ul.settings-buttons .btn,
    .kurs-app:has(.question-holder) ul.settings-buttons a,
    #test:has(.question-holder) ul.settings-buttons .btn,
    #test:has(.question-holder) ul.settings-buttons a {
        padding: 0.15rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 0 !important;
    }
    /* La fila de herramientas movil (Ustawienia / Zakoncz / progres), en una linea */
    .kurs-app:has(.question-holder) .d-lg-none.mb-4,
    #test:has(.question-holder) .d-lg-none.mb-4 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.4rem;
        margin-bottom: 0.4rem !important;
        padding-bottom: 0.15rem;
    }
    .kurs-app:has(.question-holder) .d-lg-none.mb-4 > *,
    #test:has(.question-holder) .d-lg-none.mb-4 > * {
        margin-bottom: 0 !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .kurs-app:has(.question-holder) .d-lg-none.mb-4 .btn,
    #test:has(.question-holder) .d-lg-none.mb-4 .btn {
        padding: 0.35rem 0.7rem !important;
        font-size: 0.8125rem !important;
        min-height: 0 !important;
        white-space: nowrap;
    }
    /* La configuracion del test, en UNA sola fila (los tres <li> envolvian el
       texto en 4 lineas = 120px cada uno). Se deja desplazable en horizontal
       para que no se pierda nada. */
    .kurs-app:has(.question-holder) ul.settings-buttons,
    #test:has(.question-holder) ul.settings-buttons {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.35rem;
        padding-bottom: 0.15rem;
        margin-bottom: 0.3rem !important;
    }
    .kurs-app:has(.question-holder) ul.settings-buttons > li,
    #test:has(.question-holder) ul.settings-buttons > li {
        white-space: nowrap;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .kurs-app:has(.question-holder) ul.settings-buttons > li *,
    #test:has(.question-holder) ul.settings-buttons > li * {
        font-size: 0.8125rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
    /* La fila movil de herramientas: todo en una linea, en vertical centrado */
    .kurs-app:has(.question-holder) .d-lg-none.mb-4 > *,
    #test:has(.question-holder) .d-lg-none.mb-4 > * {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }
    .kurs-app:has(.question-holder) .d-lg-none.mb-4 > * > *,
    #test:has(.question-holder) .d-lg-none.mb-4 > * > * {
        margin: 0 !important;
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
        min-height: 0 !important;
        line-height: 1.2 !important;
        font-size: 0.8125rem !important;
    }
    /* El aviso del temporizador, en una linea fina */
    .kurs-app:has(.question-holder) .kurs-countdown,
    #test:has(.question-holder) .kurs-countdown {
        margin-bottom: 0.4rem !important;
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
        font-size: 0.875rem;
    }
    .question-holder {
        margin-top: 0 !important;
    }
    .question-content,
    .question-answers {
        margin-bottom: 0.5rem;
    }
    .question-content {
        padding: 0.75rem 0.9rem !important;
    }
    .question-answers {
        gap: 0.5rem;
    }
    .answer-btn {
        min-height: 3.25rem;          /* objetivo tactil comodo */
        padding: 0.6rem 0.85rem;
        font-size: 1rem;
    }
    /* Los medios no se comen la pantalla */
    .media-holder img,
    .media-holder video,
    .test-video-player {
        max-height: 24vh;
        object-fit: contain;
    }

    /* --- 3) La barra de la configuracion de la app, compacta (o fuera) --- */
    /* El bloque de "Kategoria / Punktacja / Kolejnosc" sobra durante el test.
       Sin !important, para que el boton "Ustawienia" siga pudiendo abrirlo. */
    .kurs-app:has(.question-holder) ul.settings-buttons,
    #test:has(.question-holder) ul.settings-buttons {
        display: none;
    }
    /* La fila de herramientas movil (Ustawienia / Zakoncz / progres), en una linea */
    .kurs-app:has(.question-holder) .d-lg-none.mb-4,
    #test:has(.question-holder) .d-lg-none.mb-4 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.5rem;
        margin-bottom: 0.5rem !important;
    }
    .kurs-app:has(.question-holder) .d-lg-none.mb-4 .btn,
    #test:has(.question-holder) .d-lg-none.mb-4 .btn {
        margin-bottom: 0 !important;
        width: auto !important;
        flex: 0 1 auto;
    }

    /* --- 4) Barra de acciones fija abajo: SOLO la de movil (d-lg-none) --- */
    section.kurs-app .main-controls.d-lg-none,
    #test .main-controls.d-lg-none {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: #ffffff;
        border-top: 1px solid #E5E7EB;
        padding: 0.5rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
        margin: 0 !important;
    }
    section.kurs-app .main-controls.d-lg-none .btn,
    #test .main-controls.d-lg-none .btn {
        margin-bottom: 0 !important;
    }
    /* Que la barra fija no tape el final del contenido */
    section.kurs-app:has(.question-holder),
    #test:has(.question-holder) {
        padding-bottom: 5.5rem;
    }
}
/* ============================================================
   /kurs/ y panel — MÓVIL: refuerzo con especificidad por id
   ============================================================
   El sitio pone `display: flex` (con !important) en .settings-buttons por
   clase, así que las reglas por clase no ganaban. Con #app / #test por delante
   la especificidad es mayor y sí se aplica.

   Objetivo: que la pregunta, sus respuestas y la barra de acciones quepan en la
   pantalla del móvil sin scroll. */
@media (max-width: 767.98px) {

    /* La configuracion del test, en una sola fila desplazable */
    body:has(.question-holder) #app ul.settings-buttons,
    body:has(.question-holder) #test ul.settings-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.35rem !important;
        margin: 0 0 0.3rem !important;
        padding: 0 0 0.15rem !important;
        font-size: 0.8125rem !important;
    }
    body:has(.question-holder) #app ul.settings-buttons > li,
    body:has(.question-holder) #test ul.settings-buttons > li {
        white-space: nowrap !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.8125rem !important;
        line-height: 1.2 !important;
    }
    body:has(.question-holder) #app ul.settings-buttons > li *,
    body:has(.question-holder) #test ul.settings-buttons > li * {
        display: inline-block;
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        padding: 0.1rem 0.35rem !important;
        min-height: 0 !important;
    }

    /* Topes duros de altura: la config y el bloque de progreso ocupaban 197px
       entre los dos (texto envuelto y barra de progreso alta). */
    /* La fila de configuracion del test (Kategoria / Punktacja / Kolejnosc) se
       oculta durante la pregunta: aplastada no se leia bien y robaba 54px.
       La configuracion se elige antes de empezar (y el boton "Ustawienia" sigue
       estando en la fila de herramientas). */
    body:has(.question-holder) #app ul.settings-buttons,
    body:has(.question-holder) #test ul.settings-buttons {
        display: none !important;
    }
    body:has(.question-holder) #app .d-lg-none.mb-4 > *,
    body:has(.question-holder) #test .d-lg-none.mb-4 > * {
        max-height: 2rem !important;
        overflow: hidden !important;
    }
    body:has(.question-holder) #app .d-lg-none.mb-4 .progress,
    body:has(.question-holder) #test .d-lg-none.mb-4 .progress,
    body:has(.question-holder) #app .d-lg-none.mb-4 progress,
    body:has(.question-holder) #test .d-lg-none.mb-4 progress {
        height: 0.5rem !important;
        min-height: 0 !important;
    }
    body:has(.question-holder) #app .media-holder,
    body:has(.question-holder) #test .media-holder {
        max-height: 22vh !important;
        overflow: hidden;
    }
    /* La fila movil de herramientas (Ustawienia / Zakoncz / progres), en una linea */
    body:has(.question-holder) #app .d-lg-none.mb-4,
    body:has(.question-holder) #test .d-lg-none.mb-4 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.4rem !important;
        margin: 0 0 0.4rem !important;
        padding-bottom: 0.15rem !important;
    }
    body:has(.question-holder) #app .d-lg-none.mb-4 > *,
    body:has(.question-holder) #test .d-lg-none.mb-4 > * {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        min-height: 0 !important;
    }
    body:has(.question-holder) #app .d-lg-none.mb-4 *,
    body:has(.question-holder) #test .d-lg-none.mb-4 * {
        font-size: 0.8125rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }
}
/* ============================================================
   EXAMEN DEL PANEL — barra de estado y contadores (como el oficial)
   ============================================================
   Se añade una barra arriba con las tres fichas azules (valor de la pregunta,
   categoría y tiempo que queda) y los dos contadores de la derecha (preguntas
   básicas / especializadas), que es lo que se ve en el simulador oficial. */

.exam-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 1rem;
}
.exam-status li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.875rem;
}
.exam-status-label { font-weight: 600; }
.exam-status-value {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    padding: 0 0.4rem;
    font-weight: 700;
}

.exam-counters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.exam-counter {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.exam-counter-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #6B7280;
    font-size: 0.75rem;
}
.exam-counter-value {
    display: block;
    background: #1C94F5;
    color: #ffffff;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
}

/* TAK / NIE centrados y compactos, como en el simulador oficial */
.question-answers .yes-no {
    max-width: 22rem;
    margin: 0 auto;
}

/* Se acabó el tiempo de la pregunta: queda cerrada y sólo se puede continuar */
.is-time-up .question-answers {
    pointer-events: none;
    opacity: 0.55;
}
.exam-time-up {
    background: #F59E0B !important;
    color: #ffffff !important;
    text-align: center;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .exam-status { display: none; }
    .exam-counters { margin-bottom: 0.75rem; }
}
/* ============================================================
   EXAMEN DEL PANEL — aspecto clásico del simulador oficial
   ============================================================
   Solo afecta al examen del panel (`#test[data-start-mode="exam"]`), que es el
   que el cliente quiere parecido al simulador oficial: colores planos, esquinas
   casi rectas, botones amarillos, respuestas azules y barra de tiempo verde.

   Medido antes de este bloque: los botones "amarillos" eran blancos, las
   respuestas eran tarjetas blancas, la pregunta iba dentro de una tarjeta gris
   y la imagen tenía sombra y esquinas redondeadas. */

/* --- Barra de estado: fichas azules con el valor en un recuadro más oscuro --- */
#test[data-start-mode="exam"] .exam-status { gap: 0.5rem; margin-bottom: 0.75rem; }
#test[data-start-mode="exam"] .exam-status li {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.9rem;
    line-height: 1.25;
}
#test[data-start-mode="exam"] .exam-status-value {
    background: #1f4e79 !important;
    border-radius: 2px !important;
    padding: 0.05rem 0.45rem !important;
    font-weight: 700;
}

/* --- La pregunta: texto llano y centrado, sin tarjeta --- */
#test[data-start-mode="exam"] .question-holder { background: transparent !important; border: 0 !important; }
#test[data-start-mode="exam"] .question-content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.75rem 0 !important;
    text-align: center !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: #222222 !important;
}

/* --- La imagen: sin sombra y sin esquinas redondeadas --- */
#test[data-start-mode="exam"] .media-holder {
    background: #ffffff !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#test[data-start-mode="exam"] .media-holder img,
#test[data-start-mode="exam"] .media-holder video { border-radius: 0 !important; }

/* --- Respuestas TAK / NIE: azules, casi rectangulares y centradas --- */
#test[data-start-mode="exam"] .yes-no {
    max-width: 20rem !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}
#test[data-start-mode="exam"] .answer-btn {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    min-width: 7rem;
    min-height: 0 !important;
    padding: 0.55rem 1rem !important;
}
#test[data-start-mode="exam"] .answer-btn:hover { background: #24598f !important; }

/* --- Botones amarillos del lateral (Zakończ egzamin / Następne pytanie) --- */
#test[data-start-mode="exam"] .col-lg-4 .btn-yellow {
    background: #f0ad4e !important;
    border: 1px solid #eea236 !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    padding: 0.55rem 1rem !important;
}
#test[data-start-mode="exam"] .col-lg-4 .btn-yellow:hover { background: #ec971f !important; }

/* --- Fichas grises y barra de tiempo verde --- */
#test[data-start-mode="exam"] .pseudo-btn {
    border-radius: 3px !important;
    font-weight: 600 !important;
    padding: 0.45rem 0.75rem !important;
}
#test[data-start-mode="exam"] .pseudo-btn.bg-gray { background: #e9e9e9 !important; color: #444444 !important; }
#test[data-start-mode="exam"] .pseudo-btn.bg-green,
#test[data-start-mode="exam"] .kurs-countdown {
    background: #4caf50 !important;
    color: #ffffff !important;
}

/* --- Contadores: básicas en azul, especializadas en azul claro --- */
#test[data-start-mode="exam"] .exam-counter-label { color: #666666 !important; font-size: 0.72rem !important; }
#test[data-start-mode="exam"] .exam-counter-value {
    background: #2b6cb0 !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}
#test[data-start-mode="exam"] .exam-counter:nth-child(2) .exam-counter-value { background: #7fb3e0 !important; }

/* --- Aviso de tiempo agotado --- */
#test[data-start-mode="exam"] .exam-time-up {
    background: #f0ad4e !important;
    border-radius: 3px !important;
    color: #ffffff !important;
}
/* ============================================================
   EXAMEN CLÁSICO — correcciones de maquetación
   ============================================================
   Visto en la captura del reskin: las tres fichas de estado salían a ancho
   completo (una por línea), las respuestas TAK/NIE salían apiladas y las
   etiquetas de los contadores se solapaban. */

/* 1) Las fichas de estado, una al lado de otra (no a ancho completo) */
#test[data-start-mode="exam"] .exam-status {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
}
#test[data-start-mode="exam"] .exam-status li {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 !important;
}

/* 2) Contadores: etiqueta en su linea y sin solaparse con el valor */
#test[data-start-mode="exam"] .exam-counter {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.15rem !important;
}
#test[data-start-mode="exam"] .exam-counter-label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    font-size: 0.7rem !important;
    text-align: center !important;
}
#test[data-start-mode="exam"] .exam-counter-value {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.2rem 0.4rem !important;
    line-height: 1.3 !important;
}

/* 3) TAK / NIE: en la misma linea, centradas y pequenas */
#test[data-start-mode="exam"] .question-answers .yes-no,
#test[data-start-mode="exam"] .yes-no {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem !important;
    max-width: 22rem !important;
    margin: 0.25rem auto 0 !important;
}
#test[data-start-mode="exam"] .answer-btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 7.5rem !important;
}
/* ============================================================
   EXAMEN CLÁSICO — las tres fichas en una línea y con aire debajo
   ============================================================
   Se veían una debajo de otra (el texto se partía dentro de cada ficha y la
   lista se estrechaba). Se fuerza fila, sin partir el texto, y se añade un
   espaciado generoso debajo de la barra para dar aire al test. */

#test[data-start-mode="exam"] .exam-status {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1.75rem !important;
    padding: 0 0 0.25rem !important;
}

#test[data-start-mode="exam"] .exam-status li {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#test[data-start-mode="exam"] .exam-status-label,
#test[data-start-mode="exam"] .exam-status-value {
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
}

/* Un poco más de aire entre la barra y el contenido del examen */
#test[data-start-mode="exam"] .row { margin-top: 0.25rem; }
/* ============================================================
   EXAMEN CLÁSICO — los dos contadores, alineados
   ============================================================
   "Pytania podstawowe: 1 / 20" y "Pytania specjalistyczne: 0 / 12": la segunda
   etiqueta ocupa dos líneas, así que los recuadros de valor quedaban a alturas
   distintas. Se igualan con una rejilla de dos columnas, etiquetas de la misma
   altura y los valores pegados abajo. */

#test[data-start-mode="exam"] .exam-counters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: end !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

#test[data-start-mode="exam"] .exam-counter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.25rem !important;
    height: 100% !important;
    min-width: 0 !important;
}

#test[data-start-mode="exam"] .exam-counter-label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    /* Las dos etiquetas ocupan lo mismo, tengan una línea o dos */
    min-height: 2.3em !important;
    line-height: 1.15 !important;
    font-size: 0.7rem !important;
    text-align: center !important;
    white-space: normal !important;
}

#test[data-start-mode="exam"] .exam-counter-value {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.2rem 0.4rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Aviso cuando queda poco tiempo (< 5 min): el valor del reloj va en rojo.
   El reloj del examen está en la barra de estado (antes se repetía en el
   lateral y se ha quitado de ahí). */
#test[data-start-mode="exam"] .exam-status-value--low {
    background: #d9534f !important;
}
/* ============================================================
   Repaso del test: lista de preguntas concretas a repasar
   ------------------------------------------------------------
   Cada tema flojo lleva debajo sus preguntas, con el número oficial de la base
   WORD, sus puntos y el texto. Antes sólo salía el código del bloque («W16»),
   que no le dice al alumno a qué pregunta volver. Y el botón de powtórka
   błędów del resumen, que funciona sin cuenta.
   ============================================================ */

.exam-review-questions {
    display: grid;
    gap: 0.4rem;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}
.exam-review-question {
    padding: 0.5rem 0.6rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-left: 3px solid #DC2626;
    border-radius: 9px;
}
.exam-review-question.is-unanswered { border-left-color: #F59E0B; }
.exam-review-q-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.exam-review-q-no {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0a0a0a;
}
.exam-review-q-meta {
    font-size: 0.75rem;
    color: #6B7280;
}
.exam-review-question.is-unanswered .exam-review-q-meta { color: #B45309; }
.exam-review-q-text {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #4B5563;
}
.exam-review-q-more {
    padding-left: 0.2rem;
    font-size: 0.75rem;
    color: #6B7280;
}
.exam-review-guest-hint {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}
.exam-review-guest-hint i { margin-right: 0.3rem; color: #1C94F5; }

/* Botón de powtórka błędów en el resumen del test (funciona sin cuenta) */
.summary-repeat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0.5rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, #E8F3FE 0%, #F7FBFF 100%);
    border: 1px solid #CDE6FB;
    border-radius: 14px;
}
.summary-repeat-title {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #0a0a0a;
}
.summary-repeat-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #4B5563;
}
.summary-repeat-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .summary-repeat { padding: 0.8rem 0.9rem; }
    .summary-repeat-btn { width: 100%; justify-content: center; }
}
/* «O co chcemy zapytać» del banco oficial: describe de qué va el bloque,
   porque el código (W9, W12…) no le dice nada a nadie. */
.exam-review-q-intent {
    display: block;
    margin-top: 0.25rem;
    padding-left: 0.55rem;
    border-left: 2px solid #CDE6FB;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #0a7fd6;
}

/* ---------- Hero en monitores grandes ----------
   Hasta ahora el hero se quedaba clavado en 34rem (680px) midiera lo que midiera
   la pantalla. En un portátil eso está bien, pero en un monitor grande la
   primera impresión enseñaba la banda negra de abajo y parecía que la sección no
   llegaba a cubrirla. A partir de 1600px de ancho (que ya no es un portátil) el
   hero ocupa la pantalla completa.

   Va con `max()` para que en ventanas anchas y bajas (p. ej. 1600x600) no
   encoja por debajo de los 34rem de siempre, y el corte en 1600px deja intactos
   portátil y móvil: por debajo de esa anchura no cambia absolutamente nada.
   La franja de arriba (3.1rem) se sube dentro del hero con un margen negativo,
   así que el hero empieza en 0 y 100vh lo lleva justo al borde de la pantalla;
   no hay que restarle la altura de la barra. */
@media screen and (min-width: 1600px) {
    .hero-friendly {
        min-height: max(34rem, 100vh);
    }
}

/* ---------- Asistente de arranque del test (pasos) ----------
   Antes categorías, puntuación y orden iban apilados en la misma pantalla: había
   que bajar para ver lo que quedaba por elegir y el botón de empezar salía
   apagado al final. Ahora se pregunta una cosa por paso y los botones de
   navegación están siempre a la vista.

   Solo se añade la "cromo" del asistente: los botones de categorías, puntuación
   y orden siguen con las clases de siempre (.categories-list .btn, .selected…)
   para no duplicar estilos ni pelearse con las reglas que ya había. */
#test .wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

#test .wizard-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

#test .wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #dbe4ee;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#test .wizard-dot.is-done { background: #9ccbf7; }

#test .wizard-dot.is-on {
    width: 24px;
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
}

#test .wizard-count {
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
}

/* Solo se enseña el paso activo: así la tarjeta no crece y no hay que bajar. */
#test .wizard-step { display: none; }
#test .wizard-step.is-on { display: block; }

/* El foco va al título al cambiar de paso (teclado y lectores de pantalla). */
#test .wizard-step h2:focus { outline: none; }
#test .wizard-step h2:focus-visible {
    outline: 2px solid #1C94F5;
    outline-offset: 5px;
    border-radius: 6px;
}

/* `#test .app-settings-holder h2` (id + clase + etiqueta) gana a un selector con
   una clase menos, así que el margen de arriba se declara con la misma forma. */
#test .app-settings-holder h2.wizard-h2-sep { margin-top: 2.25rem; }

/* --- Paso 2: tipo de pregunta --- */
#test .level-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    max-width: 34rem;
    margin: 0 auto;
}

@media (min-width: 576px) {
    #test .level-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#test .level-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.1rem 0.8rem;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: center;
    font-family: "Poppins", sans-serif;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#test .level-tile i {
    font-size: 1.15rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

#test .level-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

#test .level-tile .level-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #1f2937;
}

#test .level-tile .level-sub {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #6b7280;
}

#test .level-tile:hover {
    transform: translateY(-1px);
    border-color: #1C94F5;
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.25);
}

#test .level-tile:hover i { color: #1C94F5; }

#test .level-tile.selected {
    background: linear-gradient(135deg, #1C94F5 0%, #0f7fd6 100%);
    border-color: #1C94F5;
    box-shadow: 0 4px 14px -2px rgba(28, 148, 245, 0.45);
}

#test .level-tile.selected i,
#test .level-tile.selected .level-title,
#test .level-tile.selected .level-sub { color: #ffffff; }

#test .level-tile.selected .level-sub { opacity: 0.88; }

#test .level-tile:focus-visible {
    outline: 2px solid #1C94F5;
    outline-offset: 3px;
}

/* --- Resumen de lo elegido, antes de empezar --- */
#test .wizard-recap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(28, 148, 245, 0.06);
    border-radius: 12px;
    font-size: 0.85rem;
    color: #374151;
}

#test .wizard-recap-sep { color: #9ca3af; }

#test .wizard-recap-edit {
    padding: 0;
    border: 0;
    background: none;
    color: #1C94F5;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Navegación entre pasos --- */
#test .wizard-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* El botón secundario: mismo tamaño que el principal, pero sin peso visual.
   Necesita !important porque `.kurs-app .app-start-holder .buttons button` fija
   fondo, color y borde con !important, y si no, «Wstecz» saldría azul igual que
   «Dalej» y no se distinguiría cuál es el botón de avanzar. */
#test .wizard-nav .btn-ghost {
    background: #ffffff !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: none !important;
    padding: 0.95rem 1.75rem !important;
}

#test .wizard-nav .btn-ghost:hover:not(:disabled) {
    background: #ffffff !important;
    color: #1C94F5 !important;
    border-color: #1C94F5 !important;
    box-shadow: 0 4px 12px -2px rgba(28, 148, 245, 0.25) !important;
}

/* La flecha de «Wstecz» va DELANTE del texto, y la regla general
   (.buttons button i) le pone el margen a la izquierda porque está pensada para
   la flecha de después. */
#test .wizard-nav .btn-ghost i {
    margin-left: 0 !important;
    margin-right: 0.5rem;
}

#test .wizard-hint { margin-top: 0.9rem; }

#test .wizard-hint i { color: #9ca3af; }

@media (max-width: 575.98px) {
    /* En el móvil las tres tarjetas apiladas en vertical ocupaban casi toda la
       pantalla. Con el icono a la izquierda y el texto al lado bajan a la mitad y
       el asistente se ve entero sin bajar. */
    #test .level-tile {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
    }

    #test .level-tile i { font-size: 1.3rem; flex: 0 0 auto; }

    #test .level-text { flex: 1 1 auto; }

    #test .wizard-nav .btn,
    #test .wizard-nav .btn-ghost {
        width: 100%;
    }

    #test .wizard-nav .btn-ghost { order: 2; }
}

/* En el panel el asistente queda dentro de una columna más estrecha. */
.account-page #test .wizard-progress { margin-bottom: 1.25rem; }

/* ---------- Panel: los ajustes del test y su sitio en la pantalla ----------
   Dos problemas vistos en el panel del alumno:

   1. Los ajustes (categoría, puntuación, orden y —nuevo— tipo de pregunta) son
      cuatro píldoras oscuras en una fila que no cabe: la cuarta se caía sola a
      una segunda fila y quedaba descolgada. Ahora van en una rejilla de 2×2, que
      es simétrica a cualquier anchura y deja sitio para la etiqueta y el botón.

   2. El test arrancaba pegado a la cabecera y todo el aire sobraba por abajo.
      Mientras se responde, el bloque se centra en lo que queda de pantalla. */
@media (min-width: 992px) {
    /* Solo cuando existe la cuarta píldora (el tipo de pregunta): con tres la
       fila cabe y se deja como estaba. */
    body #test ul.settings-buttons:has(> li:nth-child(4)) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.65rem;
        width: 100%;
        margin-bottom: 1rem !important;
    }

    body #test ul.settings-buttons:has(> li:nth-child(4)) > li {
        width: auto !important;
        margin: 0 !important;
    }

    /* La etiqueta a la izquierda y «ZMIEŃ» pegado al borde derecho: así las
       cuatro píldoras miden lo mismo y se leen como una tabla de ajustes. */
    body #test ul.settings-buttons:has(> li:nth-child(4)) > li > div {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    body #test ul.settings-buttons:has(> li:nth-child(4)) > li > div > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body #test ul.settings-buttons:has(> li:nth-child(4)) > li > div .btn-yellow {
        margin-left: auto;
        flex: 0 0 auto;
    }

    body.account-page.test-running #test {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - 6rem);
    }

    /* Y el menú de la cuenta, a la misma altura que el test.
       En el resto del panel la barra va alineada con el contenido (medido: los dos
       empiezan en el mismo píxel). Durante el test no hay nada encima, así que se
       quedaba pegada a la cabecera mientras el test sí tenía aire: se veía
       descolgada y costaba llegar a «Wyloguj się». Se centra en la misma franja
       que el test, así que se mueve con la altura de la pantalla igual que él. */
    body.account-page.test-running .col-lg-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* `max()` para que en ventanas bajas (portátiles de 768 de alto, que con
           la barra del navegador se quedan en ~650) la franja no sea más pequeña
           que el propio menú: si no, al centrarlo se saldría por arriba y pisaría
           la cabecera. */
        height: max(31rem, calc(100vh - 6rem));
    }
}

/* En pantalla estrecha las cuatro píldoras van una detrás de otra. */
@media (max-width: 991.98px) {
    body #test ul.settings-buttons:has(> li:nth-child(4)) > li { width: 100% !important; }
    body #test ul.settings-buttons:has(> li:nth-child(4)) > li > div { width: 100%; }
}