/**
 * ============================================================================
 * Wake Up ICT — Enterprise Brand Design System & Universal Stylesheet
 * WCAG AA Contrast Compliance Standard:
 *  - Normal text minimum 4.5:1 contrast; Large text minimum 3:1 contrast
 *  - On Brand Orange (#F26522): Text is Dark Navy (#172033, 5.24:1 contrast)
 *  - For White Text on Orange Buttons: Background is Deep Dark Orange (#B9380A, 5.77:1 contrast)
 *  - In Light Mode Orange Text/Links: Deep Orange (#B9380A, 5.77:1 contrast on white)
 *  - Light Orange Surfaces (#FFF1E8): Text is Deep Dark Amber (#9A3412, >6.5:1 contrast)
 * ============================================================================
 */

:root {
    --brand-primary: #F26522;
    --brand-primary-rgb: 242, 101, 34;
    --brand-hover: #E95420;
    --brand-hover-rgb: 233, 84, 32;
    --brand-dark-orange: #B9380A;
    --brand-dark-orange-rgb: 185, 56, 10;
    --brand-light: #FFF1E8;
    --brand-light-border: #FED7AA;
    --brand-dark-navy: #172033;
    --brand-dark-navy-rgb: 23, 32, 51;
    --brand-accent: #FB923C;
    --brand-accent-rgb: 251, 146, 60;
    --brand-dark: #9A3412;
    --brand-glow: rgba(185, 56, 10, 0.40);
    
    /* Layout & Surface Tokens */
    --page-bg: #F8FAFC;
    --surface-card: #FFFFFF;
    --text-main: #0F172A;
    --text-body: #1E293B;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --border-main: #CBD5E1;
    --border-subtle: #E2E8F0;

    /* Semantic Colors (WCAG AA Compliant >= 4.5:1) */
    --semantic-danger-bg: #FEF2F2;
    --semantic-danger-border: #FECDD3;
    --semantic-danger-text: #7F1D1D;
    
    --semantic-success-bg: #ECFDF5;
    --semantic-success-border: #A7F3D0;
    --semantic-success-text: #064E3B;

    --semantic-warning-bg: #FFFBEB;
    --semantic-warning-border: #FDE68A;
    --semantic-warning-text: #78350F;

    --semantic-info-bg: #EFF6FF;
    --semantic-info-border: #BFDBFE;
    --semantic-info-text: #1E3A8A;
}

/* ============================================================================
   1. GLOBAL TYPOGRAPHY & BASE RESET
   ============================================================================ */
html, body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, a, span {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================================
   2. BRAND UTILITY & GLOW CLASSES (ORANGE HIGHLIGHT)
   ============================================================================ */
.theme-glow-primary,
.shadow-glow-brand,
.shadow-glow-emerald {
    box-shadow: 0 0 28px -4px var(--brand-glow) !important;
}

.theme-border-primary,
.border-brand-primary {
    border-color: var(--brand-primary) !important;
}

.theme-text-primary,
.text-brand-primary {
    color: var(--brand-primary) !important;
}

.theme-bg-primary,
.bg-brand-primary {
    background-color: var(--brand-primary) !important;
}

.theme-bg-primary-dim,
.bg-brand-soft {
    background-color: rgba(var(--brand-primary-rgb), 0.12) !important;
}

/* Brand Action Buttons (WCAG AA Compliant: Contrast >= 4.5:1)
   Option 1: White (#FFFFFF) text on Deep Dark Orange (#B9380A) -> Contrast 5.77:1
   Option 2: Dark Navy (#172033) text on Brand Orange (#F26522) -> Contrast 5.24:1
*/
.btn-brand-primary,
.btn-brand-action,
.bg-brand-gradient {
    background-color: #F26522 !important;
    background: #F26522 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px -2px rgba(242, 101, 34, 0.45) !important;
    font-weight: 700 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-brand-primary *,
.btn-brand-action *,
.bg-brand-gradient * {
    color: #FFFFFF !important;
}

.btn-brand-primary:hover,
.btn-brand-action:hover,
.bg-brand-gradient:hover {
    background-color: #E95420 !important;
    background: #E95420 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px -2px rgba(242, 101, 34, 0.60) !important;
    transform: translateY(-1px);
}

.btn-brand-primary:hover *,
.btn-brand-action:hover *,
.bg-brand-gradient:hover * {
    color: #FFFFFF !important;
}

.btn-brand-primary:active,
.btn-brand-action:active,
.bg-brand-gradient:active {
    background-color: #D9480F !important;
    background: #D9480F !important;
    color: #FFFFFF !important;
    transform: scale(0.98);
}

.btn-brand-primary:active *,
.btn-brand-action:active *,
.bg-brand-gradient:active * {
    color: #FFFFFF !important;
}

/* Secondary Brand Orange + Dark Navy Button (Contrast 5.24:1) */
.btn-brand-navy,
.btn-orange-navy {
    background-color: #F26522 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 1px solid #E95420 !important;
    box-shadow: 0 4px 14px -2px rgba(242, 101, 34, 0.40) !important;
    transition: all 0.25s ease-in-out !important;
}

.btn-brand-navy *,
.btn-orange-navy * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.btn-brand-navy:hover,
.btn-orange-navy:hover {
    background-color: #E95420 !important;
    color: #FFFFFF !important;
}

.btn-brand-navy:hover *,
.btn-orange-navy:hover * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Secondary Brand Outline Button (Contrast 5.77:1 on Light Background) */
.btn-brand-outline {
    background: transparent !important;
    color: #B9380A !important;
    border: 1.5px solid #B9380A !important;
    font-weight: 700 !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-brand-outline:hover {
    background-color: var(--brand-light) !important;
    color: #7C2D12 !important;
    border-color: #7C2D12 !important;
}

/* Form Controls & Placeholders (WCAG AA Compliant) */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    color: #0F172A !important;
}

input::placeholder,
textarea::placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
    border-color: #B9380A !important;
    box-shadow: 0 0 0 3px rgba(185, 56, 10, 0.25) !important;
    outline: none !important;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #CBD5E1 !important;
    cursor: not-allowed !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #B9380A !important;
    border-color: #B9380A !important;
}

/* Pagination & Tabs (WCAG AA Compliant >= 4.5:1) */
.pagination .page-item.active .page-link {
    background-color: #F26522 !important;
    border-color: #F26522 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.pagination .page-link {
    color: #0F172A !important;
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    font-weight: 600 !important;
}

.pagination .page-link:hover {
    color: #7C2D12 !important;
    background-color: #FFF1E8 !important;
    border-color: #FED7AA !important;
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: #F26522 !important;
    color: #FFFFFF !important;
    border-color: #F26522 !important;
    font-weight: 700 !important;
}

/* Brand Badges and Pills (Light Orange Background with Deep Dark Orange Text: Contrast > 7:1) */
.badge-orange,
.badge-brand-subtle,
.badge-brand {
    background-color: #FFF1E8 !important;
    color: #7C2D12 !important;
    border: 1px solid #FED7AA !important;
    font-weight: 700 !important;
}

html.dark .badge-orange,
html.dark .badge-brand-subtle,
html.dark .badge-brand {
    background-color: rgba(242, 101, 34, 0.18) !important;
    color: #FB923C !important;
    border-color: rgba(242, 101, 34, 0.40) !important;
    font-weight: 700 !important;
}

/* Quiz Option Checked/Selected State (WCAG AA Compliant) */
.quiz-option-card.selected,
.quiz-option-radio:checked + label,
.exam-option-selected {
    background-color: #FFF1E8 !important;
    border-color: #B9380A !important;
    color: #172033 !important;
    box-shadow: 0 0 0 2px rgba(185, 56, 10, 0.35) !important;
    font-weight: 700 !important;
}

.quiz-option-card.selected *,
.exam-option-selected * {
    color: #172033 !important;
}

/* ============================================================================
   3. UNIVERSAL REMOVAL OF #059669 & EMERALD -> REPLACED WITH WCAG AA COMPLIANT ORANGE
   ============================================================================ */

/* All primary action buttons that were emerald (White text on Deep Orange #B9380A: Contrast 5.77:1) */
.bg-emerald-600,
.bg-emerald-500,
button.bg-emerald-600,
button.bg-emerald-500,
a.bg-emerald-600,
a.bg-emerald-500 {
    background-color: #F26522 !important;
    background: #F26522 !important;
    border-color: #F26522 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px -2px rgba(242, 101, 34, 0.45) !important;
}

.bg-emerald-600 *,
.bg-emerald-500 *,
button.bg-emerald-600 *,
button.bg-emerald-500 *,
a.bg-emerald-600 *,
a.bg-emerald-500 * {
    color: #FFFFFF !important;
}

.bg-emerald-600:hover,
.bg-emerald-500:hover,
button.bg-emerald-600:hover,
button.bg-emerald-500:hover,
a.bg-emerald-600:hover,
a.bg-emerald-500:hover {
    background-color: #E95420 !important;
    background: #E95420 !important;
    border-color: #E95420 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px -2px rgba(242, 101, 34, 0.60) !important;
}

.bg-emerald-600:hover *,
.bg-emerald-500:hover *,
button.bg-emerald-600:hover *,
button.bg-emerald-500:hover *,
a.bg-emerald-600:hover *,
a.bg-emerald-500:hover * {
    color: #FFFFFF !important;
}

/* Emerald texts converted to High-Contrast Orange */
/* In light mode on white/light: #B9380A (5.77:1 contrast) */
html.light .text-emerald-600,
html.light .text-emerald-500,
html.light .text-emerald-400,
html.light .text-brand-primary {
    color: #B9380A !important;
}

/* In dark mode on dark backgrounds: #FB923C / #F26522 (>7:1 contrast) */
html.dark .text-emerald-600,
html.dark .text-emerald-500,
html.dark .text-emerald-400,
html.dark .text-brand-primary {
    color: #FB923C !important;
}

/* Emerald borders converted to Brand Orange */
.border-emerald-600,
.border-emerald-500,
.border-emerald-400 {
    border-color: #B9380A !important;
}

/* Rings converted to Brand Orange */
.ring-emerald-500,
.ring-emerald-600 {
    --tw-ring-color: rgba(185, 56, 10, 0.45) !important;
}

/* ============================================================================
   4. STUDENT PORTAL & QUIZ SPECIFIC BRAND HIGHLIGHTS
   ============================================================================ */

/* Student Dashboard Hero Banner */
.student-card-brand-hero {
    background: linear-gradient(135deg, #0b1329 0%, #0f172a 50%, #1e293b 100%) !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3) !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.6), 0 0 35px -5px rgba(var(--brand-primary-rgb), 0.2) !important;
}

/* Student Sidebar Active Navigation:
   Dark Navy (#172033) on Brand Orange (#F26522) -> Contrast 5.24:1 (WCAG AA Compliant) */
.student-nav-item.active,
.student-sidebar a.active,
aside a[class*="text-emerald-"],
aside a[class*="bg-emerald-"],
#student-sidebar a.bg-brand-primary {
    background-color: #F26522 !important;
    color: #FFFFFF !important;
    border-color: #E95420 !important;
    font-weight: 800 !important;
}

.student-nav-item.active i,
.student-sidebar a.active i,
.student-nav-item.active *,
.student-sidebar a.active *,
#student-sidebar a.bg-brand-primary *,
#student-sidebar a.bg-brand-primary i,
#student-sidebar a.bg-brand-primary span {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    font-weight: 800 !important;
}

/* Exam / Practice Start Buttons (White Text on Deep Orange #B9380A: Contrast 5.77:1) */
#btn-practice-start-trigger,
#start-exam-form-main button[type="button"],
#practice-exam-form-lobby button[type="button"],
.btn-start-exam-main,
#btn-confirm-proceed-modal,
#btn-final-confirm-submit,
button[onclick*="proceedStartExam"],
button[onclick*="confirmFreshPractice"],
#btn-submit-exam-top,
#btn-submit-exam-palette {
    background-color: #F26522 !important;
    background: #F26522 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px -2px rgba(242, 101, 34, 0.45) !important;
    border: none !important;
    font-weight: 700 !important;
    transition: all 0.25s ease-in-out !important;
}

#btn-practice-start-trigger *,
#start-exam-form-main button[type="button"] *,
#practice-exam-form-lobby button[type="button"] *,
.btn-start-exam-main *,
#btn-confirm-proceed-modal *,
#btn-final-confirm-submit *,
button[onclick*="proceedStartExam"] *,
button[onclick*="confirmFreshPractice"] *,
#btn-submit-exam-top *,
#btn-submit-exam-palette * {
    color: #FFFFFF !important;
}

#btn-practice-start-trigger:hover,
#start-exam-form-main button[type="button"]:hover,
#practice-exam-form-lobby button[type="button"]:hover,
.btn-start-exam-main:hover,
#btn-confirm-proceed-modal:hover,
#btn-final-confirm-submit:hover,
button[onclick*="proceedStartExam"]:hover,
#btn-submit-exam-top:hover,
#btn-submit-exam-palette:hover {
    background-color: #E95420 !important;
    background: #E95420 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px -2px rgba(242, 101, 34, 0.60) !important;
    transform: translateY(-1.5px);
}

#btn-practice-start-trigger:hover *,
#start-exam-form-main button[type="button"]:hover *,
#practice-exam-form-lobby button[type="button"]:hover *,
.btn-start-exam-main:hover *,
#btn-confirm-proceed-modal:hover *,
#btn-final-confirm-submit:hover *,
button[onclick*="proceedStartExam"]:hover *,
#btn-submit-exam-top:hover *,
#btn-submit-exam-palette:hover * {
    color: #FFFFFF !important;
}

/* Progress bar brand accent */
.progress-bar-brand,
.bg-brand-progress {
    background: linear-gradient(90deg, #F26522 0%, #E95420 100%) !important;
}

/* ============================================================================
   5. MANDATORY CONTRAST & WCAG COMPLIANCE (COMMANDS.MD)
   ============================================================================ */

/* Light Theme: Deep Dark Slate Typography */
html.light body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6 {
    color: #0F172A !important;
}

/* Buttons/Badges Rule: bg-rose-600 and bg-emerald-100 MUST have black font */
.bg-rose-600,
[class*="bg-rose-600"],
.bg-emerald-100,
[class*="bg-emerald-100"] {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* Selection Highlight */
::selection {
    background-color: #F26522;
    color: #FFFFFF;
    font-weight: 700;
}

/* ============================================================================
   6. HEADER & NAVBAR BRAND ORANGE HIGHLIGHTS (WCAG AA COMPLIANT)
   ============================================================================ */
/* Top Utility Strip: LOGIN button highlighted in Brand Amber (>10:1 contrast) */
#top-announcement-strip a[href*="login"],
#top-announcement-strip a[href*="login"] span,
#top-announcement-strip a[href*="login"] i {
    color: #FB923C !important;
    font-weight: 800 !important;
}

#top-announcement-strip a[href*="login"]:hover,
#top-announcement-strip a[href*="login"]:hover span {
    color: #FED7AA !important;
}

/* Header Navigation Styling & Contrast Guarantee */
#main-header nav,
html.light #main-header nav {
    color: #0F172A !important;
}

#main-header nav a,
html.light #main-header nav a {
    color: #0F172A !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
}

#main-header nav a span,
#main-header nav a i,
html.light #main-header nav a span,
html.light #main-header nav a i {
    color: inherit !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hover on Inactive Main Header Navbar Links */
#main-header nav a:not(.nav-active):hover,
html.light #main-header nav a:not(.nav-active):hover {
    color: #F26522 !important;
    background-color: #FFF1E8 !important;
    border-color: #FED7AA !important;
}

#main-header nav a:not(.nav-active):hover span,
#main-header nav a:not(.nav-active):hover i,
html.light #main-header nav a:not(.nav-active):hover span,
html.light #main-header nav a:not(.nav-active):hover i {
    color: #F26522 !important;
    border: none !important;
    background: transparent !important;
}

/* Active Main Header Navigation Menu Item Capsule */
#main-header nav a.nav-active,
html.light #main-header nav a.nav-active {
    color: #F26522 !important;
    background-color: #FFF1E8 !important;
    border: 1px solid #FED7AA !important;
    font-weight: 800 !important;
}

#main-header nav a.nav-active span,
#main-header nav a.nav-active i,
html.light #main-header nav a.nav-active span,
html.light #main-header nav a.nav-active i {
    color: #F26522 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ============================================================================
   7. COMPREHENSIVE WCAG AA COMPONENT & INTERACTIVE STATE SYSTEM
   ============================================================================ */

/* --- A. Tables & DataTables (Contrast >= 7:1) --- */
html.light table,
html.light .table {
    color: #1E293B !important;
}

html.light table thead th,
html.light .table thead th,
html.light table th,
html.light .table th {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #CBD5E1 !important;
}

html.light table td,
html.light .table td {
    color: #1E293B !important;
    border-color: #E2E8F0 !important;
}

html.light table tr:hover,
html.light .table tr:hover,
html.light .table-hover tbody tr:hover {
    background-color: #F8FAFC !important;
}

html.light .table-striped tbody tr:nth-of-type(odd) {
    background-color: #F8FAFC !important;
}

/* --- B. Dropdowns & Menus (Contrast >= 8:1) --- */
html.light .dropdown-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
}

html.light .dropdown-item {
    color: #1E293B !important;
    font-weight: 500 !important;
}

html.light .dropdown-item:hover,
html.light .dropdown-item:focus {
    background-color: #FFF1E8 !important;
    color: #7C2D12 !important;
    font-weight: 700 !important;
}

/* --- C. Modals & Dialogs --- */
html.light .modal-content {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

html.light .modal-header {
    border-bottom: 1px solid #E2E8F0 !important;
    background-color: #F8FAFC !important;
}

html.light .modal-header h1,
html.light .modal-header h2,
html.light .modal-header h3,
html.light .modal-header h4,
html.light .modal-header h5 {
    color: #0F172A !important;
    font-weight: 700 !important;
}

html.light .modal-body {
    color: #1E293B !important;
}

html.light .modal-footer {
    border-top: 1px solid #E2E8F0 !important;
    background-color: #F8FAFC !important;
}

/* --- D. High-Contrast Alerts (WCAG AA Certified) --- */
.alert-success {
    background-color: var(--semantic-success-bg) !important;
    border-color: var(--semantic-success-border) !important;
    color: var(--semantic-success-text) !important;
    font-weight: 600 !important;
}

.alert-info {
    background-color: var(--semantic-info-bg) !important;
    border-color: var(--semantic-info-border) !important;
    color: var(--semantic-info-text) !important;
    font-weight: 600 !important;
}

.alert-warning {
    background-color: var(--semantic-warning-bg) !important;
    border-color: var(--semantic-warning-border) !important;
    color: var(--semantic-warning-text) !important;
    font-weight: 600 !important;
}

.alert-danger {
    background-color: var(--semantic-danger-bg) !important;
    border-color: var(--semantic-danger-border) !important;
    color: var(--semantic-danger-text) !important;
    font-weight: 600 !important;
}

.alert-brand,
.alert-orange {
    background-color: #FFF1E8 !important;
    border-color: #FED7AA !important;
    color: #7C2D12 !important;
    font-weight: 600 !important;
}

/* --- E. Button Focus, Active & Disabled States --- */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #B9380A !important;
    outline-offset: 2px !important;
}

button:disabled,
.btn:disabled,
a.btn.disabled,
button[disabled] {
    opacity: 0.60 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(25%) !important;
}

/* --- F. Exam, Quiz & Question Interface Contrast --- */
/* Quiz Question Text */
.quiz-question-title,
.exam-question-text {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Option Cards */
.quiz-option-card,
.exam-option-card {
    background-color: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #1E293B !important;
    transition: all 0.2s ease-in-out !important;
}

.quiz-option-card:hover,
.exam-option-card:hover {
    border-color: #B9380A !important;
    background-color: #FFF1E8 !important;
    color: #172033 !important;
    transform: translateY(-1px) !important;
}

.quiz-option-card.selected,
.exam-option-card.selected,
.quiz-option-card.active,
.exam-option-card.active {
    background-color: #FFF1E8 !important;
    border-color: #B9380A !important;
    border-width: 2px !important;
    color: #172033 !important;
    box-shadow: 0 0 0 3px rgba(185, 56, 10, 0.20) !important;
}

.quiz-option-card.selected *,
.exam-option-card.selected * {
    color: #172033 !important;
    font-weight: 700 !important;
}

/* Option letter pill */
.option-letter-pill {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    border: 1px solid #CBD5E1 !important;
}

.quiz-option-card.selected .option-letter-pill,
.exam-option-card.selected .option-letter-pill {
    background-color: #F26522 !important;
    color: #FFFFFF !important;
    border-color: #F26522 !important;
}

/* Question Palette in Exam Interface */
.palette-question-btn {
    border: 1.5px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    font-weight: 600 !important;
}

.palette-question-btn.answered {
    background-color: #FFF1E8 !important;
    border-color: #B9380A !important;
    color: #7C2D12 !important;
    font-weight: 800 !important;
}

.palette-question-btn.current {
    background-color: #F26522 !important;
    border-color: #E95420 !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px rgba(242, 101, 34, 0.40) !important;
}

/* Timer Pill in Exam */
.exam-timer-pill {
    background-color: #172033 !important;
    color: #FB923C !important;
    border: 1px solid rgba(251, 146, 60, 0.40) !important;
    font-weight: 800 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* Exam Result Breakdown Cards */
.result-card-correct {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #064E3B !important;
}

.result-card-correct * {
    color: #064E3B !important;
}

.result-card-wrong {
    background-color: #FEF2F2 !important;
    border: 1px solid #FECDD3 !important;
    color: #7F1D1D !important;
}

.result-card-wrong * {
    color: #7F1D1D !important;
}

.result-card-score {
    background: linear-gradient(135deg, #FFF1E8 0%, #FFFFFF 100%) !important;
    border: 1.5px solid #FED7AA !important;
    color: #7C2D12 !important;
}

/* Student Exam Option Labels & Interactivity (WCAG AA) */
label[id*="opt-label-"],
label[id*="single-opt-label-"] {
    color: #1E293B !important;
}

html.dark label[id*="opt-label-"],
html.dark label[id*="single-opt-label-"] {
    color: #F1F5F9 !important;
}

label[id*="opt-label-"]:hover,
label[id*="single-opt-label-"]:hover {
    border-color: #B9380A !important;
}

label[id*="opt-label-"][class*="border-emerald-500"],
label[id*="opt-label-"][class*="border-blue-500"],
label[id*="single-opt-label-"][class*="border-emerald-500"],
label[id*="single-opt-label-"][class*="border-blue-500"] {
    border-color: #B9380A !important;
    background-color: #FFF1E8 !important;
    color: #172033 !important;
}

html.dark label[id*="opt-label-"][class*="border-emerald-500"],
html.dark label[id*="opt-label-"][class*="border-blue-500"],
html.dark label[id*="single-opt-label-"][class*="border-emerald-500"],
html.dark label[id*="single-opt-label-"][class*="border-blue-500"] {
    border-color: #FB923C !important;
    background-color: rgba(242, 101, 34, 0.18) !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   8. UNIVERSAL BUTTON FONT HOVER PRESERVATION (WHITE TEXT GUARANTEE EVERYWHERE)
   ============================================================================ */
.btn-brand-primary,
.btn-brand-action,
.bg-brand-gradient,
.btn-shimmer,
a.btn-brand-primary,
button.btn-brand-primary,
.course-item-card a.btn-brand-primary,
.course-item-card a .inline-flex {
    background-color: #F26522 !important;
    background: #F26522 !important;
    color: #FFFFFF !important;
    border-color: #F26522 !important;
    box-shadow: 0 4px 14px -2px rgba(242, 101, 34, 0.45) !important;
}

.btn-brand-primary *,
.btn-brand-action *,
.bg-brand-gradient *,
.btn-shimmer *,
a.btn-brand-primary *,
button.btn-brand-primary *,
.course-item-card a.btn-brand-primary *,
.course-item-card a .inline-flex * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Hover & Focus across all states and inside parent cards */
.btn-brand-primary:hover,
.btn-brand-action:hover,
.bg-brand-gradient:hover,
.btn-shimmer:hover,
a.btn-brand-primary:hover,
button.btn-brand-primary:hover,
.course-item-card a.btn-brand-primary:hover,
.course-item-card a .inline-flex:hover,
.course-item-card:hover a.btn-brand-primary,
.course-item-card:hover a .inline-flex,
[class*="group"]:hover .btn-brand-primary,
.btn-brand-primary:focus,
.btn-brand-action:focus,
.btn-brand-primary:active,
.btn-brand-action:active {
    background-color: #E95420 !important;
    background: #E95420 !important;
    color: #FFFFFF !important;
    border-color: #E95420 !important;
    box-shadow: 0 6px 20px -2px rgba(242, 101, 34, 0.60) !important;
}

.btn-brand-primary:hover *,
.btn-brand-action:hover *,
.bg-brand-gradient:hover *,
.btn-shimmer:hover *,
a.btn-brand-primary:hover *,
button.btn-brand-primary:hover *,
.course-item-card a.btn-brand-primary:hover *,
.course-item-card a .inline-flex:hover *,
.course-item-card:hover a.btn-brand-primary *,
.course-item-card:hover a .inline-flex *,
[class*="group"]:hover .btn-brand-primary *,
.btn-brand-primary:focus *,
.btn-brand-action:focus *,
.btn-brand-primary:active *,
.btn-brand-action:active * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Course Card Highlights & Specs Contrast (Light Mode) */
html.light .course-item,
html.light .course-item-card,
html.light .bento-card {
    color: #0f172a !important;
}
html.light .course-item h3,
html.light .course-item-card h3,
html.light .bento-card h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html.light .course-item [class*="space-y-"] span:not(.btn-brand-primary *):not(a.btn-brand-primary *):not(button *),
html.light .course-item-card [class*="space-y-"] span:not(.btn-brand-primary *):not(a.btn-brand-primary *):not(button *),
html.light .course-item div.flex span:not(.btn-brand-primary *):not(a.btn-brand-primary *):not(button *),
html.light .course-item-card div.flex span:not(.btn-brand-primary *):not(a.btn-brand-primary *):not(button *) {
    color: #1e293b !important;
    font-weight: 600 !important;
}
html.light .course-item .fa-check-circle,
html.light .course-item-card .fa-check,
html.light .course-item-card .fa-check-circle {
    color: #F26522 !important;
}
html.light .course-item [class*="bg-rose-50"],
html.light [class*="bg-rose-50"] {
    background-color: #FFF1E8 !important;
    border: 1px solid #FED7AA !important;
    color: #C2410C !important;
    font-weight: 800 !important;
}
html.light .bento-card p {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* Course Track Filter Buttons */
.course-filter-btn.active,
html.light .course-filter-btn.active {
    background-color: #F26522 !important;
    background: #F26522 !important;
    color: #FFFFFF !important;
    border-color: #F26522 !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px -2px rgba(242, 101, 34, 0.45) !important;
}

.course-filter-btn.active *,
html.light .course-filter-btn.active * {
    color: #FFFFFF !important;
}

.course-filter-btn.active:hover,
html.light .course-filter-btn.active:hover {
    background-color: #E95420 !important;
    border-color: #E95420 !important;
    color: #FFFFFF !important;
}

.course-filter-btn.active .filter-count,
html.light .course-filter-btn.active .filter-count {
    background-color: rgba(255, 255, 255, 0.28) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

/* Top Announcement Strip Hotline Guarantee: Absolutely No Background */
#top-announcement-strip a[href*="tel:01791612121"],
html.light #top-announcement-strip a[href*="tel:01791612121"],
#top-hotline-link,
html.light #top-hotline-link {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

#top-hotline-link *,
html.light #top-hotline-link * {
    color: #FFFFFF !important;
}

#top-hotline-link:hover,
html.light #top-hotline-link:hover,
#top-hotline-link:hover * {
    color: #FCD34D !important;
    background: transparent !important;
}

/* Counseling Hotline Button Guarantee: Solid Orange Background & Pure White Text */
.counseling-hotline-btn,
#counseling-hotline-btn,
html.light .counseling-hotline-btn,
html.light #counseling-hotline-btn {
    background-color: #F26522 !important;
    background: #F26522 !important;
    color: #FFFFFF !important;
    border: 1px solid #F26522 !important;
}

.counseling-hotline-btn *,
.counseling-hotline-btn span,
.counseling-hotline-btn i,
#counseling-hotline-btn *,
#counseling-hotline-btn span,
#counseling-hotline-btn i,
html.light .counseling-hotline-btn *,
html.light .counseling-hotline-btn span,
html.light .counseling-hotline-btn i,
html.light #counseling-hotline-btn *,
html.light #counseling-hotline-btn span,
html.light #counseling-hotline-btn i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* ============================================================================
   UNIVERSAL BRAND ORANGE BACKGROUND => PURE WHITE TEXT GUARANTEE
   Ensures WCAG AAA contrast whenever #F26522 or #E95420 is used as background
   ============================================================================ */
[style*="background-color: #F26522"],
[style*="background-color:#F26522"],
[style*="background: #F26522"],
[style*="background:#F26522"],
[style*="background-color: #E95420"],
[style*="background-color:#E95420"],
[style*="background: #E95420"],
[style*="background:#E95420"],
[style*="background-color: rgb(242, 101, 34)"],
[style*="background: rgb(242, 101, 34)"],
[style*="background-color: rgb(233, 84, 32)"],
[style*="background: rgb(233, 84, 32)"],
.bg-brand-primary,
a.bg-brand-primary,
button.bg-brand-primary,
.btn-brand-primary,
a.btn-brand-primary,
button.btn-brand-primary,
.btn-brand-action,
.course-filter-btn.active,
.category-pill.active,
.counseling-hotline-btn,
#counseling-hotline-btn,
html.light .btn-brand-primary,
html.light a.btn-brand-primary,
html.light button.btn-brand-primary,
html.light .course-item a.btn-brand-primary,
html.light .course-item-card a.btn-brand-primary,
html.light .counseling-hotline-btn,
html.light #counseling-hotline-btn {
    color: #FFFFFF !important;
}

[style*="background-color: #F26522"] *,
[style*="background-color:#F26522"] *,
[style*="background: #F26522"] *,
[style*="background:#F26522"] *,
[style*="background-color: #E95420"] *,
[style*="background-color:#E95420"] *,
[style*="background: #E95420"] *,
[style*="background:#E95420"] *,
[style*="background-color: rgb(242, 101, 34)"] *,
[style*="background: rgb(242, 101, 34)"] *,
[style*="background-color: rgb(233, 84, 32)"] *,
[style*="background: rgb(233, 84, 32)"] *,
.bg-brand-primary *,
a.bg-brand-primary *,
button.bg-brand-primary *,
.btn-brand-primary *,
a.btn-brand-primary *,
button.btn-brand-primary *,
.btn-brand-action *,
.course-filter-btn.active *,
.category-pill.active *,
.counseling-hotline-btn *,
#counseling-hotline-btn *,
html.light .btn-brand-primary *,
html.light a.btn-brand-primary *,
html.light button.btn-brand-primary *,
html.light .course-item a.btn-brand-primary *,
html.light .course-item-card a.btn-brand-primary *,
html.light .counseling-hotline-btn *,
html.light #counseling-hotline-btn * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Hover, Focus, Active states */
[style*="background-color: #F26522"]:hover,
[style*="background: #F26522"]:hover,
.bg-brand-primary:hover,
.btn-brand-primary:hover,
a.btn-brand-primary:hover,
button.btn-brand-primary:hover,
.btn-brand-action:hover,
.course-item:hover a.btn-brand-primary,
.course-item-card:hover a.btn-brand-primary,
.course-item a.btn-brand-primary:hover,
.course-item-card a.btn-brand-primary:hover,
html.light .course-item:hover a.btn-brand-primary,
html.light .course-item-card:hover a.btn-brand-primary,
html.light .course-item a.btn-brand-primary:hover,
html.light .course-item-card a.btn-brand-primary:hover,
.counseling-hotline-btn:hover,
#counseling-hotline-btn:hover {
    color: #FFFFFF !important;
    background-color: #E95420 !important;
    background: #E95420 !important;
}

[style*="background-color: #F26522"]:hover *,
[style*="background: #F26522"]:hover *,
.bg-brand-primary:hover *,
.btn-brand-primary:hover *,
a.btn-brand-primary:hover *,
button.btn-brand-primary:hover *,
.btn-brand-action:hover *,
.course-item:hover a.btn-brand-primary *,
.course-item-card:hover a.btn-brand-primary *,
.course-item a.btn-brand-primary:hover *,
.course-item-card a.btn-brand-primary:hover *,
html.light .course-item:hover a.btn-brand-primary *,
html.light .course-item-card:hover a.btn-brand-primary *,
html.light .course-item a.btn-brand-primary:hover *,
html.light .course-item-card a.btn-brand-primary:hover *,
.counseling-hotline-btn:hover *,
#counseling-hotline-btn:hover * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}