/* =============================================================================
   CPCSL public-page shell — ivory paper, crimson + amber from the logo.
   Shared by every public flow (courses, articles, login/register, MCQ,
   seminars, course portal). Brand tokens: css/cpcsl-brand.css.
   The --ol-* names are kept so older page CSS that reads them still works.
   ============================================================================= */
:root{
  --ol-cream:#FBF7F1;--ol-cream-2:#F4ECE1;--ol-white:#fff;
  --ol-navy:#21161A;--ol-navy-2:#3A0A12;--ol-orange:#B3151F;
  --ol-orange-dark:#8E1422;--ol-muted:#7A6C6E;--ol-border:#E9DDCF;
  --ol-amber:#C9770F;--ol-soft:#FBE9E7;
  --ol-shadow:0 18px 40px -22px rgba(58,10,18,.28);
  --bg:var(--ol-cream)!important;--bg-app:var(--ol-cream)!important;
  --bg-default:var(--ol-cream)!important;--surface:var(--ol-white)!important;
  --card:var(--ol-white)!important;--bg-card:var(--ol-white)!important;
  --primary:var(--ol-orange)!important;--primary-dark:var(--ol-orange-dark)!important;
  --accent:var(--ol-orange)!important;--accent2:var(--ol-navy-2)!important;
  --accent-soft:var(--ol-soft)!important;--accent-light:var(--ol-soft)!important;--primary-glow:rgba(179,21,31,.12)!important;
  --gold:var(--ol-amber)!important;
  --text:var(--ol-navy)!important;--ink:var(--ol-navy)!important;
  --text-primary:var(--ol-navy)!important;--text-secondary:var(--ol-muted)!important;
  --muted:var(--ol-muted)!important;--border:var(--ol-border)!important;--line:var(--ol-border)!important;
  /* course-portal pages (course-details / watch-course) */
  --navy:var(--ol-navy-2)!important;--navy2:#8E1422!important;--orange:var(--ol-orange)!important;--orange-h:var(--ol-orange-dark)!important;
  --orange-l:var(--ol-soft)!important;--soft:var(--ol-cream-2)!important;--panel:#fff!important;
}
html{color-scheme:light!important}
html,body{background:var(--ol-cream)!important;color:var(--ol-navy)!important}
body{font-family:var(--cp-font-ui)!important;-webkit-font-smoothing:antialiased}
/* zero specificity: replaces a page's own `*{font-family}` (it loads later) but
   never a component's font (header lockup, display headings, icons) */
:where(body *:not(i):not([class*="fa-"]):not([class*="bx"]):not(code):not(pre):not(kbd)){font-family:inherit}
body>header{position:relative;z-index:1150}
.mesh,.ambient{background:var(--ol-cream)!important}.mesh::before,.mesh::after,.orb,.grain{display:none!important}
::selection{background:#F3D9A4;color:#3A0A12}

.navbar,.topbar,.navigation,.nav{
  background:rgba(255,255,255,.97)!important;color:var(--ol-navy)!important;
  border-color:var(--ol-border)!important;box-shadow:0 5px 22px rgba(58,10,18,.06)!important;
  backdrop-filter:blur(14px)!important;
}
.brand,.logo-wrap,.nav-brand,.navigation a,.nav-links a{color:var(--ol-navy)!important}
.nav-links a:hover,.nav-links a.on,.nav-links a.active{color:var(--ol-orange)!important;background:var(--ol-soft)!important}
.nav-links a::after{background:var(--ol-orange)!important}
.logo-badge,.logo-fallback{background:var(--ol-navy-2)!important;color:#fff!important}

.card,.glass,.panel,.form-card,.table-card,.modal-box,.mbox,.empty,.drow{
  background:var(--ol-white)!important;color:var(--ol-navy)!important;
  border-color:var(--ol-border)!important;box-shadow:var(--ol-shadow)!important;
  backdrop-filter:none!important;
}
h1,h2,h3,h4,h5,h6,.title,.t{color:var(--ol-navy)!important}
h1,h2,.title{font-family:var(--cp-font-display)!important;font-weight:600!important;letter-spacing:-.015em}
p,.sub,.desc,.meta,.d,.lbl,.muted{color:var(--ol-muted)!important}
a{color:inherit}
input,select,textarea,.f-input{
  background:#fff!important;color:var(--ol-navy)!important;border-color:#DCCDBC!important;
}
input:focus,select:focus,textarea:focus,.f-input:focus{
  border-color:var(--ol-orange)!important;box-shadow:0 0 0 4px rgba(179,21,31,.12)!important;outline:none!important;
}
.btn,.btn-nav,.btn-lg,.tute-btn,button[type="submit"],input[type="submit"]{
  background:linear-gradient(118deg,#5A0E1A,#B3151F 60%,#D51C1E)!important;color:#fff!important;border-color:var(--ol-orange)!important;
  box-shadow:0 12px 24px -12px rgba(142,20,34,.7)!important;
}
.btn:hover,.btn-nav:hover,.btn-lg:hover,.tute-btn:hover,button[type="submit"]:hover{
  filter:brightness(1.08);border-color:var(--ol-orange-dark)!important;
}
.btn.ghost,.btn-outline,.back{
  background:#fff!important;color:var(--ol-navy)!important;border:1px solid var(--ol-border)!important;box-shadow:none!important;filter:none;
}
.btn.green,.btn.g,.btn-lg.green{background:linear-gradient(118deg,#E8961A,#C9770F)!important;border-color:#C9770F!important;color:#fff!important;box-shadow:0 12px 24px -12px rgba(201,119,15,.7)!important}
.top a,.price,.price-tag,.sec-title{color:var(--ol-orange)!important}
.bankbox{background:var(--ol-cream-2)!important;color:var(--ol-navy)!important}
.video-box,.poster{background:#22070C!important}.poster:hover .poster-play{background:var(--ol-orange)!important;border-color:var(--ol-orange)!important}
.pl-item.active{background:var(--ol-soft)!important}.pl-item.active .pl-num{background:var(--ol-orange)!important}.pl-item.active .pl-title{color:var(--ol-orange)!important}

/* Dark brand bands (contact, CTA, footer …) keep light copy even though the
   shell turns headings/paragraphs dark everywhere else. */
.cp-dark,.cp-dark h1,.cp-dark h2,.cp-dark h3,.cp-dark h4,.cp-dark h5,.cp-dark .title{color:#fff!important}
.cp-dark p,.cp-dark .sub,.cp-dark .desc,.cp-dark .muted{color:rgba(255,241,230,.78)!important}
.contact-section .contact-copy,.contact-section .contact-copy small,.contact-section .contact-copy h2{color:#fff!important}
.contact-section .contact-copy p{color:#F1DED6!important}
.contact-section .contact-details a{color:#fff!important;text-decoration:none!important}
.contact-section .contact-details a:hover{color:#F3C77A!important}

/* Links injected into pages that used a minimal header (legacy). */
.ol-quick-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.ol-quick-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:var(--ol-navy)!important;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.ol-quick-nav a:hover,.ol-quick-nav a[aria-current="page"]{background:var(--ol-soft)!important;color:var(--ol-orange)!important}
.ol-nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--ol-border)!important;border-radius:11px;background:#fff!important;color:var(--ol-navy)!important;box-shadow:none!important;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.ol-nav-toggle span{display:block;width:20px;height:2px;background:currentColor;position:relative;border-radius:5px}
.ol-nav-toggle span::before,.ol-nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:5px}
.ol-nav-toggle span::before{top:-6px}.ol-nav-toggle span::after{top:6px}
.ol-standalone-header{height:68px;padding:10px 5%;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--ol-border);box-shadow:0 5px 22px rgba(58,10,18,.06);position:fixed;top:0;left:0;right:0;z-index:1150}
body.ol-has-standalone{padding-top:68px!important}
.ol-standalone-brand{font-weight:900;font-size:19px;color:var(--ol-navy)!important;text-decoration:none;letter-spacing:-.03em}
.ol-inline-header{position:relative;z-index:10}

@media(max-width:900px){
  .navbar,.topbar,.navigation{min-height:68px!important;padding-left:18px!important;padding-right:18px!important}
  .ol-nav-toggle{display:inline-flex}
  .ol-quick-nav{display:none;position:absolute;top:calc(100% + 1px);left:12px;right:12px;z-index:1000;padding:12px;background:#fff;border:1px solid var(--ol-border);border-radius:14px;box-shadow:0 18px 42px rgba(58,10,18,.16);flex-direction:column;align-items:stretch}
  .ol-quick-nav.is-open{display:flex}
  .ol-quick-nav a{padding:13px 15px;font-size:14px}
  .ol-quick-nav a::before{color:var(--ol-orange)}
  .navbar,.topbar,.navigation{position:relative}
  .nav-links{background:#fff!important;border-color:var(--ol-border)!important}
  .nav-links.open{display:flex!important}
  .nav-links{gap:4px!important}
  .nav-links li{display:block!important;width:100%!important}
  .nav-links li a{display:block!important;width:100%!important;padding:12px 14px!important;line-height:1.35!important}
  .navlinks{display:none!important;position:absolute;top:100%;left:12px;right:12px;z-index:1000;padding:12px!important;background:#fff!important;border:1px solid var(--ol-border);border-radius:14px;box-shadow:0 18px 42px rgba(58,10,18,.16);flex-direction:column;align-items:stretch!important;gap:3px!important;font-size:14px!important}
  .navlinks.is-open{display:flex!important}
  .navlinks a{display:block;padding:12px 14px!important;border-radius:10px;font-size:14px!important}
  .navlinks .login{margin-top:4px;text-align:center;color:#fff!important}
  header .nav{position:relative}
  .card,.glass,.panel{box-shadow:0 8px 24px rgba(58,10,18,.08)!important}
}

@media(max-width:520px){
  .navbar .btn,.topbar .nav-right>.btn{padding:9px 12px!important;font-size:12px!important}
  .container,.wrap{padding-left:16px!important;padding-right:16px!important}
}