/* COURSE HEADER ======================================== */
.course-header {
    background: var(--color-primary-dark);
    color: var(--color-bg-white);
    padding: 1.75rem 0;

    .breadcrumb {
        background: transparent;
        margin: 0 0 0.75rem;
        padding: 0;
    }

    .breadcrumb-item {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.75rem;

        a {
            color: var(--color-bg-white);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        &.active {
            color: rgba(255, 255, 255, 0.7);
        }

        &+.breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.6);
            content: ">" !important;
            font-family: inherit;
        }
    }

    .course-header-title {
        color: var(--color-bg-white);
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 0.75rem;
        text-transform: uppercase;
    }

    .course-quick-info {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;

        .quick-info-item {
            align-items: center;
            color: var(--color-bg-white);
            display: flex;
            font-size: 0.8rem;
            gap: 0.4rem;

            i {
                font-size: 0.95rem;
            }
        }
    }

    .info-curso {
        color: var(--color-bg-white) !important;
    }
}

.course-badge {
    background: var(--color-secondary-orange);
    border-radius: 6px !important;
    color: var(--color-bg-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
}

/* CONTENT SECTION ====================================== */
.content-section {
    background: var(--color-bg-white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;

    .content-title {
        border-bottom: 3px solid var(--color-primary-blue);
        color: var(--color-primary-dark);
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
    }

    .content-body {
        color: var(--color-text-dark);
        font-size: 0.9rem;
        line-height: 1.7;

        p {
            margin-bottom: 0.85rem;
        }

        ul {
            padding-left: 1.25rem;

            li {
                margin-bottom: 0.5rem;
            }
        }
    }

    .subsection-title {
        color: var(--color-primary-dark);
        font-size: 1rem;
        font-weight: 700;
        margin: 1.25rem 0 0.75rem;
    }

    .learning-list {
        list-style: none;
        padding-left: 0;

        li {
            margin-bottom: 0.6rem;
            padding-left: 1.25rem;
            position: relative;

            &::before {
                background: var(--color-primary-blue);
                border-radius: 50%;
                content: '';
                height: 6px;
                left: 0;
                position: absolute;
                top: 0.55rem;
                width: 6px;
            }
        }
    }
}

.course-full-content {
    .content-block {
        h3 {
            color: var(--color-primary-dark);
            font-size: 1.1rem;
        }
    }
}

/* SIDEBAR STYLES ====================================== */
.course-sidebar-wrapper {
    margin-top: 0.5rem;
    position: static;
    z-index: 100;

    .course-sidebar-card {
        background-color: var(--color-bg-white);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5rem;
        overflow: visible;
        position: relative;

        &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            transform: none;
        }

        .course-sidebar-image {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            height: 220px;
            overflow: hidden;
            position: relative;

            img {
                object-fit: cover;
                transition: transform 0.6s ease;
                width: 100%;
            }
        }

        &:hover {
            .course-sidebar-image {
                img {
                    transform: scale(1.05);
                }
            }
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-title {
            color: var(--color-primary-blue);
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.85rem;
        }

        .form-select {
            background-color: var(--color-bg-light);
            border-color: var(--color-border);
            border-radius: 6px;
            font-size: 0.9rem;
            padding: 0.7rem;
        }

        .btn-enroll {
            background-color: var(--color-accent-green);
            border: 1px solid var(--color-accent-green);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(39, 174, 96, 0.2);
            color: var(--color-bg-white);
            font-size: 0.95rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            margin-bottom: 0.85rem;
            padding: 0.85rem;
            text-transform: uppercase;
            transition: all 0.3s ease;
            width: 100%;

            &:hover {
                background-color: var(--color-accent-green);
                box-shadow: 0 5px 15px rgba(45, 88, 255, 0.4);
                transform: translateY(-2px);
            }
        }

        .btn-interest {
            font-size: 0.95rem;
            font-weight: 800 !important;
            letter-spacing: 0.5px;
            text-transform: uppercase !important;
            border-radius: 8px;
            padding: 0.85rem;
            transition: all 0.3s ease;
        }

        .btn-success {
            background-color: var(--color-primary-blue) !important;
            border: 1px solid var(--color-primary-blue) !important;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2) !important;
            color: var(--color-bg-white) !important;
            cursor: not-allowed !important;
            font-size: 0.95rem;
            font-weight: 800 !important;
            letter-spacing: 0.5px;
            opacity: 0.75 !important;
            padding: 0.85rem;
            pointer-events: none;
            text-transform: uppercase !important;
            transition: all 0.3s ease;
        }

        .payment-conditions {
            background-color: var(--color-bg-light) !important;
            border: 1px solid var(--color-border) !important;
            border-radius: 8px !important;
            color: var(--color-text-dark) !important;
            font-size: 0.85rem;

            h6 {
                color: var(--color-text-dark) !important;
            }

            .payment-conditions-text {
                font-size: 0.85rem;
                line-height: 1.5;
            }
        }

        .sidebar-info-item {
            font-size: 0.88rem;
            margin-bottom: 0.5rem;

            &:last-child {
                margin-bottom: 0;
            }

            i {
                color: var(--color-primary-blue) !important;
            }

            .fa-star {
                color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
            }
        }

        .main-price-display {
            color: var(--color-primary-blue);
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.1;
        }

        .secondary-price-display {
            color: var(--color-text-light);
            font-size: 0.9rem;
            font-weight: 400;
        }

        .price-reference {
            color: var(--color-text-light);
            font-size: 0.75rem;
            line-height: 1.2;
        }

        .total-price-label {
            color: var(--color-text-light);
            font-size: 0.9rem;
            font-weight: 500;
        }
    }
}

.course-content-reverse-mobile {
    flex-direction: column-reverse;
}

/* BANNER TEXT (Curso) ================================== */
.banner-text {
    padding: 1.25rem 0;
    width: 100%;

    .banner-wrapper {
        align-items: center;
        background-color: var(--color-bg-light);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        padding: 2rem 1.25rem;
        position: relative;
        width: 100%;
    }

    .banner-content {
        color: var(--color-text-dark) !important;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.45;
        max-width: 900px;
        text-align: center;
        z-index: 1;

        .highlight,
        span,
        strong {
            color: inherit;
        }

        .highlight {
            color: var(--color-primary-blue);
        }
    }
}

/* INFO CARDS (DÚVIDAS) ================================= */
.info-card {
    background: var(--color-bg-light);
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 1.15rem;
    text-align: center;

    .info-card-icon {
        align-items: center;
        background: var(--color-primary-blue);
        border-radius: 50%;
        color: var(--color-bg-white);
        display: flex;
        font-size: 1.25rem;
        height: 44px;
        justify-content: center;
        margin: 0 auto 0.85rem;
        width: 44px;

        i {
            font-size: 1.5rem;
        }
    }

    h4 {
        color: var(--color-primary-dark);
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    .info-card-text {
        color: var(--color-primary-dark);
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 0;

        a {
            color: var(--color-primary-dark);
        }
    }

    p {
        color: var(--color-primary-blue);
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    p.fw-semibold {
        color: var(--color-primary-blue);
        font-size: 0.95rem;
        line-height: 1.5;

        a {
            color: var(--color-primary-blue);
            font-weight: bold;
        }
    }

    .btn-contact {
        border: none;
        color: var(--color-primary-blue);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 5px 15px rgba(45, 88, 255, 0.4);
            transform: translateY(-2px);
        }
    }
}

/* INFO CARD WYSIWYG ==================================== */
.info-card-wysiwyg {
    h6 {
        font-weight: 700 !important;
        color: var(--color-primary-blue) !important;
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
        text-align: left;
    }

    p {
        color: var(--color-primary-blue) !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        text-align: left;
    }

    a {
        color: var(--color-primary-blue) !important;
        font-weight: 600;
        text-decoration: underline !important;
    }
}

/* MEDIA QUERIES — Tablet e Desktop (min-width) ======== */
/* Desktop (≥ 992px) */
@media (min-width: 992px) {
    .course-header {
        padding: 2rem 0;

        .breadcrumb {
            margin-bottom: 1.25rem;
        }

        .breadcrumb-item {
            font-size: 0.85rem;
        }

        .course-header-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .course-quick-info {
            gap: 1.5rem;

            .quick-info-item {
                font-size: 0.9rem;

                i {
                    font-size: 1.1rem;
                }
            }
        }
    }

    .course-badge {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .content-section {
        padding: 2rem;

        .content-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
        }

        .content-body {
            font-size: 1rem;
            line-height: 1.8;

            ul {
                padding-left: 1.5rem;

                li {
                    margin-bottom: 0.75rem;
                }
            }
        }

        .subsection-title {
            font-size: 1.1rem;
            margin: 1.5rem 0 1rem;
        }
    }

    .course-full-content {
        .content-block {
            h3 {
                font-size: 1.35rem;
            }
        }
    }

    /* Desktop: sidebar com efeito de overlap (negativo) */
    .course-sidebar-wrapper {
        margin-top: -249px;
        position: sticky;
        top: 120px;

        .course-sidebar-card {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

            &:hover {
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            }

            .course-sidebar-image {
                height: 226px;
            }

            .card-body {
                padding: 2rem;
            }

            .card-title {
                font-size: 1.25rem;
                margin-bottom: 1rem;
            }

            .form-select {
                font-size: 0.95rem;
                padding: 0.8rem;
            }

            .btn-enroll,
            .btn-interest,
            .btn-success {
                font-size: 1rem;
                padding: 1rem;
            }

            .btn-success {
                opacity: 0.75 !important;
                cursor: not-allowed !important;
                pointer-events: none;
            }

            .main-price-display {
                font-size: 2rem;
            }

            .secondary-price-display {
                font-size: 1rem;
            }

            .total-price-label {
                font-size: 1rem;
            }
        }
    }

    /* Desktop: desfaz reverse mobile */
    .course-content-reverse-mobile {
        flex-direction: row;
    }

    .banner-text {
        padding: 2rem 0;

        .banner-wrapper {
            border-radius: 16px;
            padding: 4rem 2rem;
        }

        .banner-content {
            font-size: 2rem;
            line-height: 1.5;
        }
    }

    .info-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;

        .info-card-icon {
            font-size: 1.5rem;
            height: 50px;
            margin-bottom: 1rem;
            width: 50px;

            i {
                font-size: 2rem;
            }
        }

        h4 {
            margin-bottom: 1rem;
        }

        p {
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

        .btn-contact {
            font-size: 0.95rem;
        }
    }

    .info-card-wysiwyg p {
        font-size: 0.95rem !important;
    }
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    .course-header {
        padding: 2rem 0;

        .breadcrumb {
            margin-bottom: 1rem;
        }

        .breadcrumb-item {
            font-size: 0.8rem;
        }

        .course-header-title {
            font-size: 1.75rem;
        }

        .course-quick-info {
            gap: 1rem 1.25rem;

            .quick-info-item {
                font-size: 0.85rem;

                i {
                    font-size: 1rem;
                }
            }
        }
    }

    .course-badge {
        border-radius: 8px !important;
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }

    .content-section {
        padding: 1.5rem;

        .content-title {
            font-size: 1.3rem;
            margin-bottom: 1.25rem;
        }

        .content-body {
            font-size: 0.95rem;
        }

        .subsection-title {
            font-size: 1.05rem;
        }
    }

    .course-full-content {
        .content-block {
            h3 {
                font-size: 1.2rem;
            }
        }
    }

    .course-sidebar-wrapper {
        .course-sidebar-card {
            .course-sidebar-image {
                height: 200px;
            }

            .card-body {
                padding: 1.5rem;
            }

            .card-title {
                font-size: 1.15rem;
            }

            .main-price-display {
                font-size: 1.8rem;
            }

            .secondary-price-display {
                font-size: 0.95rem;
            }
        }
    }

    .banner-text {
        padding: 1.5rem 0;

        .banner-wrapper {
            border-radius: 14px;
            padding: 3rem 1.5rem;
        }

        .banner-content {
            font-size: 1.5rem;
        }
    }

    .info-card {
        border-radius: 12px;
        margin-bottom: 1.25rem;
        padding: 1.25rem;

        .info-card-icon {
            font-size: 1.5rem;
            height: 48px;
            width: 48px;
        }

        h4 {
            font-size: 1rem;
        }

        p {
            font-size: 0.88rem;
        }
    }

    .info-card-wysiwyg p {
        font-size: 0.92rem !important;
    }
}

/* Mobile only (< 768px) — Ocultar breadcrumb */
@media (max-width: 767px) {
    .course-header {
        nav[aria-label="breadcrumb"] {
            display: none;
        }
    }
}