/* ==========================================================================
   Psycho-verse - PUBLIC / MARKETING PAGES
   File: public/frontend/psychoverse/css/psychoverse-public.css

   SCOPE: /courses, /courses-details/{slug}, /about-us.
   Loaded ONLY on those routes (see _header.blade.php route condition), and
   loaded LAST so it wins over infixlmstheme/css/custom.css.

   WHY THIS FILE EXISTS
   bootstrap.min.css is linked only on `/`, the dashboard and the public
   profile. Every other public page renders Bootstrap grid + utility markup
   with no Bootstrap behind it. infixlmstheme/css/custom.css carries a partial
   hand-rolled shim (col-lg-3/4/8/9, col-xl-3/4/8/9, col-sm-6 only, all
   !important) which covers some of it and gets the xl breakpoint wrong.
   Sections 1-2 below restore a faithful Bootstrap 5 grid + the utility
   classes these pages actually use. Every width declaration carries
   !important purely to out-rank that existing shim.

   Brand: primary #E4302C. White text needs #C9241F (5.59:1); #E4302C is
   4.41:1 and fails WCAG AA. Fonts: Montserrat / Montserrat Alternates.
   ========================================================================== */

:root {
    --psv-red: #E4302C;          /* brand red - decorative use only */
    --psv-red-aa: #C9241F;       /* 5.59:1 vs white, both directions */
    --psv-green-aa: #15803D;     /* 5.02:1 with white text */
    --psv-ink-muted: #5C5C5C;    /* 6.69:1 on white */
    --psv-ink-muted-slate: #556074; /* 5.79:1 on #F1F5F9 */
    --psv-focus: #C9241F;
}

/* ==========================================================================
   1. BOOTSTRAP 5 GRID FALLBACK
   ========================================================================== */

.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 12px;
    padding-left: 12px;
}
@media (min-width: 576px)  { .container { max-width: 540px } }
@media (min-width: 768px)  { .container { max-width: 720px } }
@media (min-width: 992px)  { .container { max-width: 960px } }
@media (min-width: 1200px) { .container { max-width: 1140px } }
@media (min-width: 1400px) { .container { max-width: 1320px } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: -12px;
    margin-left: -12px;
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-top: 0;
}

/* Gutter utilities used in this markup */
.g-0, .gx-0 { margin-right: 0; margin-left: 0 }
.g-0 > *, .gx-0 > * { padding-right: 0; padding-left: 0 }
.gy-5 { margin-top: -48px }
.gy-5 > * { margin-top: 48px }
.row-gap-24 { row-gap: 24px }

.col-auto{flex:0 0 auto!important;width:auto!important}
.col{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-0{margin-left:0.0%}
.offset-1{margin-left:8.333333%}
.offset-2{margin-left:16.666667%}
.offset-3{margin-left:25.0%}
.offset-4{margin-left:33.333333%}
.offset-5{margin-left:41.666667%}
.offset-6{margin-left:50.0%}
.offset-7{margin-left:58.333333%}
.offset-8{margin-left:66.666667%}
.offset-9{margin-left:75.0%}
.offset-10{margin-left:83.333333%}
.offset-11{margin-left:91.666667%}
.row-cols-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-auto>*{flex:0 0 auto!important;width:auto!important}
@media (min-width:576px){
.col-sm-auto{flex:0 0 auto!important;width:auto!important}
.col-sm{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-sm-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-sm-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-sm-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-sm-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-sm-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-sm-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-sm-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-sm-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-sm-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-sm-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-sm-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-sm-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-sm-0{margin-left:0.0%}
.offset-sm-1{margin-left:8.333333%}
.offset-sm-2{margin-left:16.666667%}
.offset-sm-3{margin-left:25.0%}
.offset-sm-4{margin-left:33.333333%}
.offset-sm-5{margin-left:41.666667%}
.offset-sm-6{margin-left:50.0%}
.offset-sm-7{margin-left:58.333333%}
.offset-sm-8{margin-left:66.666667%}
.offset-sm-9{margin-left:75.0%}
.offset-sm-10{margin-left:83.333333%}
.offset-sm-11{margin-left:91.666667%}
.row-cols-sm-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-sm-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-sm-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-sm-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-sm-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-sm-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-sm-auto>*{flex:0 0 auto!important;width:auto!important}
}
@media (min-width:768px){
.col-md-auto{flex:0 0 auto!important;width:auto!important}
.col-md{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-md-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-md-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-md-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-md-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-md-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-md-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-md-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-md-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-md-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-md-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-md-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-md-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-md-0{margin-left:0.0%}
.offset-md-1{margin-left:8.333333%}
.offset-md-2{margin-left:16.666667%}
.offset-md-3{margin-left:25.0%}
.offset-md-4{margin-left:33.333333%}
.offset-md-5{margin-left:41.666667%}
.offset-md-6{margin-left:50.0%}
.offset-md-7{margin-left:58.333333%}
.offset-md-8{margin-left:66.666667%}
.offset-md-9{margin-left:75.0%}
.offset-md-10{margin-left:83.333333%}
.offset-md-11{margin-left:91.666667%}
.row-cols-md-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-md-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-md-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-md-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-md-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-md-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-md-auto>*{flex:0 0 auto!important;width:auto!important}
}
@media (min-width:992px){
.col-lg-auto{flex:0 0 auto!important;width:auto!important}
.col-lg{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-lg-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-lg-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-lg-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-lg-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-lg-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-lg-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-lg-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-lg-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-lg-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-lg-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-lg-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-lg-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-lg-0{margin-left:0.0%}
.offset-lg-1{margin-left:8.333333%}
.offset-lg-2{margin-left:16.666667%}
.offset-lg-3{margin-left:25.0%}
.offset-lg-4{margin-left:33.333333%}
.offset-lg-5{margin-left:41.666667%}
.offset-lg-6{margin-left:50.0%}
.offset-lg-7{margin-left:58.333333%}
.offset-lg-8{margin-left:66.666667%}
.offset-lg-9{margin-left:75.0%}
.offset-lg-10{margin-left:83.333333%}
.offset-lg-11{margin-left:91.666667%}
.row-cols-lg-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-lg-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-lg-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-lg-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-lg-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-lg-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-lg-auto>*{flex:0 0 auto!important;width:auto!important}
}
@media (min-width:1200px){
.col-xl-auto{flex:0 0 auto!important;width:auto!important}
.col-xl{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-xl-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-xl-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-xl-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-xl-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-xl-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-xl-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-xl-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-xl-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-xl-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-xl-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-xl-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-xl-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-xl-0{margin-left:0.0%}
.offset-xl-1{margin-left:8.333333%}
.offset-xl-2{margin-left:16.666667%}
.offset-xl-3{margin-left:25.0%}
.offset-xl-4{margin-left:33.333333%}
.offset-xl-5{margin-left:41.666667%}
.offset-xl-6{margin-left:50.0%}
.offset-xl-7{margin-left:58.333333%}
.offset-xl-8{margin-left:66.666667%}
.offset-xl-9{margin-left:75.0%}
.offset-xl-10{margin-left:83.333333%}
.offset-xl-11{margin-left:91.666667%}
.row-cols-xl-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-xl-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-xl-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-xl-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-xl-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-xl-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-xl-auto>*{flex:0 0 auto!important;width:auto!important}
}
@media (min-width:1400px){
.col-xxl-auto{flex:0 0 auto!important;width:auto!important}
.col-xxl{flex:1 0 0%!important;width:auto!important;max-width:100%!important}
.col-xxl-1{flex:0 0 auto!important;width:8.333333%!important;max-width:8.333333%!important}
.col-xxl-2{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.col-xxl-3{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.col-xxl-4{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.col-xxl-5{flex:0 0 auto!important;width:41.666667%!important;max-width:41.666667%!important}
.col-xxl-6{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.col-xxl-7{flex:0 0 auto!important;width:58.333333%!important;max-width:58.333333%!important}
.col-xxl-8{flex:0 0 auto!important;width:66.666667%!important;max-width:66.666667%!important}
.col-xxl-9{flex:0 0 auto!important;width:75.0%!important;max-width:75.0%!important}
.col-xxl-10{flex:0 0 auto!important;width:83.333333%!important;max-width:83.333333%!important}
.col-xxl-11{flex:0 0 auto!important;width:91.666667%!important;max-width:91.666667%!important}
.col-xxl-12{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.offset-xxl-0{margin-left:0.0%}
.offset-xxl-1{margin-left:8.333333%}
.offset-xxl-2{margin-left:16.666667%}
.offset-xxl-3{margin-left:25.0%}
.offset-xxl-4{margin-left:33.333333%}
.offset-xxl-5{margin-left:41.666667%}
.offset-xxl-6{margin-left:50.0%}
.offset-xxl-7{margin-left:58.333333%}
.offset-xxl-8{margin-left:66.666667%}
.offset-xxl-9{margin-left:75.0%}
.offset-xxl-10{margin-left:83.333333%}
.offset-xxl-11{margin-left:91.666667%}
.row-cols-xxl-1>*{flex:0 0 auto!important;width:100.0%!important;max-width:100.0%!important}
.row-cols-xxl-2>*{flex:0 0 auto!important;width:50.0%!important;max-width:50.0%!important}
.row-cols-xxl-3>*{flex:0 0 auto!important;width:33.333333%!important;max-width:33.333333%!important}
.row-cols-xxl-4>*{flex:0 0 auto!important;width:25.0%!important;max-width:25.0%!important}
.row-cols-xxl-5>*{flex:0 0 auto!important;width:20.0%!important;max-width:20.0%!important}
.row-cols-xxl-6>*{flex:0 0 auto!important;width:16.666667%!important;max-width:16.666667%!important}
.row-cols-xxl-auto>*{flex:0 0 auto!important;width:auto!important}
}

/* order utilities */
.order-1 { order: 1 } .order-2 { order: 2 } .order-3 { order: 3 }
@media (min-width: 1200px) { .order-xl-1 { order: 1 } .order-xl-2 { order: 2 } }

/* ==========================================================================
   2. BOOTSTRAP UTILITY FALLBACK (only the classes these pages actually use)
   ========================================================================== */

/* -- display -------------------------------------------------------------
   Without these, `.d-lg-none` never hides anything: the mobile hamburger
   (.toggle-mobileMenu.d-lg-none) was rendering at 1440px on every page
   except the homepage. */
.d-none   { display: none !important }
.d-block  { display: block !important }
.d-inline-block { display: inline-block !important }
.d-flex   { display: flex !important }
.d-inline-flex { display: inline-flex !important }
.d-grid   { display: grid !important }
@media (min-width: 576px) {
    .d-sm-none { display: none !important } .d-sm-block { display: block !important }
    .d-sm-flex { display: flex !important }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important } .d-md-block { display: block !important }
    .d-md-flex { display: flex !important }
}
@media (min-width: 992px) {
    .d-lg-none { display: none !important } .d-lg-block { display: block !important }
    .d-lg-flex { display: flex !important } .d-lg-inline-block { display: inline-block !important }
}
@media (min-width: 1200px) {
    .d-xl-none { display: none !important } .d-xl-block { display: block !important }
    .d-xl-flex { display: flex !important }
}

/* -- flex ---------------------------------------------------------------- */
.flex-row { flex-direction: row !important }
.flex-column { flex-direction: column !important }
.flex-wrap { flex-wrap: wrap !important }
.flex-nowrap { flex-wrap: nowrap !important }
.flex-fill { flex: 1 1 auto !important }
.align-items-start { align-items: flex-start !important }
.align-items-center { align-items: center !important }
.align-items-end { align-items: flex-end !important }
.align-items-baseline { align-items: baseline !important }
.align-self-center { align-self: center !important }
.align-self-start { align-self: flex-start !important }
.justify-content-start { justify-content: flex-start !important }
.justify-content-center { justify-content: center !important }
.justify-content-end { justify-content: flex-end !important }
.justify-content-between { justify-content: space-between !important }
.justify-content-around { justify-content: space-around !important }
@media (min-width: 992px) { .flex-lg-row { flex-direction: row !important } }

/* -- sizing / position --------------------------------------------------- */
.w-100 { width: 100% !important }
.h-100 { height: 100% !important }
.mw-100 { max-width: 100% !important }
.position-relative { position: relative !important }
.position-absolute { position: absolute !important }

/* -- text ---------------------------------------------------------------- */
.text-start, .text-left { text-align: left !important }
.text-end, .text-right { text-align: right !important }
.text-center { text-align: center !important }
.text-nowrap { white-space: nowrap !important }
.text-white { color: #fff !important }
.text-dark { color: #0F172A !important }
.fw-medium { font-weight: 500 !important }
.fw-semibold { font-weight: 600 !important }
.fw-bold { font-weight: 700 !important }
.fs-5 { font-size: 1.25rem !important }

/* -- borders / background ------------------------------------------------ */
.border { border: 1px solid #E2E8F0 !important }
.border-top { border-top: 1px solid #E2E8F0 !important }
.border-bottom-0 { border-bottom: 0 !important }
.bg-white { background-color: #fff !important }

/* -- lists / tables ------------------------------------------------------ */
.list-unstyled { padding-left: 0; list-style: none }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* -- spacing (only the steps used in this markup) ------------------------ */
.m-0  { margin: 0 !important }
.mb-0 { margin-bottom: 0 !important }
.mt-3 { margin-top: 1rem !important }
.mb-3 { margin-bottom: 1rem !important }
.mb-4 { margin-bottom: 1.5rem !important }
.mb-24 { margin-bottom: 24px !important }
.ms-3 { margin-left: 1rem !important }
@media (min-width: 992px)  { .mb-lg-5 { margin-bottom: 3rem !important } }
@media (min-width: 1200px) { .mb-xl-0 { margin-bottom: 0 !important } }

/* ==========================================================================
   3. CONFLICT REPAIR
   ========================================================================== */

/* -- 3a. Invisible panel on /about-us -------------------------------------
   frontend_style.css: `.who_we_info .info_right{background:var(--system_primery_color)}`
   and `.who_we_info .info_right p{color:#fff}`.
   --system_primery_color is emitted by the legacy
   components/frontend-dynamic-style-color.blade.php partial, which the
   Psycho-verse header no longer includes. The var is therefore undefined,
   the `background` shorthand becomes invalid-at-computed-value-time and
   falls back to transparent - leaving 35px white text on a white page at a
   measured contrast ratio of 1.00:1 (completely unreadable).
   Smallest fix that wins: give the panel its intended brand background,
   using the AA-safe red so the white text clears 4.5:1. */
.who_we_area .who_we_info .info_right,
.who_we_info .info_right {
    background: var(--psv-red-aa);
    background-image: none;
}
.who_we_info .info_right p { color: #fff }

/* -- 3b. xl breakpoint error in custom.css --------------------------------
   custom.css applies `.col-xl-3 / .col-xl-4 / .col-xl-8 / .col-xl-9` inside
   `@media (min-width: 992px)`, so xl columns take effect a whole breakpoint
   early and override the lg column they are paired with. Section 1 above
   already re-declares the xl set inside the correct `min-width: 1200px`
   query; this block neutralises the early application in the 992-1199 band
   so the lg column wins as authored. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    [class*="col-lg-"][class*="col-xl-"] { width: auto }
    .col-lg-1  { width: 8.333333%  !important; max-width: 8.333333%  !important }
    .col-lg-2  { width: 16.666667% !important; max-width: 16.666667% !important }
    .col-lg-3  { width: 25%        !important; max-width: 25%        !important }
    .col-lg-4  { width: 33.333333% !important; max-width: 33.333333% !important }
    .col-lg-5  { width: 41.666667% !important; max-width: 41.666667% !important }
    .col-lg-6  { width: 50%        !important; max-width: 50%        !important }
    .col-lg-7  { width: 58.333333% !important; max-width: 58.333333% !important }
    .col-lg-8  { width: 66.666667% !important; max-width: 66.666667% !important }
    .col-lg-9  { width: 75%        !important; max-width: 75%        !important }
    .col-lg-10 { width: 83.333333% !important; max-width: 83.333333% !important }
    .col-lg-11 { width: 91.666667% !important; max-width: 91.666667% !important }
    .col-lg-12 { width: 100%       !important; max-width: 100%       !important }
}

/* ==========================================================================
   4. WCAG 2.1 AA - COLOUR CONTRAST
   All ratios below were measured in-browser, not estimated.
   ========================================================================== */

/* -- 4a. The brand red token ----------------------------------------------
   #E4302C measures 4.41:1 against white in BOTH directions (white text on a
   red fill, and red text on a white ground) - it fails AA for normal text
   everywhere it is used as a text colour or as a fill behind text.

   The whole redesign chains to one token: custom.css defines
   `--psychoverse-red: #E4302C`, course-catalog-new.css defines
   `--cv2-red: var(--psychoverse-red, #E4302C)`, course-details-v2.css does
   the same for `--cdv2-red`. Redefining the token here fixes every consumer
   at once, and beats the page sheets' own `!important` rules without having
   to out-specify each one individually. #C9241F measures 5.59:1.

   The 12% darkening is visually near-identical and is already the
   established hover shade, so the hover token moves down a further step to
   keep hover feedback perceptible. */
:root,
.courses-v2,
.course-detail-v2 {
    --psychoverse-red: #C9241F;
    --cv2-red: #C9241F;
    --cdv2-red: #C9241F;
    --psychoverse-red-hover: #A81A16;
    --cv2-red-hover: #A81A16;
    --cdv2-red-hover: #A81A16;
}

/* "Free Class" badge: #fff on #16A34A measured 3.30:1. #15803D is 5.02:1. */
.courses-v2 .cv2_badge_free,
.course-detail-v2 .cv2_badge_free {
    background-color: var(--psv-green-aa) !important;
    color: #fff !important;
}

/* Filter-bar labels: #7E7E7E on white measured 4.06:1 (frontend_style.css
   `label{color:#7e7e7e}`). #5C5C5C is 6.69:1. */
.courses-v2 label,
.courses-v2 .cv2_sort_wrap label,
.course-detail-v2 label {
    color: var(--psv-ink-muted);
}

/* ==========================================================================
   5. WCAG 2.1 - VISIBLE FOCUS (2.4.7)
   Measured: 60/60 probed links and buttons on /courses and 46/46 on
   /about-us had outline:none and box-shadow:none when focused - i.e. the
   entire public site was unusable by keyboard. main.css resets outlines and
   nothing restores them. :focus-visible so pointer users see no change.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--psv-focus) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* On the red header/CTA surfaces a red ring would vanish - use white there. */
.btn-main:focus-visible,
.theme_btn:focus-visible,
.cv2_badge_price:focus-visible {
    outline: 3px solid #fff !important;
    box-shadow: 0 0 0 6px var(--psv-focus) !important;
}
/* Keep a ring for browsers without :focus-visible support. */
@supports not selector(:focus-visible) {
    a:focus, button:focus, input:focus, select:focus, textarea:focus {
        outline: 3px solid var(--psv-focus) !important;
        outline-offset: 2px !important;
    }
}

/* ==========================================================================
   6. TOUCH TARGETS (>= 44x44)
   Page-body controls only. The shared header/footer chrome is owned by the
   lead, so its undersized targets are reported rather than patched here -
   patching them from a public-pages-only sheet would make the same header
   behave differently on the dashboard.
   ========================================================================== */

/* Filter checkboxes measured 16x16, inside a 238x17.5 label.
   Grow the label's hit area; the control itself stays visually the same. */
.courses-v2 .cv2_checkbox {
    min-height: 44px;
    align-items: center;
    cursor: pointer;
}
/* course-catalog-new.css sets `.courses-v2 .cv2_checkbox input{width:16px;height:16px}`.
   !important rather than relying on source order - a media-query copy of the
   16px rule was still winning on height. */
.courses-v2 .cv2_checkbox input {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
}

/* Grid/list view toggles measured 40x32. */
.courses-v2 .cv2_view_btn {
    min-width: 44px;
    min-height: 44px;
}

/* Add-to-cart measured 32x32. */
.courses-v2 .cv2_cart_store,
.course-detail-v2 .cv2_cart_store {
    min-width: 44px;
    min-height: 44px;
}

/* "Clear" link: course-catalog-new.css hard-codes `color:#E4302C` here rather
   than using --cv2-red, so the token redefinition in 4a does not reach it.
   4.41:1 -> 5.59:1.  Also measured 40.5x19; padding grows the hit area
   without changing the visual weight. */
.courses-v2 .cv2_clear_btn {
    color: var(--psv-red-aa) !important;
    min-height: 44px;
    padding: 12px 8px;
    display: inline-flex;
    align-items: center;
}

/* Sort <select> measured 75x33. */
.courses-v2 .cv2_sort_select {
    min-height: 44px;
}

/* ==========================================================================
   7. /courses-details - INVISIBLE TEXT & CONTRAST
   Root cause for most of this block: frontend_style.css styles these elements
   with `background: var(--system_primery_color)`. That variable is emitted by
   components/frontend-dynamic-style-color.blade.php, which the Psycho-verse
   header no longer includes, so the shorthand is invalid-at-computed-value-
   time and collapses to transparent - leaving white text on a white page.
   Several are compounded by main.css's `button{background-color:transparent}`
   reset, which loads after frontend_style.css and wins outright.
   Measured ratios are noted per rule.
   ========================================================================== */

/* Coupon "Apply" button: white on transparent, 1.00:1 (invisible).
   frontend_style.css gives it the brand background; main.css's button reset
   overrides it. Restore the fill on the AA-safe red. */
.course-detail-v2 .apply_coupon_section button[type="submit"],
.course-detail-v2 .applyCoupon {
    background-color: var(--psv-red-aa) !important;
    color: #fff !important;
}

/* Review timestamp pill: white on transparent, 1.00:1 (invisible). */
.course-detail-v2 .customers_reviews .single_reviews .time,
.course-detail-v2 span.time {
    background-color: var(--psv-red-aa);
    color: #fff;
}

/* Curriculum accordion: header text and the "N Lectures / N hours" meta list
   were both white on white, 1.00:1. These are headings on a white card, so
   they want ink, not a fill. #1F2937 = 14.68:1. */
.course-detail-v2 .theme_according .accordion-header button,
.course-detail-v2 .theme_according .accordion-header h5 {
    color: #1F2937 !important;
}
.course-detail-v2 .curriculum_meta_accordion li,
.course-detail-v2 .curriculum_meta_accordion {
    color: #475569 !important;   /* 7.58:1 on white */
}

/* Course meta strip ("1 students", duration, level): rgba(255,255,255,.9) on
   white, 1.00:1. */
.course-detail-v2 ul.meta > li.meta_item,
.course-detail-v2 ul.meta > li.meta_item span {
    color: #475569 !important;
}

/* Course-card "Pro"/level tag: white on #F5D8FF measured 1.30:1.
   Keep the lilac chip, ink the label. #6B21A8 = 6.71:1 on #F5D8FF. */
.course-detail-v2 .course-item .course-tag span,
.courses-v2 .course-item .course-tag span {
    color: #6B21A8 !important;
}

/* Breadcrumb + category link: #E4302C on the #0B1329 hero measures 4.18:1.
   On a dark ground the fix is a LIGHTER red, not a darker one.
   #FF7A75 = 7.28:1. */
.course-detail-v2 .cdv2-hero ul.category .category_item a,
.course-detail-v2 .course__details_head .category_item a,
.course-detail-v2 .course__details_head span {
    color: #FF7A75 !important;
}

/* NOTE: the active tab, "View All" and the primary CTAs all resolve their
   colour from --cdv2-red / --psychoverse-red, so they are already fixed by
   the token redefinition in section 4a and need no rule here. */

/* Social share buttons. Measured white-on-brand ratios: Twitter #03ABF0
   2.60:1. Darkened to the minimum that clears AA while staying recognisably
   the platform colour. */
.course-detail-v2 .social_btn.Twitter_bg { background-color: #046A96 !important } /* 5.99:1 */
.course-detail-v2 .social_btn.facebook   { background-color: #1B4DA3 !important }
.course-detail-v2 .social_btn.youtube    { background-color: #B31217 !important }

/* Review meta timestamps: #7B7887 on white, 4.30:1 -> #5C5C5C, 6.69:1. */
.course-detail-v2 .customers_reviews .review_content span:not(.time) {
    color: var(--psv-ink-muted);
}

/* Hero byline ("By - <instructor>"): --cdv2-slate #475569 sits on the
   #0B1329 navy hero at 2.43:1. Slate is a light-ground colour; on the dark
   hero it needs a light ink. #CBD5E1 = 12.0:1. */
.course-detail-v2 .cdv2-hero ul.meta li.meta_item.highlight p,
.course-detail-v2 .cdv2-hero ul.meta li.meta_item.highlight p span,
.course-detail-v2 .course__details_head ul.meta li.meta_item.highlight span {
    color: #CBD5E1 !important;
}

/* Comment timestamps: #7B7887 on white, 4.30:1 -> #5C5C5C, 6.69:1. */
.course-detail-v2 .single_comment_box .comment_box_text span,
.course-detail-v2 .comment_box_info .comment_box_text.link span {
    color: var(--psv-ink-muted) !important;
}