/* ==============================================================
   PSYCHO-VERSE UNIFIED GLOBAL & INNER PAGE STYLING SYSTEM
   ============================================================== */

:root {
    --psychoverse-red: #E4302C;
    --psychoverse-red-hover: #c92420;
    --psychoverse-dark: #0f172a;
    --psychoverse-navy: #0b1329;
    --psychoverse-slate: #475569;
    --psychoverse-border: #e2e8f0;
    --psychoverse-bg-light: #f8fafc;
}

/* -------------------------------------------------------------
   1. FLEXBOX & LAYOUT UTILITIES (Header, Footer, Grid)
   ------------------------------------------------------------- */
.flex-align { display: flex !important; align-items: center !important; }
.flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }

.gap-4 { gap: 4px !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }
.gap-20 { gap: 20px !important; }
.gap-24 { gap: 24px !important; }
.gap-32 { gap: 32px !important; }

.rounded-8 { border-radius: 8px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-pill { border-radius: 50rem !important; }

.cover-img { object-fit: cover !important; }
.text-line-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Container Utility for Psycho-verse Header */
.container--xl {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* -------------------------------------------------------------
   2. PSYCHO-VERSE HEADER STYLING REPAIR
   ------------------------------------------------------------- */
header.header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--psychoverse-border) !important;
    position: relative !important;
    z-index: 100 !important;
    padding: 10px 0 !important;
}
.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.header-right {
    display: flex !important;
    align-items: center !important;
}
.topics-dropdown-btn {
    padding: 8px 18px !important;
    cursor: pointer !important;
    background: #f8fafc !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--psychoverse-slate) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Primary Crimson Button */
.btn-main, .btn-primary, .theme_btn {
    background-color: var(--psychoverse-red) !important;
    border-color: var(--psychoverse-red) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 50rem !important;
    padding: 10px 24px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-main:hover, .btn-primary:hover, .theme_btn:hover {
    background-color: var(--psychoverse-red-hover) !important;
    border-color: var(--psychoverse-red-hover) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(228, 48, 44, 0.35) !important;
}

/* -------------------------------------------------------------
   3. GRID & COLUMN REPAIR FOR COURSES & DETAIL PAGES
   ------------------------------------------------------------- */
.course__details .container > .row,
.courses_area .container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

@media (min-width: 992px) {
    .course__details .col-xl-8, .col-lg-8, .col-xl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    .course__details .col-xl-4, .col-lg-4, .col-xl-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    .col-lg-3, .col-xl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    .col-lg-9, .col-xl-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}

/* -------------------------------------------------------------
   4. COURSE CARDS (.couse_wizged & .course-item)
   ------------------------------------------------------------- */
.course-item, .couse_wizged {
    background: #ffffff !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}
.course-item:hover, .couse_wizged:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(228, 48, 44, 0.12) !important;
    border-color: rgba(228, 48, 44, 0.3) !important;
}
.course-item__thumb, .couse_wizged .thumb {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 200px !important;
}
.course-item__thumb img, .couse_wizged .thumb .thumb_inner {
    transition: transform 0.4s ease !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
}
.course-item:hover .course-item__thumb img,
.couse_wizged:hover .thumb .thumb_inner {
    transform: scale(1.04) !important;
}
.couse_wizged .prise_tag {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: var(--psychoverse-red) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 50rem !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    z-index: 2 !important;
}
.couse_wizged .course_content {
    padding: 20px !important;
}
.couse_wizged .course_content h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--psychoverse-dark) !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}
.couse_wizged .rating_cart {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}
.couse_wizged .cart_store {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1px solid var(--psychoverse-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--psychoverse-slate) !important;
    transition: all 0.2s ease !important;
}
.couse_wizged .cart_store:hover {
    background: var(--psychoverse-red) !important;
    color: #ffffff !important;
    border-color: var(--psychoverse-red) !important;
}
.couse_wizged .rateing {
    color: #f59e0b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.couse_wizged .course_less_students {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 14px !important;
    border-top: 1px dashed var(--psychoverse-border) !important;
    font-size: 13px !important;
    color: var(--psychoverse-slate) !important;
}

/* Filter Sidebar Cards */
.courses_area {
    padding: 50px 0 90px 0 !important;
    background-color: var(--psychoverse-bg-light) !important;
}
.course_category_chose {
    background: #ffffff !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}
.single_course_categry {
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px dashed var(--psychoverse-border) !important;
}
.single_course_categry:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
.single_course_categry h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--psychoverse-dark) !important;
    margin-bottom: 14px !important;
}
.primary_checkbox input:checked ~ .checkmark {
    background-color: var(--psychoverse-red) !important;
    border-color: var(--psychoverse-red) !important;
}
.courses_area .box_header {
    background: #ffffff !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    margin-bottom: 24px !important;
}

/* -------------------------------------------------------------
   5. DETAILED COURSE PAGE STYLING (Hero & Sticky Price Box)
   ------------------------------------------------------------- */
.course__details_head {
    padding: 70px 0 60px 0 !important;
    background-color: var(--psychoverse-navy) !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    color: #ffffff !important;
}
.course__details_head::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11, 19, 41, 0.88);
    z-index: 1;
}
.course__details_head .container {
    position: relative;
    z-index: 2;
}
.course__details_head .title {
    font-family: 'Montserrat Alternates', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
    line-height: 1.25 !important;
}
.course__details_head .location span {
    color: var(--psychoverse-red) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.course__details_head .meta_item span {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15px !important;
}

/* Sidebar Price & Buy Widget */
.sidebar__widget, .course_details_widget {
    background: #ffffff !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
    margin-top: 0 !important;
}
.sidebar__widget #price_show_tag,
.course_details_widget .price_tag h3 {
    color: var(--psychoverse-red) !important;
    font-weight: 800 !important;
    font-size: 30px !important;
    margin-bottom: 0 !important;
}
.sidebar__widget .theme_btn,
.sidebar__widget .theme_line_btn,
.course_details_widget .enroll_btn, 
.course_details_widget .theme_btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 50rem !important;
    text-align: center !important;
    margin-top: 12px !important;
    display: block !important;
    box-sizing: border-box !important;
}
.sidebar__widget .theme_line_btn {
    background: transparent !important;
    border: 2px solid var(--psychoverse-red) !important;
    color: var(--psychoverse-red) !important;
}
.sidebar__widget .theme_line_btn:hover {
    background: var(--psychoverse-red) !important;
    color: #ffffff !important;
}

/* Detailed Course Content & Tabs Area */
.course_details_wize {
    padding: 50px 0 80px 0 !important;
    background-color: var(--psychoverse-bg-light) !important;
}
.course_details_wize .details_shadow {
    background: #ffffff !important;
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}
.course_details_wize .nav-tabs,
.course_tabs .nav {
    border-bottom: 2px solid var(--psychoverse-border) !important;
    margin-bottom: 30px !important;
    gap: 12px !important;
    background: transparent !important;
}
.course_details_wize .nav-tabs .nav-link,
.course_tabs .nav-link {
    font-weight: 700 !important;
    color: var(--psychoverse-slate) !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}
.course_details_wize .nav-tabs .nav-link.active,
.course_tabs .nav-link.active {
    color: var(--psychoverse-red) !important;
    background: rgba(228, 48, 44, 0.08) !important;
}

/* Curriculum Accordion Cards */
.curriculum_wrap .card {
    border: 1px solid var(--psychoverse-border) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
.curriculum_wrap .card-header {
    background: #f8fafc !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--psychoverse-border) !important;
}
.curriculum_wrap .card-header button {
    font-weight: 700 !important;
    color: var(--psychoverse-dark) !important;
    text-decoration: none !important;
}

/* -------------------------------------------------------------
   6. PSYCHO-VERSE FOOTER STYLING REPAIR
   ------------------------------------------------------------- */
footer.footer, .footer {
    background-color: #ffffff !important;
    padding: 60px 0 30px 0 !important;
    border-top: 1px solid var(--psychoverse-border) !important;
}
.footer-item {
    margin-bottom: 30px !important;
}
.footer-menu, .footer-item ul, .social-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.footer-menu li, .footer-item ul li, .social-list li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 12px !important;
}
.footer-menu li a {
    color: var(--psychoverse-slate) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.footer-menu li a:hover {
    color: var(--psychoverse-red) !important;
    text-decoration: underline !important;
}
.row-cols-xxl-4, .row-cols-lg-2, .row-cols-sm-2, .row-cols-1 {
    display: flex !important;
    flex-wrap: wrap !important;
}
@media (min-width: 992px) {
    .row-cols-lg-2 > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}
@media (min-width: 1400px) {
    .row-cols-xxl-4 > * {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
}