/* Bottoni Bootstrap: si sovrascrivono anche le custom properties --bs-btn-*,
   altrimenti gli stati :hover/:active/:focus (letti da Bootstrap da quelle
   variabili) restano sul blu di default invece del brand. */
.btn-primary {
    --bs-btn-color: var(--apl-ink, #0b1726);
    --bs-btn-bg: var(--apl-gold, #D3A84E);
    --bs-btn-border-color: var(--apl-gold, #D3A84E);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--apl-gold-dark, #b98f3a);
    --bs-btn-hover-border-color: var(--apl-gold-dark, #b98f3a);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--apl-gold-dark, #b98f3a);
    --bs-btn-active-border-color: var(--apl-gold-dark, #b98f3a);
    --bs-btn-focus-shadow-rgb: 211, 168, 78;
    border-color: var(--apl-gold, #D3A84E);
    background-color: var(--apl-gold, #D3A84E);
    color: var(--apl-ink, #0b1726);
}

.btn-primary:hover {
    border-color: var(--apl-gold-dark, #b98f3a);
    background-color: var(--apl-gold-dark, #b98f3a);
    color: #000;
}

.btn-outline-primary {
    --bs-btn-color: var(--apl-blue, #325D98);
    --bs-btn-border-color: var(--apl-blue, #325D98);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--apl-blue, #325D98);
    --bs-btn-hover-border-color: var(--apl-blue, #325D98);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--apl-blue-dark, #24446f);
    --bs-btn-active-border-color: var(--apl-blue-dark, #24446f);
    --bs-btn-focus-shadow-rgb: 50, 93, 152;
    border-color: var(--apl-blue, #325D98);
    color: var(--apl-blue, #325D98);
}

/* Il menu "Accedi"/"Area riservata" combina .btn-outline-primary e .btn-light
   sullo stesso link (menu-anchor_css della voce di menu): le due varianti
   Bootstrap si contendono --bs-btn-hover/active-color, e senza un colore
   testo esplicito qui il testo puo' risultare scuro su sfondo blu (invisibile)
   in stato hover/attivo/aperto (es. sottomenu "Area riservata" espanso). */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--apl-blue, #325D98);
    border-color: var(--apl-blue, #325D98);
    color: #fff !important;
}

/* Logo + testo nell'header */
#sp-logo .sp-column {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.apl-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-family: 'Public Sans', sans-serif;
}

.apl-logo-text .apl-logo-line1 {
    font-weight: 800;
    font-size: .95rem;
    color: var(--apl-navy, #16283f);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.apl-logo-text .apl-logo-line2 {
    font-weight: 600;
    font-size: .8rem;
    color: var(--apl-blue, #325D98);
    text-transform: uppercase;
    letter-spacing: .03em;
}

@media (max-width: 575px) {
    .apl-logo-text .apl-logo-line1 {
        font-size: .78rem;
    }

    .apl-logo-text .apl-logo-line2 {
        font-size: .72rem;
    }
}

/* Homepage: rimuove i 100px di margine sopra/sotto imposti dal core del template */
body.itemid-101 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* Nasconde l'icona/link di modifica articolo per gli utenti loggati con permessi di edit.
   Selettore composto (non solo .article-can-edit) perche' l'elemento porta anche la
   utility Bootstrap 5 .d-flex, che ha sempre !important: a parita' di !important vince
   la specificita' piu' alta, non l'ordine nel file. */
.article-details .article-can-edit {
    display: none !important;
}

/* Footer: il colore h2 globale del template (blu scuro) e' illeggibile sullo sfondo navy del footer */
#sp-footer h2,
#sp-footer h3,
#sp-footer .apl-footer-title {
    color: #fff !important;
    font-size: 1.3rem;
}

#sp-footer .apl-footer-title {
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .5rem;
}

#sp-footer a {
    text-decoration: none;
}

#sp-footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Brand Accademia Polizia Locale - colori ripresi dallo stemma (test-nuovologo-apl.svg)
   ========================================================================== */
/* Caratteri ospitati in locale (media/apl-fonts): Fraunces, Public Sans, Open Sans - nessuna richiesta a Google Fonts */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/open-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/open-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/open-sans-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/open-sans-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../../../media/apl-fonts/fraunces-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../../../media/apl-fonts/fraunces-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../../../media/apl-fonts/fraunces-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../../../media/apl-fonts/fraunces-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/public-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../../media/apl-fonts/public-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --apl-blue: #325D98;
    --apl-blue-dark: #24446f;
    --apl-gold: #D3A84E;
    --apl-gold-dark: #b98f3a;
    --apl-navy: #16283f;
    /* Testo sui bottoni oro: 8.1:1 su --apl-gold (AAA). Su --apl-gold-dark (hover) serve #000: 7.05:1 */
    --apl-ink: #0b1726;
    /* Oro per TESTO su fondi chiari (eyebrow, date, "Leggi tutto"...): --apl-gold-dark
       si ferma a 2.9:1 sul bianco; questo tiene 4.8:1 anche su #f7faff / #eef2f7 (AA) */
    --apl-gold-text: #86651f;
    /* Grigio per testi secondari (ruoli docenti, note, durata piano): 5.5:1 sul bianco */
    --apl-muted: #5b6b7a;
}

.apl-serif {
    font-family: 'Fraunces', serif;
}

.apl-eyebrow {
    display: inline-block;
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--apl-gold-text);
}

.btn-apl-outline,
a.btn-apl-outline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 2px solid var(--apl-blue);
    color: var(--apl-blue);
    border-radius: 6px;
    font-weight: 600;
    padding: .5rem .9rem;
    transition: background-color .15s ease, color .15s ease;
}

.btn-apl-outline:hover,
a.btn-apl-outline:hover {
    background: var(--apl-blue);
    color: #fff;
}

.btn-apl-gold,
a.btn-apl-gold {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--apl-gold);
    border: 2px solid var(--apl-gold);
    color: var(--apl-ink);
    border-radius: 6px;
    font-weight: 700;
    padding: .5rem .9rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn-apl-gold:hover,
a.btn-apl-gold:hover {
    background: var(--apl-gold-dark);
    border-color: var(--apl-gold-dark);
    color: #000;
}

/* Full-bleed: sezione che rompe il .container e va da bordo a bordo viewport */
.apl-full-bleed {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

body {
    overflow-x: hidden;
}

/* Hero v2 - gradiente + badge + serif */
.apl-hero-v2 {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
}

.apl-hero-v2 img.apl-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 25%;
}

.apl-hero-v2 .apl-hero-overlay {
    position: absolute;
    inset: 0;
    /* piu' coprente fino a ~55%, dove finisce la colonna del testo */
    background: linear-gradient(100deg, rgba(15, 26, 43, .95) 0%, rgba(15, 26, 43, .88) 42%, rgba(15, 26, 43, .55) 62%, rgba(15, 26, 43, .18) 100%);
}

.apl-hero-v2 .apl-hero-content {
    position: relative;
    max-width: 660px;
    padding: 2.5rem 0;
}

/* Pagine interne: stessa altezza per tutti i banner. L'altezza era scritta a mano
   nel contenuto di ogni pagina (style="min-height:340/360/420px"), da qui le differenze;
   !important serve a vincere sullo stile in linea. La home resta a 620px. */
@media (min-width: 768px) {
    body:not(.itemid-101) .apl-hero-v2 {
        min-height: 480px !important;
    }
}

/* Telefono: altezza data dal contenuto (lo stile in linea imponeva 340-420px) */
@media (max-width: 767px) {
    body:not(.itemid-101) .apl-hero-v2 {
        min-height: 0 !important;
    }
}

.apl-hero-badge {
    display: inline-block;
    background: var(--apl-gold);
    color: var(--apl-navy);
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .78rem;
    padding: .5rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.1rem;
}

.apl-hero-v2 h1 {
    font-family: 'Fraunces', serif;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .apl-hero-v2 h1 {
        font-size: 1.9rem;
    }

    .apl-hero-v2 {
        min-height: 0;
        padding: 2rem 0;
    }
}

/* Sottotitolo: il .lead di Bootstrap e' peso 300 (troppo sottile sulla foto) */
.apl-hero-v2 p.lead {
    color: #f3f6fa;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.55;
    max-width: 560px;
    text-shadow: 0 1px 3px rgba(11, 23, 38, .55);
}

.apl-hero-v2 p.lead a {
    color: var(--apl-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767px) {
    .apl-hero-v2 p.lead {
        font-size: 1.08rem;
    }
}

/* Home - fascia numeri/statistiche, subito dopo l'hero */
.apl-stats-row {
    padding: 1.5rem 0;
}

.apl-stat-number {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1.1;
    /* l'oro pieno su bianco e' 2.2:1: per un numero grande serve almeno 3:1 */
    color: #9a7429;
}

.apl-stat-label {
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .9rem;
    margin-top: .35rem;
}

/* Home - carosello docenti dentro la sezione video (sfondo navy) */
.apl-docenti-home {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.apl-docenti-home .apl-docenti-swiper .swiper-button-prev,
.apl-docenti-home .apl-docenti-swiper .swiper-button-next {
    background: rgba(255, 255, 255, .92);
}

/* Sezione 4/5 card corsi (ex SP Page Builder) */
.apl-corsi-intro {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    color: var(--apl-navy);
    margin-bottom: 2rem;
}

.apl-course-card {
    background: #F7FAFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.apl-course-card img {
    width: 100%;
    aspect-ratio: 5 / 4;
    height: auto;
    object-fit: cover;
}

/* Variante scura per le card "extra" (libro, vacanza studio) */
.apl-course-card.apl-card-dark {
    background: var(--apl-navy);
}

.apl-course-card.apl-card-dark .apl-eyebrow {
    color: var(--apl-gold);
}

.apl-course-card.apl-card-dark h3 {
    color: #fff;
}

.apl-course-card.apl-card-dark p {
    color: #C7D0DB;
}

.apl-card-dark .btn-apl-outline {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.apl-card-dark .btn-apl-outline:hover {
    background: #fff;
    color: var(--apl-navy);
}

/* Carosello card corsi: scorrimento automatico + manuale (drag/touch/frecce) */
.apl-courses-swiper {
    padding: .5rem 3.2rem 2.5rem;
    position: relative;
}

.apl-courses-swiper .swiper-slide {
    height: auto;
    display: flex;
    width: 280px;
}

.apl-courses-swiper .swiper-slide > .apl-course-card {
    width: 100%;
}

.apl-courses-swiper .swiper-button-prev,
.apl-courses-swiper .swiper-button-next {
    width: 2.6rem;
    height: 2.6rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .15);
    color: var(--apl-navy);
}

.apl-courses-swiper .swiper-button-prev:after,
.apl-courses-swiper .swiper-button-next:after {
    font-size: 1.1rem;
    font-weight: 700;
}

.apl-courses-swiper .swiper-button-prev:hover,
.apl-courses-swiper .swiper-button-next:hover {
    background: var(--apl-gold);
    color: var(--apl-navy);
}

.apl-courses-swiper .swiper-button-disabled {
    opacity: .35;
}

.apl-courses-swiper .swiper-pagination-bullet-active {
    background: var(--apl-gold);
}

@media (max-width: 576px) {
    .apl-courses-swiper {
        padding: .5rem 2.6rem 2.2rem;
    }

    .apl-courses-swiper .swiper-slide {
        width: 240px;
    }

    /* frecce all'altezza delle immagini (card da 240px: immagine alta 192px), non sopra titoli e testo */
    .apl-courses-swiper .swiper-button-prev,
    .apl-courses-swiper .swiper-button-next {
        top: calc(.5rem + 96px);
    }
}

.apl-course-card .apl-course-body {
    position: relative;
    padding: 1.1rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.apl-course-card .apl-eyebrow {
    margin-bottom: .3rem;
}

.apl-course-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--apl-navy);
    margin-bottom: .5rem;
    line-height: 1.25;
}

.apl-course-card p {
    color: #5b6b7a;
    font-size: .92rem;
    flex-grow: 1;
}

.apl-course-card .apl-course-btns {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin-top: .5rem;
}

.apl-badge-new {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background: #E0151A;
    color: #fff;
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .75rem;
    padding: .3rem .7rem;
    border-radius: 100px;
}

/* Card "Il libro" in evidenza */
.apl-book-card {
    background: var(--apl-navy);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    height: 100%;
}

.apl-book-card img {
    width: 180px;
    object-fit: cover;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 100%;
}

.apl-book-card .apl-book-body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
}

.apl-book-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.apl-book-card p {
    color: #C7D0DB;
    margin-bottom: 0;
}

.apl-book-card .apl-eyebrow {
    color: var(--apl-gold);
}

/* Le foto possono arrivare avvolte in <picture> (versione WebP): il <picture> non deve fare da scatola,
   altrimenti nel contenitore flex si restringe e l'immagine diventa minuscola (era 32px). */
.apl-book-card > picture,
.lg-gallery-item > picture,
.apl-gallery-grid a > picture {
    display: contents;
}

/* Bottoni della card del libro: stessa riga distanziata su desktop (le regole di .apl-course-btns
   valgono solo dentro le card dei corsi, qui i bottoni restavano attaccati) */
.apl-book-card .apl-course-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.apl-book-card .apl-course-btns > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

@media (max-width: 576px) {
    .apl-book-card {
        flex-direction: column;
    }

    /* telefono: uno sotto l'altro, a tutta larghezza */
    .apl-book-card .apl-course-btns {
        flex-direction: column;
        gap: .7rem;
    }

    .apl-book-card .apl-course-btns > a {
        width: 100%;
        min-height: 46px;
    }

    .apl-book-card img {
        width: 100%;
        height: 220px;
        min-height: 0;
        object-position: 60% 50%;
    }
}

/* Formula Guida Sicura + ISO */
.apl-partner-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.apl-partner-card img.apl-partner-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.apl-partner-card .apl-partner-body {
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-grow: 1;
}

.apl-partner-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    color: var(--apl-navy);
}

.apl-partner-card p {
    color: #5b6b7a;
    flex-grow: 1;
}

.apl-partner-logo-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .5rem;
    padding-top: .9rem;
    border-top: 1px solid #EEF0F3;
}

.apl-partner-logo-row img {
    height: 26px;
    width: auto;
}

.apl-iso-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    border-top: 6px solid var(--apl-gold);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.4rem 2.6rem;
    gap: .8rem;
}

.apl-iso-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    color: var(--apl-navy);
    line-height: 1.5;
}

/* CTA finale */
.apl-cta-final {
    background: var(--apl-gold);
}

.apl-cta-final h2 {
    font-family: 'Fraunces', serif;
    color: var(--apl-navy);
    font-weight: 600;
}

/* I bottoni di questa fascia sono outline navy su sfondo oro: l'hover blu di
   default di .btn-apl-outline (pensato per sfondi chiari) stona qui - meglio
   un hover bianco, coerente con la coppia navy/oro della sezione. */
.apl-cta-final .btn-apl-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--apl-navy);
}

/* Intro metodo */
.apl-section-eyebrow-block h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
}

.apl-rule-gold {
    width: 64px;
    height: 4px;
    background: var(--apl-gold);
    border-radius: 2px;
    margin: .6rem auto 0;
}

/* Sezione video v2 */
.apl-video-card {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9/16;
    border-radius: 14px;
    background: linear-gradient(160deg, #1E3350, #0F1A2B);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    overflow: hidden;
    position: relative;
}

.apl-video-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ticker news home */
.apl-ticker {
    display: flex;
    align-items: center;
    background: var(--apl-navy);
    border-radius: 8px;
    overflow: hidden;
}

.apl-ticker-label {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--apl-gold);
    color: var(--apl-navy);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
    padding: 0 1.1rem;
}

.apl-ticker-track {
    overflow: hidden;
    flex-grow: 1;
}

.apl-ticker-inner {
    display: flex;
    width: max-content;
    /* durata calcolata nel layout home_news_ticker.php in base alla lunghezza delle news */
    animation: apl-ticker-scroll var(--apl-ticker-duration, 12s) linear infinite;
}

.apl-ticker:hover .apl-ticker-inner {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .apl-ticker-inner {
        animation-play-state: paused;
    }
}

.apl-ticker-item {
    color: #fff;
    white-space: nowrap;
    padding: .6rem 1.5rem;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.apl-ticker-item:hover {
    color: var(--apl-gold);
}

@keyframes apl-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Testimonianze home */
.apl-testimonials .carousel-inner {
    min-height: 300px;
    display: flex;
    align-items: center;
}

/* Solo la slide attiva riceve il flex per la centratura verticale: mai su
   .carousel-item in generale, altrimenti si rompe lo show/hide di Bootstrap
   e le slide restano tutte visibili sovrapposte. */
.apl-testimonials .carousel-item.active {
    display: flex;
    align-items: center;
    width: 100%;
}

.apl-testimonials .apl-testimonial-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 3rem;
}

.carousel-item .apl-testimonial-photo {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .15);
}

.apl-testimonial-quote {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--apl-navy);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

.apl-testimonial-readmore {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--apl-gold-text);
    white-space: nowrap;
    margin-left: .35rem;
}

.apl-testimonial-readmore:hover {
    color: var(--apl-blue);
}

.apl-testimonial-author {
    font-weight: 700;
    color: var(--apl-blue);
    margin-bottom: 0;
}

.apl-testimonials .carousel-control-prev,
.apl-testimonials .carousel-control-next {
    width: 3rem;
    filter: invert(1) grayscale(1) brightness(.4);
}

@media (max-width: 576px) {
    .apl-testimonials .carousel-item {
        min-height: 360px;
    }

    .apl-testimonial-card {
        flex-direction: column;
        text-align: center;
        padding: 1rem 2.5rem;
    }

    .apl-testimonial-quote {
        -webkit-line-clamp: 9;
    }
}

.text-shadow-dark {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.sp-megamenu-parent.menu-animation-fade-up .sp-has-child:hover>.sp-dropdown {
    animation: spFadeInUp 0 ease-in;
}

#sp-header {
    background: #fff;
}


/* #sp-header .logo a {
    border: 2px solid #edc13e;
    padding: 2px 6px 2px 0px;
    border-radius: 100px;
    background: #254081;
} */

.logo-image.d-lg-inline-block {
    padding: 3px 8px 3px 7px
}

/* Menu mobile (offcanvas): i bottoni Acquista/Accedi (Area riservata da
   loggati) ereditano il font-size 18px e lh-lg (line-height:2) delle voci di
   menu, che li rende enormi, e non hanno margine tra loro (si toccano). */
.offcanvas-menu .mod-menu .btn {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: .6rem;
    margin-right: 0 !important;
    width: 100%;
    justify-content: center;
}

/* La freccina del sotto-menu (es. "Area riservata" da loggati) e' pensata
   per le voci normali (right:-10px, fuori dal testo); sul bottone a
   larghezza piena finisce quasi fuori dal bordo del pannello: la rientriamo */
/* Voce attiva del menu mobile: il template colora di blu il link attivo, anche il bottone
   oro "Acquista" (blu su oro = 3:1). Testo come gli altri bottoni oro. */
.offcanvas-menu .mod-menu .btn-primary,
.offcanvas-menu .mod-menu .active > .btn-primary {
    color: var(--apl-ink) !important;
}

.offcanvas-menu .mod-menu .btn .menu-toggler {
    right: 16px !important;
}

/* Menu header troppo largo tra 992px e 1399px: le voci + Guida all'uso +
   Acquista + Accedi/Area riservata non entrano nello spazio disponibile.
   Da 992 a 1200px si riduce tutto al minimo leggibile (logo, font, padding
   delle voci, padding/margine dei bottoni e delle icone); da 1200 a 1400px
   si torna in modo fluido (calc su 100vw) alla dimensione normale, che dai
   1400px in poi resta quella di default (nessun override necessario). */

/* Bootstrap fa il "wrap" dell'intera riga logo+menu su una seconda riga (che
   finisce sotto, sovrapposta all'hero) invece di stringere davvero il menu,
   non appena il contenuto (specialmente "Area riservata" da loggati, piu'
   lungo di "Accedi") supera lo spazio disponibile. Va impedito qui, non solo
   nella fascia 992-1199: la larghezza del container Bootstrap resta fissa
   (~960px) per tutto il "lg" (992-1199.98), quindi senza questa regola basta
   un'etichetta piu' lunga per rompere il layout anche con font/padding gia'
   ridotti. */
@media (min-width: 992px) {
    .row:has(#sp-logo) {
        flex-wrap: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .logo-image.d-lg-inline-block {
        height: 46px !important;
        width: auto !important;
        padding: 0 !important;
    }

    #sp-logo .sp-column {
        gap: 0;
    }

    .sp-megamenu-wrapper {
        flex-shrink: 0;
    }

    /* Il core compensa il padding di 15px del primo item con margin-left:-15px
       sull'ul, per allinearne il testo al bordo del contenitore. Riducendo il
       padding va ridotta di pari passo, altrimenti il menu "sbanda" a sinistra
       (sovrapponendosi al logo) invece di restringersi davvero. */
    .sp-megamenu-parent {
        margin-left: -8px;
    }

    .sp-megamenu-parent>li>a {
        font-size: 13px !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sp-megamenu-parent .btn.px-3 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .sp-megamenu-parent .btn.py-1 {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .sp-megamenu-parent .btn.me-3 {
        margin-right: 8px !important;
    }

    .sp-megamenu-parent span.pe-2 {
        padding-right: 4px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .logo-image.d-lg-inline-block {
        height: calc(46px + 24 * (100vw - 1200px) / 200) !important;
        width: auto !important;
    }

    #sp-logo .sp-column {
        gap: calc(10.4px * (100vw - 1200px) / 200);
    }

    .sp-megamenu-parent {
        margin-left: calc(-6px - 9 * (100vw - 1200px) / 200);
    }

    .sp-megamenu-parent .btn.me-3 {
        margin-right: calc(8px + 8 * (100vw - 1200px) / 200) !important;
    }
}

/* Testo e padding delle voci di menu: valori fissi per fascia (sotto i 1200px vedi sopra,
   da 1400px restano quelli di base del template) */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .logo-image.d-lg-inline-block {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .sp-megamenu-parent>li>a {
        font-size: 13px !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .sp-megamenu-parent .btn.px-3 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .sp-megamenu-parent .btn.py-1 {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .sp-megamenu-parent span.pe-2 {
        padding-right: 5px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
    .logo-image.d-lg-inline-block {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 5px !important;
        padding-right: 6px !important;
    }

    .sp-megamenu-parent>li>a {
        font-size: 14px !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .sp-megamenu-parent .btn.px-3 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .sp-megamenu-parent .btn.py-1 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .sp-megamenu-parent span.pe-2 {
        padding-right: 7px !important;
    }
}

@media (min-width: 1400px) {
    .sp-megamenu-parent>li>a {
        font-size: 15px !important;
    }
}


.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    text-transform: uppercase;
}

.sp-megamenu-parent>li.active>a {
    font-weight: 700;
}

.sp-megamenu-parent>li>a.btn {
    color: var(--bs-btn-color);
}

.sp-megamenu-parent>li>a.btn:hover {
    color: var(--bs-btn-hover-color);
}


/* Messaggio alert */
#system-message-container {
    position: relative;
    bottom: unset;
    right: unset;
    max-width: unset;
    z-index: unset;
}

#system-message-container joomla-alert {
    font-size: 16px;
    padding: 15px 30px;
}

/* Messaggi di Joomla in una modale (js/custom.js): il contenitore resta vuoto */
#system-message-container.apl-msg-in-modal {
    margin: 0;
}

/* sopra l'header sticky di Helix (z-index 9999), come la modale del docente */
.apl-msg-modal {
    z-index: 10060;
    --apl-msg-color: #24446f;
    --apl-msg-bg: #e8eef7;
}

body:has(.apl-msg-modal.show) .modal-backdrop {
    z-index: 10050;
}

.apl-msg-modal[data-type="danger"] { --apl-msg-color: #a12a22; --apl-msg-bg: #fdecea; }
.apl-msg-modal[data-type="warning"] { --apl-msg-color: #8a6420; --apl-msg-bg: #fff4dc; }
.apl-msg-modal[data-type="success"] { --apl-msg-color: #1d6b3c; --apl-msg-bg: #e3f4ea; }

.apl-msg-modal .modal-dialog {
    max-width: 460px;
}

.apl-msg-modal .modal-content {
    border: 0;
    border-top: 4px solid var(--apl-msg-color);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(11, 23, 38, .25);
}

.apl-msg-modal .modal-body {
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: center;
}

.apl-msg-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: var(--apl-msg-bg);
    color: var(--apl-msg-color);
}

.apl-msg-modal-title {
    margin: 0 0 .75rem;
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--apl-navy, #16283f);
}

.apl-msg-modal-item {
    margin: 0 0 .6rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #2b3a4d;
}

/* piu' messaggi di tipo diverso: ognuno col suo colore a lato */
.apl-msg-modal-list:has(.apl-msg-modal-item + .apl-msg-modal-item) .apl-msg-modal-item {
    padding: .55rem .8rem;
    border-left: 3px solid var(--apl-msg-color);
    border-radius: 6px;
    background: #f7f9fc;
    text-align: left;
}

.apl-msg-modal-item[data-type="danger"] { --apl-msg-color: #a12a22; }
.apl-msg-modal-item[data-type="warning"] { --apl-msg-color: #8a6420; }
.apl-msg-modal-item[data-type="info"] { --apl-msg-color: #24446f; }
.apl-msg-modal-item[data-type="success"] { --apl-msg-color: #1d6b3c; }

.apl-msg-modal-item a {
    color: var(--apl-blue-dark, #24446f);
    font-weight: 600;
}

.apl-msg-modal-ok {
    min-width: 160px;
    margin-top: .75rem;
}

/* Materie shop */
body.com-osmembership.view-plans #sp-main-body {
    padding-top: 0;
}

body.com-osmembership.view-plans #sp-main-body>.container {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.badge.recommended {
    top: 36px;
    right: -50px;
    padding: 5px 50px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Materia shop */
#osm-plan-item .osm-item-heading-box {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

#osm-plan-item .osm-item-description {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
}


#osm-plan-item .osm-description-details {
    flex: 0 0 auto;
    width: 100%;
}

#osm-plan-item .osm-description-details+div.col-md-5 {
    display: none;
}

/* Materia */
.view-article.materie #sp-main-body>.container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

body.materie #sp-main-body {
    padding-top: 0;
}

/* "visible" serviva al video sticky, ma lasciava scorrere la pagina in orizzontale
   di 15px (righe fluid del template piu' larghe del viewport). "clip" taglia
   l'eccedenza senza creare un contenitore di scroll, quindi lo sticky funziona. */
.view-article.materie .body-innerwrapper {
    overflow-x: clip;
}

.lezione-video-wrapper {
    position: sticky;
    top: 90px;
}

/* ==========================================================================
   Area riservata - pagina singola "Materia" (override
   html/com_content/article/materia.php)
   ========================================================================== */
.apl-materia-page {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.apl-materia-page-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: .4rem 0 0;
}

.apl-docente-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.apl-docente-label {
    display: block;
}

.apl-docente-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    text-decoration: none;
    justify-content: flex-end;
}

.apl-docente-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--apl-gold);
    box-shadow: 0 4px 14px rgba(20, 30, 45, .12);
    flex: 0 0 auto;
}

.apl-docente-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.apl-docente-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--apl-navy);
}

.apl-docente-role {
    font-size: .88rem;
    color: var(--apl-muted);
}

@media (max-width: 991.98px) {
    .apl-docente-block {
        align-items: flex-start;
        margin-top: 1.25rem;
    }

    .apl-docente-card {
        justify-content: flex-start;
    }
}

.apl-materia-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
}

.apl-materia-quicknav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #F0F4FA;
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.1rem;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.apl-materia-quicknav a:hover {
    background: var(--apl-navy);
    color: #fff;
}

.apl-video-section {
    background: #F7FAFF;
    padding: 3rem 0;
    scroll-margin-top: 100px;
}

.indice-videolezioni h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin-bottom: .3rem;
}

.apl-video-duration-tot {
    color: var(--apl-muted);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.apl-playlist {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #fff;
    border-radius: 10px;
    padding: .75rem 1rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .06);
    cursor: pointer;
    color: #45505c;
    transition: box-shadow .15s ease;
}

.playlist-item:hover {
    box-shadow: 0 4px 12px rgba(20, 30, 45, .1);
}

.playlist-item i.fa-circle-play {
    color: var(--apl-gold-dark);
    flex: 0 0 auto;
}

.titolo-indice-videolezioni {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.35;
}

.titolo-indice-videolezioni small {
    font-weight: 400;
    color: var(--apl-muted);
}

.apl-playlist-badge {
    margin-left: auto;
    flex: 0 0 auto;
    background: #F0F4FA;
    color: var(--apl-navy);
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 20px;
}

.playlist-item.active {
    background-color: var(--apl-navy);
    color: #fff;
}

.playlist-item.active .titolo-indice-videolezioni,
.playlist-item.active .titolo-indice-videolezioni small {
    color: #fff;
}

.playlist-item.active i.fa-circle-play {
    color: var(--apl-gold);
}

.playlist-item.active .apl-playlist-badge {
    /* .08 invece di .15: l'oro sul fondo schiarito scendeva a 4.2:1 */
    background: rgba(255, 255, 255, .08);
    color: var(--apl-gold);
}

.apl-materiali-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    scroll-margin-top: 100px;
}

.apl-materiali-section h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin-bottom: 1.5rem;
}

.apl-materia-tabs {
    border-bottom: 2px solid #F0F4FA;
    gap: .3rem;
}

.apl-materia-tabs .nav-link {
    border: 0;
    border-radius: 8px 8px 0 0;
    color: var(--apl-muted);
    font-weight: 600;
    padding: .7rem 1.2rem;
}

.apl-materia-tabs .nav-link.active {
    background: var(--apl-navy);
    color: var(--apl-gold);
}

.apl-materia-tab-content {
    background: #fff;
    border: 1px solid #F0F4FA;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 2rem;
}

/* checkout */
.eb-form-control {
    display: inline-grid;
}

.formError {
    text-align: left;
    position: relative !important;
    top: unset !important;
    left: unset !important;
    margin-top: unset !important;
    right: unset !important;
    opacity: 1 !important;
    order: 1;
}

.formError .formErrorContent {
    width: auto !important;
    background: transparent !important;
    color: #dc3545 !important;
    font-size: 12px;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.formError .formErrorArrow {
    display: none;
}

/* Campi password (input + occhio in un .input-group): l'errore viene inserito dentro il gruppo,
   che e' una riga flex, e finiva di lato. Lo mando a capo sotto input e pulsante. */
.input-group > .formError {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
}

/* L'errore e' il primo figlio del gruppo: ripristino gli angoli arrotondati a sinistra dell'input */
.input-group > .formError + .form-control {
    margin-left: 0;
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

#field_osm_codice_iva .input-group-prepend.inline-display {
    display: flex;
}

.tingle-modal--visible {
    opacity: 0.8;
}

.tingle-modal {
    z-index: 9999;
}

/* ==========================================================================
   Pagina Chi Siamo (stesso stile della Home)
   ========================================================================== */
body.itemid-191 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina Obiettivo raggiunto? (stesso stile della Home)
   ========================================================================== */
body.itemid-343 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina Corsi (stesso stile della Home)
   ========================================================================== */
body.itemid-193 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina Blog (stesso stile della Home)
   ========================================================================== */
body.itemid-189 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina FAQ (stesso stile della Home)
   ========================================================================== */
body.itemid-332 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina Contatti (stesso stile della Home)
   ========================================================================== */
body.itemid-192 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Pagina Guida all'uso (stesso stile della Home)
   ========================================================================== */
body.itemid-241 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

.apl-prose {
    max-width: 780px;
    margin: 0 auto;
    color: #45505c;
    line-height: 1.75;
}

.apl-prose p {
    margin-bottom: 1.1rem;
}

.apl-prose strong {
    color: var(--apl-navy);
}

.apl-quote-card {
    background: #F7FAFF;
    border-left: 4px solid var(--apl-gold);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    color: var(--apl-navy);
    font-style: italic;
}

.apl-doc-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #F7FAFF;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    height: 100%;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.apl-doc-card:hover {
    box-shadow: 0 6px 16px rgba(20, 30, 45, .12);
    transform: translateY(-2px);
}

.apl-doc-card .apl-doc-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--apl-navy);
    color: var(--apl-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.apl-doc-card span.apl-doc-label {
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.35;
}

.apl-address-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--apl-navy);
    border-radius: 10px;
    padding: 1.75rem 2rem;
    color: #fff;
}

.apl-address-card .apl-address-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--apl-gold);
    color: var(--apl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.apl-address-card h3 {
    font-family: 'Fraunces', serif;
    color: #fff;
    margin-bottom: .2rem;
}

.apl-address-card p {
    margin-bottom: 0;
    color: #C7D0DB;
}

.apl-address-card p + p {
    margin-top: .6rem;
}

.apl-address-card p strong {
    color: #fff;
}

.apl-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
}

.apl-gallery-grid a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .1);
}

.apl-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.apl-gallery-grid a:hover img {
    transform: scale(1.06);
}

@media (max-width: 767px) {
    .apl-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.apl-legal-box {
    background: #F7FAFF;
    border: 1px solid #E2E8F2;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    color: #5b6b7a;
    font-size: .88rem;
    line-height: 1.6;
}

.apl-cert-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    padding: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apl-cert-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ==========================================================================
   Pagina Testimonianze (una card per riga, stesso stile Home/Chi Siamo)
   ========================================================================== */
.apl-testimonials-page {
    max-width: 900px;
    margin: 0 auto;
}

.apl-testimonial-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: #F7FAFF;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .07);
    scroll-margin-top: 100px;
}

.apl-testimonial-row:target {
    outline: 3px solid var(--apl-gold);
    outline-offset: 2px;
}

.apl-testimonial-row-photo {
    flex: 0 0 auto;
}

.apl-testimonial-row-photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .15);
}

.apl-testimonial-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.apl-testimonial-row-quote-icon {
    display: block;
    margin-bottom: .5rem;
}

.apl-testimonial-row-text {
    font-style: italic;
    color: var(--apl-navy);
    line-height: 1.7;
    margin-bottom: .5rem;
}

.apl-testimonial-row-author {
    font-weight: 700;
    color: var(--apl-blue);
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .apl-testimonial-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
    }
}

/* Pagina "Obiettivo raggiunto?" - rassicurazioni + card form testimonianza */
.apl-reassure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .88rem;
}

.apl-reassure-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F7FAFF;
    color: var(--apl-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.apl-form-card {
    background: #F7FAFF;
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
}

@media (max-width: 576px) {
    .apl-form-card {
        padding: 1.5rem;
    }
}

.apl-form-card .formControlLabel {
    color: var(--apl-navy);
    font-weight: 600;
}

.apl-form-card .formRequired {
    color: var(--apl-gold-text);
    margin-left: .2rem;
}

.apl-form-card .form-control,
.apl-form-card input[type="text"],
.apl-form-card input[type="email"],
.apl-form-card textarea {
    border: 1px solid #D7DEE8;
    border-radius: 8px;
    padding: .65rem .9rem;
    width: 100%;
}

.apl-form-card .form-control:focus,
.apl-form-card input[type="text"]:focus,
.apl-form-card input[type="email"]:focus,
.apl-form-card textarea:focus {
    border-color: var(--apl-blue);
    box-shadow: 0 0 0 .2rem rgba(50, 93, 152, .15);
    outline: none;
}

.apl-form-card .formValidation {
    color: #c0392b;
    font-size: .85rem;
}

.apl-form-card input[type="file"] {
    background: #fff;
    border: 1px dashed #D7DEE8;
    border-radius: 8px;
    padding: .6rem .9rem;
    width: 100%;
}

.apl-form-card .form-check,
.apl-form-card [role="group"] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.apl-form-card [role="group"] input[type="checkbox"] {
    margin-top: .3rem;
}

/* Checkbox di Bootstrap (float e margine negativo): nel flex con un testo lungo si restringevano */
.apl-form-card .form-check {
    margin: 0;
    padding: 0;
}

.apl-form-card .form-check .form-check-input {
    flex: 0 0 auto;
    float: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .2rem 0 0;
    accent-color: var(--apl-navy);
}

/* Antispam Hashcash di RSForm ("Non sono un robot"): stesso aspetto dei campi del modulo */
.apl-form-card [data-rsfp-hashcash],
.apl-richiesta-form [data-rsfp-hashcash] {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border: 1px solid #D7DEE8;
    border-radius: 8px;
    padding: .5rem 1rem .5rem .6rem;
    color: var(--apl-ink);
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .15s ease, background-color .15s ease;
}

.apl-form-card [data-rsfp-hashcash]:hover,
.apl-richiesta-form [data-rsfp-hashcash]:hover {
    background: #f7f9fc;
    border-color: var(--apl-blue);
}

.apl-form-card [data-rsfp-hashcash] .hashcash,
.apl-richiesta-form [data-rsfp-hashcash] .hashcash {
    width: 28px;
    height: 28px;
    margin: 0;
    flex: 0 0 auto;
}

.apl-form-card [role="group"] a {
    color: var(--apl-blue);
    font-weight: 600;
}

.apl-form-card button[type="submit"],
.apl-form-card input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--apl-gold);
    border: 2px solid var(--apl-gold);
    color: var(--apl-ink);
    border-radius: 6px;
    font-weight: 700;
    padding: .65rem 1.5rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.apl-form-card button[type="submit"]:hover,
.apl-form-card input[type="submit"]:hover {
    background: var(--apl-gold-dark);
    border-color: var(--apl-gold-dark);
    color: #000;
}

/* Pagina Blog: un articolo per riga */
.apl-blog-row {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    background: #F7FAFF;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .07);
    transition: box-shadow .15s ease, transform .15s ease;
}

.apl-blog-row:hover {
    box-shadow: 0 6px 18px rgba(20, 30, 45, .12);
    transform: translateY(-2px);
}

.apl-blog-row-photo {
    flex: 0 0 auto;
    display: block;
    width: 240px;
    border-radius: 8px;
    overflow: hidden;
}

.apl-blog-row-photo img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.apl-blog-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.apl-blog-row-date {
    display: inline-block;
    color: var(--apl-gold-text);
    font-weight: 700;
    letter-spacing: .04em;
    font-size: .8rem;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.apl-blog-row-body h2 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.apl-blog-row-body h2 a {
    color: var(--apl-navy);
    text-decoration: none;
}

.apl-blog-row-body h2 a:hover {
    color: var(--apl-blue);
}

.apl-blog-row-excerpt {
    color: #45505c;
    line-height: 1.6;
    margin-bottom: .75rem;
}

.apl-blog-row-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--apl-blue);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}

.apl-blog-row-more:hover {
    color: var(--apl-blue-dark);
}

@media (max-width: 576px) {
    .apl-blog-row {
        flex-direction: column;
    }

    .apl-blog-row-photo {
        width: 100%;
    }

    .apl-blog-row-photo img {
        height: 200px;
    }
}

/* Paginazione Blog */
.apl-blog-pagination .pagination {
    gap: .3rem;
    flex-wrap: wrap;
}

.apl-blog-pagination .page-link {
    border: none;
    border-radius: 6px !important;
    color: var(--apl-blue);
    font-weight: 600;
}

.apl-blog-pagination .page-link:hover {
    background: #F7FAFF;
    color: var(--apl-blue-dark);
}

.apl-blog-pagination .page-item.active .page-link {
    background: var(--apl-gold);
    color: var(--apl-navy);
}

.apl-blog-pagination .page-item.disabled .page-link {
    color: #b9c2cd;
}

.apl-blog-pagination .counter {
    color: #6b7683;
    font-size: .9rem;
}

/* Pagina FAQ: accordion domande/risposte */
.apl-faq-item {
    background: #F7FAFF;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.apl-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 1.15rem 1.5rem;
    font-weight: 700;
    color: var(--apl-navy);
    font-size: 1.02rem;
}

.apl-faq-question .apl-faq-icon {
    flex: 0 0 auto;
    color: var(--apl-gold-dark);
    transition: transform .2s ease;
}

.apl-faq-question[aria-expanded="true"] {
    color: var(--apl-blue);
}

.apl-faq-question[aria-expanded="true"] .apl-faq-icon {
    transform: rotate(180deg);
}

.apl-faq-answare-inner {
    padding: 0 1.5rem 1.25rem;
    color: #45505c;
    line-height: 1.7;
    border-top: 1px solid rgba(50, 93, 152, .1);
    padding-top: 1rem;
}

.apl-faq-answare-inner p {
    margin-bottom: 0;
}

/* Pagina Contatti */
.apl-map-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    line-height: 0;
}

.apl-map-card iframe {
    display: block;
}

/* Pagina Guida all'uso: video-guide 16:9 */
.apl-guide-video {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(20, 30, 45, .15);
}

.apl-guide-video iframe {
    border: 0;
}

/* Pagina Acquista ora (banner hero, modulo 232) */
.stat-icon {
    color: var(--apl-gold);
    font-size: 2rem;
}

/* Pagina Acquista ora: card piani (override com_osmembership, senza toccare la logica PHP) */
.apl-plan-card {
    border: none !important;
    box-shadow: 0 4px 16px rgba(20, 30, 45, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.apl-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(20, 30, 45, .14);
}

.apl-plan-card-recommended {
    border: 2px solid var(--apl-gold) !important;
}

.apl-plan-ribbon {
    background: var(--apl-gold) !important;
    color: var(--apl-navy) !important;
    font-weight: 700;
}

/* Icona in testa alla card (dentro short_description del piano, non nel template):
   la trasformiamo in un badge quadrato coi colori istituzionali invece del
   generico blu Bootstrap .text-primary. */
.apl-plan-card i.text-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--apl-navy);
    color: var(--apl-gold) !important;
    font-size: 1.15rem;
}

.apl-plan-price {
    color: var(--apl-navy);
}

.apl-plan-duration {
    display: block;
    color: var(--apl-muted);
    font-size: .82rem;
    font-weight: 500;
    margin-top: .35rem;
}

.apl-plan-duration i {
    color: var(--apl-gold);
}

.apl-plan-actions {
    row-gap: .5rem;
    --bs-gutter-x: 0.75rem;
}

.apl-plan-actions > div.ps-md-0 {
    padding-left: var(--bs-gutter-x) !important;
}

@media (min-width: 768px) {
    .apl-plan-actions > div.ps-md-0 {
        padding-left: .5rem !important;
    }
}

.apl-plan-actions .btn-outline-secondary {
    --bs-btn-color: var(--apl-blue);
    --bs-btn-border-color: var(--apl-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--apl-blue);
    --bs-btn-hover-border-color: var(--apl-blue);
}

/* ==========================================================================
   Header: sotto-voci di menu (dropdown) - stile piu' elegante.
   Il pannello (.sp-dropdown-inner) e le voci sono nel core del template
   (Helix SP Megamenu), quindi si interviene solo via custom.css.
   ========================================================================== */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    border-radius: 10px;
    border-top: 3px solid var(--apl-gold);
    box-shadow: 0 16px 32px rgba(20, 30, 45, .16);
    padding: 10px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
    padding: 0 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    display: block;
    text-transform: none !important;
    font-family: 'Public Sans', 'Open Sans', sans-serif;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    color: var(--apl-navy) !important;
    padding: 11px 14px !important;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(:last-child) > a {
    margin-bottom: 2px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background: #F7FAFF;
    color: var(--apl-blue) !important;
    padding-left: 18px !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: var(--apl-blue) !important;
    background: #F7FAFF;
}
/* ==========================================================================
   Pagina Corsi online (stesso stile della Home)
   ========================================================================== */
body.itemid-176 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

.apl-corso-img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(20, 30, 45, .15);
}

.apl-materie-list {
    list-style: none;
    counter-reset: materia;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: .75rem 1.25rem;
}

.apl-materie-list li {
    counter-increment: materia;
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: 10px;
    padding: .8rem 1.1rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .06);
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .93rem;
    line-height: 1.35;
}

.apl-materie-list li::before {
    content: counter(materia);
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--apl-navy);
    color: var(--apl-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
}

/* ==========================================================================
   Pagina Corsi in videoconferenza (stesso stile della Home)
   ========================================================================== */
body.itemid-345 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

.apl-info-value {
    display: block;
    color: #45505c;
    font-size: .9rem;
    line-height: 1.45;
    margin-top: .15rem;
}

.apl-info-value a {
    color: var(--apl-blue);
    font-weight: 600;
}

/* ==========================================================================
   Pagina Vacanza Studio (stesso stile della Home)
   ========================================================================== */
body.itemid-663 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

.apl-info-panel {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
}

.apl-info-panel .apl-doc-icon {
    display: flex;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--apl-navy);
    color: var(--apl-gold);
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.apl-info-panel h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin-bottom: .9rem;
}

.apl-info-panel p {
    color: #45505c;
    line-height: 1.7;
}

.apl-panel-img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: .5rem;
}

.apl-price-card {
    background: #F7FAFF;
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    text-align: center;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
}

.apl-price-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: .4rem 0 .6rem;
}

.apl-price-card .apl-price-amount {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--apl-blue);
    margin-bottom: .5rem;
}

.apl-price-card .apl-price-note {
    color: #45505c;
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.apl-price-card.apl-price-card-dark {
    background: var(--apl-navy);
}

.apl-price-card.apl-price-card-dark .apl-eyebrow,
.apl-price-card.apl-price-card-dark .apl-price-amount {
    color: var(--apl-gold);
}

.apl-price-card.apl-price-card-dark h3 {
    color: #fff;
}

.apl-price-card.apl-price-card-dark .apl-price-note {
    color: #C7D0DB;
}

/* ==========================================================================
   Pagina Corsi in aula (stesso stile della Home) + gallerie con lightbox
   ========================================================================== */
body.itemid-194 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* Blocco "prossimo corso" (articolo in evidenza della categoria Corsi in aula) */
.apl-next-course {
    background: #fff;
    border-radius: 16px;
    border-top: 6px solid var(--apl-gold);
    box-shadow: 0 10px 30px rgba(20, 30, 45, .12);
    padding: 2.25rem;
    position: relative;
}

.apl-next-badge {
    display: inline-block;
    background: var(--apl-gold);
    color: var(--apl-navy);
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .74rem;
    padding: .4rem .9rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.apl-next-course h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin-bottom: 1.25rem;
}

.apl-next-course-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.apl-next-empty {
    text-align: center;
    background: #fff;
    border-radius: 14px;
    padding: 2.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
}

.apl-next-empty h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
}

/* Archivio corsi (card con foto) */
.apl-aula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.apl-aula-card {
    display: flex;
    flex-direction: column;
    background: #F7FAFF;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(20, 30, 45, .08);
    transition: box-shadow .15s ease, transform .15s ease;
}

.apl-aula-card:hover {
    box-shadow: 0 8px 22px rgba(20, 30, 45, .14);
    transform: translateY(-3px);
}

.apl-aula-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.apl-aula-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.apl-aula-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--apl-navy);
    margin-bottom: .35rem;
}

.apl-aula-card p {
    color: #45505c;
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: .6rem;
}

.apl-aula-card .apl-aula-more {
    color: var(--apl-blue);
    font-weight: 700;
    font-size: .9rem;
}

/* Gallerie foto (griglia + lightbox vanilla, JS nel campo Custom JS del template) */
.apl-lg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
}

.lg-gallery-item {
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    background: #e9eef5;
}

.lg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.lg-gallery-item:hover img {
    transform: scale(1.06);
}

.lg-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 43, .95);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lg-lightbox-overlay.active {
    display: flex;
}

.lg-lightbox-img-wrap {
    max-width: 92vw;
    max-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lg-lightbox-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
}

.lg-lightbox-caption {
    color: #fff;
    margin-top: 16px;
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
}

.lg-lightbox-counter {
    color: var(--apl-gold);
    font-size: 13px;
    margin-top: 4px;
    font-weight: 700;
}

.lg-lightbox-close,
.lg-lightbox-prev,
.lg-lightbox-next {
    position: absolute;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}

.lg-lightbox-close:hover,
.lg-lightbox-prev:hover,
.lg-lightbox-next:hover {
    background: var(--apl-gold);
    color: var(--apl-navy);
}

.lg-lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 28px;
    padding: 6px 14px;
}

.lg-lightbox-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lg-lightbox-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767.98px) {
    .apl-next-course {
        padding: 1.5rem;
    }

    .lg-lightbox-prev,
    .lg-lightbox-next {
        padding: 8px 12px;
        font-size: 18px;
    }
}

/* ==========================================================================
   Pagina Ripetizioni (stesso stile della Home)
   ========================================================================== */
body.itemid-665 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* ==========================================================================
   Rassicurazioni all'acquisto: badge metodi di pagamento (footer, fasce, Acquista)
   ========================================================================== */
.apl-pay {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.apl-pay-label {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.apl-pay-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
}

.apl-pay-list li {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.apl-pay-list img {
    display: block;
    height: 30px;
    width: auto;
}

.apl-pay-dark {
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.apl-pay-dark .apl-pay-label {
    color: var(--apl-gold);
}

.apl-pay-dark .apl-pay-list {
    justify-content: flex-end;
}

.apl-pay-light {
    align-items: center;
}

.apl-pay-light .apl-pay-label {
    color: var(--apl-navy);
}

.apl-pay-light .apl-pay-list {
    justify-content: center;
}

@media (max-width: 767.98px) {
    .apl-pay-dark {
        align-items: flex-start;
    }

    .apl-pay-dark .apl-pay-list {
        justify-content: flex-start;
    }
}

/* Badge pagamenti dentro fasce navy delle pagine: allineati a sinistra, tutti su una riga */
.apl-pay-band .apl-pay-dark {
    align-items: flex-start;
    margin-bottom: 0;
}

.apl-pay-band .apl-pay-dark .apl-pay-list {
    justify-content: flex-start;
    max-width: none;
}

/* Card scelta pacchetto (Corsi online): pulsante e badge dentro .apl-price-card */
.apl-price-card .btn-apl-gold,
.apl-price-card .btn-apl-outline {
    justify-content: center;
}

.apl-price-card .apl-next-badge {
    margin-bottom: .6rem;
}

/* Acquista ora: card piano con sfondo chiaro (come le card della Home) e foto in testa */
.apl-plan-card .apl-plan-card-img {
    display: block;
    width: calc(100% + 2rem);
    max-width: none;
    height: auto;
    margin: -1rem -1rem 1rem;
}

.apl-plan-card.apl-plan-card-light {
    background: #F7FAFF !important;
}

/* ==========================================================================
   Pagina Il Libro (stesso stile della Home)
   ========================================================================== */
body.itemid-368 #sp-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

.apl-lg-grid.apl-lg-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .apl-lg-grid.apl-lg-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Galleria a 4 colonne (Chi siamo, "La nuova sede": due righe da 4) */
.apl-lg-grid.apl-lg-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767.98px) {
    .apl-lg-grid.apl-lg-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   Pagina di acquisto / sign-up (OSMembership, /acquista-ora/<piano>/sign-up)
   Solo stile: nessuna modifica alla logica del componente.
   ========================================================================== */
body:has(#os_form) #sp-main-body {
    background: #F7FAFF;
    padding-top: 3rem;
    padding-bottom: 4rem;
}

body:has(#os_form) .osm-container {
    max-width: 880px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 6px 24px rgba(20, 30, 45, .1);
}

body:has(#os_form) .osm-page-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    text-align: center;
    margin-bottom: .5rem;
}

body:has(#os_form) .osm-page-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--apl-gold);
    border-radius: 2px;
    margin: .7rem auto 0;
}

body:has(#os_form) .osm-message {
    text-align: center;
    color: #45505c;
    margin-bottom: 1.75rem;
}

body:has(#os_form) .osm-container h2.osm-heading {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.45rem;
    color: var(--apl-navy);
    margin: 2rem 0 1rem;
}

body:has(#os_form) .osm-container h3.osm-heading {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apl-gold-text);
    margin: 1.75rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(50, 93, 152, .15);
}

body:has(#os_form) .osm-container label {
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .92rem;
}

body:has(#os_form) .osm-container .required {
    color: var(--apl-gold-text);
}

body:has(#os_form) .osm-container .form-control,
body:has(#os_form) .osm-container .form-select {
    border: 1px solid #D7DEE8;
    border-radius: 8px;
    padding: .6rem .85rem;
}

body:has(#os_form) .osm-container .form-control:focus,
body:has(#os_form) .osm-container .form-select:focus {
    border-color: var(--apl-blue);
    box-shadow: 0 0 0 .2rem rgba(50, 93, 152, .15);
    outline: none;
}

body:has(#os_form) .osm-container .input-password-toggle {
    --bs-btn-color: var(--apl-blue);
    --bs-btn-bg: #F7FAFF;
    --bs-btn-border-color: #D7DEE8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--apl-blue);
    --bs-btn-hover-border-color: var(--apl-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--apl-blue-dark);
    --bs-btn-active-border-color: var(--apl-blue-dark);
}

body:has(#os_form) .osm-container fieldset.oms-radio-container label,
body:has(#os_form) .osm-container .form-check-label {
    font-weight: 500;
}

body:has(#os_form) #osm-gross-amount-container input {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--apl-navy);
}

body:has(#os_form) .osm-container input[type="submit"].btn-primary {
    padding: .85rem 2.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
}

/* Bottone finale "Procedi con l'acquisto": in basso a destra. Resta oro come gli altri
   bottoni primari; testo --apl-ink (8.1:1) e #000 in hover su oro scuro (7.05:1), AAA. */
#os_form .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

body:has(#os_form) .osm-container #os_form #btn-submit.btn-primary:focus-visible {
    outline: 3px solid var(--apl-navy);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    body:has(#os_form) .osm-container #os_form #btn-submit.btn-primary {
        width: 100%;
    }
}

/* Privacy: nota sotto il checkbox come testo piccolo (override default_gdpr.php) */
#os_form .osm-privacy-policy-message {
    margin: .4rem 0 0;
    color: #5b6775;
    font-size: .85rem;
    line-height: 1.45;
}

body:has(#os_form) #osm-forgot-username-password a {
    color: var(--apl-blue);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    body:has(#os_form) .osm-container {
        padding: 1.5rem 1.15rem;
    }
}

/* Sign-up: allinea i campi del form di registrazione a quelli del login (il .row del form annidava un doppio gutter)
   e da' piu' spazio alle etichette (evita l'asterisco a capo). */
body:has(#os_form) #os_form.row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

body:has(#os_form) #os_form > * {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    body:has(#os_form) .osm-container .form-group > .form-control-label {
        flex: 0 0 33%;
        max-width: 33%;
    }

    body:has(#os_form) .osm-container .form-group > .eb-form-control:not(:only-child) {
        flex: 0 0 67%;
        max-width: 67%;
    }
}

/* Sign-up: rifiniture di radio, checkbox, select, avvisi e campi larghi */
body:has(#os_form) .osm-container input[type="radio"],
body:has(#os_form) .osm-container input[type="checkbox"] {
    accent-color: var(--apl-blue);
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 .55rem 0 0;
    vertical-align: middle;
    cursor: pointer;
}

body:has(#os_form) .osm-container fieldset.oms-radio-container label {
    display: inline-flex;
    align-items: center;
    margin: .2rem 1rem .2rem 0;
    line-height: 1.6;
    cursor: pointer;
}

body:has(#os_form) .osm-container .form-select {
    height: auto;
    line-height: 1.5;
    padding-right: 2.25rem;
}

body:has(#os_form) .osm-container .input-xlarge {
    width: 100% !important;
}

body:has(#os_form) .osm-container .alert-info {
    background: #F7FAFF;
    border: 1px solid rgba(50, 93, 152, .15);
    border-left: 4px solid var(--apl-gold);
    color: #45505c;
    border-radius: 8px;
}

body:has(#os_form) .osm-container a {
    color: var(--apl-blue);
    font-weight: 600;
}

body:has(#os_form) .osm-container .btn-primary {
    color: var(--apl-ink);
}

body:has(#os_form) .osm-container .btn-primary:hover {
    color: #000;
}

body:has(#os_form) #osm-forgot-username-password ul {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    border: 0;
}

body:has(#os_form) #osm-forgot-username-password li {
    display: inline-block;
    margin: 0 1.5rem .25rem 0;
}

/* ==========================================================================
   Sign-up: due scelte affiancate (login / nuovo utente) + registrazione a scomparsa
   (i blocchi vengono creati da .claude/tmp/signup.js, installato nel Custom JS del template)
   ========================================================================== */
.apl-signup-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
    align-items: stretch;
}

.apl-signup-choices > #osm_login_form,
.apl-signup-choices > .apl-signup-new {
    background: #F7FAFF;
    border: 1px solid rgba(50, 93, 152, .18);
    border-radius: 14px;
    padding: 1.5rem;
    margin: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.apl-signup-choices > .apl-signup-new.is-active {
    border-color: var(--apl-gold);
    box-shadow: 0 0 0 3px rgba(211, 168, 78, .25);
}

.apl-signup-ico {
    display: flex;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--apl-navy);
    color: var(--apl-gold);
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: .75rem;
}

body:has(#os_form) .apl-signup-choices h2.osm-heading {
    margin: 0 0 1rem;
    font-size: 1.3rem;
}

/* login: campi impilati (il blocco e' meta' larghezza) e bottone piu' piccolo */
body:has(#os_form) #osm_login_form .form-group {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: .75rem;
}

body:has(#os_form) #osm_login_form .form-group > * {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body:has(#os_form) #osm_login_form .form-group > .form-control-label {
    margin-bottom: .25rem;
}

body:has(#os_form) #osm_login_form input.btn-primary {
    width: auto;
    min-width: 0;
    justify-self: start;
    padding: .4rem 1.4rem;
    font-size: .9rem;
    font-weight: 700;
}

body:has(#os_form) #osm_login_form #osm-forgot-username-password {
    margin-top: .5rem;
    font-size: .88rem;
}

body:has(#os_form) #osm_login_form #osm-forgot-username-password li {
    margin-right: 1rem;
}

/* nuovo utente: blocco centrato con bottone in evidenza */
.apl-signup-new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.apl-signup-new p {
    color: #45505c;
    margin-bottom: 1.25rem;
}

.apl-signup-new-btn {
    cursor: pointer;
    padding: .7rem 1.2rem;
    font-size: .95rem;
    white-space: nowrap;
    justify-content: center;
}

/* form di registrazione a scomparsa */
body:has(#os_form) #os_form.apl-collapsed {
    display: none;
}

body:has(#os_form) #os_form {
    scroll-margin-top: 110px;
}

body:has(#os_form) #os_form.apl-open {
    animation: aplSignupOpen .45s ease;
}

@keyframes aplSignupOpen {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
    .apl-signup-choices {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pagine "Dettagli" dei piani OSMembership (tutte le materie, pacchetti,
   Libro, videoconferenza, Ausiliari del traffico): override
   templates/shaper_helixultimate/html/com_osmembership/plan/default.php
   ========================================================================== */
body.com-osmembership.view-plan #sp-main-body {
    padding-top: 0;
}

.apl-plan-detail {
    padding-top: 2rem;
}

.apl-plan-detail-section-wrap {
    text-align: center;
    margin: 1.25rem 0 1.75rem;
}

.apl-plan-detail-section {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--apl-navy);
    color: var(--apl-gold);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .75rem 2rem;
    border-radius: 30px;
}

.apl-plan-detail-row {
    align-items: flex-start;
}

.apl-plan-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--apl-blue);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    /* area di tocco piu' alta senza spostare il testo */
    padding: .6rem 0;
    margin: -.6rem 0;
}

.apl-plan-detail-back:hover {
    color: var(--apl-navy);
    text-decoration: underline;
}

.apl-plan-detail-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: .4rem 0 0;
}

/* Immagine del piano (thumb dedicato oppure prima immagine estratta dal
   testo): sopra al box prezzo, non più in mezzo al contenuto */
#osm-plan-item .apl-plan-detail-img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    display: block;
    float: none !important;
}

/* Colonna destra: segue lo scrolling (immagine + box prezzo insieme) senza
   essere costretta all'altezza della colonna di sinistra */
.apl-plan-detail-sticky {
    position: sticky;
    top: 110px;
}

/* Card prezzo a destra: riusa .apl-price-card ma testo allineato a sinistra,
   dimensione naturale (non più stirata all'altezza del testo a sinistra) e
   tabella informazioni piano ripulita dallo stile Bootstrap 3 del core */
.apl-plan-detail-card {
    text-align: left;
}

.apl-plan-detail-card table {
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.apl-plan-detail-card table tr {
    background: none !important;
}

.apl-plan-detail-card table td {
    border: 0;
    padding: .7rem 1rem;
    font-size: .92rem;
    background: #F7FAFF;
}

.apl-plan-detail-card table td:first-child {
    border-radius: 8px 0 0 8px;
}

.apl-plan-detail-card table td:last-child {
    border-radius: 0 8px 8px 0;
}

.apl-plan-detail-card .osm-plan-property-label {
    color: #45505c;
}

.apl-plan-detail-card .osm-plan-property-value {
    color: var(--apl-navy);
    font-weight: 600;
    text-align: right;
}

.apl-plan-detail-card tr.osm-plan-property:last-of-type td {
    background: none;
    border-top: 1px solid rgba(20, 30, 45, .08);
    padding: .9rem 1rem 0;
}

.apl-plan-detail-card tr.osm-plan-property:last-of-type .osm-plan-property-label {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    font-size: 1.1rem;
}

.apl-plan-detail-card tr.osm-plan-property:last-of-type .osm-plan-property-value {
    font-family: 'Fraunces', serif;
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--apl-blue);
}

.apl-plan-detail-actions .apl-plan-detail-cta {
    width: 100%;
    justify-content: center;
}

/* Telefono: la tabella etichetta | valore non si restringe sotto il contenuto (prezzo a 1.9rem)
   e usciva dalla card. Le righe diventano blocchi: etichetta sopra, valore sotto. */
@media (max-width: 575.98px) {
    .apl-price-card.apl-plan-detail-card {
        padding: 1.25rem;
    }

    .apl-plan-detail-card table,
    .apl-plan-detail-card table tbody,
    .apl-plan-detail-card table tr,
    .apl-plan-detail-card table td {
        display: block;
        width: 100%;
    }

    .apl-plan-detail-card table tr {
        margin-bottom: .5rem;
        border: 0;
        border-radius: 8px;
        background: #fff !important;
    }

    .apl-plan-detail-card table td,
    .apl-plan-detail-card table td:first-child,
    .apl-plan-detail-card table td:last-child {
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        background: none;
        text-align: left;
    }

    .apl-plan-detail-card table td.osm-plan-property-label {
        padding: .65rem .9rem 0;
        font-size: .8rem;
    }

    .apl-plan-detail-card table td.osm-plan-property-value {
        padding: .15rem .9rem .65rem;
        font-size: 1rem;
    }

    .apl-plan-detail-card tr.osm-plan-property:last-of-type {
        margin: .75rem 0 0;
        background: none !important;
        border-top: 1px solid rgba(20, 30, 45, .08);
    }

    .apl-plan-detail-card tr.osm-plan-property:last-of-type td {
        border-top: 0;
    }

    .apl-plan-detail-card tr.osm-plan-property:last-of-type td.osm-plan-property-label {
        padding: .9rem 0 0;
        font-size: 1rem;
    }

    .apl-plan-detail-card tr.osm-plan-property:last-of-type td.osm-plan-property-value {
        padding: .1rem 0 0;
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Contenuto descrittivo del piano: rendiamo presentabile l'HTML legacy
   (row/col Bootstrap, elenco-lezioni, bg-info, qnt_libro...) senza toccarlo */
.apl-plan-detail-content h1,
.apl-plan-detail-content h2,
.apl-plan-detail-content h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: 1.5rem 0 .9rem;
}

.apl-plan-detail-content h1:first-child,
.apl-plan-detail-content h2:first-child {
    margin-top: 0;
}

.apl-plan-detail-content p {
    color: #45505c;
    line-height: 1.7;
}

.apl-plan-detail-content img {
    width: 100%;
    border-radius: 12px;
    margin: .5rem 0 1.25rem;
    float: none !important;
}

/* Elenco materie incluse: stesso stile "chip numerata" della pagina Corsi
   online, su più colonne quando c'è spazio (la colonna di sinistra è più
   larga di quella del box prezzo) */
.apl-plan-detail-content .elenco-lezioni {
    list-style: none;
    counter-reset: materia;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .6rem .9rem;
}

.apl-plan-detail-content .elenco-lezioni li {
    counter-increment: materia;
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #F7FAFF;
    border-radius: 10px;
    padding: .7rem 1rem;
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.35;
}

.apl-plan-detail-content .elenco-lezioni li::before {
    content: counter(materia);
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--apl-navy);
    color: var(--apl-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .82rem;
}

/* Altri elenchi (risorse incluse, ecc.): bullet a segno di spunta */
.apl-plan-detail-content ul:not(.elenco-lezioni),
.apl-plan-detail-content ol:not(.elenco-lezioni) {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: .5rem;
}

.apl-plan-detail-content ul:not(.elenco-lezioni) li,
.apl-plan-detail-content ol:not(.elenco-lezioni) li {
    position: relative;
    padding-left: 1.75rem;
    color: #45505c;
    line-height: 1.5;
}

.apl-plan-detail-content ul:not(.elenco-lezioni) li i.fa,
.apl-plan-detail-content ol:not(.elenco-lezioni) li i.fa {
    display: none;
}

.apl-plan-detail-content ul:not(.elenco-lezioni) li::before,
.apl-plan-detail-content ol:not(.elenco-lezioni) li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .15rem;
    color: var(--apl-gold);
    font-size: .8rem;
}

/* Riquadro "possibilità di upgrade" (era .bg-info ciano) */
.apl-plan-detail-content p.bg-info {
    background: #FFF8E6 !important;
    border-left: 4px solid var(--apl-gold);
    border-radius: 8px;
    padding: .9rem 1.1rem;
    color: #45505c;
    font-size: .92rem;
}

.apl-plan-detail-content p.bg-info small {
    color: inherit;
}

/* Badge "libri ancora disponibili" */
.apl-plan-detail-content p.qnt_libro {
    display: inline-block;
    background: var(--apl-navy);
    color: var(--apl-gold);
    padding: .35rem .9rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: .85rem;
}

@media (max-width: 991.98px) {
    .apl-plan-detail-sticky {
        position: static;
    }
}

/* ==========================================================================
   Area riservata - pagina "Materie" (override
   html/com_content/category/materie.php)
   ========================================================================== */
.apl-materie-header {
    max-width: 640px;
    margin: 2rem auto 2.5rem;
}

.apl-materie-header h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: .4rem 0 0;
}

.apl-materie-empty {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    border-top: 4px solid var(--apl-gold);
    box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    padding: 2.25rem 1.75rem;
}

.apl-materie-empty-icon {
    font-size: 1.75rem;
    color: var(--apl-gold);
    margin-bottom: .75rem;
}

.apl-materie-empty h2 {
    font-size: 1.4rem;
    margin-bottom: .6rem;
}

.apl-materie-empty p {
    color: #45505c;
    margin-bottom: 1.4rem;
}

.apl-materia-card {
    background: #fff;
    border-radius: 14px;
    border-top: 4px solid var(--apl-gold);
    box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    padding: 1.75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.apl-materia-card:hover {
    box-shadow: 0 10px 26px rgba(20, 30, 45, .12);
    transform: translateY(-2px);
}

.apl-materia-badge {
    display: inline-block;
    align-self: flex-start;
    background: #F0F4FA;
    color: var(--apl-navy);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.apl-materia-title-link {
    text-decoration: none;
}

.apl-materia-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    transition: color .15s ease;
}

.apl-materia-title-link:hover .apl-materia-title {
    color: var(--apl-blue);
}

.apl-materia-actions .btn-apl-gold,
.apl-materia-actions .btn-apl-outline {
    justify-content: center;
    width: 100%;
}

.apl-materia-duration {
    margin-left: .4rem;
    font-weight: 500;
    opacity: .85;
    font-size: .85rem;
}

/* Card "Prova finale" (item speciale con tag 11): variante scura per
   distinguerla dalle materie numerate */
.apl-materia-card.apl-materia-exam {
    background: var(--apl-navy);
}

.apl-materia-card.apl-materia-exam .apl-materia-badge {
    background: rgba(255, 255, 255, .12);
    color: var(--apl-gold);
}

.apl-materia-card.apl-materia-exam .apl-materia-title {
    color: #fff;
}

.apl-materia-card.apl-materia-exam .apl-materia-title-link:hover .apl-materia-title {
    color: var(--apl-gold);
}

/* ==========================================================================
   Docenti - elenco (override html/com_content/category/docenti.php) e
   pagina singola (override html/com_content/article/docente.php)
   ========================================================================== */
body.docenti #sp-main-body {
    padding-top: 2rem;
}

.apl-docente-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    height: 100%;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    transition: box-shadow .15s ease, transform .15s ease;
}

.apl-docente-tile:hover {
    box-shadow: 0 10px 26px rgba(20, 30, 45, .12);
    transform: translateY(-2px);
}

.apl-docente-tile-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--apl-gold);
    margin-bottom: 1.1rem;
}

.apl-docente-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F0F4FA;
    color: var(--apl-navy);
    font-size: 2rem;
}

.apl-docente-tile-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: .35rem;
}

.apl-docente-tile-role {
    font-size: .85rem;
    color: var(--apl-muted);
    line-height: 1.4;
}

.apl-docente-page {
    padding-bottom: 3rem;
}

.apl-docente-hero {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    max-width: 760px;
    margin: 1.75rem auto 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #F0F4FA;
}

.apl-docente-hero-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--apl-gold);
    box-shadow: 0 8px 22px rgba(20, 30, 45, .14);
    flex: 0 0 auto;
}

.apl-docente-hero-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--apl-navy);
    margin: .4rem 0 .3rem;
}

.apl-docente-hero-role {
    color: var(--apl-muted);
    font-size: 1.05rem;
    margin: 0;
}

/* Il testo del docente arriva da un vecchio editor WYSIWYG: riga Bootstrap
   con solo 8 colonne su 12 usate (spazio per una foto mai inserita), nome
   ripetuto in un <h1> dentro al testo (ora ridondante con l'hero sopra). */
.apl-docente-body {
    max-width: 760px;
    margin: 0 auto;
}

/* Riquadro "Materia/e insegnata/e", staccato dalla presentazione/bio */
.apl-docente-materie {
    background: #F7FAFF;
    border-left: 4px solid var(--apl-gold);
    border-radius: 0 10px 10px 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.apl-docente-materie .apl-eyebrow {
    display: block;
    margin-bottom: .6rem;
}

.apl-docente-materie ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.apl-docente-materie li {
    color: var(--apl-navy);
    font-weight: 700;
    line-height: 1.4;
}

.apl-docente-materie li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--apl-gold-dark);
    margin-right: .6rem;
}

.apl-docente-body h1 {
    display: none;
}

.apl-docente-body .row > div {
    max-width: 100%;
    flex: 0 0 100%;
}

.apl-docente-body p {
    color: #45505c;
    line-height: 1.75;
}

.apl-docente-body ul,
.apl-docente-body ol {
    color: #45505c;
    line-height: 1.7;
}

.apl-docente-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Carosello "Altri docenti" in fondo alla pagina del singolo docente */
.apl-docenti-other {
    max-width: 100%;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #F0F4FA;
}

.apl-docenti-swiper {
    padding: .5rem 3.2rem 1.5rem;
    position: relative;
}

.apl-docenti-swiper .swiper-slide {
    height: auto;
    display: flex;
    width: 220px;
}

.apl-docenti-swiper .swiper-slide > .apl-docente-tile {
    width: 100%;
}

.apl-docenti-swiper .swiper-button-prev,
.apl-docenti-swiper .swiper-button-next {
    width: 2.6rem;
    height: 2.6rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .15);
    color: var(--apl-navy);
}

.apl-docenti-swiper .swiper-button-prev:after,
.apl-docenti-swiper .swiper-button-next:after {
    font-size: 1.1rem;
    font-weight: 700;
}

.apl-docenti-swiper .swiper-button-prev:hover,
.apl-docenti-swiper .swiper-button-next:hover {
    background: var(--apl-gold);
    color: var(--apl-navy);
}

.apl-docenti-swiper .swiper-button-disabled {
    opacity: .35;
}

@media (max-width: 576px) {
    .apl-docenti-swiper {
        padding: .5rem 2.6rem 1.2rem;
    }

    .apl-docenti-swiper .swiper-slide {
        width: 190px;
    }
}

/* Materia - liste di documenti nei campi custom Normative/Dispense/Modulistica/
   Aggiornamenti: sostituisce i "muri" di link separati da virgole/nbsp del
   vecchio editor WYSIWYG con una griglia di chip (classe .apl-doc-links,
   generata riordinando l'HTML gia' salvato nel campo, non un nuovo campo). */
.apl-doc-links {
    margin: 0 0 1.25rem;
}

.apl-doc-links-label {
    margin: 0 0 .6rem;
    color: var(--apl-navy);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.apl-doc-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0;
}

.apl-doc-links ul li {
    margin: 0;
}

.apl-doc-links ul li a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #F7FAFF;
    border: 1px solid rgba(22, 40, 63, .1);
    border-radius: 999px;
    padding: .45rem .95rem;
    color: var(--apl-navy);
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.apl-doc-links ul li a::before {
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--apl-gold);
    font-size: .8rem;
}

.apl-doc-links ul li a:hover,
.apl-doc-links ul li a:focus {
    background: var(--apl-navy);
    border-color: var(--apl-navy);
    color: #fff;
}

/* ==========================================================================
   Demo gratuita videolezione - CTA riusabili + finestra video globale
   (la finestra #demoModal sta nel Custom Code "before body" del template e
   carica l'iframe Vimeo solo all'apertura)
   ========================================================================== */
.apl-demo-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem 1.1rem;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.apl-demo-cta-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--apl-gold);
    color: var(--apl-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding-left: 3px;
}

.apl-demo-cta-text {
    flex: 1 1 220px;
    line-height: 1.4;
}

.apl-demo-cta-text strong {
    display: block;
    font-size: 1.05rem;
}

.apl-demo-cta--dark {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #D9E0E9;
    max-width: 640px;
}

.apl-demo-cta--dark .apl-demo-cta-text strong {
    color: #fff;
}

.apl-demo-cta--light {
    background: #F7FAFF;
    border: 1px solid rgba(22, 40, 63, .08);
    border-left: 4px solid var(--apl-gold);
    color: #45505c;
}

.apl-demo-cta--light .apl-demo-cta-text strong {
    color: var(--apl-navy);
}

.apl-demo-cta--compact {
    padding: .8rem 1rem;
    margin-top: 1rem;
}

.apl-demo-cta--compact .apl-demo-cta-icon {
    width: 38px;
    height: 38px;
    font-size: .85rem;
}

.apl-demo-cta--compact .apl-demo-cta-text strong {
    font-size: .95rem;
}

.apl-demo-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .8rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--apl-blue);
    text-decoration: none;
    cursor: pointer;
}

.apl-demo-link i {
    color: var(--apl-gold-dark);
    font-size: 1.05rem;
}

.apl-demo-link:hover {
    color: var(--apl-navy);
    text-decoration: underline;
}

/* Home - sezione "In video": 3 video affiancati (2 verticali + demo orizzontale) da 1200px.
   576-1199px: i 2 verticali affiancati, la demo sotto a tutta larghezza (sotto i 1200px la
   terza colonna restava larga ~270px e la demo diventava un francobollo).
   Telefono (sotto 576px): uno sotto l'altro; i verticali restano larghi al massimo 300px. */
.apl-video-row {
    display: grid;
    grid-template-columns: 300px 300px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    justify-content: center;
}

/* I verticali partono alla stessa altezza anche se una didascalia va su due righe;
   la demo, piu' bassa, resta centrata rispetto a loro */
.apl-video-item.apl-video-item--wide {
    align-self: center;
}

.apl-video-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.apl-video-item > span {
    color: #fff;
    font-weight: 600;
}

.apl-video-card.apl-video-card--wide {
    max-width: 100%;
    aspect-ratio: 16/9;
}

@media (max-width: 1199.98px) {
    .apl-video-row {
        grid-template-columns: repeat(2, minmax(0, 300px));
        gap: 2rem 1.5rem;
        align-items: start;
    }

    .apl-video-item.apl-video-item--wide {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 640px;
        justify-self: center;
    }
}

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

    .apl-video-item {
        width: 100%;
        max-width: 300px;
        justify-self: center;
    }

    .apl-video-item.apl-video-item--wide {
        max-width: 100%;
    }
}

/* Nota sul rinnovo del pacchetto "Tutte le materie + Libro" (piano 12):
   l'etichetta dell'opzione di rinnovo ricorda che il libro non e' incluso */
.osm-renew-option .apl-renew-note {
    display: inline-block;
    margin-top: .35rem;
    color: #8a5a00;
    font-weight: 500;
}

/* ==========================================================================
   Area riservata - Riepilogo quiz, Profilo utente, Sicurezza
   (profilo: override html/com_osmembership/profile/default_profile.php;
   sicurezza: override html/com_users/profile/editfix.php; quiz: solo CSS
   sopra la tabella YUI di AriQuiz, scoped su body.view-quizresults)
   ========================================================================== */
body.com-osmembership.view-profile #sp-main-body,
body.com-ariquiz.view-quizresults #sp-main-body,
body.com-users.view-profile #sp-main-body {
    padding-top: 0;
    padding-bottom: 3rem;
}

/* Intestazione: eyebrow + titolo serif + filetto oro, come la pagina Materie */
body.com-osmembership.view-profile #osm-profile-page h1.osm-page-title,
body.com-ariquiz.view-quizresults h1.aq-results-title,
body.com-users.view-profile .profile-edit .page-header h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 2rem;
    color: var(--apl-navy);
    text-align: center;
    margin: 2.5rem 0 0;
}

body.com-osmembership.view-profile #osm-profile-page h1.osm-page-title::before,
body.com-ariquiz.view-quizresults h1.aq-results-title::before,
body.com-users.view-profile .profile-edit .page-header h1::before {
    content: "Area riservata";
    display: block;
    margin-bottom: .35rem;
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apl-gold-dark);
}

body.com-osmembership.view-profile #osm-profile-page h1.osm-page-title::after,
body.com-ariquiz.view-quizresults h1.aq-results-title::after,
body.com-users.view-profile .profile-edit .page-header h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: .8rem auto 2rem;
    background: var(--apl-gold);
    border-radius: 2px;
}

/* ---- Profilo utente (Membership Pro) e Sicurezza (com_users): contenitore */
body.com-osmembership.view-profile #osm-profile-page,
body.com-users.view-profile .profile-edit .col-lg-10 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.apl-profile-section {
    background: #fff;
    border: 1px solid rgba(22, 40, 63, .08);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .06);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.apl-profile-section--locked {
    background: #F7FAFF;
}

.apl-profile-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--apl-navy);
}

.apl-profile-section-title i {
    color: var(--apl-gold-dark);
    font-size: .95rem;
}

.apl-profile-hint {
    margin: -.4rem 0 1.1rem;
    color: var(--apl-muted);
    font-size: .88rem;
}

.apl-profile-lock-note {
    display: block;
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px dashed rgba(22, 40, 63, .18);
    color: var(--apl-muted);
    font-size: .88rem;
    line-height: 1.5;
}

.apl-profile-lock-note i {
    margin-right: .45rem;
    color: var(--apl-gold-dark);
}

.apl-profile-lock-note a {
    color: var(--apl-blue);
    font-weight: 600;
}

/* Profilo OSM: righe label/valore */
#osm-profile-page .form-row {
    align-items: center;
    margin-bottom: .85rem;
}

#osm-profile-page .form-control-label {
    color: #45505c;
    font-weight: 600;
    font-size: .92rem;
}

#osm-profile-page .osm-field-value .eb-form-control {
    display: block;
    color: var(--apl-navy);
    font-weight: 600;
}

#osm-profile-page .apl-profile-section--locked .osm-field-value .eb-form-control::after {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: .55rem;
    color: #9aa7b6;
    font-size: .72rem;
}

#osm-profile-page .form-control,
#osm-profile-page select.form-select,
#osm-profile-page select {
    border-radius: 8px;
    border-color: #d8e0ea;
}

#osm-profile-page .form-control:focus,
.profile-edit .form-control:focus {
    border-color: var(--apl-gold);
    box-shadow: 0 0 0 .2rem rgba(211, 168, 78, .22);
}

#osm-profile-page .apl-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

#osm-btn-logout {
    background: transparent;
    color: var(--apl-navy);
    border: 2px solid var(--apl-navy);
}

#osm-btn-logout:hover {
    background: var(--apl-navy);
    color: #fff;
}

/* ---- Sicurezza: autenticazione a più fattori ---- */
/* Intestazione del metodo attivo: Joomla usa bg-secondary grigio e il titolo eredita il blu del template */
#com-users-methods-list .com-users-methods-list-method-header.bg-secondary {
    background: var(--apl-navy) !important;
    border-color: var(--apl-navy) !important;
}

#com-users-methods-list .com-users-methods-list-method-header.bg-secondary h2 {
    color: #fff;
}

#com-users-methods-list .com-users-methods-list-method.border-secondary {
    border-color: var(--apl-navy) !important;
    border-radius: 10px;
    overflow: hidden;
}

#com-users-methods-list #com-users-methods-list-method-default-tag {
    background: var(--apl-gold) !important;
    color: var(--apl-navy);
}

/* L'MFA non si può disattivare dal sito (bloccato anche lato server da plg_system_force2fa):
   niente "Disattiva" né cestino. Per cambiare telefono basta la matita, che mostra di nuovo il QR. */
#com-users-methods-reset-container .btn-danger,
#com-users-methods-list .com-users-methods-list-method-record-delete {
    display: none;
}

/* ---- Sicurezza: campi in sola lettura ---- */

.profile-edit .apl-profile-section--locked input[readonly] {
    background: #E9EEF5;
    color: #45505c;
    cursor: not-allowed;
    border-color: #d8e0ea;
    background-image: none;
}

.profile-edit .form-control,
.profile-edit input.form-control {
    border-radius: 8px;
}

.profile-edit .btn-secondary {
    background: transparent;
    color: var(--apl-navy);
    border: 2px solid var(--apl-navy);
}

.profile-edit .btn-secondary:hover {
    background: var(--apl-navy);
    color: #fff;
}

/* ---- Schede (Modifica profilo / La mia iscrizione / Storia abbonamento) ---- */
#osm-profile-page joomla-tab > div[role="tablist"] {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #E3E9F1;
    box-shadow: none;
}

#osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"] {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: .75rem 1.15rem;
    font-weight: 600;
    color: var(--apl-muted);
    white-space: nowrap;
    box-shadow: none;
}

#osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"]:hover {
    color: var(--apl-navy);
}

#osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"][aria-selected="true"] {
    color: var(--apl-navy);
    background: transparent;
}

/* Joomla disegna l'indicatore blu della scheda attiva con un ::after */
#osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"][aria-selected="true"]::after {
    background: var(--apl-gold);
    height: 3px;
    bottom: -2px;
}

#osm-profile-page joomla-tab > joomla-tab-element,
#osm-profile-page joomla-tab > section[role="tabpanel"] {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* Telefono: le schede restano in alto (breakpoint 0 nell'override) come un selettore a segmenti */
@media (max-width: 767.98px) {
    #osm-profile-page joomla-tab > div[role="tablist"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 4px;
        overflow: visible;
        background: #EEF2F7;
        border: 0;
        border-radius: 12px;
    }

    #osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        margin: 0;
        padding: .45rem .4rem;
        border: 0;
        border-radius: 9px;
        font-size: .82rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    #osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"][aria-selected="true"] {
        background: var(--apl-navy);
        color: #fff;
        box-shadow: 0 2px 6px rgba(22, 40, 63, .25);
    }

    #osm-profile-page joomla-tab > div[role="tablist"] > button[role="tab"][aria-selected="true"]::after {
        display: none;
    }
}

/* Tabelle abbonamenti (La mia iscrizione / Storia abbonamento) */
#my-subscriptions-page table,
#subscription-history-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .06);
    overflow: hidden;
}

#my-subscriptions-page th,
#subscription-history-page th {
    background: var(--apl-navy);
    color: #fff;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .8rem 1rem;
    border: 0;
}

#my-subscriptions-page td,
#subscription-history-page td {
    padding: .8rem 1rem;
    border: 0;
    border-bottom: 1px solid #eef1f6;
    color: var(--apl-navy);
}

/* Rinnovo (nel profilo) */
#osm-profile-page .osm-form-heading {
    font-family: 'Fraunces', serif;
    color: var(--apl-navy);
}

/* ---- Riepilogo quiz: tabella YUI di AriQuiz ---- */
body.view-quizresults .mainJoomlaTable.yui-dt {
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    overflow-x: auto;
}

body.view-quizresults .yui-dt table {
    width: 100%;
    min-width: 640px;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-family: inherit;
}

body.view-quizresults .yui-skin-sam .yui-dt th,
body.view-quizresults .yui-dt thead th,
body.view-quizresults .yui-dt thead th .yui-dt-liner {
    background: var(--apl-navy) !important;
    background-image: none !important;
    border: 0 !important;
}

body.view-quizresults .yui-dt thead th .yui-dt-liner {
    padding: .85rem 1rem;
}

body.view-quizresults .yui-dt thead th .yui-dt-label,
body.view-quizresults .yui-dt thead th a {
    color: #fff !important;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

body.view-quizresults .yui-dt thead th.yui-dt-asc .yui-dt-label::after {
    content: " \25B2";
    color: var(--apl-gold);
}

body.view-quizresults .yui-dt thead th.yui-dt-desc .yui-dt-label::after {
    content: " \25BC";
    color: var(--apl-gold);
}

body.view-quizresults .yui-dt tbody td {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
    color: var(--apl-navy);
}

body.view-quizresults .yui-dt tbody tr.yui-dt-odd td {
    background: #F7FAFF !important;
}

body.view-quizresults .yui-dt tbody tr:hover td {
    background: #FFFBF2 !important;
}

body.view-quizresults .yui-dt tbody .yui-dt-liner {
    padding: .8rem 1rem;
}

body.view-quizresults .yui-dt .yui-dt-empty .yui-dt-liner {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--apl-muted);
}

body.view-quizresults .yui-dt-col-PercentScore .yui-dt-liner {
    font-weight: 700;
}

body.view-quizresults [class*="aq-quiz-result-status"] {
    display: inline-block;
    padding: .2rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

body.view-quizresults .aq-quiz-result-status-success {
    background: #E6F4EA;
    color: #1e7a3c;
}

body.view-quizresults .aq-quiz-result-status-failure,
body.view-quizresults .aq-quiz-result-status-fail {
    background: #FDECEA;
    color: #b3261e;
}

body.view-quizresults .yui-dt-col-ResultsLink a {
    display: inline-block;
    padding: .25rem .9rem;
    border: 2px solid var(--apl-blue);
    border-radius: 999px;
    color: var(--apl-blue);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

body.view-quizresults .yui-dt-col-ResultsLink a:hover {
    background: var(--apl-blue);
    color: #fff;
}

body.view-quizresults .yui-pg-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    margin-top: 1.1rem;
    color: var(--apl-muted);
    font-size: .9rem;
}

body.view-quizresults .yui-pg-container select {
    width: auto;
    padding: .3rem 1.6rem .3rem .6rem;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    color: var(--apl-navy);
}

body.view-quizresults .yui-pg-container a {
    color: var(--apl-blue);
    font-weight: 600;
    text-decoration: none;
}

body.view-quizresults .yui-pg-container .yui-pg-current-page {
    padding: .1rem .6rem;
    border-radius: 6px;
    background: var(--apl-navy);
    color: #fff;
}

/* Riepilogo quiz su schermi stretti: meno colonne cosi' "Stato" e "Vista" restano
   sempre visibili senza scorrimento orizzontale */
@media (max-width: 991.98px) {
    body.view-quizresults .yui-dt table {
        min-width: 0;
    }

    body.view-quizresults .yui-dt .yui-dt-col-EndDate2 {
        display: none;
    }

    body.view-quizresults .yui-dt thead th .yui-dt-liner,
    body.view-quizresults .yui-dt tbody .yui-dt-liner {
        padding: .7rem .6rem;
    }
}

@media (max-width: 575.98px) {
    body.view-quizresults .yui-dt .dtColMin {
        display: none;
    }

    body.view-quizresults .yui-dt tbody td {
        font-size: .88rem;
    }
}

/* Profilo OSM: i campi di testo a larghezza fissa (indirizzo) riempiono la riga */
#osm-profile-page input.form-control,
#osm-profile-page input[type="text"] {
    width: 100%;
}

/* ...ma nei campi password l'occhio deve restare accanto all'input, non andare a capo */
#osm-profile-page .input-group > input.form-control {
    width: 1%;
}

#osm-profile-page .input-group > .input-password-toggle {
    border-radius: 0 8px 8px 0;
    border-color: #d8e0ea;
    background: #F7FAFF;
    color: var(--apl-blue);
}

#osm-profile-page .input-group > .input-password-toggle:hover,
#osm-profile-page .input-group > .input-password-toggle:focus-visible {
    background: var(--apl-blue);
    border-color: var(--apl-blue);
    color: #fff;
}

/* Riepilogo quiz su telefono: ogni risultato diventa una scheda */
@media (max-width: 575.98px) {
    body.view-quizresults .mainJoomlaTable.yui-dt {
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    body.view-quizresults .yui-dt table,
    body.view-quizresults .yui-dt tbody.yui-dt-data,
    body.view-quizresults .yui-dt tbody.yui-dt-message {
        display: block;
    }

    body.view-quizresults .yui-dt colgroup,
    body.view-quizresults .yui-dt thead {
        display: none;
    }

    body.view-quizresults .yui-dt tbody.yui-dt-data tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .35rem 1rem;
        align-items: center;
        margin-bottom: .85rem;
        padding: 1rem 1.1rem;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    }

    body.view-quizresults .yui-dt tbody.yui-dt-data tr td {
        display: block;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    body.view-quizresults .yui-dt tbody.yui-dt-data tr:hover td,
    body.view-quizresults .yui-dt tbody.yui-dt-data tr.yui-dt-odd td {
        background: transparent !important;
    }

    body.view-quizresults .yui-dt tbody .yui-dt-liner {
        padding: 0;
    }

    body.view-quizresults .yui-dt tbody.yui-dt-data tr td.dtColMin,
    body.view-quizresults .yui-dt tbody.yui-dt-data tr td.yui-dt-col-EndDate2,
    body.view-quizresults .yui-dt tbody.yui-dt-data tr td.yui-dt-hidden {
        display: none;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-QuizName {
        grid-column: 1 / -1;
        grid-row: 1;
        font-weight: 700;
        font-size: 1rem;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-StartDate2 {
        grid-column: 1;
        grid-row: 2;
        color: var(--apl-muted);
        font-size: .82rem;
        text-align: left;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-PercentScore {
        grid-column: 1;
        grid-row: 3;
        text-align: left;
        font-size: .9rem;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-Passed {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-ResultsLink {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-col-StartDate2 .yui-dt-liner::before {
        content: "Inizio: ";
    }

    body.view-quizresults .yui-dt tbody td.yui-dt-empty {
        display: block;
        background: #fff !important;
        border-radius: 14px;
    }
}

/* Profilo su telefono: Joomla trasforma le schede in accordion */
#osm-profile-page joomla-tab[view="accordion"] > button[aria-expanded] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 .7rem;
    padding: .9rem 1.1rem;
    background: #fff;
    background-image: none;
    color: var(--apl-navy);
    font-weight: 700;
    text-align: left;
    border: 1px solid rgba(22, 40, 63, .12);
    border-left-width: 1px;
    border-radius: 12px;
    box-shadow: none;
}

#osm-profile-page joomla-tab[view="accordion"] > button[aria-expanded="true"] {
    background: var(--apl-navy);
    color: #fff;
    border-color: var(--apl-navy);
}

#osm-profile-page joomla-tab[view="accordion"] > joomla-tab-element {
    padding: 0 0 1rem;
}

#osm-profile-page joomla-tab[view="accordion"] > button[aria-expanded]::after {
    background: var(--apl-gold);
    border-radius: 12px 0 0 12px;
}

/* Corsi in aula - box informativo "Partecipare da lontano" (descrizione della
   categoria 16, modificabile dal backend; mostrata da category/corsiaula.php) */
.apl-aula-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.apl-aula-info-card {
    background: #fff;
    border: 1px solid rgba(22, 40, 63, .08);
    border-top: 4px solid var(--apl-gold);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .07);
    padding: 1.6rem 1.5rem;
}

.apl-aula-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--apl-navy);
    color: var(--apl-gold);
    font-size: 1.05rem;
}

.apl-aula-info-card h3 {
    margin: 0 0 .7rem;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--apl-navy);
}

.apl-aula-info-card p {
    margin: 0 0 .6rem;
    color: #45505c;
    font-size: .95rem;
    line-height: 1.55;
}

.apl-aula-info-card p:last-child {
    margin-bottom: 0;
}

.apl-aula-info-card strong {
    color: var(--apl-navy);
}

@media (max-width: 991.98px) {
    .apl-aula-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Form "Richiesta di iscrizione" (mod_aplrichiesta)
   ========================================================================== */
.apl-richiesta {
    background: #fff;
    border: 1px solid rgba(22, 40, 63, .12);
    border-top: 4px solid var(--apl-gold);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(22, 40, 63, .09);
    padding: 2.25rem 2.25rem 2rem;
}
.apl-richiesta-head { text-align: center; margin-bottom: 1.75rem; }
.apl-richiesta-head h2 { margin: .5rem 0 0; }
.apl-richiesta-intro { color: #45505c; margin-top: 1.1rem; }
.apl-richiesta-intro p:last-child { margin-bottom: 0; }
.apl-richiesta-form button[type="submit"] { border: 0; cursor: pointer; }
.apl-richiesta-form button[type="submit"]:disabled { opacity: .65; cursor: progress; }
.apl-richiesta-thanks { text-align: center; padding: 1rem 0 .5rem; }
.apl-richiesta-thanks[hidden], .apl-richiesta-form[hidden] { display: none !important; }
.apl-richiesta-thanks p { font-size: 1.1rem; color: var(--apl-navy); margin: 1rem 0 0; }
.apl-richiesta-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--apl-gold); color: var(--apl-navy); font-size: 1.4rem;
}
@media (max-width: 575.98px) {
    .apl-richiesta { padding: 1.5rem 1.15rem 1.35rem; }
}

/* Form richieste: scelta province (etichette) */
.apl-prov-hint { font-weight: 400; font-size: .8rem; color: #5a6573; margin-left: .5rem; }
.apl-prov-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.apl-prov-chips:empty { display: none; }
.apl-prov-chip { display: inline-flex; align-items: center; gap: .45rem; background: rgba(211, 168, 78, .18); color: var(--apl-navy); border: 1px solid rgba(211, 168, 78, .6); border-radius: 999px; padding: .25rem .35rem .25rem .8rem; font-size: .88rem; font-weight: 600; }
.apl-prov-chip button { border: 0; background: var(--apl-navy); color: #fff; width: 1.45rem; height: 1.45rem; border-radius: 50%; line-height: 1; font-size: 1rem; cursor: pointer; padding: 0; }
.apl-prov-chip button:hover { background: var(--apl-gold); color: var(--apl-ink); }

/* Form richieste realizzati con RSForm, layout generato automaticamente (griglia Bootstrap 5) */
.apl-richiesta-form { margin: 0; }
.apl-richiesta-form .formContainer { margin: 0; }
.apl-richiesta-form .row { --bs-gutter-x: 1.25rem; }
.apl-richiesta-form .rsform-block { margin-bottom: 1.1rem; }
.apl-richiesta-form .formControlLabel { display: block; font-weight: 600; font-size: .9rem; color: var(--apl-navy); margin-bottom: .35rem; }
.apl-richiesta-form .formRequired { font-weight: 600; color: inherit; }
.apl-richiesta-form .formControls input[type="text"],
.apl-richiesta-form .formControls input[type="email"],
.apl-richiesta-form .formControls input[type="tel"],
.apl-richiesta-form .formControls textarea,
.apl-richiesta-form .formControls select { width: 100%; border: 1.5px solid #cfd6df; border-radius: 8px; background-color: #fff; color: #1d2733; font: inherit; padding: .65rem .85rem; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
/* Helix (template.css) fissa le select a 38px, con padding e bordo !important: stessa resa dei campi di testo */
.apl-richiesta-form .formControls select { height: auto; line-height: 24px; padding: .65rem 2.25rem .65rem .85rem !important; border: 1.5px solid #cfd6df !important; }
.apl-richiesta-form .formControls select:focus { border-color: var(--apl-gold) !important; }
.apl-richiesta-form .formControls select[multiple] { padding: .4rem; }
.apl-richiesta-form .formControls textarea { resize: vertical; min-height: 7rem; }
.apl-richiesta-form .formControls input:focus,
.apl-richiesta-form .formControls textarea:focus,
.apl-richiesta-form .formControls select:focus { outline: none; border-color: var(--apl-gold); box-shadow: 0 0 0 3px rgba(211, 168, 78, .28); }
.apl-richiesta-form .formValidation { display: block; color: #8a1f1f; font-size: .82rem; margin-top: .25rem; }
.apl-richiesta-form .formValidation:empty { display: none; }
/* campi in errore: RSForm mette .is-invalid sul campo */
.apl-richiesta-form .formControls .is-invalid { border-color: #c0392b !important; }
.apl-richiesta-form .formControls .is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .2); }
/* consensi privacy e newsletter */
.apl-richiesta-form .rsform-type-checkboxgroup { margin-bottom: .75rem; font-size: .88rem; color: #45505c; }
.apl-richiesta-form .rsform-block-privacy { margin-top: 1.4rem; }
.apl-richiesta-form .rsform-type-checkboxgroup .form-check { display: flex; align-items: flex-start; gap: .65rem; margin: 0; padding: 0; }
.apl-richiesta-form .rsform-type-checkboxgroup .form-check-input { float: none; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; accent-color: var(--apl-navy); }
.apl-richiesta-form .rsform-type-checkboxgroup a { color: var(--apl-navy); text-decoration: underline; }
.apl-richiesta-form .rsform-type-hashcash { margin: .5rem 0 1.1rem; }
.apl-richiesta-form .rsform-type-submitbutton { margin-bottom: 0; }
.apl-richiesta-form .rsform-submit-button { background: var(--apl-gold); color: var(--apl-ink); border: 0; border-radius: 8px; font: inherit; font-weight: 700; padding: .8rem 1.4rem; cursor: pointer; }
.apl-richiesta-form .rsform-submit-button:hover { background: var(--apl-navy); color: #fff; }
.apl-richiesta .apl-richiesta-thanks { text-align: center; padding: 1rem 0 .5rem; }

/* Blocco "Concorsi nella tua provincia": ancora sotto l'header sticky */
#concorsi { scroll-margin-top: 110px; }

/* CTA "Concorsi nella tua provincia" (modulo mod_custom, layout concorsi_cta) */
.apl-concorsi-cta { display: flex; align-items: center; gap: 1.1rem; border-radius: 12px; padding: 1.1rem 1.4rem; }
.apl-concorsi-cta-icon { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--apl-gold); color: var(--apl-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.apl-concorsi-cta-text { flex: 1 1 auto; line-height: 1.4; }
.apl-concorsi-cta-text strong { display: block; font-family: "Fraunces", serif; font-size: 1.15rem; }
.apl-concorsi-cta .btn-apl-gold { flex: 0 0 auto; white-space: nowrap; color: var(--apl-ink) !important; }
.apl-concorsi-cta .btn-apl-gold:hover { color: var(--apl-navy) !important; background: #fff; }
.apl-concorsi-cta--box { background: #fff; border: 1px solid rgba(22, 40, 63, .12); border-left: 4px solid var(--apl-gold); box-shadow: 0 8px 22px rgba(22, 40, 63, .07); color: #45505c; }
.apl-concorsi-cta--box .apl-concorsi-cta-text strong { color: var(--apl-navy); }
.apl-concorsi-cta--strip { background: rgba(255, 255, 255, .07); border: 1px solid rgba(211, 168, 78, .5); color: rgba(255, 255, 255, .85); margin: 0; }
.apl-concorsi-cta--strip .apl-concorsi-cta-text strong { color: #fff; }
@media (max-width: 767.98px) {
    .apl-concorsi-cta { flex-wrap: wrap; }
    .apl-concorsi-cta-text { flex-basis: calc(100% - 4.5rem); }
    .apl-concorsi-cta .btn-apl-gold { width: 100%; text-align: center; }
}
/* ticker news: pulsante fisso a destra */
.apl-ticker-cta { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; background: var(--apl-gold); color: var(--apl-ink) !important; font-weight: 700; font-size: .8rem; text-transform: uppercase; padding: 0 1.1rem; text-decoration: none; white-space: nowrap; }
.apl-ticker-cta:hover { background: #fff; }
@media (max-width: 575.98px) { .apl-ticker-cta { display: none; } }

#sp-bottom { padding-top: 2.5rem; padding-bottom: 0; }

/* Corsi online: evidenza del Tutor dedicato */
.apl-hero-tutor { display: inline-flex; align-items: center; gap: .55rem; margin: .2rem 0 .4rem; padding: .45rem 1rem; border-radius: 999px; background: rgba(211, 168, 78, .18); border: 1px solid var(--apl-gold); color: #fff; font-weight: 600; font-size: .95rem; }
.apl-hero-tutor i { color: var(--apl-gold); }
.apl-doc-card.apl-doc-card--highlight { background: var(--apl-navy); border-color: var(--apl-gold); }
.apl-doc-card.apl-doc-card--highlight span.apl-doc-label { color: #fff; }
.apl-doc-card.apl-doc-card--highlight .apl-doc-icon { background: var(--apl-gold); color: var(--apl-navy); }
.apl-tutor-band { background: #F7FAFF; padding: 3.5rem 0; }
.apl-tutor-inner { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; align-items: center; background: #fff; border: 1px solid rgba(22, 40, 63, .12); border-top: 4px solid var(--apl-gold); border-radius: 14px; padding: 2rem 2.25rem; box-shadow: 0 12px 32px rgba(22, 40, 63, .08); }
.apl-tutor-icon { width: 5rem; height: 5rem; border-radius: 50%; background: var(--apl-navy); color: var(--apl-gold); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; }
.apl-tutor-text h2 { margin: .35rem 0 .6rem; color: var(--apl-navy); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.apl-tutor-text p { margin: 0; color: #45505c; }
.apl-tutor-points { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: .25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(22, 40, 63, .1); }
.apl-tutor-points li { color: var(--apl-navy); font-weight: 600; display: inline-flex; align-items: center; gap: .55rem; }
.apl-tutor-points i { color: var(--apl-gold); }
@media (max-width: 575.98px) {
    .apl-tutor-inner { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; text-align: left; }
    .apl-tutor-icon { width: 4rem; height: 4rem; font-size: 1.6rem; }
}

/* "Tutor dedicato": icona + scritta piccola nell'angolo della card Online (fuori dal flusso: non allunga la card) */
.apl-tutor-mini { position: absolute; top: 1.15rem; right: 1.25rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; line-height: 1; color: var(--apl-navy); opacity: .85; }
.apl-tutor-mini i { color: var(--apl-gold-dark, var(--apl-gold)); font-size: .85rem; }

/* Card corsi: i pulsanti ("Scopri di più", "Acquista") restano sempre sulla stessa riga */
.apl-course-card .apl-course-btns > a { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: .88rem; padding: .45rem .75rem; gap: .35rem; }
.apl-course-card .apl-course-btns > a i { font-size: .8em; }
@media (max-width: 400px), (min-width: 992px) and (max-width: 1199.98px) {
    .apl-course-card .apl-course-btns > a { font-size: .8rem; padding: .4rem .55rem; gap: .3rem; }
}

/* ...tranne quando la card e' stretta (carosello su telefono: card da 240px): affiancati sbordavano.
   Si guarda la larghezza della card, non dello schermo, perche' la stessa card cambia larghezza
   tra carosello e griglia. Fino a 260px: uno sotto l'altro, a tutta larghezza. */
.apl-course-card { container-type: inline-size; }
@container (max-width: 260px) {
    .apl-course-card .apl-course-btns { flex-direction: column; flex-wrap: nowrap; }
    .apl-course-card .apl-course-btns > a { width: 100%; justify-content: center; font-size: .9rem; padding: .55rem .75rem; }
}

/* Foto testimonianze piu' grandi: adattamento su schermi stretti */
@media (max-width: 767.98px) {
    .carousel-item .apl-testimonial-photo { width: 150px; height: 150px; }
    .apl-testimonial-row-photo img { width: 130px; height: 130px; }
}

/* ==========================================================================
   Tipografia template (Open Sans) - regole prima generate da Helix Ultimate (Template Options > Typography).
   I campi font di Helix sono stati disattivati per non caricare Google Fonts: qui vive lo stesso stile con font locali.
   ========================================================================== */
body { font-family: 'Open Sans', sans-serif; font-size: 16px; text-decoration: none; }
h1 { font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 600; color: #254081; text-decoration: none; }
h2 { font-family: 'Open Sans', sans-serif; font-size: 26px; font-weight: 600; color: #254081; text-decoration: none; }
h3 { font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 600; color: #254081; text-decoration: none; }
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; }
.menu.nav-pills > li > a, .menu.nav-pills > li > span, .menu.nav-pills .sp-dropdown li.sp-menu-item > a { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; }

/* ==========================================================================
   Banner cookie (componente GDPR) - coerente con i colori del sito
   ========================================================================== */
.cc-window, .cc-revoke { font-family: 'Open Sans', Arial, sans-serif !important; }
.cc-window.cc-floating { box-shadow: 0 14px 44px rgba(22, 40, 63, .30); border: 1px solid #dfe5ee; }
.cc-window .cc-header { color: var(--apl-navy); font-weight: 700; font-size: 1.1em; }
.cc-window .cc-message { color: var(--apl-navy); line-height: 1.55; }
.cc-window .cc-message a, .cc-window .cc-link { color: var(--apl-blue) !important; font-weight: 600; text-decoration: underline; }
.cc-window .cc-btn { font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 600; font-size: .95em; border-radius: 8px; border-width: 2px; padding: .7em 1em; transition: background-color .15s, color .15s; }
.cc-window .cc-btn.cc-deny:hover, .cc-window .cc-btn.cc-deny:focus { background: #eef3fa !important; }
.cc-window .cc-btn.cc-allowall:hover, .cc-window .cc-btn.cc-allow:hover { background: var(--apl-blue-dark) !important; border-color: var(--apl-blue-dark) !important; }
.cc-window .cc-btn:focus-visible { outline: 3px solid var(--apl-gold); outline-offset: 2px; }
.cc-revoke { background: var(--apl-navy) !important; color: #fff !important; border-radius: 0 8px 0 0; font-size: 13px; padding: .5em .9em; }
.cc-revoke:hover { background: var(--apl-blue) !important; }

/* Foto testimonianze: il plugin PublyWebP avvolge le immagini in <picture>; nella card flex il wrapper non deve restringersi (foto ovali) */
.apl-testimonials .apl-testimonial-card > picture { flex: 0 0 auto; display: block; line-height: 0; }

/* FAQ: navigazione per argomento e titoli di gruppo */
.apl-faq-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.apl-faq-nav a { display: inline-block; padding: .4rem .95rem; border: 1px solid var(--apl-blue); border-radius: 999px; color: var(--apl-blue); font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.apl-faq-nav a:hover, .apl-faq-nav a:focus-visible { background: var(--apl-blue); color: #fff; }
.apl-faq-group { margin: 2.6rem 0 1rem; scroll-margin-top: 110px; font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--apl-navy); }
.apl-faq-group::after { content: ""; display: block; width: 56px; height: 3px; background: var(--apl-gold); margin-top: .5rem; }
.apl-faq-answare-inner ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.apl-faq-answare-inner li { margin-bottom: .2rem; }

/* ---- Blog e News: pagina del singolo articolo (classi pagina "vista-blog" / "vista-news") ---- */
body.vista-blog.view-article .article-details,
body.vista-news.view-article .article-details {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 0 4.5rem;
}

body.vista-blog.view-article .article-header::before {
    content: "Blog";
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apl-gold-dark);
}

body.vista-blog.view-article .article-header h1,
body.vista-news.view-article .article-header h1 {
    margin: 0 0 1rem;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    line-height: 1.25;
    color: var(--apl-navy);
}

/* Data: etichetta con icona calendario, separata dal testo da un filetto */
body.vista-blog.view-article .article-info,
body.vista-news.view-article .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #E3E9F1;
}

body.vista-blog.view-article .article-info > span,
body.vista-news.view-article .article-info > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .85rem;
    border: 1px solid #E3E9F1;
    border-radius: 999px;
    background: #F7FAFF;
    color: #45505c;
    font-size: .82rem;
    font-weight: 600;
}

body.vista-blog.view-article .article-info > .create::before,
body.vista-news.view-article .article-info > .create::before {
    content: "\f133";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--apl-gold-dark);
}

/* Testo: l'ex H1 del contenuto (ora H2) e' il riferimento completo, non un secondo titolo */
body.vista-blog.view-article .article-details h2,
body.vista-news.view-article .article-details h2 {
    margin: 0 0 1.25rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.5;
    color: #45505c;
}

body.vista-blog.view-article .article-details p,
body.vista-news.view-article .article-details p,
body.vista-blog.view-article .article-details li,
body.vista-news.view-article .article-details li {
    font-size: 1.02rem;
    line-height: 1.7;
}

/* "Clicca qui": H2 che contiene solo il link al documento -> bottone */
body.vista-blog.view-article .article-details h2 > a:only-child,
body.vista-news.view-article .article-details h2 > a:only-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    padding: .6rem 1.2rem;
    border: 2px solid var(--apl-blue);
    border-radius: 8px;
    color: var(--apl-blue);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

body.vista-blog.view-article .article-details h2 > a:only-child::after,
body.vista-news.view-article .article-details h2 > a:only-child::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .85em;
}

body.vista-blog.view-article .article-details h2 > a:only-child:hover,
body.vista-news.view-article .article-details h2 > a:only-child:hover,
body.vista-blog.view-article .article-details h2 > a:only-child:focus-visible,
body.vista-news.view-article .article-details h2 > a:only-child:focus-visible {
    background: var(--apl-blue);
    color: #fff;
}

/* News e avvisi: occhiello e testo dell'avviso in un riquadro con filetto oro */
body.vista-news.view-article .article-header::before {
    content: "News e avvisi";
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apl-gold-dark);
}

body.vista-news.view-article [itemprop="articleBody"] {
    padding: 1.5rem 1.75rem;
    border: 1px solid #E3E9F1;
    border-left: 4px solid var(--apl-gold);
    border-radius: 12px;
    background: #F7FAFF;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2b3440;
}

body.vista-news.view-article [itemprop="articleBody"] > :last-child,
body.vista-news.view-article .article-details [itemprop="articleBody"] h2:last-child {
    margin-bottom: 0;
}

body.vista-news.view-article [itemprop="articleBody"] a {
    color: var(--apl-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.vista-news.view-article [itemprop="articleBody"] img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Avviso fatto solo di un link (es. "Clicca e trovi i concorsi in atto") -> bottone pieno */
body.vista-news.view-article [itemprop="articleBody"] > a:only-child,
body.vista-news.view-article [itemprop="articleBody"] > h2 > a:only-child,
body.vista-news.view-article [itemprop="articleBody"] > p:only-child > a:only-child {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.4rem;
    border: 0;
    border-radius: 8px;
    background: var(--apl-navy);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .15s;
}

body.vista-news.view-article [itemprop="articleBody"] > a:only-child::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .85em;
}

body.vista-news.view-article [itemprop="articleBody"] > a:only-child:hover,
body.vista-news.view-article [itemprop="articleBody"] > a:only-child:focus-visible,
body.vista-news.view-article [itemprop="articleBody"] > h2 > a:only-child:hover,
body.vista-news.view-article [itemprop="articleBody"] > h2 > a:only-child:focus-visible,
body.vista-news.view-article [itemprop="articleBody"] > p:only-child > a:only-child:hover,
body.vista-news.view-article [itemprop="articleBody"] > p:only-child > a:only-child:focus-visible {
    background: var(--apl-blue);
    color: #fff;
}

@media (max-width: 767.98px) {
    body.vista-news.view-article [itemprop="articleBody"] {
        padding: 1.15rem 1.2rem;
    }
}

@media (max-width: 767.98px) {
    body.vista-blog.view-article .article-details,
    body.vista-news.view-article .article-details {
        padding: 2rem 0 3rem;
    }
}

/* ---- Menu mobile (offcanvas): voci piu' grandi e separate, sottomenu raccolto, niente opacita' ----
   template.css di Helix mette opacity:.7 su tutte le voci (piene solo in :hover, che su telefono non c'e'). */
body .offcanvas-menu .offcanvas-inner ul.menu > li {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #EEF2F7;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li > a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: .35rem 3rem .35rem .25rem;
    opacity: 1;
    color: var(--apl-navy);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Voce corrente (o sezione che la contiene): filetto oro a sinistra */
body .offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: var(--apl-navy);
}

body .offcanvas-menu .offcanvas-inner ul.menu > li.active > a::before {
    content: "";
    flex: 0 0 4px;
    align-self: stretch;
    margin: .55rem .7rem .55rem 0;
    border-radius: 2px;
    background: var(--apl-gold);
}

/* Freccia del sottomenu: area di tocco 48px, oro */
body .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler {
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--apl-gold-dark);
}

/* Sottomenu aperto: rientrato, con filetto a sinistra, voci da 44px */
body .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child {
    margin: 0 0 .75rem .35rem;
    padding: 0 0 0 .9rem;
    border-left: 2px solid #E3E9F1;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem 0;
    opacity: 1;
    color: #45505c;
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.3;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li.current > a {
    color: var(--apl-navy);
    font-weight: 700;
}

/* Bottoni Acquista / Accedi: nessun separatore, un po' d'aria sopra, altezza comoda */
body .offcanvas-menu .offcanvas-inner ul.menu > li:has(> a.btn) {
    border-bottom: 0;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li:has(> a.btn-primary) {
    margin-top: 1.25rem;
}

body .offcanvas-menu .offcanvas-inner ul.menu > li > a.btn {
    min-height: 46px;
    padding: .5rem 1rem;
    font-size: 1rem !important;
    font-weight: 700;
}

/* Contatti e social in fondo al pannello */
body .offcanvas-menu .offcanvas-inner .sp-contact-info {
    margin: 1.25rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid #E3E9F1;
}

body .offcanvas-menu .offcanvas-inner .sp-contact-info li {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 40px;
    margin: 0;
    font-size: .92rem;
}

body .offcanvas-menu .offcanvas-inner .sp-contact-info li span {
    width: 1.1rem;
    color: var(--apl-gold-dark);
    text-align: center;
}

body .offcanvas-menu .offcanvas-inner .sp-contact-info a {
    color: var(--apl-navy);
}

body .offcanvas-menu .offcanvas-inner .social-icons {
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

body .offcanvas-menu .offcanvas-inner .social-icons li {
    margin: 0;
}

body .offcanvas-menu .offcanvas-inner .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #E3E9F1;
    border-radius: 50%;
    background: #F7FAFF;
    color: var(--apl-navy);
    font-size: 1.05rem;
}

/* ---- Recupero password (com_users reset: richiesta, codice, nuova password) ---- */
.apl-reset {
    padding: 3rem 0 4rem;
}

.apl-reset-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid rgba(22, 40, 63, .08);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 30, 45, .06);
}

.apl-reset-step {
    margin: 0 0 .4rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apl-gold-text);
}

.apl-reset-title {
    margin: 0 0 .75rem;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
    line-height: 1.2;
    color: var(--apl-navy);
}

.apl-reset-intro {
    margin: 0 0 1.5rem;
    color: #5b6775;
    font-size: .95rem;
    line-height: 1.55;
}

.apl-reset fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Label sopra il campo, a tutta larghezza (Joomla li affianca con control-label/controls) */
.apl-reset .control-group {
    display: block;
    margin-bottom: 1.1rem;
}

.apl-reset .control-group .control-label,
.apl-reset .control-group .controls {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.apl-reset .control-group .control-label label {
    margin-bottom: .35rem;
    color: #45505c;
    font-weight: 600;
    font-size: .92rem;
}

.apl-reset .form-control {
    width: 100%;
    min-height: 46px;
    border-radius: 8px;
    border-color: #d8e0ea;
}

.apl-reset .form-control:focus {
    border-color: var(--apl-gold);
    box-shadow: 0 0 0 .2rem rgba(211, 168, 78, .22);
}

.apl-reset .input-group > .form-control {
    width: 1%;
}

.apl-reset-submit {
    width: 100%;
    min-height: 48px;
    margin-top: .5rem;
    font-weight: 700;
    border-radius: 8px;
}

.apl-reset-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.25rem;
    color: var(--apl-blue);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
}

.apl-reset-back:hover {
    color: var(--apl-navy);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .apl-reset {
        padding: 1.5rem 0 3rem;
    }

    .apl-reset-card {
        padding: 1.5rem 1.25rem;
    }
}

/* Riquadri "Pagamenti sicuri" (moduli 240 e 241): queste due regole stavano nella sezione della
   pagina PayPal qui sotto, che usava le stesse classi, e davano ai riquadri l'aspetto che hanno ora.
   Restano nello stesso punto per non cambiarlo; togliendole tornerebbe lo stile delle righe ~2862-2875
   (etichetta maiuscola piu' piccola, riquadro a tutta larghezza). */
.apl-pay {
    max-width: 560px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 16px;
}

.apl-pay-label {
    display: block;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: .1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--apl-navy, #16283f);
}

/* =========================================================
   Pagina di pagamento PayPal Expanded Checkout (override plugins/paypalepc/form.php).
   Classi apl-ppc-*: le apl-pay-* sono dei riquadri "Pagamenti sicuri".
   ========================================================= */
.apl-ppc {
    max-width: 560px;
    margin: 2.5rem auto 3.5rem;
    padding: 0 16px;
}

.apl-ppc-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(22, 40, 63, .08);
    padding: 2rem 2rem 1.5rem;
}

.apl-ppc-eyebrow {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apl-gold-dark, #b98f3a);
}

.apl-ppc-title {
    margin: 0 0 1.25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    color: var(--apl-navy, #16283f);
}

.apl-ppc-summary {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: #f7faff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
}

.apl-ppc-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.apl-ppc-summary > div + div {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed #d5dde8;
}

.apl-ppc-summary dt {
    font-weight: 500;
    color: #5b6b80;
}

.apl-ppc-summary dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--apl-navy, #16283f);
}

.apl-ppc-summary-total dd {
    font-size: 1.5rem;
    font-weight: 700;
}

.apl-ppc-intro {
    margin: 0 0 1.25rem;
    color: #3d4b5c;
}

.apl-ppc-buttons {
    position: relative;
    z-index: 0;
}

.apl-ppc-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 1rem;
    font-size: .85rem;
    color: #5b6b80;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.apl-ppc-divider::before,
.apl-ppc-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e3e8f0;
}

.apl-ppc-subtitle {
    margin: 0 0 .75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--apl-navy, #16283f);
}

/* i campi carta sono iframe di PayPal: l'etichetta sta fuori, il riquadro intorno */
.apl-ppc-field {
    margin-bottom: .35rem;
}

.apl-ppc-label {
    display: block;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: .1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--apl-navy, #16283f);
}

.apl-ppc-label small {
    font-weight: 400;
    color: #5b6b80;
}

.apl-ppc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

#paypal-epc-result-message:empty {
    display: none;
}

#paypal-epc-result-message.is-error {
    margin: 0 0 .75rem;
    padding: .65rem .85rem;
    border-radius: 8px;
    background: #fdecea;
    color: #8a1c12;
    font-size: .92rem;
}

.apl-ppc .apl-ppc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 50px;
    margin-top: 1rem;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
}

.apl-ppc .apl-ppc-submit:focus-visible {
    outline: 3px solid var(--apl-navy, #16283f);
    outline-offset: 2px;
}

.apl-ppc-note {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eef2f7;
    font-size: .85rem;
    color: #5b6b80;
}

.apl-ppc-note i {
    margin-top: .15rem;
    color: #003087;
}

@media (max-width: 575.98px) {
    .apl-ppc {
        margin: 1.25rem auto 2rem;
    }

    .apl-ppc-card {
        padding: 1.35rem 1.1rem 1.1rem;
        border-radius: 12px;
    }

    .apl-ppc-summary > div {
        flex-direction: column;
        gap: .1rem;
    }

    .apl-ppc-summary dd {
        text-align: left;
    }
}

/* =========================================================
   Pagina "Acquisto completato" (override com_osmembership/complete)
   Il contenuto viene da Email e messaggi > Messaggio di ringraziamento; molti stili sono in linea
   (lo stesso HTML va nelle email), qui solo scheda, spaziature e mobile.
   ========================================================= */
.apl-complete {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    padding: 0 16px;
}

.apl-complete-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(22, 40, 63, .08);
    padding: 2.25rem 2.25rem 1.75rem;
    color: #2b3a4d;
    font-size: 1rem;
    line-height: 1.6;
}

.apl-complete .apl-thanks-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    line-height: 1.2 !important;
}

.apl-complete h2 {
    font-family: 'Fraunces', Georgia, serif !important;
}

.apl-complete a[href="login"] {
    transition: background-color .15s ease;
}

.apl-complete td a[href="login"]:hover {
    color: #000 !important;
}

.apl-complete .apl-detail-table td {
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .apl-complete {
        margin: 0 auto 2rem;
    }

    .apl-complete-card {
        padding: 1.4rem 1.1rem 1.1rem;
        border-radius: 12px;
    }

    /* tabelle a due colonne impilate sul telefono (dati bonifico e riepilogo) */
    .apl-complete table table tr,
    .apl-complete .apl-detail-table tr {
        display: block;
        padding: .45rem 0;
        border-bottom: 1px solid #e6ebf2;
    }

    .apl-complete table table td,
    .apl-complete .apl-detail-table td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }
}

/* ==========================================================================
   Rifiniture trasversali (audit grafico 2026-10-23): superfici del browser,
   focus da tastiera, a capo dei titoli, header, target touch, pagine legali
   ========================================================================== */

/* Selezione del testo nei colori del brand invece del blu di sistema */
::selection {
    background: #f1e2bf;
    color: var(--apl-navy);
}

/* Focus da tastiera visibile su link e controlli senza uno stile proprio:
   linea blu con alone bianco, leggibile sia sul bianco sia sulle fasce navy.
   :where() tiene la specificita' a zero, cosi' i focus gia' definiti vincono. */
:where(a, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--apl-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
    border-radius: 3px;
}

/* Titoli: righe bilanciate (niente parola sola sull'ultima riga);
   paragrafi: niente "vedove" a fine blocco. Ignorato dai browser che non lo supportano. */
h1, h2, h3, h4,
.apl-serif {
    text-wrap: balance;
}

p, li, blockquote, figcaption {
    text-wrap: pretty;
}

/* Header: Helix lo fa riapparire in dissolvenza (spFadeIn .5s) a ogni cambio pagina,
   e logo/menu lampeggiano. La dissolvenza resta solo quando diventa sticky. */
#sp-header:not(.header-sticky) {
    animation: none;
}

/* Telefono: hamburger e "chiudi menu" erano larghi 25px; area di tocco 44px */
#offcanvas-toggler,
.offcanvas-menu .close-offcanvas {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Privacy e Termini: testo lungo a tutta larghezza (oltre 150 caratteri per riga).
   Misura di lettura ~75-80 caratteri, centrata nella pagina. */
body.itemid-263 .article-details,
body.itemid-303 .article-details {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

/* Tabelle dentro gli articoli (es. elenco cookie): sul telefono scorrono
   orizzontalmente dentro il loro riquadro invece di uscire dallo schermo */
@media (max-width: 767.98px) {
    .article-details [itemprop="articleBody"] table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Acquista ora: badge "Risparmia" (rosso chiaro + testo rosso): il rosso Bootstrap
   sul fondo tinto e' 3.9:1, questo rosso piu' scuro supera 6:1 */
body.itemid-132 .badge.bg-danger.text-danger {
    color: #a51d2a !important;
}

/* Materia: video bloccato dal consenso cookie (placeholder del componente GDPR).
   Il plugin lo mette position:relative alto 120px: restava una striscia gialla
   dentro un riquadro 16:9 vuoto. Riempie il riquadro, nei colori del sito;
   il clic (azione del componente: accetta i cookie) resta invariato. */
.lezione-video-wrapper .ratio > .gdprlock-placeholder {
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--apl-navy) !important;
}

.lezione-video-wrapper .ratio > .gdprlock-placeholder::before {
    content: "\f144";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 3rem;
    line-height: 1;
    color: var(--apl-gold);
}

.lezione-video-wrapper .ratio > .gdprlock-placeholder .gdprlock-placeholder-text {
    margin: 0;
    max-width: 30rem;
    color: #fff !important;
    font-size: 1.05rem;
    line-height: 1.5;
}

.lezione-video-wrapper .ratio > .gdprlock-placeholder:hover::before {
    color: #e0bb6c;
}

/* Materia: sul telefono il riquadro Dispense/Quiz toglieva 64px di larghezza al quiz */
@media (max-width: 575.98px) {
    .apl-materia-tab-content {
        padding: 1rem .75rem;
    }
}

/* ---- Materia: scheda del docente in modale ---- */
/* sopra l'header sticky di Helix (z-index 9999), sfondo compreso */
.apl-docente-modal {
    z-index: 10060;
}

body.apl-docente-modal-open .modal-backdrop {
    z-index: 10050;
}

.apl-docente-modal .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
}

.apl-docente-modal .modal-header {
    background: var(--apl-navy);
    border-bottom: 3px solid var(--apl-gold);
    padding: .9rem 1.25rem;
}

.apl-docente-modal .modal-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
}

.apl-docente-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .85;
}

.apl-docente-modal .modal-body {
    padding: 0;
}

.apl-docente-modal-frame {
    display: block;
    width: 100%;
    height: min(75vh, 760px);
    border: 0;
}

/* Pagina del docente aperta nella modale (tmpl=component): niente link
   "Tutti i docenti" e niente carosello degli altri docenti, che farebbero
   navigare dentro la finestra */
body.contentpane .apl-docente-page > .apl-plan-detail-back,
body.contentpane .apl-docente-page .apl-docenti-other {
    display: none;
}

body.contentpane .apl-docente-page {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Contatti (telefono): l'indirizzo email non sta nella card e ne usciva a destra */
.apl-doc-card > span {
    min-width: 0;
}

.apl-doc-card > span > span {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Sign-up: metodi di pagamento come schede (override register/default_payment_methods.php)
   Titolo, una riga di spiegazione e i loghi dei circuiti (images/sito/pagamenti, come "Pagamenti sicuri").
   ========================================================================== */
#os_form .apl-pm #osm-payment-method-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

#os_form .apl-pm .apl-pm-item {
    margin: 0;
}

#os_form .apl-pm label.apl-pm-option {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    align-items: start;
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid #D7DEE8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#os_form .apl-pm label.apl-pm-option:hover {
    border-color: rgba(50, 93, 152, .45);
}

#os_form .apl-pm label.apl-pm-option:has(input:checked) {
    border-color: var(--apl-gold);
    background: #FFFCF5;
    box-shadow: 0 0 0 3px rgba(211, 168, 78, .18);
}

#os_form .apl-pm .apl-pm-option input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: .15rem 0 0;
    accent-color: var(--apl-navy);
    cursor: pointer;
}

#os_form .apl-pm .apl-pm-option input[type="radio"]:focus-visible {
    outline: 3px solid var(--apl-navy);
    outline-offset: 3px;
}

#os_form .apl-pm .apl-pm-text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

#os_form .apl-pm .apl-pm-title {
    color: var(--apl-navy);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

#os_form .apl-pm .apl-pm-badge {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: #e3f4ea;
    color: #1d6b3c;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: .1em;
    white-space: nowrap;
}

#os_form .apl-pm .apl-pm-desc {
    color: var(--apl-muted);
    font-size: .88rem;
    line-height: 1.45;
}

#os_form .apl-pm .apl-pm-logos {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}

/* style.css di Membership Pro mette float e margine a tutte le immagini di .osm-container */
#os_form .apl-pm .apl-pm-logos img {
    float: none !important;
    margin: 0 !important;
    width: 46px;
    height: 25px;
    display: block;
}

@media (max-width: 575.98px) {
    #os_form .apl-pm label.apl-pm-option {
        padding: .9rem 1rem;
    }
}

/* Sign-up: totale unico al posto di Prezzo / IVA / Importo (override register/default_payment_information.php).
   I campi restano input readonly perche' Membership Pro li aggiorna con .val(); qui sembrano testo. */
#os_form .apl-total .apl-total-amount {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    color: var(--apl-navy);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.1;
}

#os_form .apl-total input.apl-total-value,
#os_form .apl-total input.apl-total-tax-value {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: inherit;
    font: inherit;
    pointer-events: none;
}

/* field-sizing: larghi quanto il numero; width resta per i browser che non lo supportano */
body:has(#os_form) #os_form .apl-total input.apl-total-value {
    width: 8ch;
    field-sizing: content;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

body:has(#os_form) #os_form .apl-total input.apl-total-tax-value {
    display: inline;
    width: 7ch;
    field-sizing: content;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--apl-navy);
}

#os_form .apl-total .apl-total-tax {
    margin-top: .3rem;
    color: var(--apl-muted);
    font-size: .88rem;
}

#os_form .apl-total > .control-label label {
    padding-top: .45rem;
}

/* ---- "Fai il quiz gratuito": modulo RSForm del quiz in modale (js/custom.js, link con data-apl-quiz) ---- */
/* sopra l'header sticky di Helix (z-index 9999), come le altre modali del sito */
.apl-quiz-modal {
    z-index: 10060;
}

body:has(.apl-quiz-modal.show) .modal-backdrop {
    z-index: 10050;
}

.apl-quiz-modal .modal-dialog {
    max-width: 560px;
}

.apl-quiz-modal .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(11, 23, 38, .25);
}

.apl-quiz-modal .modal-header {
    align-items: flex-start;
    background: var(--apl-navy);
    border-bottom: 3px solid var(--apl-gold);
    padding: 1rem 1.35rem;
}

.apl-quiz-modal-eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--apl-gold);
}

.apl-quiz-modal .modal-title {
    margin: .15rem 0 0;
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
}

.apl-quiz-modal .btn-close {
    margin-top: .1rem;
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .85;
}

.apl-quiz-modal .modal-body {
    padding: 1.25rem 1.35rem .5rem;
}

.apl-quiz-modal-intro {
    margin: 0 0 1rem;
    color: #45505c;
    line-height: 1.55;
}

.apl-quiz-modal.is-sent .apl-quiz-modal-intro {
    display: none;
}

.apl-quiz-modal-frame {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
}

/* Il modulo aperto nella modale (tmpl=component): nessun margine della pagina */
html:has(body.contentpane.com-rsform),
body.contentpane.com-rsform {
    height: auto;
    min-height: 0;
}

body.contentpane.com-rsform {
    margin: 0;
    padding: 0 0 .5rem;
    background: #fff;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #2b3a4d;
}

body.contentpane.com-rsform .apl-richiesta-thanks-note {
    font-size: .95rem;
    color: #5b6b80;
}