/*
    Frontend View CSS
    Extends and adapts admin styles (app.css) for frontend views.
*/

:root {
    --frontend-header-height: 90px;
    --osen-topbar-bg: #ffffff;
    --osen-body-font-size: 14px;
    --osen-body-bg: #ffffff;
    --osen-btn-bg: #465DFF;
    --osen-card-summary-bg: #F8FAFC;
}

body {
    overflow-x: clip !important;
}

html {

    width: 100%;
}

body {
    background-color: var(--osen-body-bg) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

@media (min-width: 992px) {
    body {
        padding-top: var(--frontend-header-height) !important;
    }
}

.navbar-frontend {
    background-color: var(--osen-white, #ffffff) !important;
    height: var(--frontend-header-height);
    border-bottom: 1px solid var(--osen-border-color, #eef2f7);
    padding: 0 !important;
    z-index: 1030;
}

.navbar-frontend .container {
    display: flex !important;
    align-items: center !important;
    height: 100%;
}

.navbar-frontend .navbar-brand img {
    max-height: 45px;
    width: auto;
}

.navbar-frontend .nav-link {
    color: var(--osen-gray-700);
    font-weight: 500;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease-in-out;
}

.navbar-frontend .nav-link:hover,
.navbar-frontend .nav-link:focus,
.navbar-frontend .nav-link:focus-visible,
.navbar-frontend .nav-link.active {
    color: var(--osen-primary);
}

.navbar-frontend .nav-link i,
.navbar-frontend .nav-link .ti {
    font-size: 1.25rem;
}

.btn-login {
    background-color: var(--osen-primary);
    color: #fff;
    font-weight: 600;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:focus-visible {
    background-color: var(--osen-link-hover-color);
    color: #fff;
}

/* Global button style for frontend */
.btn {
    border-radius: 16px !important;
}

/* Card badges style */
.card .badge {
    padding: 13px !important;
    border-radius: 16px !important;
    font-weight: 600;
}

/* Course Card Styling */
.card .card-title {
    color: var(--osen-heading-color);
    font-weight: 600;
}

.card .card-text {
    color: var(--osen-heading-color);
    font-size: var(--osen-body-font-size);
    font-weight: var(--osen-body-font-weight);
    line-height: var(--osen-body-line-height);
}

.card-info {
    color: var(--osen-secondary-color, #9BA6B7);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    line-height: 1.2;
}

.card-info i {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-info span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.card {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.up-hover:hover {
    transform: translateY(-10px);
    box-shadow: var(--osen-box-shadow-lg) !important;
}

/* Courses and Categories Header Icons */
.courses-header-icon,
.categories-header-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    background-color: var(--osen-primary, #465dff);
    color: var(--osen-white, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.courses-header-icon i,
.categories-header-icon i {
    font-size: 28px;
}

.courses-header-text h2,
.categories-header-text h2 {
    color: var(--osen-heading-color, #4C4C5C);
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
}

.courses-header-text p,
.categories-header-text p {
    color: var(--theme-muted-foreground, #62748E);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.courses-section,
.categories-section,
.about-us-section {
    padding: 4rem 0;
    background-color: var(--osen-white, #ffffff);
}

@media (max-width: 991.98px) {

    /* Keep headers in row even on mobile */
    .courses-header,
    .categories-header {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left;
        gap: 1rem !important;
    }
}

.upper-title {
    color: var(--osen-primary, #465dff);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.about-us-content h4 {
    color: var(--osen-heading-color, #4C4C5C);
    font-family: 'Inter', sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hero-img,
.about-us-image img {
    height: 476px;
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
}

.courses-header-icon,
.categories-header-icon {
    width: 60px;
    height: 60px;
    background-color: var(--osen-primary-bg-subtle);
}

.courses-header-icon i,
.categories-header-icon i {
    color: var(--osen-primary);
}

.courses-header-text h2,
.categories-header-text h2 {
    color: var(--osen-heading-color);
}

.courses-header-text p,
.categories-header-text p {
    color: var(--osen-heading-color);
    font-size: var(--osen-body-font-size);
    font-weight: var(--osen-body-font-weight);
    line-height: var(--osen-body-line-height);
}

.courses-card-price {
    color: var(--osen-primary);
}

.courses-card-img {
    height: 255px;
    object-fit: cover;
}

.custom-indicators.position-relative {
    bottom: auto !important;
}

/* Header Spacer/Separator */
.header-separator {
    width: 1px;
    height: 24px;
    background-color: var(--osen-border-color);
    margin: 0 1rem;
}

/* Osen UI: Topbar Icons and Badges */
.navbar-frontend .topbar-item {
    display: flex;
    align-items: center;
}

.navbar-frontend .topbar-link {
    position: relative;
    padding: 0.6rem;
    color: var(--osen-heading-color, #4c4c5c);
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    text-decoration: none !important;
}

.navbar-frontend .topbar-link:hover {
    color: var(--osen-primary, #465dff);
    background-color: var(--osen-gray-100, #f6f7fb);
}

.navbar-frontend .topbar-link .badge-top-right {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--osen-danger, #ff6d43);
    color: var(--osen-white, #ffffff);
    font-size: 9px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--osen-white, #ffffff);
    border-radius: 50rem;
    line-height: 1;
}

/* Accessibility Toggle Active State */
.navbar-frontend .topbar-link.accessibility-toggle.active {
    background-color: var(--osen-primary, #465dff);
    color: var(--osen-white, #ffffff);
}

.navbar-frontend .topbar-link.accessibility-toggle.active:hover {
    background-color: var(--osen-primary-dark, #2a3bc0);
}

.nav-link.position-relative {
    display: inline-flex;
}

/* Profiles */
.nav-profile-img .avatar-content {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--osen-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.nav-profile-img .avatar-content::before {
    content: var(--avatar-letter, "");
}

/* Mobile Toggler */
.navbar-frontend .navbar-toggler {
    border: none;
    padding: 0;
}

.navbar-frontend .navbar-toggler:focus {
    box-shadow: none;
}


@media (max-width: 991.98px) {
    .navbar-frontend {
        height: auto;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        /*min-height: 60px;*/
    }

    .navbar-frontend .navbar-brand img {
        max-height: 35px;
    }

    .navbar-frontend .topbar-link {
        padding: 0.4rem;
        font-size: 1.15rem;
    }

    .navbar-frontend .navbar-collapse {
        padding: 1rem 0;
    }
}

/* --- HERO SECTION --- */
.hero-section {
    display: flex;
    align-items: center;
    background-color: #fafdff;
    padding: 3rem 0;
}

/* --- CATALOG HERO --- */
.catalog-breadcrumbs {
    background-color: var(--osen-gray-100, #f6f7fb);
    width: 100%;
}

.catalog-breadcrumbs-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.catalog-breadcrumbs-list .breadcrumb-item {
    color: var(--osen-secondary-color, #9ba6b7);
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.catalog-breadcrumbs-list .breadcrumb-item a {
    color: var(--osen-body-color, #4c4c5c);
    text-decoration: none;
}

.catalog-breadcrumbs-list .breadcrumb-item a:hover {
    color: var(--osen-primary, #465dff);
    text-decoration: none;
}

.catalog-breadcrumbs-list .breadcrumb-item.active {
    color: var(--osen-secondary-color, #9ba6b7);
    font-weight: 500;
}

.catalog-breadcrumbs-list .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--osen-secondary-color, #9ba6b7);
}

.catalog-breadcrumbs-list .breadcrumb-separator .ti {
    color: var(--osen-secondary-color, #9ba6b7);
}

/* Breadcrumb specifico per pagina corso */
.course-breadcrumbs .breadcrumb-item {
    font-size: 12px;
}

.course-breadcrumbs .breadcrumb-separator {
    padding: 0 4px;
}

.course-breadcrumbs .breadcrumb-separator .ti {
    font-size: 12px;
}

.catalog-hero {
    padding: 2.5rem 0 3rem;
    background-color: var(--osen-white, #ffffff);
}

.catalog-hero-banner {
    position: relative;
    padding: 90px 70px;
    border-radius: 20px;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
}

.catalog-hero-media {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    z-index: 1;
}

.catalog-hero-media .carousel,
.catalog-hero-media .carousel-inner,
.catalog-hero-media .carousel-item {
    height: 100%;
    width: 100%;
}

.catalog-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.catalog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--osen-primary-rgb, 70, 93, 255), 1) 45%, rgba(var(--osen-primary-rgb, 70, 93, 255), 0) 100%);
    z-index: 2;
}

.catalog-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.catalog-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.catalog-hero-title {
    color: var(--osen-white, #ffffff);
    text-align: left;
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
}

.catalog-hero-subtitle {
    color: var(--osen-white, #ffffff);
    text-align: left;
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* --- CATALOG TOOLBAR STICKY SECTION --- */
.catalog-toolbar-sticky {
    z-index: 1020;
    background-color: var(--osen-body-bg, #ffffff);
    padding-block: 0.75rem;
    transition: box-shadow 0.2s ease;
}

.catalog-toolbar-sticky.is-stuck {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mobile-nav-height, 60px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (min-width: 992px) {
    .catalog-toolbar-sticky.is-stuck {
        top: var(--frontend-header-height, 90px);
    }
}

/* --- CATALOG TOOLBAR --- */
.catalog-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.catalog-toolbar-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.catalog-toolbar-actions {
    display: flex;
    align-items: center;
}

.catalog-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 999px;
    background-color: var(--osen-gray-200, #eef2f7);
}

.catalog-filter-pill {
    border: 0px;
    background-color: transparent;
    color: var(--osen-primary, #465dff);
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.catalog-filter-pill i {
    font-size: 1rem;
}

.catalog-filter-pill.is-active {
    background-color: var(--osen-primary, #465dff);
    border-color: var(--osen-primary, #465dff);
    color: var(--osen-white, #ffffff);
}

.catalog-category-buttons-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.95rem;
}

.catalog-category-button {
    font-weight: 600;
    white-space: nowrap;
}

.catalog-category-button.active,
.catalog-category-button:focus,
.catalog-category-button:active {
    background-color: var(--osen-primary, #465dff) !important;
    border-color: var(--osen-primary, #465dff) !important;
    color: var(--osen-white, #ffffff) !important;
    box-shadow: none !important;
    outline: none !important;
}

.catalog-category-button.active .ti-xbox-x-filled {
    display: inline-block !important;
}

.catalog-category-button .ti-xbox-x-filled {
    color: #fff;
    vertical-align: middle;
}

.catalog-filter-categories {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.catalog-filter-categories::-webkit-scrollbar {
    display: none;
}

@media (min-width: 992px) {
    .catalog-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .catalog-toolbar-main {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 1.5rem;
        flex: 1;
        min-width: 0;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    line-height: 1.2;
}

.hero-content .btn {
    min-width: 180px;
}

.hero-content .lead {
    color: var(--osen-heading-color);
    font-size: var(--osen-body-font-size);
    font-weight: var(--osen-body-font-weight);
    line-height: var(--osen-body-line-height);
}

/* Hero Carousel Styling */
.hero-carousel .carousel-inner {
    border-radius: 20px;
}

/* Custom Carousel Indicators (Dots) */
.custom-indicators {
    bottom: -50px;
    /* Move indicators below the carousel */
    margin-bottom: 0;
}

/* Custom Carousel Indicators (Dots) */
.custom-indicators {
    bottom: -50px;
    /* Move indicators below the carousel */
    margin-bottom: 0;
}

/* Allow shadows to bleed out of the carousel safely */
.carousel-inner {
    overflow: visible;
}

.carousel {
    overflow: hidden;
    padding: 0 20px;
    margin: 0 -20px;
}

/* Ensure card info icons have the correct theme color */
.card-info i {
    color: var(--osen-primary, #465dff) !important;
    font-size: 1.1rem;
}

.custom-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dee2e6;
    border: none;
    margin: 0 4px;
    transition: all 0.3s ease;
    opacity: 1;
}

.custom-indicators .active {
    width: 24px;
    /* Pill shape */
    height: 8px;
    border-radius: 4px;
    background-color: var(--osen-primary);
}

/* Utility: rounded-20 */
.rounded-20 {
    border-radius: 20px !important;
}

/* Responsive adjustments for images */
@media (max-width: 1199.98px) {

    .hero-img,
    .about-us-image img {
        height: 380px;
        object-fit: cover;
    }
}

@media (max-width: 991.98px) {

    .courses-section,
    .categories-section,
    .about-us-section {
        padding: 2rem 0;
    }

    .hero-section {
        min-height: auto;
        padding: 0;
    }

    .catalog-hero {
        padding: 2rem 0 2.5rem;
    }

    .catalog-hero-banner {
        padding: 60px 32px;
        min-height: 320px;
    }

    #heroCarousel {
        padding-top: 2rem !important;
    }

    .hero-img,
    .about-us-image img {
        height: 420px;
    }

    .courses-card-img {
        height: 300px;
    }

    .custom-indicators {
        bottom: 20px;
    }

    /* Force hero buttons in one row */
    .hero-content .d-flex.flex-wrap {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hero-content .d-flex.flex-wrap::-webkit-scrollbar {
        display: none;
    }

    .hero-content .btn {
        min-width: auto;
        flex: 1;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-size: 14px;
        white-space: nowrap;
    }

    .hero-content,
    .about-us-content {
        margin-top: 2rem !important;
    }

    /* Reduce vertical and horizontal gap between stacked columns on mobile to prevent overflow */
    .row.g-5 {
        --bs-gutter-y: 1.5rem !important;
        --bs-gutter-x: 1.5rem !important;
    }

    .row.g-4 {
        --bs-gutter-y: 1rem !important;
        --bs-gutter-x: 1rem !important;
    }
}

@media (max-width: 575.98px) {

    .hero-img,
    .about-us-image img {
        height: 350px;
    }

    .courses-card-img {
        height: 300px;
    }

    .catalog-toolbar {
        margin-bottom: 2rem;
    }

    .catalog-category-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .catalog-category-buttons::-webkit-scrollbar {
        display: none;
    }
}

/* Refactoring Utility Classes */
.category-grid-item {
    grid-column: auto/span 1;
}

.modal-dialog-custom-margin {
    margin-top: 14%;
}

.vat-dropdown-style {
    margin-right: 25%;
    margin-left: 25%;
}

.img-course-small {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.text-truncate-200 {
    max-width: 200px;
}

.btn-outline-primary {
    color: var(--osen-primary);
    border-color: var(--osen-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--osen-primary);
    border-color: var(--osen-primary);
}

.custom-indicators {
    bottom: 20px;
    /* SPOSTALO PIU VICINO AL CAROSELLO */
    margin-bottom: 0;
}

/* Favorites Button States */
.btn-favorite.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    flex-shrink: 0;
    align-self: stretch;
}

.btn-favorite.is-favorite,
.btn-favorite.is-favorite:focus,
.btn-favorite.is-favorite:active {
    box-shadow: none !important;
}

.btn-favorite:focus,
.btn-favorite:active,
.btn-soft-success:focus,
.btn-soft-success:active,
.btn-primary:focus,
.btn-primary:active {
    box-shadow: none !important;
}

.btn-favorite .ti-heart-filled,
.btn-favorite .ti-x {
    display: none !important;
}

.btn-favorite.is-favorite .ti-heart {
    display: none !important;
}

.btn-favorite.is-favorite .ti-heart-filled {
    display: flex !important;
}

.btn-favorite.is-favorite:hover {
    background-color: #d63939 !important;
    border-color: #d63939 !important;
    color: #fff !important;
}

.btn-favorite.is-favorite:hover .ti-heart-filled {
    display: flex !important;
    color: #fff !important;
}

/* --- FOOTER SECTION --- */
footer.footer {
    background-color: var(--osen-white, #ffffff) !important;
    padding: 4rem 0 2rem;
    border: 0px !important;
}

.footer-social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap !important;
    padding: 0 1rem;
}

.footer-social-links a {
    color: var(--osen-heading-color, #4C4C5C) !important;
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--osen-gray-100, #f8f9fa);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.footer-social-links a:hover {
    color: var(--osen-white, #ffffff) !important;
    background-color: var(--osen-primary);
    transform: translateY(-3px);
}

.footer-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    list-style: none;
    padding: 0;
}

.footer-link,
.copyright,
.copyright a {
    color: var(--theme-muted-foreground, #62748E) !important;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.footer-link,
.copyright a {
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.footer-link:hover,
.copyright a:hover {
    color: var(--osen-primary) !important;
}

.copyright i {
    font-style: normal;
}

/* Go to top button restyling */
.btn-go-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    background-color: var(--osen-primary);
    color: var(--osen-white, #ffffff) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No shadow - matches chat and chatbot buttons */
    transition: all 0.3s ease;
    z-index: 1050;
    border: none !important;
    padding: 0;
    text-decoration: none !important;
}

.btn-go-top:hover {
    background-color: var(--osen-link-hover-color);
    transform: translateY(-5px);
    /* No shadow on hover - unified flat style */
    color: var(--osen-white, #ffffff) !important;
}

@media (max-width: 991.98px) {
    .btn-go-top:hover {
        transform: none !important;
    }
}

.btn-go-top i {
    font-size: 20px;
}

@media (max-width: 767.98px) {
    .footer-menu {
        align-items: center;
        gap: 0.75rem;
    }
}

/* ===================================
   SEARCH MODAL STYLES
   =================================== */

/* Modal Container */
.search-modal-content {
    border: none;
    border-radius: 20px;
    background-color: var(--osen-white, #ffffff);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow: hidden;
}

.search-modal-header {
    padding: 1.5rem 1.5rem 0.5rem;
}

.search-modal-body {
    padding: 1rem 1.5rem 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    position: relative;
}

/* Close Button (Mobile) */
.btn-close-search,
.btn-primary-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--osen-gray-100, #f6f7fb);
    border: none;
    border-radius: 50%;
    color: var(--osen-heading-color, #4c4c5c);
    font-size: 1.25rem;
    z-index: 10;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-close-search {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: none;
}

.btn-close-search:hover,
.btn-primary-close:hover,
.btn-primary-close:focus,
.btn-primary-close:focus-visible {
    background-color: var(--osen-danger, #ff6d43);
    color: var(--osen-white, #ffffff);
}

@media (max-width: 991.98px) {
    .btn-close-search {
        display: flex;
    }

    .search-input-wrapper {
        margin-top: 3.5rem;
    }
}

/* Search Input */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-icon {
    position: absolute;
    left: 1.25rem;
    font-size: 1.5rem;
    color: var(--osen-primary, #465dff);
    z-index: 1;
}

.search-input {
    padding: 1.25rem 3.5rem;
    font-size: 1.125rem;
    border: 2px solid var(--osen-border-color, #eef2f7);
    border-radius: 16px;
    background-color: var(--osen-gray-100, #f6f7fb);
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--osen-primary, #465dff);
    background-color: var(--osen-white, #ffffff);
    box-shadow: 0 0 0 4px rgba(60, 79, 217, 0.1);
    outline: none;
}

.search-input::placeholder {
    color: var(--osen-secondary-color, #9ba6b7);
}

.btn-clear-search {
    position: absolute;
    right: 1rem;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--osen-secondary-color, #9ba6b7);
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-clear-search:hover {
    color: var(--osen-danger, #ff6d43);
}

/* Sort Buttons */
.search-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.search-sort-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osen-secondary-color, #9ba6b7);
}

.search-sort-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-sort {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osen-heading-color, #4c4c5c);
    background-color: var(--osen-gray-100, #f6f7fb);
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.btn-sort:hover {
    background-color: var(--osen-gray-200, #eef2f7);
}

.btn-sort.active {
    background-color: var(--osen-primary, #465dff);
    color: var(--osen-white, #ffffff);
}

.btn-sort i {
    font-size: 1rem;
}

/* Loading State */
.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--osen-secondary-color, #9ba6b7);
}

/* No Results */
.search-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--osen-secondary-color, #9ba6b7);
}

.search-no-results i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.search-no-results h5 {
    color: var(--osen-heading-color, #4c4c5c);
    margin-bottom: 0.5rem;
}

.search-no-results p {
    margin: 0;
    font-size: 0.875rem;
}

/* Results List */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--osen-white, #ffffff);
    border: 1px solid var(--osen-border-color, #eef2f7);
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.search-result-item:hover, .search-result-item:focus-visible {
    border-color: var(--osen-primary, #465dff);
    box-shadow: 0 4px 12px rgba(60, 79, 217, 0.1);
    transform: translateX(4px);
}

.search-result-image {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--osen-gray-100, #f6f7fb);
}

.search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--osen-heading-color, #4c4c5c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-description {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--osen-secondary-color, #9ba6b7);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-result-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--osen-primary, #465dff);
}

.search-result-arrow {
    color: var(--osen-secondary-color, #9ba6b7);
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.search-result-item:hover .search-result-arrow {
    transform: translateX(4px);
    color: var(--osen-primary, #465dff);
}

/* Category Badges in Search */
.badge-category {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--osen-primary, #465dff);
    background-color: var(--osen-white, #ffffff);
    border: 1px solid var(--osen-primary-bg-subtle, rgba(60, 79, 217, 0.1));
    border-radius: 50px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.badge-category:hover, .badge-category:focus-visible {
    background-color: var(--osen-primary, #465dff);
    color: var(--osen-white, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 79, 217, 0.15);
}

.search-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--osen-secondary-color, #9ba6b7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    position: relative;
}

.search-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--osen-border-color, #f1f4f9);
}

.search-section-title i {
    font-size: 1.1rem;
    color: var(--osen-primary, #465dff);
}

.offcanvas {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 2000 !important;
}

.offcanvas-backdrop {
    z-index: 1999 !important;
}

.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Social icons in offcanvas to match footer */
.btn-social-outline {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background-color: var(--osen-gray-100, #f8f9fa) !important;
    transition: all 0.2s ease;
    color: var(--osen-heading-color, #4C4C5C) !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.btn-social-outline:hover {
    color: var(--osen-white, #ffffff) !important;
    background-color: var(--osen-primary) !important;
    transform: translateY(-3px);
}

.btn-social-outline i,
.btn-social-outline svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sort-direction-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
    vertical-align: middle;
}

/* Search History */
.search-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.btn-history-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex: 1;
    padding: 0.75rem;
    font-size: 0.9375rem;
    color: var(--osen-heading-color, #4c4c5c);
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: left;
    transition: background-color 0.2s ease;
}

.btn-history-item:hover, .btn-history-item:focus-visible {
    background-color: var(--osen-gray-100, #f6f7fb);
}

.btn-history-item i {
    color: var(--osen-secondary-color, #9ba6b7);
    font-size: 1.125rem;
}

.btn-remove-history {
    padding: 0.5rem;
    color: var(--osen-secondary-color, #9ba6b7);
    background: transparent;
    border: none;
    border-radius: 6px;
    opacity: 0;
    transition: all 0.2s ease;
}

.search-history-item:hover .btn-remove-history {
    opacity: 1;
}

.btn-remove-history:hover, .btn-remove-history:focus-visible {
    color: var(--osen-danger, #ff6d43);
    background-color: rgba(255, 109, 67, 0.1);
    opacity: 1;
}

/* Mobile Fullscreen Modal */
@media (max-width: 767.98px) {
    .search-modal-content {
        border-radius: 0;
        max-height: 100vh;
    }

    .search-modal-body {
        max-height: calc(100vh - 60px);
    }

    .search-input {
        font-size: 1rem;
        padding: 1rem 3rem;
    }

    .search-result-image {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
}

/* --- PERSONALIZED STUDENT HERO --- */
.student-stat-box {
    border-radius: var(--Box, 16px);
    background: var(--BG-Card-BG, #FFF);
    box-shadow: 0 0 30px 0 var(--Shadow, rgba(104, 134, 177, 0.15));
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-small-title {
    color: var(--osen-secondary-color, #9BA6B7);
    /* var(--Text-Colors-Body-Text) */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: block;
}

.stat-big-value {
    color: var(--osen-heading-color, #4C4C5C);
    /* var(--Text-Colors-Heading-Text) */
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}

.stat-underline-link {
    color: var(--osen-primary, #465dff);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}

.last-course-highlight {
    background: #FFF;
    border: 1px solid #f6f7fb;
    overflow: hidden;
}

.last-course-highlight .text-truncate {
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
}

.last-course-highlight .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
}

.course-name-display {
    color: var(--osen-heading-color, #4C4C5C);
    font-size: 16px;
    display: block;
}

.stat-icon-wrap {
    width: 60px;
    height: 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 28px;
    background-color: var(--osen-primary-bg-subtle);
    ;
    color: var(--osen-primary);
    ;
}

.btn-soft-secondary {
    background-color: #f0f2f5 !important;
    color: #6c757d !important;
    border: none !important;
}

.btn-soft-secondary:hover {
    background-color: #6c757d !important;
    color: #fff !important;
}

.resume-btn {
    font-size: 13px;
    padding: 0.5rem 1.25rem;
}

.personalized-hero .apexcharts-canvas text {
    font-family: 'Inter', sans-serif !important;
}

@media (max-width: 575.98px) {
    .personalized-hero h1.display-6 {
        font-size: 1.5rem;
    }
}

/* --- ERROR 404 PAGE --- */
.error-title {
    color: var(--Text-Colors-Heading-Text, #4C4C5C);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.error-text {
    color: var(--Text-Colors-Heading-Text, #4C4C5C);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    /* 150% */
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.btn-error-home {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-error-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important;
}

.error-404-container {
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.loading_hidden {
    display: none !important;
}

.modules_hidden {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
    opacity: 0.6;
}

.btn-module-details:hover.cursor-pointer {
    background-color: rgba(var(--osen-primary-rgb, 70, 93, 255), 0.1);
    transition: background-color 0.2s ease;
}

/* --- ARCHIVE PAGE --- */

/* Dashed border utility */
.border-bottom.border-dashed {
    border-bottom-style: dashed;
}

/* Title header with icon */

.title-header-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background-color: color-mix(in srgb, var(--osen-primary, #465dff) 10%, transparent);
    color: var(--osen-primary, #465dff);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: .5rem;
}

.title-header-icon i {
    font-size: 24px;
}

.title-header-text h1 {
    color: var(--osen-heading-color, #4C4C5C);
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
}

/* Override font-weight on labels inside the filters sidebar (more specific than global rules) */
#filters_list .form-check-label {
    font-weight: 400;
}

/* Shared frontend control styling: select, button-variant, and inputs */
.form-select.form-select-frontend,
.btn.form-select-frontend,
.form-control.form-control-frontend {
    background-color: var(--osen-gray-100, #f6f7fb);
    border-radius: var(--osen-border-radius-xl, 16px);
    color: var(--osen-heading-color, #4C4C5C);
    border: 0;
}

/* Button-specific tweak kept separate */
.btn.form-select-frontend {
    text-align: left;
}

.text-heading {
    color: var(--osen-heading-color, #4C4C5C);
}

/* hide X icon by default; shown only when active */
.btn[data-purpose="tag"] .ti {
    display: none;
}

/* show X icon on active */
.btn[data-purpose="tag"].active .ti {
    display: inline-block;
}


.filter-accordion .accordion-toggle .ti {
    transition: transform .18s ease-in-out, color .12s ease-in-out;
    display: inline-block;
}

/* when collapsed the toggler receives .collapsed from Bootstrap � rotate the up icon to point down */
.filter-accordion .accordion-toggle.collapsed .ti {
    transform: rotate(180deg);
}


/* --- ARCHIVE PAGE --- */


/* ABOUT-US specific layout overrides (desktop) */


.category-thumb {
    width: 408px;
    height: 255px;
    object-fit: cover;
    max-width: 100%;
    display: block;
}

.personalized-hero {
    /* reduce width by 10% (was 15%) */
    max-width: 90%;
    /* slightly smaller right padding so layout remains balanced */
    padding-right: 3%;
}



/* Prevent the focus/active halo from being clipped by the container's overflow:hidden.
   Keep the visual focus indicator but render it inside the button for elements
   inside `.last-course-highlight` so we don't change container overflow or global focus styles. */
.last-course-highlight .btn:focus,
.last-course-highlight .btn:focus-visible {
    box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-shadow) !important;
    border-color: var(--a11y-focus-color) !important;
    outline: none !important;
}

.last-course-highlight .btn:active {
    box-shadow: none !important;
}

/* Apply the same safe fix for any button inside an overflow-hidden container.
   This prevents focus rings from being clipped on cards/suggestions/cart items
   while preserving global button classes and accessibility. */
.overflow-hidden .btn:focus,
.overflow-hidden .btn:focus-visible {
    box-shadow: inset 0 0 0 0.25rem var(--a11y-focus-shadow) !important;
    border-color: var(--a11y-focus-color) !important;
    outline: none !important;
}

.overflow-hidden .btn:active {
    box-shadow: none !important;
}


/* Frontend-only purple-soft variant to match the "Filtri" button (subtle background + purple text) */
.button-soft-secondary-purple,
.btn.button-soft-secondary-purple {
    background-color: var(--osen-secondary-bg-subtle, #f3eaff) !important;
    color: var(--osen-secondary, #783bff) !important;
    border: none !important;
}

.button-soft-secondary-purple:hover,
.btn.button-soft-secondary-purple:hover,
.button-soft-secondary-purple:focus-visible,
.btn.button-soft-secondary-purple:focus-visible {
    background-color: color-mix(in srgb, var(--osen-secondary-bg-subtle, #f3eaff) 90%, black) !important;
    color: var(--osen-secondary, #783bff) !important;
}


/* Category tag button � soft primary background using OSEN variables */
.btn-tag-soft,
.btn.btn-tag-soft {
    background-color: rgba(var(--osen-primary-rgb, 70, 93, 255), 0.1);
    color: var(--osen-primary, #465DFF);
    border: none;
    border-radius: 6px;
    padding: 6px 13px;
    height: 35px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.btn-tag-soft:hover,
.btn.btn-tag-soft:hover {
    background-color: rgba(var(--osen-primary-rgb, 70, 93, 255), 0.2);
    color: var(--osen-primary, #465DFF);
}

.btn-tag-soft.active,
.btn.btn-tag-soft.active {
    background-color: var(--osen-primary, #465DFF);
    color: var(--osen-white, #ffffff);
}


/* Course info pills � soft background with icon and text */
.course-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: var(--osen-body-bg, #FFFFFF);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--osen-heading-color, #4c4c5c);
    white-space: nowrap;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
}

.course-info-pill i {
    font-size: 18px;
}

.course-info-pill.pill-sections i {
    color: var(--osen-primary, #465dff);
}

.course-info-pill.pill-duration i {
    color: var(--osen-success, #22C55E);
}

.course-info-pill.pill-certificate .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--osen-purple-bg-subtle, #F3E8FF);
    border-radius: 10px;
}

.course-info-pill.pill-certificate i {
    color: var(--osen-purple, #A855F7);

}

.course-info-pill.pill-certificate {
    padding: 15px 20px;
    border-radius: 16px;
}


/* When there are NO courses started, show a slightly smaller helper text */
.last-course-highlight .course-name-display--small {
    font-size: 16px;
}


/* Hero progress chart � container kept at 104px, radial graphic scaled visually by 15% */
.personalized-hero .hero-progress-chart {
    width: 104px;
    height: 104px;
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* prevent clipping of thicker stroke */
}

/* Scale ONLY the radial graphic (ring) by 15% so the numeric label remains unchanged */
.personalized-hero .hero-progress-chart .apexcharts-radialbar {
    transform-origin: 50% 50%;
    transform: scale(1.15);
    will-change: transform;
}

/* Data label (percentage) � keep same font-size / no scaling */
.personalized-hero .apexcharts-datalabel-value {
    font-size: 16px !important;
    /* keep unchanged */
    font-weight: 600 !important;
    line-height: 1;
}

/* Ensure the gray TRACK and blue AREA remain aligned:
   - keep rounded caps for the visual dot
   - make the area stroke slightly slimmer than the track so it never protrudes
*/
.personalized-hero .hero-progress-chart .apexcharts-radialbar-track path {
    stroke-width: 10px !important;
    stroke-linecap: round !important;
}

.personalized-hero .hero-progress-chart .apexcharts-radialbar-area {
    stroke-width: 8.5px !important;
    /* slightly smaller to stay inside the track */
    stroke-linecap: round !important;
}

/* safety: if ApexCharts outputs path classes differently, target specific slice too */
.personalized-hero .hero-progress-chart path.apexcharts-radialbar-area.apexcharts-radialbar-slice-0 {
    stroke-width: 8.5px !important;
    stroke-linecap: round !important;
}

/* ensure apexcharts SVG fills the container and isn't clipped */
.personalized-hero .hero-progress-chart svg,
.personalized-hero .hero-progress-chart .apexcharts-svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    display: block;
}


.personalized-hero {
    max-width: 100%;
    padding-right: 0;
}


@media (min-width: 576px) and (max-width: 991.98px) {
    .personalized-hero {
        max-width: 100%;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .about-us-row .about-us-content.about-us-right {
        border-left: var(--osen-border-width) var(--osen-border-style) var(--osen-border-color);
    }
}

/* ABOUT-US specific layout overrides (desktop) fine */
.breadcrumbs {
    background-color: var(--osen-gray-100, #f6f7fb);
    /* padding: 12px 305px 12px 308px;*/
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* height: 41px; */
}

.breadcrumbs-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
}

.breadcrumbs-list .breadcrumb-item {
    color: var(--osen-secondary-color, #9ba6b7);
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.breadcrumbs-list .breadcrumb-item a {
    color: var(--osen-secondary-color, #9ba6b7);
    text-decoration: none;
}

.breadcrumbs-list .breadcrumb-item a:hover {
    color: var(--osen-primary, #465dff);
    text-decoration: none;
}

.breadcrumbs-list .breadcrumb-item.active {
    color: var(--osen-heading-color, #4C4C5C);
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    font-style: normal;
}

.breadcrumbs-list .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--osen-secondary-color, #9ba6b7);
}

.breadcrumbs-list .breadcrumb-separator .ti {
    color: var(--osen-secondary-color, #9ba6b7);
}

.card-footer .ti-shopping-cart,
.title-header-icon .ti-shopping-cart {
    color: var(--osen-primary, #465dff);
    padding: 4px;
    border-radius: 5px;
}

.navbar-frontend .topbar-link .ti-shopping-cart {
    color: inherit;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.ti-arrow-narrow-right {
    font-size: 18px;
    vertical-align: middle;
}

.card-summary {
    color: var(--osen-secondary-color, #9ba6b7);
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    background-color: var(--osen-card-summary-bg, #f6f7fb);
    border: 1px solid var(--grey-border, #E2E8F0);
    border-radius: 5px;
}

.card-item-cart {
    border-radius: 16px;
    border: 1px solid #E7E9EB;
    margin-bottom: 2rem !important;
}

.border-radius-5 {
    border-radius: 5px !important;
}

.total-row-summary {
    color: var(--osen-heading-color, #4C4C5C);
}

/* Contact Form Input Styling */
.form-control-contact {
    width: 100%;
    height: 43px;
    border-radius: 5px;
    border: 1px solid #E7E9EB;
    padding: 11px 12px;
    gap: 3px;
    color: var(--osen-heading-color, #4C4C5C);
    font-family: var(--osen-font-sans-serif, 'Inter', sans-serif);
    font-size: var(--osen-body-font-size, 14px);
    background-color: var(--osen-white, #ffffff);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control-contact::placeholder {
    color: var(--osen-secondary-color, #9BA6B7);
}

.form-control-contact:focus {
    outline: none;
    border-color: var(--osen-primary, #465dff);
    box-shadow: 0 0 0 3px rgba(60, 79, 217, 0.1);
}

/* Textarea variant */
textarea.form-control-contact {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

/* Contact Page Map & Info Container */
.contact-map-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 2rem;
}

.contact-map-container #frontend-map {
    flex: 1;
    min-height: 300px;
    border-radius: 16px;
}

.contact-map-container .contact-info-box {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .contact-map-container {
        height: auto;
        max-width: 100%;
    }

    .contact-map-container #frontend-map {
        min-height: 300px;
    }
}

/* Contact Info Box */
.contact-info-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 30px;
    gap: 30px;
    background-color: #FAFAFF;
    border-radius: 16px;
}

.contact-info-box .contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-box .contact-info-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--osen-primary, #465dff);
    font-size: 24px;
}

.contact-info-box .contact-info-content h5 {
    color: var(--osen-heading-color, #4C4C5C);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.contact-info-box .contact-info-content p,
.contact-info-box .contact-info-content a {
    color: var(--osen-secondary-color, #9BA6B7);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    text-decoration: none;
}

.contact-info-box .contact-info-content a:hover {
    color: var(--osen-primary, #465dff);
}

@media (max-width: 991.98px) {
    .contact-info-box {
        height: auto;
        max-width: 100%;
    }
}


/* --- SATISFACTION QUESTIONNAIRE (activity_9) --- */

.satisfaction-questionnaire {
    max-width: 720px;
}

.satisfaction-question-block {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.satisfaction-question-block:last-child {
    border-bottom: none;
}

/* Slider wrapper */
.satisfaction-slider-wrap {
    position: relative;
    padding: 0 0.5rem;
}

.satisfaction-track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    margin-bottom: 2.5rem;
}

/* Gradient bar behind the range input */
.satisfaction-gradient {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 10px;
    border-radius: 5px;
    transform: translateY(-50%);
    background: linear-gradient(to right, #e53935, #ef6c00, #fb8c00, #c0ca33, #7cb342, #43a047, #2e7d32);
    pointer-events: none;
    z-index: 0;
}

/* Range input � transparent track, custom thumb */
.satisfaction-range {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
    margin: 0;
    z-index: 2;
    cursor: pointer;
}

.satisfaction-range::-webkit-slider-runnable-track {
    height: 10px;
    background: transparent;
    border-radius: 5px;
}

.satisfaction-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--thumb-color, #999);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    margin-top: -8px;
    transition: border-color .15s;
}

.satisfaction-range::-moz-range-track {
    height: 10px;
    background: transparent;
    border-radius: 5px;
    border: none;
}

.satisfaction-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--thumb-color, #999);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: border-color .15s;
}

.satisfaction-range:focus {
    outline: none;
}

.satisfaction-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25), 0 2px 6px rgba(0, 0, 0, .18);
}

.satisfaction-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .25), 0 2px 6px rgba(0, 0, 0, .18);
}

/* Labels under the slider */
.satisfaction-labels {
    display: flex;
    justify-content: space-between;
    margin-top: -1.5rem;
    padding: 0 2px;
}

.satisfaction-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 50px;
}

.satisfaction-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

.satisfaction-label-text {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .satisfaction-emoji {
        font-size: 1.2rem;
    }

    .satisfaction-label-text {
        font-size: 0.65rem;
    }

    .satisfaction-label {
        min-width: 40px;
    }
}


/* --- ACTIVITY PAGE --- */

/* Generic helpers */
.activity-main .activity-complete-btn.pe-none {
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

.truncate-text {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-barrato {
    text-decoration: line-through;
}

/* Desktop layout (=1024px) */
@media (min-width: 1024px) {
    .activity-row {
        display: flex;
        align-items: stretch;
    }

    .activity-sidebar,
    .activity-main {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - var(--frontend-header-height) - var(--frontend-breadcrumbs-height, 0px));
        transition: flex .3s ease, max-width .3s ease;
    }

    .activity-sidebar {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .activity-main {
        flex: 1 0 75%;
        max-width: 75%;
        display: flex;
        flex-direction: column;
    }

    .activity-main .module-content {
        height: 100%;
    }

    .activity-main .card {
        flex: 0 0 auto;
    }

    /* Wider sidebar on mid-sized laptops */
    @media (min-width: 1024px) and (max-width: 1440.02px) {
        .activity-sidebar {
            flex: 0 0 35%;
            max-width: 35%;
        }

        .activity-main {
            flex: 1 0 65%;
            max-width: 65%;
        }
    }

    /* sticky complete button and collapse behaviour */
    .activity-main .activity-complete-btn {
        position: sticky;
        bottom: 2rem;
        align-self: flex-start;
        margin-left: 2rem;
        margin-top: auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .3);
    }

    .activity-sidebar.collapsed {
        flex: 0 0 0 !important;
        max-width: 0 !important;
        overflow: hidden;
    }

    .activity-sidebar.collapsed+.activity-main {
        flex: 1 0 100% !important;
        max-width: 100% !important;
    }

    /* fixed-footer state (footer removed, height 0) */
    body.activity-fixed-footer {
        height: 100vh;
        overflow: hidden;
    }

    body.activity-fixed-footer footer.footer {
        display: none;
    }

    body.activity-fixed-footer .activity-row,
    body.activity-fixed-footer .activity-sidebar,
    body.activity-fixed-footer .activity-main {
        height: calc(100vh - var(--frontend-header-height) - var(--frontend-breadcrumbs-height, 0px));
        overscroll-behavior: contain;
    }
}


/* Tablet/Mobile layout (<1024px) */
@media (max-width: 1023.98px) {
    body.mobile-nav-active {
        padding-top: var(--mobile-nav-height, 60px) !important;
    }

    .activity-sidebar,
    .activity-main {
        max-width: none !important;
        width: auto !important;
    }

    .activity-sidebar {
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: max-height .3s ease;
    }

    .activity-sidebar.collapsed {
        max-height: 0 !important;
        overflow: hidden;
    }

    .activity-main {
        padding-bottom: 6rem;
    }

    .activity-main .activity-complete-btn {
        position: fixed;
        left: 2rem;
        bottom: 2rem;
        z-index: 1030;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .3);
    }
}

/* Small screen adjustments (<768px) */
@media (max-width: 768.02px) {

    .activity-sidebar,
    .activity-main {
        height: auto !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .activity-sidebar {
        max-height: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .activity-main {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* Course info section background */


/* Course page carousel - remove white bands */
#carousel-infopage {
    padding: 0;
    margin: 0;
}

#carousel-infopage .carousel-inner {
    overflow: hidden;
}

#carousel-infopage .course-image {
    border-radius: 16px 16px 0 0;
    object-fit: cover;
    height: 255px;
}

/* Course price display */
.course-price-display {
    font-family: 'Inter', sans-serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 100%;
    color: var(--osen-heading-color, #4C4C5C);
}

/* Add to cart button */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background-color: var(--osen-primary, #465dff);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--osen-white, #ffffff);
    border: none;
}

.btn-add-cart:hover {
    background-color: var(--osen-link-hover-color, #465dff);
    color: var(--osen-white, #ffffff);
}

.btn-add-cart i {
    font-size: 18px;
}

/* Original price (strikethrough) */
.course-original-price {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--osen-secondary-color, #9BA6B7);
    text-decoration: line-through;
}

/* Discount badge */
.course-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background-color: #FEE2E2;
    color: #DC2626;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* Favorites button (course page) */
.btn-favorite-course {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    border: 1px solid var(--osen-border-color, #eef2f7);
    background-color: var(--osen-white, #ffffff);
    color: var(--osen-primary, #465DFF);
    transition: all 0.2s ease;
}

.btn-favorite-course:hover {
    background-color: var(--osen-primary-bg-subtle, #f0f3ff);
    border-color: var(--osen-primary, #465DFF);
}

.btn-favorite-course.is-favorite {
    background-color: var(--osen-primary, #465DFF);
    border-color: var(--osen-primary, #465DFF);
    color: var(--osen-white, #ffffff);
}

.btn-favorite-course i {
    font-size: 20px;
}

/* Course features list */
.course-features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--osen-secondary-color, #9BA6B7);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.course-feature-item i {
    font-size: 20px;
    color: var(--osen-success, #22C55E);
    flex-shrink: 0;
}

/* Course page title */
.course-title {
    font-family: 'Inter', sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: var(--osen-heading-color, #4C4C5C);
    line-height: 1;
    margin-bottom: 0.5rem;
}


.course-modules-summary {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--osen-secondary-color, #9BA6B7);
    line-height: 21px;
}

/* Course section divider */
.course-section-divider {
    border: none;
    border-top: 2px solid #ccc;
    opacity: 1;
}

/* Course program accordion styling */
.background-program .accordion-button {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--osen-heading-color, #4C4C5C);

    padding: 24px;
    border: none;
    border-bottom: 1px solid var(--osen-border-color, #E2E8F0);
    box-shadow: none;
    gap: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.background-program .accordion-button:not(.collapsed) {

    color: var(--osen-heading-color, #4C4C5C);
    box-shadow: none;
}

.background-program .accordion-button:focus {
    box-shadow: none;

}

/* Hide default Bootstrap chevron */
.background-program .accordion-button::after {
    display: none;
}

/* Custom chevron icon */
.background-program .accordion-chevron {
    font-size: 24px;
    color: var(--osen-heading-color, #4C4C5C);
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
}

.background-program .accordion-button:not(.collapsed) .accordion-chevron {
    transform: rotate(180deg);
}

/* Section name */
.background-program .accordion-button .section-name {
    flex-grow: 1;
    text-align: left;
}

/* Modules count */
.background-program .accordion-button .section-modules-count {
    margin-left: auto;
    color: var(--osen-secondary-color, #9BA6B7);
    font-weight: 400;
}

.background-program .accordion-item {
    border: none;
    border-bottom: 1px solid var(--osen-border-color, #E2E8F0);
}

.background-program .accordion-item:last-child {
    border-bottom: none;
}

.background-program .accordion-body {
    padding: 0;
}

.background-program .accordion-body>div {
    padding: 12px 24px 12px 48px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--osen-heading-color, #4C4C5C);
    line-height: 21px;
    border-bottom: 1px solid var(--osen-border-color, #E2E8F0);
}

.background-program .accordion-body>div:last-child {
    border-bottom: none;
}

.background-program .accordion-body .fs-4 {
    font-size: 24px !important;
    color: var(--osen-heading-color, #4C4C5C);
}

.section-modules-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--osen-secondary-color, #9BA6B7);
    line-height: 21px;
    margin-right: 16px;
    white-space: nowrap;
}

.padding-top-25 {
    padding-top: 25px;
}

/* ===== Account Page Styles ===== */

/* Card with Figma-style shadow */
.account-card {
    background: var(--bg-card-bg, #fff);
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 30px 0 rgba(104, 134, 177, 0.15);
    overflow: hidden;
}

/* Card header with dashed bottom border */
.account-card-header {
    border-bottom: 1px dashed #e7e9eb;
    padding: 23px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--osen-heading-color, #4c4c5c);
    margin-bottom: 0;
}

/* Card body padding matching Figma */
.account-card-body {
    padding: 24px;
}

/* Sidebar card with 16px radius */
.account-sidebar-card {
    background: var(--bg-card-bg, #fff);
    border: none;
    border-radius: 16px;
    box-shadow: 0 0 30px 0 rgba(104, 134, 177, 0.15);
    overflow: visible;
}

.account-sidebar-card>.account-card-header:first-child {
    border-radius: 16px 16px 0 0;
}

/* Card bottom actions row (scroll-up + save) */
.account-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0;
}

/* Account page title */
.account-page-title {
    font-family: 'Inter', sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: var(--osen-heading-color, #4c4c5c);
    line-height: 1;
}

.account-page-title-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: rgba(24, 138, 226, 0.1);
    font-size: 24px;
    color: var(--osen-btn-bg, #465dff);
    flex-shrink: 0;
}

/* Fieldset legend for card sections */
.account-card .account-card-header.legend-style {
    font-size: 14px;
    font-weight: 600;
}

/* Sidebar sticky wrapper with consistent gap */
.account-sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: 21px;
    top: 100px;
}

/* Account avatar in sidebar */
.account-sidebar-card .avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.account-sidebar-card .avatar-content {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--osen-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 48px;
    margin-bottom: 16px;
}

.account-sidebar-card .avatar-content::before {
    content: var(--avatar-letter, "");
}

/* Language selector custom styling (Figma) */
.account-lang-selector {
    display: flex;
    align-items: center;
    border: 1px solid #e7e9eb;
    border-radius: 5px;
    height: 39px;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    width: 100%;
}

.account-lang-selector::after {
    content: "";
    display: inline-block;
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    margin-right: 12px;
    color: #888;
    flex-shrink: 0;
}

.account-lang-flag {
    width: 49px;
    height: 100%;
    background: #f6f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e7e9eb;
    flex-shrink: 0;
}

.account-lang-text {
    flex: 1;
    padding: 0 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--osen-heading-color, #4c4c5c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




.bg-icon {
    background-color: #E8F4FD;
}

/* =========================================================
   PACKAGE PAGE � specific styles for package (is_pack) view
   ========================================================= */

/* Pill variant for courses count inside a package */
.course-info-pill.pill-courses .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #e2e8f0;
    border-radius: 10px;
}

.course-info-pill.pill-courses i {
    color: var(--osen-heading-color, #4c4c5c);
}

/* Section title for "Corsi all'interno di questo pacchetto" */
.pkg-courses-section-title {
    font-size: 35px;
    font-weight: 600;
    color: var(--osen-heading-color, #4c4c5c);
    line-height: normal;
    margin-bottom: 0;
}

.pkg-courses-section-summary {
    font-size: 14px;
    font-weight: 400;
    color: #4a5565;
    line-height: 21px;
}

/* Horizontal course card inside a package listing */
.pkg-course-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--osen-body-text, #9ba6b7);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: 700px;
}

.pkg-course-card:hover {
    border-color: var(--osen-primary, #465dff);
    box-shadow: 0 2px 8px rgba(70, 93, 255, 0.10);
    color: inherit;
    text-decoration: none;
}

/* Thumbnail inside the package course card */
.pkg-course-thumb {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 16px;
    object-fit: cover;
    background-color: #e2e8f0;
}

/* Text content area inside package course card */
.pkg-course-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pkg-course-body .pkg-course-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--osen-heading-color, #4c4c5c);
    line-height: normal;
    margin: 0;
}

.pkg-course-body .pkg-course-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--osen-heading-color, #4c4c5c);
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Chevron arrow on the right of the package course card */
.pkg-course-chevron {
    font-size: 24px;
    color: var(--osen-heading-color, #4c4c5c);
    flex-shrink: 0;
}

/* Responsive: stack course cards at small widths */
@media (max-width: 576px) {
    .pkg-course-card {
        max-width: 100%;
    }

    .pkg-course-thumb {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
}

.btn-no-hover:hover,
.btn-no-hover:focus,
.btn-no-hover:active,
.btn-no-hover.active,
.btn-no-hover:focus-visible {
    background-color: transparent !important;
    color: var(--bs-btn-color, var(--osen-primary)) !important;
    border-color: var(--bs-btn-border-color, var(--osen-primary)) !important;
    box-shadow: none !important;
    outline: none !important;
}

.background-program {
    background-color: var(--osen-body-bg, #FFFFFF);
}


/* FORGOT PASSWORD PAGE */

@media (min-width: 992px) {

    /* apply only on non-mobile/tablet (desktop and larger) */
    #register-image {
        width: 40%;
        height: auto;
        object-fit: contain;
    }
}

/* FORGOT PASSWORD PAGE fine */

/* --- CATALOG CARD DISCOUNT BADGE --- */
.catalog-card-discount-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #7C3AED;
    color: var(--osen-white, #ffffff);
    border-radius: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.40);
    letter-spacing: 0.01em;
}

.catalog-card-discount-badge i {
    font-size: 18px;
}

/* INFO-COURSE Button neutral/light for uncategorized categories */
/* Category tag button � neutral using darker OSEN gray variables */
.btn-tag-soft-light,
.btn.btn-tag-soft-light {
    background-color: var(--osen-gray-200, #eef2f7);
    /* slightly darker than white */
    color: var(--osen-heading-color, #212529);
    border: none;
    border-radius: 6px;
    padding: 6px 13px;
    height: 35px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

.btn-tag-soft-light:hover,
.btn.btn-tag-soft-light:hover {
    background-color: var(--osen-gray-300, #dee2e6);
    color: var(--osen-heading-color, #212529);
}

.btn-tag-soft-light.active,
.btn.btn-tag-soft-light.active {
    background-color: var(--osen-gray-400, #ced4da);
    color: var(--osen-heading-color, #212529);
}

/* Subsection accordion styles - align with main sections */
.background-program .accordion-body .accordion.accordion-flush {
    margin: 0;
    padding: 0;
}

.background-program .accordion-body .accordion.accordion-flush .accordion-item {
    border: none;
}

.background-program .accordion-body .accordion.accordion-flush .accordion-body {
    padding: 0;
}

.background-program .accordion-body .accordion.accordion-flush .accordion-body>div {
    padding: 12px 24px 12px 48px;
}

/* ===== WEBINAR INFO CARD ===== */
.webinar-info-card {
    background-color: #FAFAFF;
    border: 1px solid #E7E9EB !important;
    border-radius: .5rem;
}

.webinar-info-card .title-header-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid #E7E9EB;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottone full-width su schermi piccoli */
@media (max-width: 575.98px) {
    .webinar-info-card {
        padding: .75rem !important;
    }

    .webinar-info-card .w-100.w-sm-auto {
        width: 100% !important;
        text-align: center;
    }

    .webinar-info-card__meta {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .25rem !important;
    }
}

/* Tablet: padding intermedio */
@media (min-width: 576px) and (max-width: 991.98px) {
    .webinar-info-card {
        padding: 1rem !important;
    }

    .webinar-info-card .w-100.w-sm-auto {
        width: auto !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .webinar-info-card .w-100.w-sm-auto {
        width: auto !important;
    }
}

/* =========================================================
   ACTIVITY 31 � Residential Module (Figma Restyling)
   ========================================================= */

/* Row of cards � Figma gap: 30px */
.residential-row {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

.residential-row>.residential-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Main box container matching Figma spec */
.residential-box {
    background: var(--osen-light-bg-subtle);
    border: var(--osen-border-width) var(--osen-border-style) var(--osen-border-color);
    border-radius: var(--osen-border-radius);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Header with icon + title */
.residential-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.residential-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: color-mix(in srgb, var(--osen-primary, #465dff) 10%, transparent);
    border-radius: 12px;
    flex-shrink: 0;
    color: var(--osen-primary, #465dff);
}

.residential-box-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--osen-heading-color, #4C4C5C);
    margin: 0;
    line-height: normal;
}

/* Statistics data section � 15px gap between items (Figma) */
.residential-box-data {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.residential-box-data p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--osen-heading-color, #4C4C5C);
    margin: 0;
    line-height: 21px;
}

.residential-box-data p strong {
    font-weight: 600;
}

/* Read-only textarea for event details */
.residential-textarea {
    background: var(--osen-white, #FFFFFF);
    border: var(--osen-border-width) var(--osen-border-style) var(--osen-border-color);
    border-radius: var(--osen-border-radius, 5px);
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--osen-heading-color, #4C4C5C);
    line-height: 21px;
    min-height: 153px;
    min-width: 250px;
    width: 100%;
    overflow-y: auto;
    word-wrap: break-word;
}

/* Chart area � fill remaining height, center content */
.residential-chart-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 10px;
}

.residential-chart-container {
    position: relative;
    max-width: 295px;
    max-height: 295px;
    width: 100%;
}

/* "No data" placeholder for empty chart */
.residential-chart-empty {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--osen-light-bg-subtle, #f0f3ff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.residential-chart-empty span {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--osen-text-color-subtle, #9BA6B7);
    text-align: center;
    padding: 20px;
}

/* Legend row */
.residential-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.residential-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--osen-text-color-subtle, #9BA6B7);
    white-space: nowrap;
}

.residential-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 11px;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .residential-row {
        flex-direction: column;
    }

    .residential-chart-container {
        max-width: 220px;
        max-height: 220px;
    }

    .residential-chart-empty {
        width: 160px;
        height: 160px;
    }
}

/* ====================================== */
/* Quiz Review (Activity 11 Review Page)  */
/* ====================================== */

.quiz-review-card {
    background: var(--constant-sof-bg, #fafaff);
    border: 1px solid var(--vectore, #e7e9eb);
    border-radius: 12px;
    padding: 24px;
}

.quiz-review-icon-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #dbdffe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-review-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quiz-review-details-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

.quiz-review-details-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4c7cc;
}

.quiz-review-detail-label {
    font-weight: 600;
    color: var(--text-colors-heading-text, #4c4c5c);
}

.quiz-review-detail-value {
    color: #6b7280;
}

/* Donut Chart */
.quiz-review-chart-wrapper {
    min-width: 180px;
}

.quiz-review-donut-container {
    width: 160px;
    height: 160px;
}

.quiz-review-donut {
    width: 100%;
    height: 100%;
}

.quiz-review-donut-text {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.quiz-review-donut-subtext {
    font-size: 7px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

/* Chart Legend */
.quiz-review-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.quiz-review-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-review-legend-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Q&A Items */
.quiz-review-qa-item {
    padding: 4px 0;
}

.quiz-review-qa-item .badge {
    font-size: 13px !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    .quiz-review-card .d-flex.flex-lg-row {
        flex-direction: column !important;
    }

    .quiz-review-chart-wrapper {
        align-self: center;
        margin-top: 16px;
    }
}

/* Account avatar actions: stack buttons from tablet to laptop */
@media (min-width: 768px) and (max-width: 1440px) {
    .account-sidebar-card .avatar-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .account-sidebar-card .avatar-buttons .btn {
        width: 100%;
    }
}

/* Submitted text preview style */
.submitted-text-preview {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: calc(1.5em * 6);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: justify;
}


/* --- MY COURSES VIEW --- */



/* Filter and order buttons: visible border on focus/active */
.btn-light:focus,
.btn-light:active,
.btn-light.show,
.btn-light.active {
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

/* Certificate button disabled: remove focus outline */
.cert-btn-disabled:focus,
.cert-btn-disabled:active,
.cert-btn-disabled:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}


/* Utility: hide horizontal scrollbar while keeping scroll/drag enabled */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Utility: soft right fade for horizontally scrollable areas */
.mask-fade-right {
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* Catalog category strip refinements */
.catalog-filter-categories {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.catalog-filter-categories:active {
    cursor: grabbing;
}

/* Catalog responsive refinement: tablet keeps horizontal category strip, mobile uses dropdown */
@media (max-width: 991.98px) {
    .catalog-toolbar-main {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        overflow: visible;
    }

    .catalog-filter-group {
        width: 100%;
    }

    .catalog-filter-pill {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        font-size: 0.95rem;
    }

    .catalog-filter-pill span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .catalog-filter-categories {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        cursor: grab;
    }

    .catalog-filter-categories:active {
        cursor: grabbing;
    }

    .catalog-category-button {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .catalog-category-dropdown {
        width: 100%;
    }

    .catalog-category-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
    }

    .catalog-category-dropdown-menu {
        max-height: 240px;
        overflow-y: auto;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
    }

    .catalog-mobile-category-item {
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        padding: 0.55rem 0.7rem;
        white-space: nowrap;
    }

    .catalog-mobile-category-item i {
        display: none;
    }

    .catalog-mobile-category-item.active {
        background-color: rgba(var(--osen-primary-rgb, 70, 93, 255), 0.1);
        color: var(--osen-primary, #465DFF);
    }

    .catalog-mobile-category-item.active i {
        display: inline-block;
    }
}

@media (max-width: 420px) {
    .catalog-filter-pill {
        font-size: 0.88rem;
        gap: 0.35rem;
    }

    .catalog-filter-pill i {
        display: none;
    }
}

/* custom progress bar height for review activities */
.progress-thin {
    height: .75rem !important;
}

/* --- CONTACT PAGE CAROUSEL --- */
.banner-contacts {
    height: 238px;
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .banner-contacts {
        height: 190px;
    }
}

@media (max-width: 991.98px) {
    .banner-contacts {
        height: 210px;
    }
}

/* Ensure links using `.text-heading` keep their color on hover/focus */
a.text-heading,
a.text-heading:hover,
a.text-heading:focus {
    color: var(--osen-heading-color, #4C4C5C) !important;
    text-decoration: none !important;
}

.page-item.active .page-link {
    background-color: var(--osen-primary, #465dff) !important;
    border-color: var(--osen-primary, #465dff) !important;
}

.form-check-input:checked {
    background-color: var(--osen-primary, #465dff) !important;
    border-color: var(--osen-primary, #465dff) !important;
}

.btn-primary:focus {
    background-color: var(--osen-btn-hover-bg) !important;
    border-color: var(--osen-primary, #465dff) !important;
}

.progress-bar {
    background-color: var(--osen-primary, #465dff) !important;
}

/* COOKIE BANNERS OVERRIDE */

/* Generic banner text (headings, paragraphs, links) uses heading color */
.cc_div,
.cc_div :is(em, strong, p, .p, span, .cc-cookie-category, .cc-note, a) {
    color: var(--osen-heading-color, #4C4C5C) !important;
}

/* Force color inheritance on buttons (override cookieconsent !important rules) */
.cc_div button,
.cc_div .c-bn,
.cc_div .c-link {
    color: inherit !important;
}

/* Pseudo-elements of #s-c-bn: background = heading color (used for drawing the X icon) */
#s-c-bn::before,
#s-c-bn::after,
#s-c-bn *::before,
#s-c-bn *::after {
    background: var(--osen-heading-color, #4C4C5C) !important;
}

/* Main button (accept/accept-all): primary style */
.cc_div #c-p-bn,
.cc_div #s-all-bn {
    color: var(--osen-white, #ffffff) !important;
    background-color: var(--osen-primary, #465dff) !important;
    border-color: var(--osen-primary, #465dff) !important;
}

.cc_div :is(#c-p-bn, #s-all-bn):is(:hover, :focus) {
    background-color: var(--osen-primary-dark, #2a3bc0) !important;
    border-color: var(--osen-primary-dark, #2a3bc0) !important;
}

/* Disable hover on category sections inside settings panel */
#s-bl .c-bl:hover {
    background: transparent !important;
    transition: none !important;
}

/*__________________________________________________________________________________________*/

/* KEYBOARD ACCESSIBILITY */

/* Visible focus for interactive elements (excludes page-link, badge, badge-category, top-go button and userDropdown) */
a:not(.btn):not(.topbar-link):not(.page-link):not(.badge):not(.badge-category):not(.btn-go-top):not(#userDropdown):focus-visible {
    color: var(--osen-primary, #465dff) !important;
}

/* Generic focus for input/textarea/select elements (excluding search modal input) */
input:not(#searchModalInput):focus-visible,
textarea:focus-visible,
select:focus-visible {
    color: var(--osen-primary, #465dff) !important;
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Active link in login offcanvas form */
#loginFormOffcanvas a:focus-visible {
    text-decoration: underline !important;
}

/* Privacy policy link in contacts form - visible focus */
.form-check-label > a:focus-visible {
    text-decoration: underline !important;
}

/* "Show more" button in category card */
#categoriesCarousel button:focus-visible,
#categories button:focus-visible {
    text-decoration: underline !important;
}

/* Generic focus for special buttons/links */
a.btn:focus-visible,
a.topbar-link:focus-visible {
    color: var(--osen-primary, #465dff) !important;
}

/* Generic focus for primary buttons */
a.btn-primary:focus-visible {
    color: var(--osen-white, #ffffff) !important;
}

/* Generic focus for outline primary buttons */
a.btn-outline-primary:focus-visible {
    color: var(--osen-white, #ffffff) !important;
}

/* Generic focus for outline secondary buttons */
a.btn-outline-secondary:focus-visible {
    color: var(--osen-white, #ffffff) !important;
}

/* Generic focus for soft secondary buttons */
.btn-soft-secondary:focus-visible {
    background-color: #6c757d !important;
}

/* Focus for show/hide password toggle in login offcanvas */
#loginOffcanvas .input-group-text[aria-label*="show_hide_password"]:focus-visible {
    color: var(--osen-primary, #465dff) !important;
}

/* Focus on logo link in frontend navbar */
.navbar-frontend .navbar-brand:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus indicator for hero carousel indicator buttons */
#heroCarousel .carousel-indicators button:focus-visible,
#contactCarousel .carousel-indicators button:focus-visible {
    outline: 2px solid var(--osen-white, #ffffff) !important;
    outline-offset: 2px !important;
}

/* Focus indicator for categories, courses and contacts carousel indicator buttons */
#categoriesCarousel .carousel-indicators button:focus-visible,
#coursesCarousel .carousel-indicators button:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus for child buttons of #catalog_filter_switch */
#catalog_filter_switch > button:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus for course links (homepage + catalog): badge links and internal card-body links */
#courses .card-body a:focus-visible,
#course_list_container .card-body a:focus-visible,
a.badge:focus-visible,
.btn-tag-soft:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus for go-to-top button */
.btn-go-top:focus-visible {
    color: var(--osen-white, #ffffff) !important;
    background-color: var(--osen-link-hover-color) !important;
}

/* Focus for userDropdown */
#userDropdown:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Visible focus for catalog category cards */
#course_list_container .card:focus-visible,
#courses .card:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus styling for category selector active/aria-pressed=true (hover/focus-visible) */
.catalog-category-button.active:hover,
.catalog-category-button.active:focus-visible {
    background-color: var(--osen-primary-dark, #2a3bc0) !important;
    border-color: var(--osen-primary-dark, #2a3bc0) !important;
    color: var(--osen-white, #ffffff) !important;
}

/* Visible focus for the whole course card in catalog */
#course_list_container .position-relative > a:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Visible focus for soft-success buttons in course cards */
#course_list_container .card .btn-soft-success:focus-visible {
    color: var(--osen-white, #ffffff) !important;
}

/* Focus style for accordion toggles to match OSEN design token */
.accordion-button:focus-visible {
    background-color: var(--osen-primary-bg-subtle, #f0f3ff) !important;
}

/* Focus style for normal pagination page links */
.page-link:focus-visible {
    background-color: #e9ecef !important;
}

/* Focus style for sort buttons in modal search (excluding active state) */
.btn-sort:not(.active):focus-visible {
    background-color: var(--osen-gray-200, #eef2f7) !important;
}

/* Focus style for active sort buttons in modal search */
.btn-sort.active:focus-visible {
    outline: 2px solid var(--osen-primary, #465dff) !important;
    outline-offset: 2px !important;
}

/* Focus style for clear history button in modal search */
#clearHistoryBtn:focus-visible {
    text-decoration: underline;
}

/* Focus style for navigation sidebar inside activites */
.btn-show-hidden:focus,
.btn-module-details:focus {
    outline: 2px solid var(--osen-primary, #465dff);
    outline-offset: 2px;
}