/* ============================================
   1. CSS Custom Properties
   ============================================ */
:root {
  --color-primary: #1a5276;
  --color-primary-hover: #154360;
  --color-primary-light: #d4e6f1;
  --color-dark: #1a2332;
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-text-light: #9ca3af;
  --color-border: #e5e7eb;
  --color-bg-light: #f9fafb;
  --color-bg-lighter: #f3f4f6;
  --color-white: #ffffff;
  --color-star: #f59e0b;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-link: #1a5276;
  --color-orange: #e67e22;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;
  --radius-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --transition: all 0.3s ease;
  --transition-fast: all 0.15s ease;

  --navbar-height: 80px;
  --sidebar-width: 280px;
  --container-max: 1200px;
}

/* ============================================
   2. Reset & Base
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 95%;
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1240px;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: var(--transition-fast);
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================
   3. Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}

.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-white { color: var(--color-white) !important; }
.text-small { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* ============================================
   4. Layout Utilities
   ============================================ */
.section {
  padding: 60px 0;
}

.section-sm {
  padding: 25px 0;
}

.section-bg {
  background-color: var(--color-bg-light);
}

.section-heading {
  margin-bottom: 40px;
}

.section-heading h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.section-heading h2::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.divider {
  height: 1px;
  background-color: var(--color-border);
  border: none;
}

/* ============================================
   5. Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-md);
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
}

.btn-primary:hover {
  background-color: transparent;
  border-color: #0B5D92;
  color: #0B5D92;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  opacity: 0.4;
}


.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-outline-dark {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: 4px;
}

.btn-outline-dark:hover {
  background-color: var(--color-text);
  color: var(--color-white);
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-white:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-sm {
  padding: 6px 16px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-pill {
  border-radius: var(--radius-pill);
}

/* ============================================
   6. Forms & Inputs
   ============================================ */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #555555;
}

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid #ccc;
  /* border: 1px solid #717171; */
  transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}

.form-control::placeholder {
  color: var(--color-text-light);
}

.form-control-readonly {
  background-color: var(--color-bg-lighter);
  cursor: default;
}

.form-control-empty {
  height: 48px;
}

.form-hint {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.input-group {
  position: relative;
}

.input-group .form-control {
  padding-right: 44px;
}

.input-group-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  z-index: 5;
  cursor: pointer;
}

/* right side — let the input-group-text cap it */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-text:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.input-group-text {
	border: var(--bs-border-width) solid #717171;;
}

.input-group > .form-control {
    border-right: none;
}

.input-group > .form-control:focus {
    border-right: none;
    box-shadow: -3px 0 0 3px rgba(13, 110, 253, 0.25),
                 0 -3px 0 3px rgba(13, 110, 253, 0.25),
                 0  3px 0 3px rgba(13, 110, 253, 0.25);
}

.form-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* ============================================
   7. Navbar
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.navbar-container {
  width: 100%;
  padding: 8px 40px;
  position: relative;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.navbar-toggle {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-text);
  border-radius: var(--radius-md);
}

.navbar-toggle:hover {
  background-color: var(--color-bg-light);
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar-brand img {
  height: 36px;
  width: auto;
}

.navbar-search {
  position: relative;
  flex: 0 1 270px;
  min-width: 150px;
  display: none;
}

.navbar-search input {
  width: 100%;
  padding: 8px 40px 8px 40px;
  background-color: var(--color-bg-lighter);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text);
  transition: var(--transition-fast);
}

.navbar-search input:focus {
  outline: none;
  background-color: var(--color-white);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.navbar-search input::placeholder {
  color: var(--color-text-light);
}

.navbar-search .search-icon-left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.navbar-search .search-icon-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.navbar .navbar-nav .nav-link {
  display: block;
  padding: 8px 16px !important;

  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: #6b7280 !important;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.navbar .navbar-nav .nav-link:hover {
  color: var(--color-text) !important;
}

.navbar .navbar-nav .nav-link.active {
  color: var(--color-text) !important;
  font-weight: 700;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.navbar-actions .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text) !important;
  padding: 8px 12px !important;
}

.nav-login-link {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Logged-in action icons */
.nav-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: 1.25rem;
  transition: var(--transition-fast);
}

.nav-icon-btn:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.nav-icon-btn .cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--color-danger);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 12px;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  background-color: var(--color-white);
  transition: var(--transition-fast);
}

.nav-avatar:hover {
  background-color: var(--color-bg-light);
}

.nav-avatar img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.nav-avatar-initial {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
}

.nav-avatar .bi-chevron-down {
  font-size: 0.75rem;
  color: var(--color-primary);
}

/* User Dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: 8px 0;
  z-index: 1001;
  display: none;
}

.user-dropdown.show {
  display: block;
}

.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: var(--transition-fast);
}

.user-dropdown a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.user-dropdown a i {
  font-size: 1.125rem;
  width: 20px;
  text-align: center;
  color: var(--color-text);
}

.user-dropdown .dropdown-badge {
  font-size: 0.6875rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-lighter);
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* Switch Account Panel */
.switch-account-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1099;
  display: none;
}

.switch-account-overlay.show {
  display: block;
}

.switch-account-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: 40px;
  width: 320px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: 20px;
  z-index: 1100;
  display: none;
}

.switch-account-panel.show {
  display: block;
}

.switch-account-section {
  margin-bottom: 16px;
}

.switch-account-section:last-child {
  margin-bottom: 0;
}

.switch-account-heading {

  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.switch-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: var(--transition-fast);
  text-decoration: none;
}

.switch-account-item:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.switch-account-item.active {
  background-color: #0B5D92;
  color: var(--color-white);
}

.switch-account-item.active:hover {
  color: var(--color-white);
}

.switch-account-item img {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.switch-account-item div {
  display: flex;
  flex-direction: column;
}

.switch-account-item span {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.switch-account-item small {
  font-size: 0.6875rem;
  opacity: 0.8;
}

/* Mobile Menu / Offcanvas */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -80%;
  width: 80%;
  max-width: 320px;
  height: 100%;
  background-color: var(--color-white);
  z-index: 1101;
  transition: var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-menu:not(.user-panel-open) {
  overflow-y: auto;
}

.mobile-menu.show {
  left: 0;
}

/* Logged out header - logo */
.mobile-menu-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-header img {
  height: 36px;
}

/* Logged in header - user info */
.mobile-menu-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.mobile-menu-header-user:hover {
  color: inherit;
}

.mobile-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: #0B5D92;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.mobile-user-info {
  flex: 1;
}

.mobile-user-info strong {
  display: block;

  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}

.mobile-user-info small {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.mobile-user-arrow {
  font-size: 1.125rem;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Nav links */
.mobile-menu-nav {
  padding: 24px 0;
}

.mobile-menu-nav a {
  display: block;
  padding: 14px 24px;

  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
  color: var(--color-text);
  font-weight: 700;
}

/* Mobile menu footer */
.mobile-menu-footer {
  padding: 24px;
}

.mobile-menu-footer.navbar-logged-out {
  margin-top: auto;
}

.mobile-signin-link {

  font-size: 0.9375rem;
  font-weight: 600;
  color: #0B5D92 !important;
}

/* Switch account section */
.mobile-switch-account {
  padding: 16px 24px 24px 24px;
}

.mobile-switch-label {

  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.mobile-switch-item {
  display: block;
  padding: 12px 12px;

  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: var(--transition-fast);
  text-decoration: none;
}

.mobile-switch-item:hover {
  color: var(--color-primary);
}

.mobile-switch-item.active {
  background-color: #0B5D92;
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 8px;
  font-weight: 600;
}

.mobile-switch-item.active:hover {
  color: var(--color-white);
}

/* Mobile User Sub-Panel */
.mobile-user-panel {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  transition: var(--transition);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-menu.user-panel-open .mobile-user-panel {
  left: 0;
}

.mobile-user-panel-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border: none;
  background: none;

  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.mobile-user-panel-back i {
  font-size: 0.875rem;
}

.mobile-user-panel-nav {
  padding: 16px 0;
}

.mobile-user-panel-nav a {
  display: flex;
  align-items: center;
  padding: 14px 24px;

  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-fast);
}

.mobile-user-panel-nav a:hover {
  background-color: var(--color-bg-light);
}

.mobile-user-panel-nav a i {
  font-size: 1.125rem;
  margin-right: 16px;
  width: 22px;
  text-align: center;
  color: var(--color-text);
  flex-shrink: 0;
}

.mobile-user-panel-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: auto;
}

.mobile-user-panel-badge i {
  font-size: 0.75rem;
  margin-right: 0;
  margin-left: 4px;
  width: auto;
  color: var(--color-text-secondary);
}

.mobile-user-panel-logout {
  margin-top: 8px;
}

/* ============================================
   8. Footer
   ============================================ */
.footer {
  background-color: #000000;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 60px;
}

.footer h5 {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-brand {
  padding-left: 20px;
}

.footer-brand img {
  height: 60px;
  margin-bottom: 16px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.footer-contact a:hover {
  color: var(--color-white);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 1rem;
  transition: var(--transition-fast);
}

.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.footer-bottom {
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-newsletter {
  display: flex;
  align-items: center;
  gap: 0;
}

.footer-newsletter input {
  flex: 1;
  padding: 10px 16px;
  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text);
}

.footer-newsletter input::placeholder {
  color: var(--color-text-light);
}

.footer-newsletter button {
  padding: 10px 20px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--transition);
}

.footer-newsletter button:hover {
  background-color: var(--color-primary-hover);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.footer-certified {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-certified span {
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.875rem;
}

.footer-certified img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.footer-apps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  min-width: 200px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: var(--transition-fast);
}

.footer-app-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.footer-app-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.footer-copyright {
  text-align: center;
  padding: 20px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 24px;
}

/* ============================================
   9. Breadcrumb
   ============================================ */
.breadcrumb-nav {
  padding: 16px 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8125rem;
}

.breadcrumb a {
  color: var(--color-text-secondary);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb .separator {
  color: var(--color-text-light);
}

.breadcrumb .current {
  color: var(--color-text);
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .breadcrumb-nav {
    display: none;
  }
}

/* ============================================
   10. Cards (vertical + horizontal)
   ============================================ */
/* Course Card Wrapper */
.course-card-wrapper {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.course-card-wrapper:hover .course-card {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.course-card-wrapper:hover .course-card-hover {
  display: block;
}

.course-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid var(--color-border);
}

/* Course Card Hover Tooltip */
.course-card-hover {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 12px);
  width: 255px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 100;
}

.course-card-hover::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  right: -8px;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}


.course-card-hover h4 {

  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.course-card-hover ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.course-card-hover li {

  font-size: 11px;
  color: #444;
  line-height: 1.4;
  margin-bottom: 6px;
}

/* .course-card-hover-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  text-decoration: underline;
  transition: var(--transition-fast);
}

.course-card-hover-btn:hover {
  background-color: #f5f5f5;
} */

.course-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.course-card-body {
  padding: 16px;
}

.course-card-provider {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.course-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  height: calc(1.4em * 2);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.course-card-meta span {
  display: flex;
  align-items: center;
}

.course-card-meta span + span::before {
  content: "|";
  margin-right: 8px;
  color: var(--color-text-light);
}

.course-card-instructor {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.course-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.course-card-rating .rating-score {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-star);
}

.course-card-rating .stars {
  display: flex;
  gap: 1px;
  color: var(--color-star);
  font-size: 0.75rem;
}

.course-card-rating .rating-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.course-card-price-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.course-card-strike-price {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
	text-decoration: line-through;
  line-height: 0.9;
  margin-bottom: 0;
}

.course-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

.course-card-wishlist-btn {
	display: inline-flex;
	align-items: center;
	color: #0B5D92;
	border: 1px solid #0B5D92;
	border-radius: 10px;
	padding: 5px 10px;
	transition: background 0.15s, color 0.15s;
}

.course-card-wishlist-btn i {
	font-size: 15px;
}

.course-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.program-grid-container {
  overflow: visible;
}

.program-grid {
  display: none;
}

.program-grid.active {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}

.programs-section .course-card-link {
  display: none;
}

.program-categories-mobile {
  display: none;
}

/* Horizontal Course Card */
.course-card-h {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.course-card-h:last-child {
  border-bottom: none;
}

.course-card-h-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.course-card-h-link:hover {
  color: inherit;
}


.course-card-h-img {
  flex-shrink: 0;
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.course-card-h-body {
  flex: 1;
  min-width: 0;
}

.course-card-h-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.course-card-h-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-h-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
  text-align: right;
}

.course-card-h-strike-price {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: line-through;
  line-height: 0.9;
  margin-bottom: 0;
  flex-shrink: 0;
  text-align: right;
}

/* ============================================
   11. Carousel / Slider
   ============================================ */
.carousel-wrapper {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text);
  z-index: 10;
  transition: var(--transition-fast);
}

.carousel-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.carousel-btn-prev {
  left: -16px;
}

.carousel-btn-next {
  right: -16px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--color-primary);
  width: 24px;
  border-radius: var(--radius-pill);
}

/* ============================================
   12. Accordion
   ============================================ */
.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.accordion-header:hover {
  color: var(--color-primary);
}

.accordion-header i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header i {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-body-inner {
  padding: 0 0 16px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.accordion-item.active .accordion-body {
  max-height: 2000px;
}

/* ============================================
   13. Tabs
   ============================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  transition: var(--transition-fast);
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: var(--transition-fast);
}

.tab-btn:hover {
  color: var(--color-primary);
}

.tab-btn.active {
  color: var(--color-primary);
  font-weight: 600;
}

.tab-btn.active::after {
  background-color: var(--color-primary);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================
   14. Star Rating
   ============================================ */
.star-rating {
  display: flex;
  gap: 2px;
}

.star-rating i {
  color: var(--color-border);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.star-rating i.active,
.star-rating i.bi-star-fill {
  color: var(--color-star);
}

.star-rating-display {
  display: flex;
  gap: 1px;
}

.star-rating-display i {
  color: var(--color-star);
  font-size: 0.75rem;
}

/* ============================================
   15. Progress Ring (SVG)
   ============================================ */
.progress-ring-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-text {
  position: absolute;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.progress-ring circle {
  transition: stroke-dashoffset 1s ease;
}

/* Progress bar (linear) */
.progress-bar-wrapper {
  width: 100%;
  height: 6px;
  background-color: var(--color-bg-lighter);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

/* ============================================
   16. Skill Tags / Badges
   ============================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background-color: var(--color-white);
}

.tag-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.tag-sm {
  padding: 2px 8px;
  font-size: 0.75rem;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-success);
}

/* ============================================
   17. Empty State
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  min-height: 400px;
}

.empty-state img {
  width: 180px;
  margin-bottom: 24px;
}

.empty-state h3 {
  margin-bottom: 8px;
}

.empty-state p {
  max-width: 480px;
  margin-bottom: 24px;
}

/* ============================================
   18. Sidebar Navigation
   ============================================ */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  transition: var(--transition-fast);
}

.sidebar-nav a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.sidebar-nav a.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.sidebar-nav a i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

/* Category sidebar (course catalogue) */
.category-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.category-sidebar-item:hover {
  background-color: var(--color-bg-light);
}

.category-sidebar-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.category-sidebar-item .count {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.category-sidebar-item.active .count {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   19. Tables
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
}

.data-table td {
  padding: 16px;
  font-size: 0.875rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* ============================================
   20. Notification Cards
   ============================================ */
.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-fast);
  background: var(--color-white);
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.notification-card:hover {
  background: #f4f8fc;
}

.notification-card.unread:hover {
  background: #e4eef9;
}

.notification-card.unread {
  background: #eef4fb;
}

.notification-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.notification-body {
  flex: 1;
  min-width: 0;
}

.notification-body h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-body p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-time {
  font-size: 0.75rem;
  color: var(--color-text-light);
  display: block;
}

.notification-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}

.unread-dot {
  background-color: #2563eb;
}

.read-dot {
  background-color: #9ca3af;
}

/* ============================================
   21. Landing Page
   ============================================ */

/* Promo Banner */
.promo-banner {
  background-color: #F6CDB1;
  color: var(--color-text);
  padding: 6px 100px;
  font-size: 0.8125rem;
}

.promo-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 40px;
}

.promo-label {

  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--color-text);
  white-space: nowrap;
}

.promo-divider {
  width: 1px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.promo-text {

  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #02131D;
  white-space: nowrap;
}

.promo-countdown {

  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.promo-countdown i {
  font-size: 1rem;
}

.promo-countdown strong {
  font-weight: 700;
}

.promo-cta-btn {
  background: #FFFFFF;
  color: var(--color-text);
  width: 168px;
  height: 42px;
  padding: 9px 40px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.promo-cta-btn:hover {
  background-color: transparent;
  border-color: #0B5D92;
  color: #0B5D92;
}

/* Verification Banner */
.verification-banner {
  background-color: #f0f4f8;
  border: 1px solid var(--color-border);
  padding: 20px 24px;
  margin: 16px 40px;
  border-radius: var(--radius-md);
}

.verification-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.verification-banner-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: #0B5D92;
  line-height: 1;
  margin-top: 2px;
}

.verification-banner-content {
  flex: 1;
}

.verification-banner-content strong {
  display: block;

  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.verification-banner-content p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.verification-banner-close {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  padding: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.verification-banner-close:hover {
  color: var(--color-text);
}

/* Hero */
.hero {
  padding: 60px 40px 60px;
  position: relative;
  overflow: hidden;
}

.hero .container {
  padding-left: 0;
  max-width: 100%;
}

/* Hero Slider */
.hero-slider {
  position: relative;
}

.hero-slide {
  display: none;
  animation: heroFadeIn 0.8s ease;
}

.hero-slide.active {
  display: block;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide 2 circle colors */
.hero-circle-outer--peach {
  background: #FDF2E9 !important;
}

.hero-circle-inner--peach {
  background: #FAE5D3 !important;
}

.hero-content h1 {

  font-size: 36px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0px;
  vertical-align: middle;
  max-width: 814px;
  margin-bottom: 16px;
}

.hero-content h1 .text-highlight {
  color: var(--color-primary);
  text-decoration: none;
}

.hero-content p {

  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #444444;
  margin-bottom: 24px;
  max-width: 700px;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero Visual - Right Side */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin-left: auto;
}

.hero-circle-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: #EFF4F8;
}

.hero-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #E6EFF4;
}

.hero-girl-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  z-index: 2;
}

/* Hero Floating Cards */
.hero-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}

.hero-card strong {
  display: block;

  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.hero-card p {
  margin: 0;

  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.hero-card-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
}

.hero-card-develop {
  top: 0;
  right: 0;
}

.hero-card-practice {
  top: 38%;
  left: -5%;
}

.hero-card-advance {
  bottom: 10%;
  right: -5%;
}

/* Slide 2 card positions */
.hero-visual--slide2 .hero-card-develop {
  top: 10%;
  right: auto;
  left: -5%;
}

.hero-visual--slide2 .hero-card-practice {
  top: 40%;
  left: -10%;
}

.hero-visual--slide2 .hero-card-advance {
  bottom: 8%;
  right: auto;
  left: 5%;
}

/* Hero Visual Image (static image replacement) */
.hero-visual-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin-left: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
}

/* Hero Slider Dots */
.hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.hero-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero-slider-dot.active {
  background: var(--color-primary);
}

/* Partners Strip */
.partners {
  padding: 24px 40px;
  background-color: #F5F9FB;
}

.partners-text {
  text-align: center;

  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 30px;
}

.partners-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.partners-logos::-webkit-scrollbar {
  display: none;
}

.partners-logos img {
  height: 70px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}

/* Program Sidebar */
.programs-section .section-heading h2 {

  font-weight: 600;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: 0px;
  text-transform: capitalize;
  color: #02131D;
  max-width: 391px;
}

.program-sidebar {
  margin-top: 20px;
}

.program-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background-color: #EAF2F8;
  color: var(--color-text);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  border-radius: 0;

  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  margin-bottom: 12px;
  transition: var(--transition-fast);
}

.program-tab:hover {
  background-color: #D6E8F5;
}

.program-tab.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-left: 4px solid #0A3D62;
  border-bottom: none;
  border-radius: 0;
  font-weight: 600;
}

.program-tab span {
  flex: 1;
}

.program-tab-arrow {
  margin-left: auto;
  font-size: 0.75rem;
}

.program-show-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background-color: #EAF2F8;
  color: var(--color-text);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid transparent;

  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 12px;
  transition: var(--transition-fast);
}

.program-show-more span {
  flex: 1;
  text-align: left;
}

.program-show-more:hover {
  background-color: #D6E8F5;
}

.programs-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.explore-courses-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Testimonials */
/* Testimonial Section */
.testimonial-section {
  background: #F5F9FBBF;
  padding: 100px 100px;
}

.testimonial-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}

.carousel-nav-btns .carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.1rem;
  background-color: #F0F0F0;
  border: 1px solid #E0E0E0;
  color: #666;
  box-shadow: none;
  transition: all 0.3s ease;
}

.carousel-nav-btns .carousel-btn-prev:hover {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.carousel-nav-btns .carousel-btn-next {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.carousel-nav-btns .carousel-btn-next:hover {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.testimonial-heading-row .section-heading {
  margin-bottom: 0;
}

.testimonial-carousel {
  overflow: hidden;
}

.testimonial-carousel .carousel-track {
  display: flex;
  gap: 20px;
  overflow: visible;
  transition: transform 0.4s ease;
}

.testimonial-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}

.testimonial-carousel .testimonial-card {
  flex: 0 0 calc((100% - 40px) / 3);
}

.testimonial-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.testimonial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #D1E3F0;
  margin-bottom: 12px;
}

.testimonial-name {

  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.testimonial-card p {

  font-size: 14px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
}

.testimonial-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}

.testimonial-card .testimonial-link {

  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
}

.testimonial-link i {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Carousel Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--color-primary);
  width: 24px;
  border-radius: var(--radius-pill);
}

/* Section Heading Row (with nav buttons) */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-heading-row h2 {
  margin-bottom: 0;
}

.accomplishments-discover {
  background-color: #F5F9FB;
}

.top-courses-section .section-heading-row h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: 10px;
  border-radius: 2px;
}

.heading-sm {
  display: none;
}

.carousel-nav-btns {
  display: flex;
  gap: 8px;
}

.carousel-nav-btns .carousel-btn {
  position: static;
  transform: none;
}

/* Top Courses Carousel */
.top-courses-carousel {
  position: relative;
}

.top-courses-carousel .carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.top-courses-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}

.course-card-carousel {
  min-width: 260px;
  max-width: 280px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.course-card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.tag {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.tag-blue {
  background-color: #e8f4fd;
  color: var(--color-primary);
}

.tag-gray {
  background-color: var(--color-bg-lighter);
  color: var(--color-text-secondary);
}

/* Categories Grid (kept for other pages) */
.category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.category-card img {
  width: 40px;
  height: 40px;
}

.category-card span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

/* CTA Teach Section */
.cta-teach-section {
  padding: 30px 40px;
  background: linear-gradient(to right, #EDF4F8 0%, #F5F9FB 40%, #FDF5F0 75%, #FFFFFF 100%);
}

.cta-teach-slider {
  position: relative;
}

.cta-teach-slide {
  display: none;
  animation: heroFadeIn 0.8s ease;
}

.cta-teach-slide.active {
  display: block;
}

.cta-teach-content {
  flex: 1;
  max-width: 560px;
}

.cta-teach-content h2 {

  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.3;
}

.cta-teach-content h2 .text-highlight {
  color: var(--color-primary);
}

.text-orange {
  color: var(--color-orange);
}

.cta-teach-content p {
  font-size: 0.9375rem;
  margin-bottom: 24px;
  color: var(--color-text-secondary);
}

/* CTA Visual */
.cta-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 400px;
  margin-left: auto;
}

.cta-circle-img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.cta-card-1 {
  top: 45%;
  left: -10%;
}

.cta-card-2 {
  top: 60%;
  left: 0;
}

.cta-card-3 {
  top: 75%;
  left: 8%;
}

.cta-visual .hero-card {
  padding: 8px 12px;
}

.cta-visual .hero-card strong {
  font-size: 12px;
}

.cta-visual .hero-card p {
  font-size: 10px;
}

.cta-visual .hero-card-icon-img {
  width: 28px;
  height: 28px;
}

/* CTA Slider Dots - hidden on desktop/tablet */
.cta-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.cta-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cta-slider-dot.active {
  background: var(--color-primary);
}

.cta-teach-visual {
  flex-shrink: 0;
}

.cta-instructor-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
}

.cta-instructor-bubble img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.cta-instructor-info {
  display: flex;
  flex-direction: column;
}

.cta-instructor-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.cta-instructor-role {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Old CTA Section (kept for other pages) */
.cta-section {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 60px 0;
  text-align: center;
}

.cta-section h2 {
  color: var(--color-white);
  margin-bottom: 16px;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 24px;
}

/* Why Choose Section */
.why-choose-item {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
}

.why-choose-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.why-choose-img {
  flex: 0 0 45%;
}

.why-choose-img img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.why-choose-content {
  flex: 1;
}

.why-choose-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.why-choose-content h3 {
  margin-bottom: 12px;
  font-weight: 700;
}

.why-choose-content p {
  font-size: 0.9375rem;
}

/* ============================================
   22. About Page
   ============================================ */
.about-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0;
  text-align: center;
  position: relative;
  color: var(--color-white);
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.about-hero > * {
  position: relative;
  z-index: 1;
}

.about-hero .badge-label {
  display: inline-block;
  padding: 4px 16px;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* What We Offer Section */
.about-offer-section {
  padding: 60px 0;
}

.about-offer-intro {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.about-offer-card {
  background-color: #f0f6fa;
  border-radius: 12px;
  padding: 36px 32px;
}

.about-offer-heading {

  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 24px;
}

.about-offer-list {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 32px;
}

.about-offer-list li {
  margin-bottom: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.about-offer-list li strong {
  color: var(--color-text-primary);
}

.about-offer-btn {
  background-color: #0d5a7a;
  color: #fff;
  border: 2px solid #0d5a7a;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.about-offer-btn:hover {
  background-color: transparent;
  color: #0d5a7a;
  border-color: #0d5a7a;
}

/* -- About: Certificate Course vs Career Path -- */
.about-cert-career {
  padding: 60px 0;
  border-bottom: 1px solid #dde3ea;
}

.about-cert-career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.about-cert-career-col {
  display: flex;
  flex-direction: column;
  padding: 48px 40px;
}

.about-cert-career-col:first-child {
  background-color: #F1F1F180;
}

.about-cert-career-col:last-child {
  background-color: #f0f4f8;
}

.about-cert-career-header {
  text-align: center;
  margin-bottom: 28px;
}

.about-cert-career-header > i {
  font-size: 2.5rem;
  color: #1a3c50;
  display: block;
  margin-bottom: 8px;
}

.about-cert-career-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.about-cert-career-subtitle {
  font-size: 0.875rem;
  color: #6b7b8d;
  margin-bottom: 12px;
}

.about-cert-career-ring {
  width: 72px;
  height: 72px;
  border: 2px dashed #5ba4c9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.about-cert-career-ring span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.2;
}

.about-cert-career-body {
  flex: 1;
  margin-bottom: 24px;
}

.about-cert-career-body p {
  font-size: 0.9375rem;
  color: #3a3a3a;
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-cert-career-body p:last-child {
  margin-bottom: 0;
}

.about-cert-career-btn {
  background-color: #0d5a7a;
  color: #fff;
  border: 2px solid #0d5a7a;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  align-self: flex-start;
  transition: background-color 0.2s ease;
}

.about-cert-career-btn:hover {
  background-color: transparent;
  color: #0d5a7a;
  border-color: #0d5a7a;
}

/* -- About: Testimonial Intro Text -- */
.about-testimonial-intro {
  padding: 48px 0 0;
  text-align: center;
  background: #F5F9FBBF;
}

.about-testimonial-intro p {
  font-size: 0.9375rem;
  color: #5a5a5a;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.about-stats {
  display: flex;
  gap: 40px;
  text-align: center;
}

.about-stat-item {
  flex: 1;
}

.about-stat-item .stat-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.about-stat-item h3 {
  font-size: 1.125rem;
  margin-bottom: 4px;
}

.about-stat-item .stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.about-stat-item .stat-range {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ============================================
   23. Contact Page
   ============================================ */
.contact-heading {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.contact-subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}

.contact-info-block {
  margin-bottom: 24px;
}

.contact-info-title {
  font-size: 1.0625rem;
  color: #888;
  font-weight: 400;
  margin-bottom: 12px;
}

.contact-detail {
  margin-bottom: 10px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.contact-detail strong {
  color: var(--color-text);
}

.contact-social {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f0f0f0;
  font-size: 1.4rem;
  color: #1e2a3a;
  transition: var(--transition);
}

.contact-social a:hover {
  background-color: #e0e0e0;
  color: #1e2a3a;
}

.section-contact .col-md-5 {
  display: flex;
  flex-direction: column;
}

.contact-chat-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  gap: 10px;
  padding: 12px 26px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 30px 5px 30px 5px;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
}

.contact-chat-btn:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.contact-input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.9375rem;
}

.contact-input:focus {
  border-color: var(--color-primary);
  box-shadow: none !important
}

.contact-consent {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  text-align: center;
}

.contact-consent a {
  color: var(--color-text);
  text-decoration: underline;
}

.contact-submit-btn {
  width: 100%;
  padding: 12px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition);
}

.contact-submit-btn:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Contact page responsive */
@media (max-width: 991px) {
  .section-contact {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .contact-heading {
    font-size: 1.875rem;
  }
}

@media (max-width: 767px) {
  .section-contact .col-md-5,
  .section-contact .col-md-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-heading {
    font-size: 1.75rem;
  }

  .section-contact .col-md-5 {
    position: relative;
  }

  .contact-social {
    margin-bottom: 0;
  }

  .contact-chat-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .contact-chat-btn i {
    font-size: 1.25rem;
  }
}

@media (max-width: 575px) {
  .section-contact {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .contact-heading {
    font-size: 1.5rem;
  }

  .contact-submit-btn {
    padding: 14px;
  }
}

/* ============================================
   24. Course Catalogue
   ============================================ */


/* Catalogue section layout */
.catalogue-section .catalogue-heading {
  margin-bottom: 24px;
}

.catalogue-sidebar {
  margin-top: 0;
}

/* COURSE CATEGORIES divider label */
.catalogue-divider-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.catalogue-divider-label::before,
.catalogue-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.catalogue-divider-label span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Filter bar */
.catalogue-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.catalogue-filter-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.catalogue-filter-label i {
  font-size: 1.125rem;
}

.catalogue-filter-pills {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  background-color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-btn i {
  font-size: 0.625rem;
}

/* Filter dropdown wrapper */
.filter-dropdown-wrapper {
  position: relative;
  display: inline-flex;
}

.filter-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  padding: 8px 0;
}


.filter-dropdown-wrapper.open .filter-dropdown-panel {
  display: block;
}

.filter-dropdown-wrapper.open .filter-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Checkbox / radio items */
.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.filter-dropdown-item:hover {
  background-color: var(--color-primary-light);
}

.filter-dropdown-item input[type="checkbox"],
.filter-dropdown-item input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Rating items */
.filter-rating-item .filter-stars {
  display: flex;
  gap: 2px;
  color: var(--color-star);
  font-size: 0.8125rem;
}

.filter-rating-item:hover .filter-stars {
  color: var(--color-star);
}

/* Plain text items (Skill Level) */
.filter-dropdown-text-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-dropdown-text-item:hover,
.filter-dropdown-text-item.active {
  background-color: var(--color-primary-light);
}

/* Course card horizontal — catalogue overrides */
.catalogue-section .course-card-h {
  gap: 20px;
  padding: 24px 0;
  align-items: flex-start;
  position: relative;
}

.catalogue-section .course-card-h:first-child {
  padding-top: 0;
}

.catalogue-section .course-card-h-img {
  width: 220px;
  height: 140px;
}

/* Reserve space for absolute-positioned price */
.catalogue-section .course-card-h-body {
  padding-right: 80px;
}

/* Provider hidden on desktop, shown on mobile */
/* .catalogue-section .course-card-provider {
  display: none;
} */

/* Price positioned top-right on desktop */
.catalogue-section .course-card-h-pricing {
  position: absolute;
  top: 24px;
  right: 0;
  display: flex;
  flex-direction: column;
}

.catalogue-section .course-card-h:first-child .course-card-h-pricing {
  top: 0;
}

.course-card-h-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.course-card-h-level {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
}

.page-item .pagination-btn:hover,
.page-item.active .pagination-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.page-item.prev .pagination-btn,
.page-item.next .pagination-btn {
  border-color: var(--color-text-light);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-fast);
}

/* .pagination-btn:hover,
.pagination-btn.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.pagination-btn.prev,
.pagination-btn.next {
  border-color: var(--color-text-light);
} */

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  letter-spacing: 2px;
}

/* Mobile-only elements — hidden on desktop */
.catalogue-heading-mobile,
.catalogue-active-accordion,
.catalogue-remaining-accordions {
  display: none;
}

/* Catalogue accordion toggle (shared mobile styles) */
.catalogue-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;

  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background-color: #EAF2F8;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
}

.catalogue-accordion-toggle:hover {
  background-color: #D6E8F5;
}

.catalogue-accordion-toggle span {
  flex: 1;
  text-align: left;
}

.catalogue-accordion-toggle .programme-tab-arrow-mobile {
  transition: transform 0.3s ease;
  margin-left: auto;
  font-size: 0.75rem;
}

.catalogue-accordion-toggle.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  border-radius: 0;
}

/* .catalogue-accordion-toggle.active .programme-tab-arrow-mobile {
  transform: rotate(180deg);
} */

.catalogue-accordion-content {
  display: none;
  padding: 12px 0;
}

.catalogue-accordion-content.open {
  display: block;
}

.catalogue-accordion-content .course-card-h:first-child {
  padding-top: 12px;
}

.catalogue-accordion-show-more {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;

  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background-color: #EAF2F8;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.catalogue-accordion-show-more span {
  flex: 1;
  text-align: left;
}

.catalogue-accordion-show-more:hover {
  background-color: #D6E8F5;
}

/* ============================================
   25. Course Details
   ============================================ */
.course-details-header {
  padding-bottom: 8px;
}

.course-details-header h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.course-details-header .description {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.instructor-info {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.instructor-info img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.instructor-details .instructor-label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.instructor-details .instructor-name {
  font-weight: 700;
  color: var(--color-dark);
}

.instructor-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.instructor-rating .rating-score {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-dark);
}

.instructor-rating .stars {
  display: flex;
  gap: 1px;
}

.instructor-rating .stars i {
  color: var(--color-star);
  font-size: 0.875rem;
}

.instructor-rating .rating-count {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.instructor-level {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Course Meta Bar */
.course-meta-bar {
  display: flex;
  background-color: #f8f9fa;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.course-meta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.course-meta-item + .course-meta-item {
  border-left: 1px solid var(--color-border);
}

.course-meta-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.course-meta-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
}

/* What you'll learn */
.learn-section {
  margin-bottom: 32px;
  padding-top: 90px;
}

.learn-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 55px;
}

.learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

.learn-grid-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.learn-grid-item i {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 2px;
  color: var(--color-dark);
}

.learn-grid[data-collapsed="true"] .learn-grid-item:nth-child(n+7) {
  display: none;
}

.learn-show-more {
  background: none;
  border: none;
  padding: 0;
  margin-top: 32px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.learn-show-more i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.learn-show-more.expanded i {
  transform: rotate(180deg);
}

/* Legacy learn-list (used in course content, requirements) */
.learn-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.learn-list li::before {
  content: '\f26a';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* Skills tags */
.skills-section {
  margin-top: 70px;
  margin-bottom: 32px;
}

.skills-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 46px;
}

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skills-tags[data-collapsed="true"] .skill-tag:nth-child(n+13) {
  display: none;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-dark);
  background-color: var(--color-white);
  border: 1px solid #333;
  border-radius: 8px;
  white-space: nowrap;
}

.skills-show-more {
  background: none;
  border: none;
  padding: 0;
  margin-top: 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.skills-show-more i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.skills-show-more.expanded i {
  transform: rotate(180deg);
}

/* Course Content Section */
.course-content-section {
  margin-top: 60px;
  margin-bottom: 40px;
}

.course-content-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.course-content-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.course-content-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.meta-divider {
  color: var(--color-dark);
}

.course-preview-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: underline;
}

.course-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-modules .accordion-item {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.course-modules .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.course-modules .accordion-header i {
  font-size: 1rem;
  color: var(--color-dark);
  transition: transform 0.3s ease;
}

.course-modules .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.course-modules .accordion-item.active .accordion-body {
  max-height: 2000px;
}

.course-modules .accordion-body-inner {
  padding: 0 20px 16px;
}

.lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.lesson-row i {
  font-size: 0.875rem;
  color: var(--color-dark);
  flex-shrink: 0;
}

.lesson-row .lesson-title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-dark);
  text-decoration: underline;
}

.lesson-row .lesson-title-plain {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-dark);
}

.lesson-row .lesson-duration {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.lesson-row-quiz i {
  color: var(--color-text-secondary);
}

/* Responsive: Course Content */
@media (max-width: 575.98px) {
  .course-content-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .course-modules .accordion-header {
    padding: 14px 16px;
    font-size: 0.875rem;
  }

  .course-modules .accordion-body-inner {
    padding: 0 16px 12px;
  }
}

/* Course Requirements */
.course-requirements-section {
  margin-top: 70px;
  margin-bottom: 70px;
}

.course-requirements-section h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 52px;
}

.requirements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

.requirements-grid-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	color: #333;
}

.requirements-grid-item i {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
  color: var(--color-dark);
}

@media (max-width: 767.98px) {
  .requirements-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Accreditation and Certificates */
.accreditation-section {
  margin-bottom: 40px;
}

.accreditation-section h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 32px;
}

.accreditation-intro {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.accreditation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.accreditation-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 18px;
}

.accreditation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accreditation-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.875rem;
  color: #333;
  line-height: 1.7;
}

.accreditation-list li i {
  font-size: 1rem;
  color: #333;
  flex-shrink: 0;
  margin-top: 4px;
}

@media (max-width: 767.98px) {
  .accreditation-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Course Testimonials */
.course-testimonials-section {
  margin-bottom: 40px;
}

.course-testimonials-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.course-testimonials-score {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dark);
}

.course-testimonials-rating .stars i {
  font-size: 1.125rem;
  color: #f5a623;
}

.course-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
}

.course-testimonial-card {
  padding: 0;
}

.course-testimonial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.course-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.course-testimonial-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 2px;
}

.course-testimonial-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-testimonial-meta .stars-sm i {
  font-size: 0.6875rem;
  color: #f5a623;
}

.course-testimonial-date {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.course-testimonial-text {
  font-size: 0.875rem;
  color: #333;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 767.98px) {
  .course-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Instructor's Bio */
.instructor-bio-section {
  margin-top: 80px;
  margin-bottom: 40px;
}

.instructor-bio-section h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 55px;
}

.instructor-bio-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.instructor-bio-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}

.instructor-bio-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.instructor-bio-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-dark);
}

.instructor-bio-stats li i {
  font-size: 0.9375rem;
  color: #000;
  width: 18px;
  text-align: center;
}

.instructor-bio-stats li:first-child i {
  color: #000;
}

.instructor-bio-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-top: 16px;
  margin-bottom: 4px;
}

.instructor-bio-roles {
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 20px;
}

.instructor-bio-roles .role-divider {
  margin: 0 6px;
  color: var(--color-dark);
}

.instructor-bio-text {
  margin-bottom: 8px;
}

.instructor-bio-text p {
  font-size: 0.9375rem;
  color: #333;
  line-height: 1.7;
  margin: 0;
}

.instructor-bio-show-more {
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.instructor-bio-show-more i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.instructor-bio-show-more.expanded i {
  transform: rotate(180deg);
}

/* Sticky sidebar */
.course-sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + 20px);
}

@media (min-width: 1170px) {
  .course-sidebar {
    margin-top: -110px;
  }
}

@media (min-width: 500px) and (max-width: 991.98px) {
  .course-sidebar-card {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.course-sidebar-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: #F8F8F8;
}

/* Desktop: scrollable sidebar with fixed video top and buttons bottom */
@media (min-width: 992px) {
  .course-sidebar-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--navbar-height) - 40px);
  }

  .course-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .course-sidebar-scroll::-webkit-scrollbar {
    display: none;
  }
}

/* Video thumbnail */
.course-sidebar-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.course-sidebar-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-sidebar-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.course-sidebar-play i {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-left: 3px;
}

.course-sidebar-play:hover {
  background-color: var(--color-white);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Price */
.course-sidebar-price-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 0;  
}

.course-sidebar-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark); 
  margin-bottom: 0;
}

.course-sidebar-strike-price {
	font-size: 1rem;
	color: var(--color-text-secondary);
	text-decoration: line-through;
	margin-bottom: 0;
}

/* This course includes */
.course-sidebar-includes {
  padding: 12px 18px 0;
}

.course-sidebar-includes h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.course-sidebar-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-sidebar-includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.course-sidebar-includes li i {
  font-size: 0.875rem;
  color: var(--color-dark);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Credly checkbox */
.course-sidebar-credly {
  padding: 10px 18px;
}

.credly-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.credly-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Action buttons */
.course-sidebar-actions {
  padding: 6px 18px 18px;
}

.course-sidebar-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.course-sidebar-btn-row .btn {
  text-align: center;
  font-size: 0.8125rem;
  padding: 8px;
}

.course-sidebar-btn-row .btn-outline {
  color: #0567a0;
  border-color: #0567a0;
}

.course-sidebar-btn-row .btn-outline:hover {
  background-color: transparent;
  border-color: #0B5D92;
}

.course-sidebar-btn-row .btn-bookmark {
  padding: 8px 12px !important;
}

.course-sidebar-btn-row .btn-bookmark i {
  font-size: 1rem;
  color: #0567a0;
}

.course-sidebar-actions .btn-primary {
  background-color: #0B5D92;
  border-color: #0B5D92;
}

.course-sidebar-actions .btn-primary:hover {
  background-color: #03456f;
  color: #fff;
  border-color: #03456f;
}

/* ============================================
   26. Auth Pages (Login, Signup, OTP)
   ============================================ */
/* Auth page (standalone fallback) */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: var(--color-white);
}

/* Auth modal overlay */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}

@media (max-width: 575px) {
  .auth-modal-overlay {
    padding: 40px 0;
  }
}

.auth-modal-overlay.show {
  display: flex;
}

.auth-modal {
  background-color: var(--color-white);
  border-radius: 0;
  width: 100%;
  max-width: 560px;
  min-height: 100vh;
  padding: 60px 40px;
  position: relative;
}

@media (max-width: 575px) {
  .auth-modal {
    padding: 60px 25px;
  }
}

#loginModal .auth-modal,
#forgotPasswordModal .auth-modal,
#verifyOtpModal .auth-modal,
#resetPasswordModal .auth-modal {
  min-height: auto;
}

.auth-container .auth-subtitle-bold {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.auth-container {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

/* ── Validation styles ── */
.auth-container .form-control.error {
    border-color: #dc3545;
}

.auth-container .form-control.valid {
    border-color: #28a745;
}

.auth-container .was-validated .form-control:valid {
	border-color: #28a745;
	background-image: none;
}

.auth-container .was-validated .form-control:invalid {
	border-color: #dc3545;
	background-image: none;
}

.auth-container .input-group-text {
	cursor:pointer; 
  border-left: none; 
  background: transparent;
}

label.error {
  font-size: 0.875rem;
  color: #dc3545;
  display: block;
}

.auth-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 1.25rem;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 1;
}

.auth-close:hover {
  color: var(--color-text-secondary);
}

.auth-modal .btn-primary {
  background-color: #0B5D92;
  border-color: #0B5D92;
}

.auth-modal .btn-primary:hover {
  background-color: transparent;
  border-color: #0B5D92;
  color: #0B5D92;
}

.auth-container h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #02131D;
  font-weight: 600;
}

.auth-container .auth-subtitle {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-white);
  margin-bottom: 12px;
  transition: var(--transition-fast);
}

.auth-social-btn svg {
  filter: grayscale(1) brightness(0);
  transition: var(--transition-fast);
}

.auth-social-btn:hover {
  background-color: #0B5D92;
  border-color: #0B5D92;
  color: var(--color-white);
}

.auth-social-btn:hover svg {
  filter: grayscale(1) brightness(0) invert(1);
}

.auth-social-btn img {
  width: 24px;
  height: 24px;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.auth-footer a {
  font-weight: 600;
}

.auth-legal {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.otp-input {
  text-align: center;
  font-size: 1.125rem;
  letter-spacing: 4px;
}

/* ============================================
   27. Profile Welcome Banner
   ============================================ */
.profile-welcome {
  position: relative;
  padding: 80px 0 80px;
  background-color: var(--color-white);
  overflow: hidden;
}

.profile-welcome-bg-character {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  top: 30px;
  right: 80px;
  width: 320px;
  opacity: 0.55;
}

.profile-welcome .container {
  position: relative;
  z-index: 1;
}

.profile-welcome-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  align-items: start;
}

.profile-welcome-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.profile-welcome-avatar {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #eef1f5;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-welcome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-welcome-verified-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.profile-welcome-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2ea44f;
}

.profile-welcome-verified .bi-patch-check-fill {
  color: #2ea44f;
  font-size: 1rem;
}

.profile-welcome-unverified {
  font-size: 0.8125rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-lighter);
  color: var(--color-text-secondary);
  margin-left: auto;
}

.profile-welcome-pending {
  font-size: 0.8125rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background-color: #ffda6a;
  color: #111827;
  margin-left: auto;
}

.profile-welcome-edit-icon {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d0d6dd;
  border-radius: 6px;
  color: #4a5563;
  background: #fff;
  text-decoration: none;
}

.profile-welcome-edit-icon:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.profile-welcome-edit-btn {
  display: inline-block;
  width: auto;
  min-width: 170px;
  padding: 12px 36px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 4px;
}

.profile-welcome-main {
  min-width: 0;
}

.profile-welcome-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 56px;
  line-height: 1.2;
}

.profile-welcome-subtitle-wrap {
  margin-bottom: 28px;
}

.profile-welcome-subtitle {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
  padding-bottom: 10px;
  position: relative;
}

.profile-welcome-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-text);
  border-radius: 2px;
}

.profile-achievements {
  margin-bottom: 28px;
}

.profile-achievements-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.profile-achievement-card {
  background: #eef3f8;
  border-radius: 6px;
  padding: 22px 22px 24px;
}

.profile-achievement-card-top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.profile-achievement-card-icon {
  width: 90px;
  height: 70px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  background: #dbe6f3;
  border-radius: 6px;
  padding: 6px;
}

.profile-achievement-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-achievement-label {
  font-size: 0.85rem;
  color: var(--color-text);
}

.profile-achievement-medal {
  width: 13px;
  height: auto;
  display: block;
}

.profile-achievement-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.45;
  margin: 0 0 10px;
}

.profile-achievement-date {
  font-size: 0.8125rem;
  color: #8a94a3;
}

.profile-achievements-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.profile-achievement-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.profile-achievement-dot.active {
  background: var(--color-primary);
}

.profile-welcome-view-all {
  display: inline-block;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: #fff;
  padding: 12px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.profile-welcome-view-all:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 991px) {
  .profile-welcome {
    padding: 80px 0 60px;
  }
  .profile-welcome-grid {
    grid-template-columns: 190px 1fr;
    gap: 32px;
  }
  .profile-welcome-avatar {
    width: 140px;
    height: 140px;
  }
  .profile-welcome-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }
  .profile-welcome-subtitle {
    font-size: 1.25rem;
  }
  .profile-achievements-track {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-welcome-bg-elements {
    width: 80%;
    opacity: 0.7;
  }
  .profile-welcome-bg-character {
    width: 220px;
    opacity: 0.4;
    right: 40px;
  }
}

@media (max-width: 813px) and (min-width: 517px) {
  .profile-achievements-track {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .profile-welcome {
    padding: 60px 0 40px;
  }
  .profile-welcome-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profile-welcome-aside {
    gap: 14px;
  }
  .profile-welcome-avatar {
    width: 150px;
    height: 150px;
  }
  .profile-welcome-edit-icon {
    display: inline-flex;
  }
  .profile-welcome-edit-btn {
    display: none;
  }
  .profile-welcome-title {
    font-size: 1.0625rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
  }
  .profile-welcome-subtitle {
    font-size: 1.125rem;
  }
  .profile-welcome-subtitle-wrap {
    margin-bottom: 20px;
  }
  .profile-achievements-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 16px 8px;
    margin: 0 -16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .profile-achievements-track::-webkit-scrollbar {
    display: none;
  }
  .profile-achievement-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .profile-achievements-dots {
    display: flex;
  }
  .profile-welcome-bg-character {
    display: none;
  }
  .profile-welcome-bg-elements {
    width: 100%;
    opacity: 0.5;
  }
  .profile-welcome-view-all {
    padding: 11px 22px;
  }
}

/* ============================================
   User Profile — Current Courses (carousel)
   ============================================ */
.up-cc-section {
  background-color: #F5F9FB;
}

.up-cc-carousel {
  position: relative;
}

.up-cc-track.mc-list {
  gap: 24px;
}

.up-cc-track.mc-list .mc-card {
  margin-bottom: 0;
}

/* Desktop: horizontal carousel with arrows
   - 992-1199px: 1 card per view
   - >=1200px:  2 cards per view
*/
@media (min-width: 992px) {
  .up-cc-track.mc-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 8px;
  }

  .up-cc-track.mc-list::-webkit-scrollbar {
    display: none;
  }

  .up-cc-track.mc-list .mc-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    padding: 16px;
    gap: 16px;
  }

  .up-cc-track.mc-list .mc-card-img {
    width: 110px;
    height: 110px;
  }

  .up-cc-track.mc-list .mc-continue-btn {
    padding: 8px 14px;
    font-size: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .up-cc-track.mc-list .mc-card {
    flex: 0 0 calc(50% - 12px);
  }
}

/* Tablet: stacked list, no arrows */
@media (min-width: 576px) and (max-width: 991.98px) {
  .up-cc-track.mc-list {
    gap: 16px;
  }
}

.up-cc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
  transition: var(--transition-fast);
}

.up-cc-arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.up-cc-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.up-cc-arrow:disabled:hover {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text);
}

.up-cc-arrow-prev {
  left: -20px;
}

.up-cc-arrow-next {
  right: -20px;
}

@media (min-width: 992px) {
  .up-cc-arrow {
    display: flex;
  }
}

/* Mobile: hide desktop/tablet carousel (mobile mc-carousel takes over) */
@media (max-width: 575.98px) {
  .up-cc-carousel {
    display: none;
  }
}

/* Calendar Widget */
.calendar-widget {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-header h5 {
  font-size: 0.9375rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.calendar-grid .day-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 4px;
}

.calendar-grid .day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  margin: 0 auto;
  cursor: pointer;
  transition: var(--transition-fast);
}

.calendar-grid .day:hover {
  background-color: var(--color-bg-light);
}

.calendar-grid .day.today {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.calendar-grid .day.has-event {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.calendar-grid .day.other-month {
  color: var(--color-text-light);
}

/* Deadline card */
.deadline-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.deadline-card:last-child {
  border-bottom: none;
}

.deadline-card h6 {
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.deadline-card .deadline-tags {
  display: flex;
  gap: 8px;
  align-items: center;
}

.deadline-card .overdue {
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Activity Feed */
.activity-card {
  min-width: 240px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.activity-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.activity-card-body {
  padding: 12px;
}

.activity-card-body h6 {
  font-size: 0.8125rem;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-card-body .meta {
  font-size: 0.6875rem;
  color: var(--color-text-light);
}

/* -- Recent Blog Posts -- */
.rbp-subheading {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 36px;
}

.rbp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.rbp-item {
  min-width: 0;
}

.rbp-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none !important;
  border-bottom: none !important;
  line-height: 1.5;
  display: block;
  margin-bottom: 14px;
}

.rbp-grid .rbp-item {
  border-right: 3px solid var(--color-border);
  padding-right: 24px;
}

.rbp-grid .rbp-item:last-child {
  border-right: none;
  padding-right: 0;
}

.rbp-title:hover {
  color: var(--color-primary-hover);
}

.rbp-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.rbp-author {
  margin-right: 16px;
}

/* Mobile carousel (hidden on desktop/tablet) */
.rbp-carousel {
  display: none;
}

.rbp-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.rbp-carousel-track::-webkit-scrollbar {
  display: none;
}

.rbp-carousel-track .rbp-item {
  flex: 0 0 65%;
  scroll-snap-align: start;
}

.rbp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.rbp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.rbp-carousel-dot.active {
  background-color: var(--color-primary);
}

/* -- Newly Updated Courses -- */
.nuc-section {
  padding-top: 0;
}

.nuc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.nuc-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nuc-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.nuc-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nuc-card-provider {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.nuc-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.5;
  margin-bottom: 12px;
}

.nuc-card-extra {
  display: none;
}

.nuc-card-meta {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.nuc-card-instructor {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.nuc-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.nuc-card-rating .rating-score {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-dark);
}

.nuc-card-rating .stars {
  display: flex;
  gap: 1px;
  color: var(--color-star);
  font-size: 0.75rem;
}

.nuc-card-rating .rating-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.nuc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.nuc-card-price-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.nuc-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0;
}

.nuc-card-strike-price {
  font-size: 1rem;
  color: var(--color-text-secondary);
  text-decoration: line-through;
  line-height: 0.9;
  margin-bottom: 0;
}

.nuc-card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: underline !important;
  margin-top: auto;
  padding-top: 16px;
  text-align: center;
  display: block;
}

.nuc-card-link:hover {
  color: var(--color-primary);
}

/* ============================================
   UPCOMING DEADLINES SECTION
   ============================================ */
.upcoming-deadlines-section .row {
  align-items: flex-start;
}

@media (min-width: 690px) {
  .col-ud-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-ud-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
}

.ud-calendar-card {
  background-color: #f1f5f9;
  border-radius: 12px;
  padding: 24px;
}

.ud-select-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.ud-selected-date {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 20px 0;
}

.ud-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ud-month-dropdown {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ud-month-dropdown i {
  font-size: 0.625rem;
}

.ud-calendar-nav {
  display: flex;
  gap: 4px;
}

.ud-nav-btn {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
}

.ud-nav-btn:hover {
  color: var(--color-primary);
}

.ud-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 10px;
  text-align: center;
}

.ud-day-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  padding: 8px 0;
}

.ud-calendar-body {
  position: relative;
}

.ud-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 0.8125rem;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}

.ud-day-empty {
  cursor: default;
  pointer-events: none;
}

.ud-day:not(.ud-day-empty):hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ud-day-today {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.ud-day-selected {
  border: 1px solid #94a3b8;
}

.ud-day-today.ud-day-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.ud-day-event {
  background-color: #0f172a;
  color: #ffffff;
  font-weight: 500;
}

.ud-day-event:hover {
  background-color: #0f172a;
}

.ud-day-event.ud-day-selected {
  border-color: #0f172a;
  box-shadow: 0 0 0 2px #ffffff inset;
}

/* Month picker overlay */
.ud-month-picker {
  position: absolute;
  inset: 0;
  background-color: #f1f5f9;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.ud-month-picker[hidden] {
  display: none;
}

.ud-month-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.ud-month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1 1 auto;
}

.ud-month-option {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 4px;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}

.ud-month-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ud-month-option.is-active {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.ud-deadline-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ud-deadline-card {
  background-color: rgba(241, 241, 241, 0.5);
  border-radius: 12px;
  padding: 24px 28px;
}

.ud-deadline-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.ud-deadline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ud-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.ud-tag i {
  font-size: 0.875rem;
}

.ud-deadline-overdue {
  margin: 0;
  color: #ef4444;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ud-view-all {
  display: inline-block;
  margin-top: 36px;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ud-view-all:hover {
  color: var(--color-primary);
}

@media (max-width: 991.98px) {
  .ud-calendar-card,
  .ud-deadline-card {
    padding: 18px 20px;
  }
  .ud-selected-date {
    font-size: 1.375rem;
  }
  .ud-deadline-title {
    font-size: 0.875rem;
  }
}

@media (max-width: 575.98px) {
  .ud-calendar-card {
    padding: 20px;
  }
  .ud-deadline-card {
    padding: 18px 20px;
  }
  .ud-selected-date {
    font-size: 1.5rem;
  }
  .ud-deadline-list {
    gap: 14px;
  }
  .ud-view-all {
    margin-top: 18px;
  }
}

/* ============================================
   GENERIC APP MODAL (deadlines, etc.)
   ============================================ */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.app-modal-overlay.show {
  display: flex;
}

.app-modal {
  background-color: var(--color-white);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.app-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.app-modal-close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.app-modal-close:hover {
  background-color: var(--color-bg-lighter);
}

.app-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-modal-body::-webkit-scrollbar {
  display: none;
}

.app-modal-deadlines .ud-deadline-list {
  gap: 16px;
}

@media (max-width: 575.98px) {
  .app-modal-overlay {
    padding: 24px 20px;
  }
  .app-modal {
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 48px);
    border-radius: 12px;
  }
  .app-modal-header {
    padding: 16px 20px;
  }
  .app-modal-title {
    font-size: 1rem;
  }
  .app-modal-body {
    padding: 16px 20px 24px;
  }
}

/* Purchase Success Modal */
.purchase-success-modal {
  max-width: 480px;
}

.purchase-success-body {
  padding: 40px;
}

.purchase-success-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 20px;
}

.purchase-success-body p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.purchase-success-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.purchase-success-actions .btn {
  flex: 1;
}

@media (max-width: 575.98px) {
  .purchase-success-body {
    padding: 28px 24px;
  }

  .purchase-success-actions {
    flex-direction: column;
  }
}

/* Section title with underline */
.section-title-underline {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 8px;
}

.section-title-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* Course filter tabs (pill style) */
.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-tab {
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  background-color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-tab.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ============================================
   28. My Courses
   ============================================ */

.mc-section .section-heading h2 {
  padding-bottom: 10px;
}

/* -- Tabs -- */
.mc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.mc-tab {
  padding: 8px 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.mc-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mc-tab.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* -- Tab content visibility -- */
.mc-tab-content {
  display: none;
}

.mc-tab-content.active {
  display: block;
}

/* -- Card list (desktop/tablet) -- */
.mc-list {
  display: flex;
  flex-direction: column;
}

.mc-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  position: relative;
}

.mc-card-img {
  width: 140px;
  height: 95px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.mc-card-body {
  flex: 1;
  min-width: 0;
}

/* .mc-card-certificate {
  font-size: 0.8125rem;
  color: #000;
  font-weight: 500;
  text-decoration: underline;
  margin-bottom: 8px;
} */

.mc-card-meta {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.mc-meta-sep {
  margin: 0 6px;
  color: var(--color-text-light);
}

.mc-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* -- Progress bar (In Progress cards) -- */
.mc-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.mc-progress .progress-bar-wrapper {
  flex: 1;
  height: 8px;
}

.mc-progress-pct {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.mc-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* -- Actions column (In Progress) -- */
.mc-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.mc-menu-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  cursor: pointer;
  padding: 4px;
}

.mc-menu-btn:hover {
  color: var(--color-dark);
}

.mc-continue-btn {
  display: inline-block;
  padding: 8px 15px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.mc-continue-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* -- Watchlist cards -- */
.mc-card-watchlist .mc-card-img {
  width: 180px;
  height: 120px;
}

.mc-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  line-height: 1.5;
}

.mc-card-meta-inline {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.mc-card-instructor {
  font-size: 0.875rem;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.mc-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.mc-card-rating .rating-score {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-dark);
}

.mc-card-rating .stars {
  display: flex;
  gap: 1px;
  color: var(--color-star);
  font-size: 0.75rem;
}

.mc-card-rating .rating-count {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.mc-card-bottom {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mc-card-level {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.mc-remove-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.mc-remove-link:hover {
  text-decoration: underline;
}

.mc-card-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  flex-shrink: 0;
  white-space: nowrap;
}

/* -- Completed cards -- */
.mc-card-completed .mc-card-certificate {
  margin-bottom: 12px;
}

.mc-card-completed .mc-card-title {
  margin-bottom: 12px;
}

.mc-completed-status {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-success);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc-completed-status i {
  font-size: 0.875rem;
}

.mc-cert-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.mc-cert-link:hover {
  text-decoration: underline;
}

/* -- Mobile carousel (hidden on desktop/tablet) -- */
.mc-carousel {
  display: none;
}

.mc-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.mc-carousel-track::-webkit-scrollbar {
  display: none;
}

.mc-carousel-card {
  flex: 0 0 70%;
  scroll-snap-align: start;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.mc-carousel-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.mc-carousel-card-body {
  padding: 14px 16px 18px;
}

.mc-carousel-card-body .mc-card-certificate {
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.mc-carousel-card-body .mc-card-title {
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.mc-carousel-card-body .mc-progress {
  margin-bottom: 4px;
}

.mc-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.mc-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.mc-carousel-dot.active {
  background-color: var(--color-primary);
}

/* ============================================
   29. Learning Paths
   ============================================ */

/* -- LP Hero Section -- */
.lp-hero {
  padding: 60px 0;
  background-color: #eef2f6;
}

.lp-hero .row {
  align-items: flex-start;
}

.lp-hero-content h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.lp-hero-content > p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}

.lp-hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.lp-hero-feature {
  text-align: center;
}

.lp-hero-feature-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-white);
  border-radius: 50%;
}

.lp-hero-feature-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid #c8c8c8;
  border-radius: 50%;
  margin: 0 auto 12px;
  background-color: var(--color-white);
}

.lp-hero-feature-icon--svg {
  width: 22px;
  height: 22px;
  margin: 0;
}

.lp-hero-feature h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.lp-hero-feature p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

.lp-hero-btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 28px;
  border: 2px solid var(--color-primary);
  border-radius: 0;
  text-decoration: none;
  transition: var(--transition);
}

.lp-hero-btn:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* LP Hero Images */
.lp-hero-images {
  position: relative;
  height: 420px;
}

.lp-hero-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}

.lp-hero-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-hero-circle--top {
  width: 190px;
  height: 190px;
  top: 0;
  right: 0;
}

.lp-hero-circle--mid {
  width: 130px;
  height: 130px;
  top: 120px;
  right: 210px;
}

.lp-hero-circle--bottom {
  width: 210px;
  height: 210px;
  top: 210px;
  right: 30px;
}

/* -- LP Career Path Section -- */
.lp-career-path {
  padding: 60px 0;
}

.lp-career-path .section-heading h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.pr-career-path .section-heading h2 {
  font-weight: 600;
}

.pr-career-path > .container {
  padding-left: 0;
}

.lp-career-path-subtitle {
  font-size: 1rem;
  color: var(--color-text);
  margin-top: 28px;
  margin-bottom: 48px;
}

.lp-career-path-highlight {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.lp-career-path-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.lp-career-path-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-career-path-skill {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}

.lp-career-path-item .progress-ring-wrapper {
  margin-bottom: 16px;
}

.lp-career-path-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-career-path-link:hover {
  color: var(--color-primary-hover);
}

/* -- Career Path Course Cards Carousel -- */
.cp-cards-subtitle {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 24px;
}

.cp-cards-carousel {
  position: relative;
}

.cp-cards-carousel .carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.cp-cards-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}

.cp-card-item {
  min-width: calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  flex-shrink: 0;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

.cp-card-item .course-card {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cp-card-item .course-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.cp-card-item .course-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cp-card-item .course-card-provider {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 6px;
  font-weight: 600;
}

.cp-card-item .course-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.35;
}

.cp-card-item .course-card-meta {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.cp-card-item .course-card-instructor {
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cp-card-item .course-card-rating {
  margin-bottom: 12px;
}

.cp-card-item .course-card-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-top: auto;
}

/* -- LP Current Learning Paths Section -- */
.lp-current {
  padding: 60px 0;
  background-color: #f0f4f8;
}

.lp-current-title-mobile {
  display: none;
}

.lp-current-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-current-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.lp-current-card-image {
  flex-shrink: 0;
  width: 160px;
  height: 110px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lp-current-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-current-card-body {
  flex: 1;
  min-width: 0;
}

.lp-current-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.lp-current-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.lp-current-card-divider {
  width: 1px;
  height: 14px;
  background-color: var(--color-text-secondary);
}

.lp-current-card-lesson {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.lp-current-card-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.lp-current-progress-bar {
  flex: 1;
  height: 8px;
  background-color: #d9e2ec;
  border-radius: var(--radius-pill);
  overflow: hidden;
  max-width: 400px;
}

.lp-current-progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

.lp-current-progress-pct {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 32px;
}

.lp-current-card-overall {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.lp-current-card-overall strong {
  color: var(--color-dark);
  font-weight: 700;
}

.lp-current-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
}

.lp-current-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  padding: 4px;
}

.lp-current-menu-btn:hover {
  color: var(--color-dark);
}

.lp-current-continue-btn {
  display: inline-block;
  padding: 8px 20px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
  margin-top: auto;
}

.lp-current-continue-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.lp-current-dots {
  display: none;
}

/* -- LP Discover Career Path Section -- */
.lp-discover-section {
  padding: 60px 0;
  background-color: var(--color-white);
}

.lp-discover-section .section-heading h2 {

  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-dark);
}

.lp-tab-mobile-only {
  display: none;
}

.lp-grid-pagination {
  display: none;
}

.lp-discover-subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 600px;
}

.lp-discover-sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.lp-discover-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.lp-discover-header-line {
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.lp-discover-header-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  white-space: nowrap;
}

/* LP Job Cards */
.lp-job-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lp-job-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.lp-job-card-body {
  padding: 24px 20px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lp-job-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.lp-job-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.lp-job-card-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}

.lp-job-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.lp-job-tag {
  display: inline-block;
  padding: 6px 18px;
  border: 1.5px solid var(--color-primary);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
}

.lp-job-card-stats {
  margin-bottom: 16px;
}

.lp-job-card-stats p {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  line-height: 1.6;
}

.lp-job-card-stats strong {
  color: var(--color-dark);
  font-weight: 700;
}

.lp-job-card-footer {
  border-top: 1px solid var(--color-border);
  padding: 18px 20px;
  text-align: center;
  margin-top: auto;
}

.lp-job-card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
}

.lp-job-card-link:hover {
  color: var(--color-primary);
}

.skill-rings-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.skill-ring-item {
  text-align: center;
}

.skill-ring-item .label {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.skill-ring-item .explore-link {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Learning path course item */
.lp-course-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.lp-course-item img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.lp-course-item-info {
  flex: 1;
  min-width: 0;
}

.lp-course-item-info .provider {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.lp-course-item-info h5 {
  font-size: 0.9375rem;
  margin-bottom: 8px;
}

.lp-course-item .progress-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-course-item .progress-section .percentage {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ============================================
   30. Progress Report
   ============================================ */
.grade-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.grade-row img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.grade-row-info {
  flex: 1;
}

.grade-row-info h5 {
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.grade-row-info .tag-sm {
  font-size: 0.6875rem;
}

.grade-row-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.grade-expanded {
  display: none;
  padding: 0 0 16px;
}

.grade-row.active + .grade-expanded {
  display: block;
}

/* ============================================
   31. Purchases
   ============================================ */
.purchases-help {
  margin-bottom: 32px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.purchases-help a {
  color: #0B5D92;
  text-decoration: underline;
  font-weight: 600;
}

.purchases-help a:hover {
  color: var(--color-primary-hover);
}

.purchases-header {
  display: flex;
  align-items: center;
  padding: 0 24px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.purchases-col-name {
  flex: 1 1 0;
  min-width: 0;
}

.purchases-col-amount,
.purchases-col-date,
.purchases-col-status {
  flex: 0 0 140px;
  text-align: center;
}

.purchases-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purchase-card {
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.purchase-card-row {
  display: flex;
  align-items: center;
  padding: 24px;
}

.purchase-card-info {
  flex: 1 1 0;
  min-width: 0;
}

.purchase-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.4;
}

.purchase-card-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.purchase-card-amount,
.purchase-card-date,
.purchase-card-status {
  flex: 0 0 140px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text);
}

.purchase-card-mobile {
  display: none;
}

.purchases-showing {
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-text);
}

/* ============================================
   32. Accomplishments
   ============================================ */
.achievements-heading {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 32px;
}

.achievements-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--color-primary);
}

.achievements-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}

.achievement-stat {
  flex: 1 1 0;
  min-width: 120px;
}

.achievement-stat-label {
  display: block;

  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text);
  margin-bottom: 12px;
}

.achievement-stat-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievement-stat-value i {
  font-size: 1.75rem;
  color: #0B5D92;
}

.achievement-stat-value span {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0B5D92;
}

h2.accomplishments-title {
  margin-bottom: 55px !important;
}

.my-certificates {
  padding-top: 40px;
  margin-bottom: 40px;
}

.my-certificates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.my-certificates-header h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--color-text);
  margin-top: 8px;
  border-radius: 2px;
}

.certificate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.certificate-item:first-of-type {
  border-top: 1px solid var(--color-border);
}

.certificate-item-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.certificate-icon {
  width: 120px;
  height: 90px;
  background-color: var(--color-bg-lighter);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.certificate-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.certificate-details {
  flex: 1;
  min-width: 0;
}

.certificate-details h5 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}

.certificate-details .cert-id {
  display: block;
  font-size: 0.8125rem;
  color: #0B5D92;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 2px;
}

.certificate-details .cert-id:hover {
  text-decoration: underline;
}

.certificate-details .cert-date {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.certificate-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 24px;
}

.certificate-actions .btn {
  border-radius: 4px;
}

.certificate-actions .cert-share-btn {
  color: #555555;
  border-color: #555555;
  text-decoration: underline;
}

.certificate-actions .cert-share-btn:hover {
  color: #ffffff;
  background-color: #555555;
  border-color: #555555;
  text-decoration: none;
}

/* ============================================
   33. Edit Profile
   ============================================ */
.edit-profile-section {
  padding: 70px 0 60px;
}

.edit-profile-heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.edit-profile-section .tab-btn.active {
  color: #0B5D92;
}

.edit-profile-section .tab-btn.active::after {
  background-color: #0B5D92;
}

.edit-profile-section .tab-btn:hover {
  color: #0B5D92;
}

.edit-profile-section .tabs {
  margin-bottom: 60px;
}

/* Top row: avatar + personal info side by side */
.edit-profile-top-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.edit-profile-avatar-col {
  flex: 0 0 440px;
}

.edit-profile-info-col {
  flex: 1;
  min-width: 0;
}

/* Profile card (shared container) */
.profile-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.profile-card-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.profile-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.profile-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.profile-edit-btn {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  cursor: pointer;
  padding: 4px;
  transition: var(--transition-fast);
}

.profile-edit-btn:hover {
  color: var(--color-primary);
}

/* Avatar upload */
.profile-avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px;
}

.profile-avatar-upload {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}

.profile-avatar-upload img {
  width: 260px;
  height: 260px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar-camera-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.avatar-camera-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.profile-avatar-size-hint {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 12px;
}

.profile-avatar-size-hint.upload-error,
.verify-id-size-hint.upload-error {
  color: var(--color-danger);
}

/* Career path */
.career-tag-wrap {
  margin-top: 20px;
  margin-bottom: 20px;
}

.career-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.career-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text);
  padding: 0;
  display: flex;
  align-items: center;
}

.career-tag-remove:hover {
  color: var(--color-danger);
}

.career-selected-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}

.career-selected-text strong {
  color: var(--color-text);
}

.career-select-wrap {
  max-width: 620px;
}


/* Verify account */
.verify-subtitle {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 12px;
}

#verify-account-form .form-control {
  background-color: var(--color-white);
}

input#verify-fullname {
  border-radius: 4px;
}

/* Custom Select Dropdown */
.id-type-dropdown {
  position: relative;
}

.id-type-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  cursor: pointer;
  transition: var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.id-type-dropdown-trigger:hover {
  border-color: var(--color-primary);
}

.id-type-dropdown-trigger .id-type-dropdown-value.is-placeholder {
  color: var(--color-text-light);
}

.id-type-dropdown-trigger i {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.id-type-dropdown.open .id-type-dropdown-trigger {
  border-color: var(--color-primary);
}

.id-type-dropdown.open .id-type-dropdown-trigger i {
  transform: rotate(180deg);
}

.id-type-dropdown-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  padding: 8px 0;
  list-style: none;
}

.id-type-dropdown.open .id-type-dropdown-options {
  display: block;
}

.id-type-dropdown-options li {
  padding: 14px 20px;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.id-type-dropdown-options li:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text);
}

.id-type-dropdown-options li.selected {
  color: var(--color-primary);
  font-weight: 500;
}

.verify-requirements {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 24px;
}

.verify-requirements li {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* .verify-id-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
}

.verify-id-upload-circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  overflow: hidden;
}

.verify-id-upload-circle:hover {
  background-color: var(--color-border);
}

.verify-id-upload-circle i {
  font-size: 2rem;
  color: var(--color-text-secondary);
}

.verify-id-preview {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
  position: absolute;
  top: 0;
  left: 0;
}

.verify-id-upload-circle.has-preview i {
  display: none;
}

.verify-id-upload-circle.has-preview .verify-id-preview {
  display: block;
}

.verify-id-size-hint {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 8px;
} */

/* Edit Details Modal */
.edit-details-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 20px;
}

/* Mobile */
@media (max-width: 575px) {
  .edit-details-overlay {
    padding: 0;
  }
}

.edit-details-overlay.active {
  display: flex;
}

.edit-details-modal {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edit-details-modal::-webkit-scrollbar {
  display: none;
}

.edit-details-close {
  position: absolute;
  top: 33px;
  right: 32px;
  background: none;
  border: none;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px;
  transition: var(--transition-fast);
}

.edit-details-close:hover {
  color: var(--color-text);
}

.edit-details-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 28px;
}

.edit-details-field {
  margin-bottom: 20px;
}

.edit-details-field .form-label {
  margin-bottom: 6px;
}

.edit-field-readonly {
  background-color: var(--color-bg-lighter);
  cursor: not-allowed;
}

/* ============================================
   34. Notifications Page
   ============================================ */
.notifications-page {
  padding: 40px 0 60px;
}

.notifications-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.notifications-page .notification-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.notifications-page .notification-card:last-child {
  border-bottom: none;
}

/* Tablet */
@media (max-width: 991px) {
  .notification-body p {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .notifications-page {
    padding: 24px 0 40px;
  }

  .notifications-page .notification-card {
    padding: 16px;
  }
}

/* Notification Modal */
.notification-modal-overlay {
  align-items: center;
  padding: 40px 20px;
  overflow: hidden;
}

.auth-modal.notification-modal {
  max-width: 560px;
  min-height: auto;
  max-height: calc(100vh - 80px);
  padding: 48px 48px 40px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notification-modal-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.notification-modal-body::-webkit-scrollbar {
  display: none;
}

.notification-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-text);
}

.notification-modal-body p {
  margin-bottom: 18px;
  color: var(--color-text-secondary);
}

.notification-modal-body p strong {
  color: var(--color-text);
  font-weight: 600;
}

.notification-modal-body a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.notification-modal-closing {
  margin-top: 8px;
}

@media (max-width: 575px) {
  .auth-modal.notification-modal {
    padding: 40px 24px 28px;
  }

  .notification-modal-title {
    font-size: 1.125rem;
  }

  .notification-modal-body {
    font-size: 0.875rem;
  }
}

/* ============================================
   35. Course Content / Player — Mobile
   ============================================ */

/* Hide standard navbar & mobile menu on course player pages */
.course-player-mode > .navbar,
.course-player-mode > .mobile-menu-overlay,
.course-player-mode > .mobile-menu {
  display: none;
}

/* Player Bar (special navbar for course content page) */
.course-player-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.course-player-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--navbar-height);
}

.course-player-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.course-player-bar-left .navbar-toggle {
  color: var(--color-white);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.course-player-bar-left .navbar-brand img {
  height: 36px;
}

.course-player-title {
  flex: 1;
  margin-left: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-player-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.course-player-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-ring-sm {
  width: 43px;
  height: 43px;
}

.progress-ring-text-sm {
  font-size: 0.625rem;
  fill: var(--color-text);
  font-weight: 600;
  font-family: var(--font-family);
}

.course-player-progress-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.course-player-bar-right .nav-icon-btn {
  color: var(--color-white);
  font-size: 1.125rem;
}

.course-player-bar-right .nav-avatar {
  background-color: #2aa198;
}

/* Mobile player bar (hidden on desktop) */
.course-player-bar-mobile {
  display: none;
}

.course-player-back {
  color: var(--color-white);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.course-player-mobile-title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-white);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-player-bar-mobile-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.course-player-bar-mobile-right .nav-icon-btn {
  color: var(--color-white);
  font-size: 1.125rem;
}

/* Main layout */
.course-player-page {
  display: flex;
  min-height: calc(100vh - var(--navbar-height));
}

/* Left Sidebar */
.course-sidebar-panel {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  height: calc(100vh - var(--navbar-height));
  position: sticky;
  top: var(--navbar-height);
  background-color: var(--color-white);
}

.course-sidebar-header {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.course-sidebar-header h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

/* .course-sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text);
} */

.course-sidebar-modules.collapsed {
  display: none;
}

/* Module accordion */
.module-item {
  border-bottom: 1px solid var(--color-border);
}

/* Default module header — in-progress / not started (light style) */
.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 24px);
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  margin: 8px 12px;
}

/* Completed module header — dark style */
.module-item.completed .module-header {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

/* Active (expanded) module header — light blue style */
.module-item.current .module-header {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.module-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-check {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

/* Completed module check icon — white in dark bar */
.module-item.completed .module-check {
  color: var(--color-white);
}

.module-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.module-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.7;
}

.module-header > i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

/* Chevron color for in-progress modules */
.module-header > i {
  color: var(--color-text-secondary);
}

.module-item.completed .module-header > i {
  color: var(--color-white);
}

.module-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.module-item.active .module-body {
  max-height: 2000px;
}

/* Lesson items */
.lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px 10px 28px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.lesson-item:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.lesson-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.lesson-item.active:hover {
  color: var(--color-primary);
}

.lesson-item.completed .lesson-check {
  color: var(--color-dark);
}

.lesson-check {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-light);
}

.lesson-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lesson-title {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.lesson-duration {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lesson-duration i {
  font-size: 0.625rem;
}

/* Course info sidebar (deadlines, schedule) */
/* .course-info-sidebar {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

.sidebar-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.sidebar-info-row i {
  color: var(--color-text-light);
  font-size: 1rem;
} */

/* Deadlines timeline */
/* .sidebar-deadlines-timeline {
  position: relative;
  padding-left: 20px;
  margin: 8px 0 12px;
} */

/* Vertical dotted line */
/* .sidebar-deadlines-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 28px;
  bottom: 8px;
  width: 1px;
  border-left: 1.5px dashed var(--color-border);
}

.deadlines-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.deadline-entry {
  position: relative;
  padding-left: 20px;
  padding-bottom: 14px;
} */

/* Dot on timeline */
/* .deadline-dot {
  position: absolute;
  left: -1px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  border: 2px solid var(--color-white);
}

.deadline-content {
  display: flex;
  flex-direction: column;
}

.deadline-type {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

.deadline-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

.deadline-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-top: 6px;
  width: fit-content;
}

.deadline-badge.overdue {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.deadline-badge.due-soon {
  background-color: #fde8e8;
  color: var(--color-danger);
} */

/* Grades link */
.course-sidebar-grades {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

.course-sidebar-grades h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

/* Video player area */
.course-main-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  min-width: 0;
}

.course-lesson-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.video-player {
  width: 100%;
  aspect-ratio: 16/9;
  /* Caps height on large screens so the player fits without a viewport scroll; the iframe still letterboxes to true 16:9 */
  max-height: calc(100vh - var(--navbar-height) - 180px);
  background-color: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 auto;
}

.video-player video,
.video-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vimeo Player Embed */
.vimeo-player-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.vimeo-player-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Player Action Buttons: Previous / Mark As Complete / Next */
.course-player-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 16px 0 16px;
}

.player-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.player-action-btn.is-complete {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.player-action-btn.is-complete:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .course-player-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .course-player-actions .player-action-btn {
    flex: 1;
  }
}

/* Video controls bar */
.video-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin-bottom: 16px;
}

.video-controls-left,
.video-controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text);
  padding: 0;
  display: flex;
  align-items: center;
}

.video-controls button:hover {
  color: var(--color-primary);
}

.video-time {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

/* Course player tabs */
.course-player-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 24px;
}

.course-player-tabs .tab-btn {
  padding: 10px 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.course-player-tabs .tab-btn:hover {
  color: var(--color-text);
}

.course-player-tabs .tab-btn.active {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: var(--color-text);
}

/* Mobile tabs (hidden on desktop) */
.course-player-tabs-mobile {
  display: none;
}

/* Tab content */
.tab-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
}

/* PDF download items */
.pdf-download-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.pdf-download-item:last-of-type {
  border-bottom: none;
}

.pdf-icon-thumb {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0e6f6;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.pdf-icon-thumb i {
  font-size: 2rem;
  color: #7b2d8e;
}

.pdf-download-info h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.pdf-download-info p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Submit Assignment */
/* .submit-assignment-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.submit-assignment-section h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.assignment-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast);
}

.file-upload-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.assignment-hint {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 8px;
} */

/* Discussion Forum */
.discussion-post {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.discussion-post-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.discussion-post-header img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.discussion-post-header h6 {
  font-size: 0.9375rem;
}

.discussion-post p {
  font-size: 0.875rem;
  line-height: 1.6;
}

.discussion-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.discussion-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.discussion-actions button:hover {
  color: var(--color-primary);
}

.discussion-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-lg);
  margin-top: 24px;
}

.discussion-input img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.discussion-input input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 0.875rem;
}

.discussion-input button {
  font-size: 1.25rem;
  color: var(--color-primary);
}

.discussion-replies {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.discussion-reply {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
}

.discussion-reply img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.discussion-reply-body h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  margin-bottom: 2px;
}

.discussion-reply-badge {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding: 2px 8px;
  border-radius: 10px;
}

.discussion-reply-body p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Achievements Tab */
.achievement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 20px;
  border-bottom: 1px solid var(--color-border);
}

.achievement-row:first-child {
  padding: 0 0 20px;
}

.achievement-row-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.achievement-module-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.achievement-module-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievement-module-title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.achievement-module-title.completed {
  color: var(--color-primary);
}

.achievement-module-title.in-progress {
  color: var(--color-primary);
  font-weight: 500;
}

.achievement-module-title.pending {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.achievement-check {
  font-size: 1rem;
  color: var(--color-primary);
}

.achievement-check.pending {
  color: var(--color-text-secondary);
}

.achievement-module-status {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.achievement-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.achievement-batch-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.achievement-batch-pct {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* File upload area (legacy) */
.file-upload-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

/* Assignment section (legacy) */
.assignment-section {
  margin-top: 32px;
  padding: 24px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-lg);
}

/* ============================================
   36. Cart
   ============================================ */
.cart-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-img {
  width: 180px;
  height: 155px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.cart-item-body {
  flex: 1;
  min-width: 0;
}

.cart-item-university {
  display: none;
}

.cart-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
  height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-title a {
  color: var(--color-text);
}

.cart-item-title a:hover {
  color: var(--color-primary);
}

/* .cart-item-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
} */

.cart-item-meta {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 15px;
  letter-spacing: 0.3px;
}

.cart-item-price {
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  margin-bottom: 0;
}

.cart-item-strike-price {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: line-through;
  line-height: 1.2;
  text-align: right;
  flex-shrink: 0;
  margin-bottom: 0;
}

.cart-item .course-card-instructor {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cart-item .course-card-rating {
  margin-bottom: 6px;
}

.cart-item-bottom-row {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 4px;
}

.cart-item-level {
  font-size: 0.8125rem;
  color: var(--color-text);
}

.cart-item .remove-btn-desktop {
  font-size: 0.8125rem;
  color: #f5365c;
  font-weight: 600;
}

.cart-item-price-row {
  display: none;
}

/* Mobile-only cart elements — hidden on desktop/tablet */
/* .cart-mobile-summary,
.cart-mobile-checkout {
  display: none;
} */

.cart-sidebar-card {
  background-color: var(--color-bg-light);
  padding: 28px;
}

.promo-box {
  margin-bottom: 24px;
}

.promo-box h5 {
  font-weight: 700;
  margin-bottom: 8px;
}

.promo-input-group {
  display: flex;
  gap: 0;
  margin-top: 16px;
}

.promo-input-group input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 8px 0 0 8px;
  font-size: 0.875rem;
}

.promo-input-group button {
  padding: 12px 24px;
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
}

.cart-total {
  padding: 5px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-total-label {
  display: block;
  font-size: 1rem;
  color: var(--color-text);
}

.cart-total-amount {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ============================================
   37. Checkout
   ============================================ */
.payment-methods-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.payment-methods-header .secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: #f4f8fc;
  border: 1px solid #f4f8fc;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-option:last-child {
  margin-bottom: 0;
}

.payment-option:hover {
  border-color: var(--color-primary);
}

.payment-option.selected {
  border-color: var(--color-primary);
  background-color: var(--color-bg-light);
}

.payment-option input[type="radio"] {
  accent-color: var(--color-primary);
}

.payment-option i {
  /* font-size: 1.25rem; */
  color: var(--color-text);
  width: 24px;
  text-align: center;
}

.payment-option span {
  font-size: 0.9375rem;
  font-weight: 500;
}

.checkout-terms {
  margin: 20px 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.checkout-terms a {
  font-weight: 600;
}

@media (max-width: 860px) {
  .checkout-breadcrumb-wrap {
    display: none;
  }
}

/* ============================================
   38. Purchase Success
   ============================================ */
/* .purchase-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.purchase-success h2 {
  margin-bottom: 16px;
}

.purchase-success p {
  max-width: 480px;
  margin-bottom: 24px;
}

.purchase-success .btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
} */

/* Animated success check — plays once on load, respects reduced motion */
.success-check{
    width: 84px;
    height: 84px;
}
.success-check-svg{
    width: 100%;
    height: 100%;
}
.success-check-circle{
    stroke: #198754;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: success-circle 0.5s ease-in-out forwards;
}
.success-check-mark{
    stroke: #198754;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: success-mark 0.35s 0.45s ease-in-out forwards;
}
@keyframes success-circle{
    to{ stroke-dashoffset: 0; }
}
@keyframes success-mark{
    to{ stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce){
    .success-check-circle,
    .success-check-mark{
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Clean print view — just the receipt, no chrome */
@media print{
    .btn, header, footer, nav{ display: none !important; }
    .card{ box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}

/* ============================================
   39. Privacy Policy / Terms
   ============================================ */
.terms-conditions-section {
  padding: 40px 0 60px;
}

.terms-sidebar-border {
  border: 1px solid var(--color-border);
  height: 100%;
}

.terms-sidebar-nav {
  position: sticky;
  top: 90px;
  padding: 0;
  overflow: hidden;
}

.terms-sidebar-nav a {
  border-radius: 0;
  border-left: none;
  font-weight: 500;
}

.terms-sidebar-nav a.active {
  background-color: #0B5D92;
  border-left: none;
}

.terms-conditions-section .legal-content {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
}

.legal-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 28px;
}

.legal-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;

  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-text);
}

.legal-content h4 {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 16px;
  margin-bottom: 8px;
}

.legal-content p,
.legal-content li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.legal-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-content ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}

.legal-content ul li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--color-text-secondary);
}

.legal-content a {
  color: var(--color-text);
  text-decoration: underline;
}

.legal-content a:hover {
  color: var(--color-primary);
}

/* ============================================
   40. Help & Support
   ============================================ */
.help-search {
  position: relative;
  max-width: 400px;
  margin-bottom: 32px;
}

.help-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
}

.help-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}

.faq-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.faq-sidebar-item:hover {
  background-color: var(--color-bg-light);
}

.faq-sidebar-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

.faq-sidebar-item i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.help-cta {
  padding: 24px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
}

.help-cta-content h5 {
  margin-bottom: 4px;
}

.help-cta-content p {
  font-size: 0.8125rem;
  margin-bottom: 12px;
}

.feedback-section {
  margin-top: 48px;
}

.feedback-heading {
  margin-bottom: 40px;
}

.feedback-heading h3 {
  margin-bottom: 8px;
  padding-bottom: 12px;
  position: relative;
}

.feedback-heading h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

.feedback-textarea {
  resize: vertical;
  min-height: 140px;
  border-radius: 8px;
  border-color: #d9d9d9;
  padding: 16px;
}

.feedback-subheading {
  margin-top: 8px;
  margin-bottom: 8px;
  font-weight: 700;
}

.feedback-rating-desc {
  margin-bottom: 16px;
}

.feedback-section .form-check-label a {
  color: inherit;
  text-decoration: underline;
}

.feedback-section .form-check-label a:hover {
  color: var(--color-primary);
}

.number-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.number-rating-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #b5b5b5;
  background-color: var(--color-white);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}

.number-rating-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.number-rating-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.number-rating-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.feedback-submit-btn {
  width: 100%;
  padding: 14px 24px;
  font-weight: 600;
  margin-top: 24px;
}

.feedback-illustration-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.feedback-illustration-col .img-feedback {
  width: 100%;
  max-width: 300px;
  height: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 991px) {
  .feedback-illustration-col {
    display: none;
  }
}

.chat-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: var(--transition);
}

.chat-float-btn:hover {
  transform: scale(1.05);
  color: var(--color-white);
}

/* ============================================
   40b. Assignment Overview
   ============================================ */

/* Quiz/Assignment lesson item in sidebar */
.lesson-item.quiz-item {
  background-color: var(--color-bg-light);
}

.lesson-item.quiz-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.lesson-item.quiz-item .lesson-check {
  color: var(--color-primary);
}

/* Assignment overview main content */
.assignment-overview {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 32px 70px;
}

.assignment-banner {
  width: 100%;
  aspect-ratio: 5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.assignment-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.assignment-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.assignment-instructor {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 24px;
}

.assignment-description {
  margin-bottom: 24px;
}

.assignment-description p {
  font-size: 0.875rem;
  color: #444;
  line-height: 1.7;
}

.assignment-section {
  margin-bottom: 24px;
  background: none;
  padding: 0;
  border-radius: 0;
}

.assignment-section h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.assignment-section ul {
  padding-left: 20px;
  margin: 0;
  list-style-type: disc;
}

.assignment-section li {
  font-size: 0.875rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 4px;
}

/* Quiz details card */
.assignment-details-card {
  background-color: #F5F9FB;
  border: none;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.assignment-details-card h5 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.assignment-details-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.assignment-detail-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.assignment-detail-value {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.assignment-detail-action {
  margin-left: auto;
}

.btn-outline-assignment {
  display: inline-block;
  padding: 10px 24px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #717171;
  border: 1px solid #717171;
  border-radius: 6px;
  background: transparent;
  text-decoration: underline;
  transition: var(--transition-fast);
}

.btn-outline-assignment:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Your grade card */
.assignment-grade-card {
  background: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  margin-top: 64px;
}

.assignment-grade-card h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}

.assignment-grade-card p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.assignment-grade-score {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Mobile tabs for assignment (hidden on desktop/tablet) */
.assignment-tabs-mobile {
  display: none;
}

[data-tab-content="assignment-mobile"] {
  display: none;
}

/* ============================================
   40c. Quiz Page
   ============================================ */

/* Quiz header bar */
.quiz-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.quiz-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 72px;
  gap: 24px;
}

.quiz-header-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.quiz-back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  margin-top: 2px;
  /* margin-left: 40px; */
}

.quiz-back-link:hover {
  color: var(--color-primary);
}

.quiz-back-link i {
  font-size: 1rem;
}

.quiz-header-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}

.quiz-header-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
}

.quiz-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-shrink: 0;
}

.quiz-header-due {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-align: center;
  flex-shrink: 0;
}

.quiz-due-label {
  font-weight: 700;
  color: var(--color-text);
}

.quiz-header-timer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-timer-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.quiz-timer-warning circle {
  stroke: #e67e22;
}

.quiz-timer-expired circle {
  stroke: #e74c3c;
}


/* Quiz page main */
.quiz-page {
  padding: 20px 30px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
}

.quiz-form {
  display: flex;
  flex-direction: column;
}

/* Individual question */
.quiz-question {
  padding: 28px 0;
}

.quiz-question:first-child {
  padding-top: 16px;
}

.quiz-question-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.quiz-question-number {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 24px;
}

.quiz-question-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

.quiz-points {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Radio options (MCQ, True/False) */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 32px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
}

.quiz-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #000;
  flex-shrink: 0;
  cursor: pointer;
}

/* Short answer field */
.quiz-answer-field {
  padding-left: 32px;
  margin-top: 4px;
}

.quiz-answer-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.quiz-answer-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--color-primary);
  background: transparent;
  font-size: 0.875rem;
  font-family: 'Poppins', sans-serif;
  color: var(--color-text);
  padding: 6px 0;
  outline: none;
}

.quiz-answer-input:focus {
  border-bottom-color: var(--color-primary-hover);
}

/* Ordering question */
.quiz-order-list {
  padding-left: 52px;
  margin-bottom: 20px;
}

.quiz-order-list li {
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.8;
  list-style-type: disc;
}

.quiz-order-area {
  display: flex;
  gap: 24px;
  padding-left: 32px;
}

.quiz-order-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-order-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}

.quiz-order-tag:active {
  cursor: grabbing;
  opacity: 0.7;
}

.quiz-order-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quiz-order-slot {
  width: 64px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-white);
}

/* Matching question */
.quiz-match-terms {
  padding-left: 52px;
  margin-bottom: 16px;
}

.quiz-match-terms li {
  font-size: 0.8125rem;
  color: var(--color-text);
  line-height: 1.8;
  list-style-type: disc;
}

.quiz-match-definitions {
  padding-left: 32px;
  margin-bottom: 16px;
}

.quiz-match-definitions-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.quiz-match-definitions ol {
  padding-left: 20px;
  margin: 0;
  list-style-type: decimal;
}

.quiz-match-definitions li {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* Math equation card (for math-type questions) */
.quiz-equation-card {
  max-width: 320px;
  margin: 0 auto 20px;
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  background-color: var(--color-white);
}

.quiz-equation-card .quiz-equation-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.quiz-equation-card .quiz-equation-expr {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.quiz-math-img {
  display: block;
  max-width: 320px;
  width: 100%;
  margin: 0 0 20px 32px;
  border-radius: var(--radius-md);
}

.quiz-math-card {
  display: inline-block;
  background-color: #c9c5b8;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  margin: 0 0 20px 32px;
}

.quiz-math-card .quiz-math-img {
  margin: 0;
  display: block;
  mix-blend-mode: multiply;
}

.quiz-math-img--grayscale {
  filter: grayscale(1);
}

/* Honesty declaration */
.quiz-declaration {
  padding: 32px 0 20px;
}

.quiz-declaration-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.6;
}

.quiz-declaration-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.quiz-declaration-warning {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
  padding-left: 28px;
}

/* Submit button */
.quiz-submit-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  align-self: flex-start;
}

.quiz-submit-btn:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-white);
}

.quiz-submit-btn:disabled {
  color: var(--color-white);
  background-color: var(--color-primary);
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   41. Quiz Review Modal
   ============================================ */
#reviewModal .auth-modal {
  min-height: auto;
  padding: 26px 35px 40px 35px;
}

.quiz-review-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.quiz-review-body {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.quiz-review-list {
  padding-left: 20px;
  margin-bottom: 16px;
}

.quiz-review-list li {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.7;
  list-style-type: disc;
  margin-bottom: 8px;
}

.quiz-review-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}

.quiz-review-cancel {
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.quiz-review-cancel:hover {
  background-color: var(--color-bg);
}

/* ============================================
   42. Utility Classes (Inline Style Replacements)
   ============================================ */

/* Contact page section padding */
.section-contact {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Chat button (legacy) */
.btn-chat {
  background: #f5a623;
  color: #fff;
  text-decoration: none;
}

/* About hero background */
.about-hero-bg {
  background: url('../images/about-hero-vr.jpg') center/cover no-repeat;
  color: #fff;
  padding: 100px 0;
  text-align: center;
}

/* About hero label */
.about-hero-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  color: #fff;
}

/* About hero description */
.about-hero-desc {
  max-width: 750px;
  margin: 0 auto;
  font-size: 1.375rem;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
}

/* Spaced list */
.list-spaced {
  line-height: 2.2;
}

/* Large primary icon (2.5rem) */
.icon-lg-primary {
  font-size: 2.5rem;
  color: var(--primary-color, #1a73e8);
}

/* Filter button pill shape */
.filter-btn-pill {
  border-radius: 50px;
}

/* Active filter button with primary color */
.filter-btn-active {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  border-radius: 50px;
}

/* Horizontal scroll container */
.scroll-x {
  overflow-x: auto;
  padding-bottom: 16px;
}

/* Progress bar width utilities */
.progress-w-10 { width: 10%; }
.progress-w-20 { width: 20%; }
.progress-w-40 { width: 40%; }
.progress-w-65 { width: 65%; }
.progress-w-78 { width: 78%; }
.progress-w-85 { width: 85%; }

/* Instructor avatar (round) */
.img-instructor {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/* Text secondary custom color */
.text-color-secondary {
  color: var(--color-text-secondary);
}

/* Fixed-width course card for carousel */
.course-card-fixed {
  min-width: 260px;
  flex-shrink: 0;
}

/* Grade row body hidden by default */
.grade-row-body-hidden {
  display: none;
}

/* Password card — no max-width, full container width */

/* Feedback illustration image (base — feedback section overrides in .feedback-illustration-col) */
.img-feedback {
  max-width: 100%;
}

/* Hero circle image */
.img-hero-circle {
  max-width: 320px;
}

/* Auth container small */
.auth-container-sm {
  max-width: 420px;
}


/* ============================================
   41b. Promo Banner mid-screen fix
   ============================================ */
@media (max-width: 1150px) {
  .promo-banner {
    padding: 6px 30px;
  }

  .promo-banner-inner {
    gap: 16px;
  }

  .promo-label,
  .promo-text,
  .promo-countdown {
    font-size: 14px;
  }
}

/* ============================================
   41b. Search bar hide (max-width: 1085px)
   ============================================ */
@media (max-width: 1085px) {
  .navbar-search {
    display: none !important;
  }
}

/* ============================================
   42. Tablet (max-width: 991px)
   ============================================ */
@media (max-width: 991px) {
  /* body.is-logged-in .navbar-toggle {
    display: flex;
  } */

  .navbar-container {
    padding: 8px 20px;
  }

  .navbar-inner {
    gap: 12px;
  }

  .switch-account-panel {
    left: 20px;
  }

  .navbar-left {
    flex: 1;
  }

  .navbar-nav {
    gap: 4px;
  }

  .navbar .navbar-nav .nav-link {
    padding: 6px 10px !important;
    font-size: 13px;
  }

  .navbar-actions {
    margin-left: 8px;
    gap: 8px;
  }

  /* Promo Banner */
  .promo-banner {
    padding: 6px 20px;
  }

  .promo-banner-inner {
    gap: 12px;
  }

  .promo-label,
  .promo-text,
  .promo-countdown {
    font-size: 13px;
  }

  .promo-cta-btn {
    width: auto;
    height: 36px;
    padding: 6px 20px;
    font-size: 0.75rem;
  }

  /* Hero */
  .hero {
    padding: 40px 20px;
  }

  .hero-slide .row {
    flex-direction: column-reverse;
  }

  .hero-visual {
    margin: 0 auto;
  }

  .hero-visual-img {
    max-width: 400px;
    margin: 0 auto;
  }

  .hero-slide .col-lg-7 {
    padding-right: 30px;
  }

  .hero-content h1 {
    font-size: 2rem;
    max-width: 100%;
  }

  .hero-content p {
    font-size: 14px;
    max-width: 100%;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-visual {
    max-width: 400px;
  }

  .hero-circle-outer {
    width: 380px;
    height: 380px;
  }

  .hero-circle-inner {
    width: 300px;
    height: 300px;
  }

  .hero-girl-img {
    width: 220px;
    height: 220px;
  }

  /* Partners */
  .partners {
    padding: 20px 12px;
  }

  .partners-logos img {
    height: 50px;
  }

  /* Programs - Tablet */
  .programs-section .section-heading h2 {
    font-size: 1.25rem;
  }

  .program-sidebar {
    margin-bottom: 24px;
  }

  .programs-section .course-card-price {
    display: none;
  }

  .programs-section .course-card-link {
    display: inline;
  }

  .programs-section .course-card-footer {
    padding-top: 8px;
    border-top: none;
  }

  .programs-section .course-card-hover {
    display: none !important;
  }

  .programs-section .course-card-wrapper:hover .course-card {
    transform: none;
  }

  /* Top Courses - Tablet */
  .heading-lg {
    display: none;
  }

  .heading-sm {
    display: inline;
  }


  .course-card-carousel {
    min-width: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
  }

  /* Testimonials */
  .testimonial-section {
    padding: 60px 20px;
  }

  .testimonial-carousel .testimonial-card {
    flex: 0 0 calc((100% - 40px) / 3);
  }

  /* CTA Teach - Tablet */
  .cta-teach-section {
    padding: 30px 20px;
  }

  .cta-teach-content {
    max-width: 100%;
  }

  .cta-visual {
    max-width: 320px;
    height: 300px;
    margin-left: auto;
  }

  .cta-circle-img {
    width: 220px;
    height: 220px;
  }

  /* Why Choose */
  .why-choose-item {
    gap: 28px;
    margin-bottom: 40px;
  }

  .why-choose-img {
    flex: 0 0 40%;
  }

  .why-choose-content h3 {
    font-size: 1.125rem;
  }

  .why-choose-content p {
    font-size: 0.875rem;
  }

  /* Course Player - Tablet */
  .course-player-bar-left .navbar-brand img {
    height: 30px;
  }

  .course-player-title {
    font-size: 0.8125rem;
  }

  .course-player-progress-label {
    font-size: 0.75rem;
  }

  .course-sidebar-panel {
    width: 220px;
  }

  .course-main-content {
    padding: 20px;
  }

  .module-header {
    padding: 10px 12px;
    font-size: 0.8125rem;
    margin: 6px 8px;
    width: calc(100% - 16px);
  }

  .lesson-item {
    padding: 8px 12px 8px 24px;
  }

  /* Assignment Overview - Tablet */
  .assignment-title {
    font-size: 1.125rem;
  }

  .assignment-banner img {
    max-width: 320px;
  }

  /* Quiz Page - Tablet */
  .quiz-header-inner {
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .quiz-header-left {
    flex-direction: column;
    gap: 4px;
  }

  .quiz-back-link {
    margin-top: 0;
  }

  .quiz-header-title {
    font-size: 0.875rem;
  }

  .quiz-header-right {
    gap: 16px;
  }

  .quiz-page {
    padding: 24px 20px 48px;
  }

  .about-hero-bg {
    padding: 70px 0;
  }

  .about-hero-desc {
    font-size: 1.25rem;
    max-width: 100%;
  }

  .about-stats {
    flex-wrap: wrap;
  }

  /* About Cert vs Career Path - Tablet */
  .about-cert-career {
    padding: 48px 0;
  }

  .about-cert-career-col {
    padding: 40px 28px;
  }

  .skill-rings-row {
    gap: 20px;
  }

  .certificate-icon {
    width: 100px;
    height: 76px;
  }


  .certificate-details h5 {
    font-size: 0.875rem;
  }
}

@media (max-width: 379px) {
  .course-player-progress {
    display: none;
  }
}

/* Utility classes for inline style replacement */
.info-item-action {
  padding: 4px 20px;
}

.file-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.module-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}


/* Course Catalogue — Tablet */
@media (max-width: 991px) {
  .catalogue-section .catalogue-heading h2 {
    font-size: 1.375rem;
  }

  .catalogue-sidebar .program-tab {
    font-size: 0.8125rem;
    padding: 12px 14px;
  }

  .catalogue-filter-pills {
    gap: 8px;
  }

  .catalogue-section .filter-btn {
    padding: 8px 16px;
    font-size: 0.8125rem;
  }

  .catalogue-section .course-card-h {
    gap: 16px;
    align-items: stretch;
  }

  .catalogue-section .course-card-h-img {
    width: 35%;
    min-width: 140px;
    height: auto;
    object-fit: cover;
  }

  .catalogue-section .course-card-h-body {
    padding-right: 0;
  }

  .catalogue-section .course-card-h-title {
    font-size: 0.9375rem;
  }

  .catalogue-section .course-card-h-desc {
    font-size: 0.75rem;
  }

  /* LP Hero - Tablet */
  .lp-hero {
    padding: 40px 0;
  }

  .lp-hero-content h1 {
    font-size: 1.75rem;
  }

  .lp-hero-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .lp-hero-btn {
    display: none;
  }

  .lp-hero-images {
    height: 360px;
  }

  .lp-hero-circle--top {
    width: 160px;
    height: 160px;
  }

  .lp-hero-circle--mid {
    width: 110px;
    height: 110px;
    top: 100px;
    right: 175px;
  }

  .lp-hero-circle--bottom {
    width: 180px;
    height: 180px;
    top: 180px;
    right: 15px;
  }

  /* LP Career Path - Tablet */
  .lp-career-path-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  /* CP Cards Carousel - Tablet */
  .cp-card-item {
    min-width: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
  }

  /* LP Current - Tablet */
  .lp-current-title-desktop {
    display: none;
  }

  .lp-current-title-mobile {
    display: inline;
  }

  .lp-current-card-image {
    width: 120px;
    height: 90px;
  }

  .lp-current-card-lesson {
    font-size: 0.875rem;
  }

  .lp-current-card-overall strong {
    display: none;
  }

  /* -- My Courses tablet -- */
  .mc-card-img {
    width: 120px;
    height: 85px;
  }

  .mc-card-watchlist .mc-card-img {
    width: 150px;
    height: 100px;
  }

  .mc-card-title {
    font-size: 0.875rem;
  }

  /* -- Recent Blog Posts tablet -- */
  .rbp-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* -- Newly Updated Courses tablet -- */
  .nuc-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* -- Purchases tablet -- */
  .purchases-col-amount,
  .purchases-col-date,
  .purchases-col-status {
    flex: 0 0 110px;
  }

  .purchase-card-amount,
  .purchase-card-date,
  .purchase-card-status {
    flex: 0 0 110px;
    font-size: 0.8125rem;
  }

  .purchase-card-title {
    font-size: 0.875rem;
  }

  .purchase-card-row {
    padding: 20px 16px;
  }

  .purchases-header {
    padding: 0 16px 12px;
  }

  /* Edit Profile - Tablet */
  .edit-profile-top-row {
    flex-direction: column;
  }

  .edit-profile-avatar-col {
    flex: none;
    width: 100%;
  }

  .edit-profile-info-col {
    width: 100%;
  }

  .profile-avatar-card {
    padding: 24px;
  }

  .profile-avatar-upload {
    width: 160px;
    height: 160px;
  }

  .profile-avatar-upload img {
    width: 160px;
    height: 160px;
  }
}

/* ============================================
   42. Mobile & Tablet (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --navbar-height: 60px;
  }

  .navbar-container {
    padding: 8px 16px;
  }

  /* Show hamburger for all states on mobile */
  .navbar-toggle {
    display: flex;
  }

  /* Hide nav links on mobile */
  .navbar-nav {
    display: none;
  }

  /* Hide avatar on mobile, keep cart + bell */
  .nav-avatar,
  .user-dropdown {
    display: none !important;
  }

  /* Hide login link on mobile, keep Enroll Now */
  .nav-login-link {
    display: none !important;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }

  .section {
    padding: 40px 0;
  }

  /* Hide hover tooltips on mobile (touch devices) */
  .course-card-hover {
    display: none !important;
  }

  /* Verification Banner - Mobile */
  .verification-banner {
    padding: 20px;
    margin: 12px 16px;
  }

  .verification-banner-inner {
    position: relative;
    flex-direction: column;
  }

  .verification-banner-icon {
    display: none;
  }

  .verification-banner-close {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Promo Banner - Mobile */
  .promo-banner {
    padding: 10px 16px;
  }

  .promo-banner-inner {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .promo-divider {
    display: none;
  }

  .promo-label {
    font-size: 12px;
  }

  .promo-text {
    font-size: 12px;
  }

  .promo-countdown {
    font-size: 12px;
  }

  .promo-cta-btn {
    width: auto;
    height: 34px;
    padding: 4px 24px;
    font-size: 0.75rem;
  }

  /* Hero - Mobile */
  .hero {
    padding: 30px 16px 20px;
    text-align: center;
  }

  .hero .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-slide .row {
    flex-direction: column-reverse;
  }

  .hero-content h1 {
    font-size: 1.5rem;
    line-height: 140%;
    max-width: 100%;
  }

  .hero-content p {
    max-width: 100%;
    font-size: 13px;
    line-height: 160%;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-buttons .btn {
    font-size: 0.875rem;
    padding: 10px 24px;
  }

  .hero-visual {
    max-width: 300px;
    margin: 0 auto 24px;
  }

  .hero-visual-img {
    max-width: 300px;
    margin: 0 auto 24px;
  }

  .hero-circle-outer {
    width: 280px;
    height: 280px;
  }

  .hero-circle-inner {
    width: 220px;
    height: 220px;
  }

  .hero-girl-img {
    width: 170px;
    height: 170px;
  }

  .hero-card {
    padding: 6px 10px;
    border-radius: 8px;
    gap: 6px;
    transform: scale(0.85);
    transform-origin: center;
    white-space: normal;
    max-width: 180px;
  }

  .hero-card strong {
    font-size: 10px;
  }

  .hero-card p {
    font-size: 8px;
  }

  .hero-card-icon-img {
    width: 24px;
    height: 24px;
  }

  .hero-card-develop {
    top: 8%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
  }

  .hero-card-practice {
    top: 35%;
    left: -8%;
  }

  .hero-card-advance {
    bottom: 14%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
  }

  .hero-visual--slide2 .hero-card-develop {
    top: 8%;
    left: auto;
    right: 10%;
  }

  .hero-visual--slide2 .hero-card-practice {
    top: 36%;
    left: -11%;
  }

  .hero-visual--slide2 .hero-card-advance {
    bottom: 22%;
    left: auto;
    right: 10%;
  }

  /* Partners - Mobile */
  .partners {
    padding: 20px 12px;
  }

  .partners-text {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .partners-logos {
    gap: 30px;
  }

  .partners-logos img {
    height: 40px;
  }

  /* Programs Section - Mobile */
  .programs-section .col-md-4 {
    margin-bottom: 0 !important;
  }

  .programs-section .section-heading {
    display: none;
  }

  .programs-section .programs-header {
    display: none !important;
  }

  /* Tab UI (sidebar + grid) is desktop-only; mobile uses the accordion instead */
  .programs-section .program-sidebar {
    display: none;
  }

  .programs-section .program-grid-container {
    display: none;
  }

  /* Sidebar: show only the active tab as a prominent pill */
  .program-sidebar {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .program-sidebar .program-tab:not([data-category="popular"]) {
    display: none;
  }

  .program-sidebar .program-show-more {
    display: none;
  }

  .program-sidebar .program-tab[data-category="popular"] {
    width: 100%;
    padding: 12px 20px;
    border-radius: 0;
    border-left: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    justify-content: center;
    font-size: 0.875rem;
    background-color: #EAF2F8;
    color: var(--color-text);
  }

  .program-sidebar .program-tab[data-category="popular"].active {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  .program-sidebar .program-tab[data-category="popular"] .program-tab-arrow {
    display: inline;
    margin-left: 8px;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
  }

  .program-sidebar .program-tab[data-category="popular"].active .program-tab-arrow {
    transform: rotate(-90deg);
  }

  /* When no grid is active (all collapsed), reduce spacing */
  .program-grid-container:not(:has(.program-grid.active)) + .program-categories-mobile {
    margin-top: 0;
  }

  /* Course cards: horizontal layout (image left, text right) */
  .programs-section .course-card {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px;
  }

  .programs-section .course-card-img {
    width: 120px;
    min-width: 120px;
    height: auto;
    min-height: 100px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .programs-section .course-card-body {
    padding: 4px 0 4px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .programs-section .course-card-meta {
    display: none;
  }

  .programs-section .course-card-provider {
    font-size: 0.625rem;
  }

  .programs-section .course-card-title {
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .programs-section .course-card-instructor {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .programs-section .course-card-rating {
    font-size: 0.6875rem;
    margin-bottom: 4px;
  }

  .programs-section .course-card-rating .rating-score {
    font-size: 0.6875rem;
  }

  .programs-section .course-card-rating .stars i {
    font-size: 0.625rem;
  }

  .programs-section .course-card-rating .rating-count {
    font-size: 0.625rem;
  }

  .programs-section .course-card-price {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .programs-section .course-card-link {
    display: none;
  }

  .programs-section .course-card-footer {
    padding: 4px 0 0;
    border-top: none;
  }

  .programs-section .course-card-wrapper {
    margin-bottom: 0;
    padding-bottom: 12px;
  }

  .programs-section .course-card-wrapper:hover .course-card {
    transform: none;
    box-shadow: none;
  }

  .programs-section .program-grid {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }

  /* Mobile categories accordion (below cards) */
  .program-categories-mobile {
    display: block;
    margin-top: 24px;
  }

  .program-accordion-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
  
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    margin-bottom: 12px;
    background-color: #EAF2F8;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
  }

  .program-accordion-toggle:hover {
    background-color: #D6E8F5;
  }

  .program-accordion-toggle.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 0;
    border-bottom: none;
  }

  .program-accordion-toggle .program-tab-arrow-mobile {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
  }

  .program-accordion-toggle.active .program-tab-arrow-mobile {
    transform: rotate(180deg);
  }

  .program-accordion-content {
    display: none;
    padding: 12px 0;
  }

  .program-accordion-content.open {
    display: block;
  }

  .program-accordion-content .course-card-wrapper {
    margin-bottom: 0;
    padding-bottom: 12px;
  }

  .program-accordion-content .course-card {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px;
  }

  .program-accordion-content .course-card-img {
    width: 120px;
    min-width: 120px;
    height: auto;
    min-height: 100px;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .program-accordion-content .course-card-body {
    padding: 4px 0 4px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .program-accordion-content .course-card-provider {
    font-size: 0.625rem;
  }

  .program-accordion-content .course-card-title {
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .program-accordion-content .course-card-instructor {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .program-accordion-content .course-card-rating {
    font-size: 0.6875rem;
    margin-bottom: 4px;
  }

  .program-accordion-content .course-card-rating .rating-score {
    font-size: 0.6875rem;
  }

  .program-accordion-content .course-card-rating .stars i {
    font-size: 0.625rem;
  }

  .program-accordion-content .course-card-rating .rating-count {
    font-size: 0.625rem;
  }

  .program-accordion-content .course-card-price {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .program-accordion-content .course-card-footer {
    padding: 4px 0 0;
    border-top: none;
  }

  .program-categories-mobile .program-show-more {
    display: flex;
    padding: 14px 16px;
    border-bottom: none;
  }

  /* Course Catalogue — Mobile */
  .catalogue-section .catalogue-sidebar-col {
    display: none;
  }

  .catalogue-section .catalogue-divider-label {
    display: none;
  }

  .catalogue-heading-mobile {
    display: block;
    margin-bottom: 16px;
  }

  .catalogue-heading-mobile .section-heading {
    margin-bottom: 0;
  }

  .catalogue-course-list {
    display: none;
  }

  .catalogue-pagination-desktop {
    display: none;
  }

  .catalogue-active-accordion {
    display: block;
    margin-bottom: 16px;
  }

  .catalogue-remaining-accordions {
    display: block;
    margin-top: 24px;
  }

  .catalogue-filter-bar {
    margin-bottom: 20px;
  }

  .catalogue-filter-label {
    width: 100%;
    margin-bottom: 4px;
  }

  .catalogue-filter-pills {
    flex: unset;
    justify-content: flex-start;
    gap: 8px;
  }

  .catalogue-section .filter-btn {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  /* Mobile: compact side-by-side card layout */
  .catalogue-section .course-card-h {
    flex-direction: row;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .catalogue-section .course-card-h-img {
    width: 120px;
    min-width: 120px;
    height: auto;
    min-height: 100px;
  }

  .catalogue-section .course-card-provider {
    display: block;
    font-size: 0.625rem;
  }

  .catalogue-section .course-card-h-title {
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .catalogue-section .course-card-h-desc {
    display: none;
  }

  .catalogue-section .course-card-meta {
    display: none;
  }

  .catalogue-section .course-card-instructor {
    font-size: 0.75rem;
    margin-bottom: 4px;
  }

  .catalogue-section .course-card-rating {
    margin-bottom: 4px;
  }

  .catalogue-section .course-card-rating .rating-score {
    font-size: 0.6875rem;
  }

  .catalogue-section .course-card-rating .stars i {
    font-size: 0.625rem;
  }

  .catalogue-section .course-card-rating .rating-count {
    font-size: 0.625rem;
  }

  .catalogue-section .course-card-h-level {
    display: none;
  }

  .catalogue-section .course-card-h-price {
    position: static;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-top: 4px;
  }

  .catalogue-section .course-card-h-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .catalogue-section .course-card-h:first-child .course-card-h-pricing {
    top: auto;
  }

  /* General course card mobile adjustments (non-programs sections) */
  .course-card-img {
    height: 120px;
  }

  .course-card-body {
    padding: 10px;
  }

  .course-card-provider {
    font-size: 0.625rem;
  }

  .course-card-title {
    font-size: 0.8125rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .course-card-meta {
    font-size: 0.6875rem;
    gap: 4px;
    flex-wrap: wrap;
  }

  .course-card-meta span {
    font-size: 0.625rem;
  }

  .course-card-meta i {
    font-size: 0.5625rem;
  }

  .course-card-instructor {
    font-size: 0.6875rem;
  }

  .course-card-rating {
    font-size: 0.6875rem;
  }

  .course-card-rating .rating-score {
    font-size: 0.6875rem;
  }

  .course-card-rating .stars i {
    font-size: 0.625rem;
  }

  .course-card-rating .rating-count {
    font-size: 0.625rem;
  }

  .course-card-price {
    font-size: 0.8125rem;
  }

  .course-card-footer {
    padding: 8px 10px;
  }

  /* Section heading row */
  .section-heading-row {
    gap: 12px;
    align-items: center;
  }

  .section-heading-row h2 {
    font-size: 1.125rem;
    flex: 1;
  }

  /* Testimonials - Mobile */
  .testimonial-section {
    padding: 40px 16px;
  }

  .testimonial-heading-row {
    justify-content: center;
    margin-bottom: 20px;
  }

  .testimonial-heading-row .carousel-nav-btns {
    display: none;
  }

  .testimonial-heading-row .section-heading {
    text-align: center;
    width: 100%;
  }

  .testimonial-heading-row .section-heading h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .testimonial-carousel .testimonial-card {
    flex: 0 0 85%;
  }

  .testimonial-carousel .testimonial-card:nth-child(n+4) {
    display: none;
  }

  .testimonial-card {
    padding: 20px;
  }

  .testimonial-avatar {
    width: 56px;
    height: 56px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-name {
    font-size: 14px;
  }

  .testimonial-card p {
    font-size: 12px;
    line-height: 1.6;
  }

  .testimonial-link {
    font-size: 11px !important;
  }

  /* Top Courses - Mobile */
  .top-courses-section .carousel-nav-btns {
    display: none;
  }

  .course-card-carousel {
    min-width: 200px;
    max-width: 220px;
  }

  /* CTA Teach - Mobile */
  .cta-teach-section {
    padding: 40px 16px;
  }

  .cta-teach-section .row {
    flex-direction: column-reverse;
  }

  .cta-teach-content {
    text-align: center;
    max-width: 100%;
  }

  .cta-teach-content h2 {
    font-size: 1.375rem;
  }

  .cta-teach-content p {
    font-size: 13px;
  }

  .cta-teach-content .btn {
    display: block;
    width: 100%;
  }

  .cta-visual {
    max-width: 280px;
    height: 280px;
    margin: 0 auto 24px;
  }

  .cta-circle-img {
    width: 200px;
    height: 200px;
  }

  .cta-visual .hero-card {
    padding: 6px 8px;
  }

  .cta-visual .hero-card strong {
    font-size: 10px;
  }

  .cta-visual .hero-card p {
    font-size: 8px;
  }

  .cta-visual .hero-card-icon-img {
    width: 22px;
    height: 22px;
  }


  /* Why Choose - Mobile */
  .why-choose-item {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  .why-choose-img {
    flex: 0 0 38%;
  }

  .why-choose-label {
    font-size: 0.6rem;
  }

  .why-choose-content h3 {
    font-size: 0.9375rem;
  }

  .why-choose-content p {
    font-size: 0.8125rem;
  }

  /* Footer - Mobile */
  .footer {
    padding-top: 40px;
  }

  .footer h5 {
    font-size: 0.875rem;
    margin-bottom: 12px;
  }

  .footer-links a {
    font-size: 0.8125rem;
  }

  .footer-brand {
    text-align: left;
    padding-left: 0;
  }

  .footer-brand img {
    height: 70px;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-apps {
    align-items: center;
  }

  .footer-certified {
    justify-content: center;
  }

  .footer-bottom {
    padding: 20px 0;
  }

  .footer-bottom .row {
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .footer-newsletter input {
    font-size: 0.8125rem;
    padding: 8px 12px;
    min-width: 0;
  }

  .footer-newsletter button {
    font-size: 0.8125rem;
    padding: 8px 16px;
    white-space: nowrap;
  }

  .footer-app-btn {
    min-width: 180px;
    font-size: 0.75rem;
    padding: 6px 16px;
  }

  .footer-copyright {
    font-size: 0.75rem;
    padding: 16px 0;
  }

  /* Other pages */
  .course-card-h {
    flex-direction: column;
  }

  .catalogue-section .course-card-h {
    flex-direction: row;
  }

  .course-card-h-img {
    width: 100%;
    height: 180px;
  }

  .catalogue-section .course-card-h-img {
    width: 110px;
    min-width: 110px;
    height: auto;
    min-height: 90px;
  }

  /* Cart mobile layout */
  .cart-breadcrumb-wrap {
    display: none;
  }

  /* .cart-mobile-summary {
    display: block;
    margin-bottom: 16px;
  }

  .cart-mobile-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .cart-mobile-total > span:first-child {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }

  .cart-mobile-total-current {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .cart-mobile-total-original {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-decoration: line-through;
  }

  .cart-mobile-total-discount {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }

  .cart-toggle-codes {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: underline;
  }

  .cart-mobile-divider {
    border: none;
    border-top: 2px solid #bbb;
    margin: 12px 0 20px;
  }

  .cart-mobile-promo-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .cart-mobile-promo .promo-input-group {
    display: flex;
    gap: 12px;
  }

  .cart-mobile-promo .promo-input-group input {
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
  }

  .cart-mobile-promo .promo-input-group button {
    border-radius: 10px !important;
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
  } */

  .cart-items-heading {
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #bbb;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }

  .cart-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    flex-wrap: wrap;
    border-bottom: none;
    border-radius: var(--radius-md);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    margin-bottom: 16px;
  }

  .cart-item-img {
    width: 110px;
    height: 140px;
    border-radius: var(--radius-md);
  }

  .cart-item-body {
    flex: 1;
    min-width: 0;
  }

  .cart-item-university {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  .cart-item-title {
    font-size: 0.9375rem;
  }

  .cart-item-desc,
  .cart-item-meta,
  .cart-item .tag,
  .cart-item-bottom-row {
    display: none;
  }

  .cart-item-price {
    display: none;
  }

  .cart-item .remove-btn-desktop {
    display: none;
  }

  .cart-item-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
  }

  .cart-item-price-inline {
    font-size: 1rem;
    font-weight: 700;
  }

  .cart-item-strike-price-inline {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-decoration: line-through;
    font-weight: 400;
  }

  .cart-item-price-row .btn-remove-cart {
    font-size: 0.9375rem;
    color: #f5365c;
    font-weight: 600;
  }

  .cart-mobile-checkout {
    display: block;
    margin-top: 40px;
    padding-bottom: 20px;
  }

  .about-hero-bg {
    padding: 50px 0;
  }

  .about-hero-desc {
    font-size: 1.125rem;
  }

  .about-stats {
    flex-direction: column;
    gap: 20px;
  }

  /* -- My Courses mobile -- */
  .mc-list {
    display: none;
  }

  .mc-carousel {
    display: block;
  }

  /* -- Recent Blog Posts mobile -- */
  .rbp-grid {
    display: none;
  }

  .rbp-carousel {
    display: block;
  }

  /* -- Newly Updated Courses mobile -- */
  .nuc-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .nuc-grid::-webkit-scrollbar {
    display: none;
  }

  .nuc-card {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }

  .nuc-card-extra {
    display: block;
  }

  .nuc-card-link {
    display: none;
  }

  .certificate-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .certificate-item-info {
    width: 100%;
    gap: 16px;
  }

  .certificate-icon {
    width: 64px;
    height: 52px;
  }

  .certificate-details h5 {
    font-size: 0.875rem;
  }

  .certificate-actions {
    margin-left: 0;
    gap: 16px;
  }

  .certificate-actions .btn {
    border: none !important;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    background: none !important;
    text-decoration: none !important;
    box-shadow: none;
  }

  .certificate-actions .cert-download-btn {
    color: var(--color-primary) !important;
  }

  .certificate-actions .cert-share-btn {
    color: #555555 !important;
  }

  .export-all-btn {
    border: none !important;
  }

  .export-all-btn i {
    font-size: 1.1em;
    -webkit-text-stroke: 1px;
  }

  /* Hide desktop tabs, show mobile tabs */
  /* .course-player-tabs {
    display: none;
  } */

  .course-player-tabs-mobile {
    display: flex;
    gap: 16px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .course-player-tabs-mobile .tab-btn {
    padding: 10px 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
  }

  .course-player-tabs-mobile .tab-btn.active {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text);
  }

  /* Show mobile tab content, hide desktop tab content */
  /* [data-tab-content="course-player"] {
    display: none;
  } */

  [data-tab-content="course-player-mobile"] {
    display: block;
  }

  /* Module items inside mobile Course Content tab */
  .mobile-modules-wrap .module-header {
    margin: 6px 0;
    width: 100%;
    padding: 10px 14px;
  }

  .mobile-modules-wrap .lesson-item {
    padding: 8px 14px 8px 20px;
  }

  .data-table {
    display: block;
    overflow-x: auto;
  }

  .achievements-overview {
    gap: 28px 24px;
  }

  .achievement-stat {
    flex: 0 0 calc(25% - 18px);
    min-width: unset;
  }

  .skill-rings-row {
    gap: 16px;
  }

  .progress-ring-wrapper svg {
    width: 80px;
    height: 80px;
  }

  .progress-ring-text {
    font-size: 0.875rem;
  }

  .help-cta {
    flex-direction: column;
    text-align: center;
  }

  /* LP Hero - Mobile */
  .lp-hero .row {
    flex-direction: column-reverse;
  }

  .lp-hero {
    padding: 30px 0 40px;
  }

  .lp-hero-content h1 {
    font-size: 1.5rem;
    margin-top: 24px;
  }

  .lp-hero-content > p {
    font-size: 0.875rem;
    margin-bottom: 24px;
  }

  .lp-hero-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lp-hero-feature {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 12px;
    text-align: left;
  }

  .lp-hero-feature-icon {
    grid-row: 1 / 3;
    margin: 0;
    width: 32px;
    height: 32px;
  }

  .lp-hero-feature-icon-wrap {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    margin: 0;
  }

  .lp-hero-feature-icon--svg {
    width: 18px;
    height: 18px;
  }

  .lp-hero-feature h3 {
    margin-bottom: 2px;
  }

  .lp-hero-btn {
    display: none;
  }

  .lp-hero-images {
    height: 290px;
    margin: 0 auto 10px;
    max-width: 300px;
  }

  .lp-hero-circle--top {
    width: 130px;
    height: 130px;
    top: 0;
    left: 42%;
    right: auto;
  }

  .lp-hero-circle--mid {
    width: 95px;
    height: 95px;
    top: 80px;
    left: 10px;
    right: auto;
  }

  .lp-hero-circle--bottom {
    width: 140px;
    height: 140px;
    top: 145px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* LP Career Path - Mobile */
  .lp-career-path {
    padding: 40px 0;
  }

  .lp-career-path-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .lp-career-path-item .progress-ring-wrapper svg {
    width: 100px;
    height: 100px;
  }

  /* CP Cards Carousel - Mobile */
  .cp-card-item {
    min-width: 75%;
    max-width: 75%;
  }

  .cp-cards-carousel .carousel-btn {
    display: none;
  }

  .cp-cards-subtitle {
    display: none;
  }

  /* LP Current - Mobile */
  .lp-current-title-desktop {
    display: none;
  }

  .lp-current-title-mobile {
    display: inline;
  }

  .lp-current-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .lp-current-list::-webkit-scrollbar {
    display: none;
  }

  .lp-current-card {
    flex-direction: column;
    align-items: stretch;
    min-width: 260px;
    max-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
  }

  .lp-current-card-image {
    width: 100%;
    height: 160px;
    border-radius: 0;
  }

  .lp-current-card-body {
    padding: 16px;
  }

  .lp-current-card-title {
    font-size: 0.9375rem;
  }

  .lp-current-card-lesson {
    font-size: 0.875rem;
  }

  .lp-current-card-actions {
    display: none;
  }

  .lp-current-card-overall strong {
    display: none;
  }

  .lp-current-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }

  .lp-current-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
    transition: var(--transition);
  }

  .lp-current-dot.active {
    background-color: var(--color-primary);
  }

  /* LP Discover - Mobile */
  .lp-discover-section .section-heading h2 {
    font-size: 1.375rem;
  }

  .lp-discover-section .col-md-4 {
    margin-bottom: 0 !important;
  }

  .lp-discover-section .program-sidebar .program-tab[data-category="popular"] {
    margin-bottom: 0;
  }

  .lp-discover-header {
    display: none;
  }

  .lp-job-card-footer {
    display: none;
  }

  .lp-job-card-img {
    height: 200px;
  }

  .lp-grid-pagination {
    display: block;
  }

  /* Purchases - Mobile */
  .purchases-header {
    display: none;
  }

  .purchase-card-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .purchase-card-amount,
  .purchase-card-date,
  .purchase-card-status {
    display: none;
  }

  .purchase-card-mobile {
    display: block;
    border-top: 1px solid var(--color-border);
  }

  .purchase-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B5D92;
  }

  .purchase-summary-toggle i {
    color: #0B5D92;
    font-size: 0.875rem;
    transition: transform 0.25s ease;
  }

  .purchase-summary-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  .purchase-summary-content {
    display: none;
    padding: 0 20px 20px;
  }

  .purchase-summary-content.open {
    display: block;
  }

  .purchase-summary-item {
    margin-bottom: 16px;
  }

  .purchase-summary-item:last-child {
    margin-bottom: 0;
  }

  .purchase-summary-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
  }

  .purchase-summary-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .purchase-status-paid {
    color: #0B5D92;
  }

  /* -- Terms & Conditions mobile -- */
  .terms-conditions-section {
    padding: 80px 0 40px;
  }

  .terms-sidebar-border {
    border: none;
    height: auto;
  }

  .terms-sidebar-nav {
    position: fixed;
    top: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: var(--color-white);
    flex-direction: row;
    overflow-x: auto;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .terms-sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .terms-sidebar-nav a {
    white-space: nowrap;
    border-left: none;
    border-radius: 0;
    padding: 10px 16px;
    font-size: 0.875rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
  }

  .terms-sidebar-nav a.active {
    background-color: transparent;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
  }

  .terms-sidebar-nav a:hover {
    background-color: transparent;
  }

  .terms-conditions-section .legal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
  }

  .legal-content h2 {
    font-size: 1.375rem;
  }

  .legal-content h3 {
    font-size: 1rem;
  }
}

/* ============================================
   Edit Profile - Mobile (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
  .edit-profile-section {
    padding: 24px 0 40px;
  }

  .edit-profile-heading {
    font-size: 1.375rem;
  }
}

/* ============================================
   43. Small Mobile (max-width: 575px)
   ============================================ */
@media (max-width: 575px) {
  .hero {
    padding: 20px 12px 16px;
  }

  .hero-content h1 {
    font-size: 1.25rem;
    line-height: 140%;
  }

  .hero-content p {
    font-size: 12px;
  }

  .hero-buttons .btn {
    font-size: 0.8125rem;
    padding: 8px 20px;
  }

  .hero-visual {
    max-width: 240px;
  }

  .hero-visual-img {
    max-width: 240px;
  }

  .hero-circle-outer {
    width: 220px;
    height: 220px;
  }

  .hero-circle-inner {
    width: 170px;
    height: 170px;
  }

  .hero-girl-img {
    width: 130px;
    height: 130px;
  }

  .hero-card {
    padding: 4px 8px;
    border-radius: 6px;
    gap: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: scale(0.75);
    transform-origin: center;
    white-space: normal;
    max-width: 160px;
  }

  .hero-card strong {
    font-size: 9px;
  }

  .hero-card p {
    font-size: 7px;
  }

  .hero-card-icon-img {
    width: 20px;
    height: 20px;
  }

  .hero-card-develop {
    top: 10%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) scale(0.75);
  }

  .hero-card-practice {
    top: 33%;
    left: -5%;
  }

  .hero-card-advance {
    bottom: 11%;
    right: auto;
    left: 50%;
    transform: translateX(-50%) scale(0.75);
  }

  .hero-visual--slide2 .hero-card-develop {
    top: 10%;
    left: auto;
    right: 10%;
  }

  .hero-visual--slide2 .hero-card-practice {
    top: 36%;
    left: -8%;
  }

  .hero-visual--slide2 .hero-card-advance {
    bottom: 20%;
    left: auto;
    right: 10%;
  }

  .carousel-track {
    gap: 12px;
  }

  .testimonial-carousel .testimonial-card {
    flex: 0 0 95%;
  }

  .course-card-carousel {
    min-width: 180px;
    max-width: 200px;
  }

  /* Partners logos smaller on very small screens */
  .partners-logos img {
    height: 35px;
  }

  .partners-logos {
    gap: 24px;
  }

  /* Promo banner compact */
  .promo-banner {
    padding: 8px 12px;
  }

  .promo-banner-inner {
    gap: 3px 6px;
  }

  .promo-label {
    font-size: 11px;
  }

  .promo-text {
    font-size: 11px;
  }

  .promo-countdown {
    font-size: 11px;
  }

  .promo-cta-btn {
    height: 30px;
    padding: 3px 16px;
    font-size: 0.6875rem;
  }

  /* CTA teach */
  .cta-teach-content h2 {
    font-size: 1.125rem;
  }

  .cta-visual {
    max-width: 240px;
    height: 220px;
  }

  .cta-circle-img {
    width: 170px;
    height: 170px;
  }

  /* Footer */
  .footer-app-btn {
    min-width: 160px;
    font-size: 0.6875rem;
  }

  .lp-course-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .lp-course-item img {
    width: 100%;
    height: 160px;
  }

  .grade-row {
    flex-wrap: wrap;
  }

  .payment-option {
    padding: 12px;
  }

  .billing-form .checkout-terms {
    text-align: center;
    padding-top: 20px;
    margin-top: 24px;
    box-shadow: 0 -6px 12px -4px rgba(13, 110, 188, 0.18);
  }

  /* What We Offer - Mobile */
  .about-offer-section {
    padding: 40px 0;
  }

  .about-offer-card {
    padding: 28px 20px;
  }

  .about-offer-intro {
    text-align: center;
    margin-bottom: 8px;
  }

  .about-offer-heading {
    text-align: center;
    font-size: 1.375rem;
  }

  .about-offer-list {
    text-align: left;
    padding-left: 20px;
  }

  .about-offer-list li {
    margin-bottom: 16px;
  }

  .about-offer-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .achievements-overview {
    gap: 20px 16px;
  }

  .achievement-stat {
    flex: 0 0 calc(33.333% - 11px);
    min-width: unset;
  }

  .achievement-stat-value i,
  .achievement-stat-value span {
    font-size: 1.5rem;
  }

  .achievement-stat-label {
    font-size: 0.8125rem;
    margin-bottom: 8px;
  }

  .certificate-icon {
    width: 56px;
    height: 44px;
  }

  .certificate-item-info {
    gap: 10px;
  }

  .certificate-actions {
    margin-left: 0;
  }

  .certificate-details h5 {
    font-size: 0.8125rem;
  }

  .certificate-details .cert-id,
  .certificate-details .cert-date {
    font-size: 0.75rem;
  }

}

/* About Cert vs Career Path - Mobile */
@media (max-width: 770px) {
  .about-cert-career {
    padding: 40px 0;
  }

  .about-cert-career-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-cert-career-body {
    text-align: center;
  }

  .about-cert-career-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   VALIDATION STYLES
   ============================================ */

/* Error state */
.input-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
  box-shadow: none !important;
}

.input-error:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* Success state */
.input-success {
  border-color: #28a745 !important;
}

.input-success:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15) !important;
}

/* Error message text */
.error-message {
  display: block;
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
}

/* Shake animation on invalid submit */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.form-shake {
  animation: shake 0.5s ease-in-out;
}

/* Ensure error styles layer on top of Bootstrap selects */
select.input-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
}

select.input-success {
  border-color: #28a745 !important;
}

/* Star rating error state */
.star-rating-error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

/* File upload error state */
.file-upload-area.input-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
}

/* Payment method error */
.payment-methods.input-error {
  border: 1px solid #dc3545;
  border-radius: var(--radius-md);
  background-color: #fff5f5;
}

/* Newsletter input error */
.footer-newsletter input.input-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
}

/* Promo input error */
.promo-input-group input.input-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
}

/* ========== HELP & SUPPORT HERO ========== */
.hs-hero {
  background: #F5F9FB;
  padding: 50px 0 60px;
}

.hs-hero-title {

  font-size: 30px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 50px;
}

.hs-hero-search {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #999;
  border-radius: 50px;
  padding: 12px 20px;
  gap: 12px;
  max-width: 680px;
}

.hs-hero-search i {
  font-size: 18px;
  color: #555;
  flex-shrink: 0;
}

.hs-hero-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #333;
  background: transparent;
}

.hs-hero-search input::placeholder {
  color: #999;
}

.hs-hero-img-col {
  text-align: right;
}

.hs-hero-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  transform: translate(100px, 80px);
  mix-blend-mode: multiply;
}

/* Tablet */
@media (max-width: 991px) {
  .hs-hero {
    padding: 40px 0 50px;
  }

  .hs-hero-title {
    font-size: 26px;
  }

  .hs-hero-search {
    max-width: 100%;
  }

  .hs-hero-img {
    max-width: 180px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hs-hero {
    padding: 30px 0 40px;
  }

  .hs-hero-title {
    text-align: center;
    font-size: 22px;
  }

  .hs-hero-search {
    max-width: 100%;
  }

  .hs-hero-img-col {
    display: none;
  }
}

/* ========== HELP & SUPPORT — FAQ + CTA ========== */
.hs-faq {
  background: #fff;
  padding: 0 0 70px;
}

.hs-faq-top {
  background: #F5F9FB;
  padding: 0;
}

.hs-faq-title {

  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 0;
  margin-bottom: 24px;
}

/* Tabs */
.hs-faq-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border: none;
}

.hs-faq-tab {
  background: #d9d9d9;
  color: #333;

  font-weight: 600;
  font-size: 14px;
  padding: 10px 28px;
  border: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}

.hs-faq-tab.active {
  background: #fff;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* White content container */
.hs-faq-card {
  position: relative;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 26px 0 26px 28px;
}

/* Sidebar */
.hs-faq-sidebar-col {
  padding-right: 20px;
  margin-left: -28px;
}

.hs-faq-sidebar-toggle {
  display: none;
}

.hs-faq-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hs-faq-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: #F5F9FB;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.hs-faq-sidebar-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #333;
}

.hs-faq-sidebar-item.active i {
  color: #fff;
}

.hs-faq-sidebar-item:hover {
  background: #f4f6f8;
  color: var(--color-primary);
}

.hs-faq-sidebar-item.active {
  background: var(--color-primary);
  color: #fff;
  border-radius: 0;
  position: relative;
  padding-left: 18px;
}

.hs-faq-sidebar-item.active::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
  width: 3px;
  background: #fff;
  border-radius: 2px;
}

.hs-faq-sidebar-item.active:hover {
  color: #fff;
  background: var(--color-primary);
}

/* Accordion column */
.hs-faq-content-col {
  position: relative;
  padding-left: 20px;
  flex: 1;
  max-width: none;
}

/* CTA row — CTA card + chat button side-by-side */
.hs-cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

/* Mobile FAQ wrap — hidden on desktop, built by JS */
.hs-faq-mobile-wrap {
  display: none;
}

/* Nested box — single border around accordion + CTA row */
.hs-faq-content-box {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 32px 32px;
}

/* Tab panel visibility — toggled by the top Learners/Course Creator tabs */
.hs-faq-panel-nav {
  display: none;
}

.hs-faq-panel-nav.active {
  display: flex;
}

.hs-faq-panel-content {
  display: none;
}

.hs-faq-panel-content.active {
  display: block;
}

/* Accordion group visibility toggled by sidebar clicks */
.hs-faq-accordion-group {
  display: none;
}

.hs-faq-accordion-group.active {
  display: block;
}

.hs-faq-content-col .accordion,
.hs-faq-content-col .accordion-item {
  border: none;
  border-radius: 0;
  background: transparent;
}

.hs-faq-content-col .accordion-item {
  border-bottom: 1px solid #e5e7eb;
}

.hs-faq-content-col .accordion-item:last-child {
  border-bottom: none;
}

.hs-faq-content-col .accordion-header {
  padding: 14px 0;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.hs-faq-content-col .accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: none;
}

.hs-faq-content-col .accordion-body p {
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

.hs-faq-content-col .accordion-item.active .accordion-body {
  max-height: 600px;
  padding-bottom: 14px;
}

/* Chat with us button — matches contact page style */
.hs-chat-btn {
  flex-shrink: 0;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 30px 5px 30px 5px;

  font-weight: 600;
  font-size: 0.8125rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: var(--transition);
}

.hs-chat-btn:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

/* Nested CTA card */
.hs-cta-card {
  flex: 0 1 65%;
  background: #F5F9FB;
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hs-cta-text {
  flex: 1;
}

.hs-cta-text h4 {

  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
}

.hs-cta-text p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 16px;
}

.hs-cta-btn {
  display: inline-block;
  padding: 10px 28px;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  color: var(--color-primary);
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.hs-cta-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.hs-cta-img {
  flex-shrink: 0;
  width: 100px;
  align-self: center;
}

.hs-cta-img img {
  width: 100%;
  height: auto;
}

/* Tablet */
@media (max-width: 991px) {
  .hs-faq {
    padding: 0 0 50px;
  }

  .hs-faq-title {
    font-size: 19px;
  }

  .hs-faq-tab {
    padding: 10px 22px;
    font-size: 13px;
  }

  .hs-faq-card {
    padding: 22px 10px 22px 22px;
  }

  .hs-faq-sidebar-col {
    padding-right: 12px;
    margin-left: -22px;
  }

  .hs-faq-content-col {
    padding-left: 12px;
  }

  .hs-faq-sidebar-item {
    padding: 9px 12px;
    font-size: 12px;
  }

  .hs-cta-row {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
  }

  .hs-cta-card {
    max-width: 100%;
    flex: none;
    width: 100%;
  }

  .hs-chat-btn {
    margin-bottom: 0;
  }

  .hs-cta-img {
    width: 100px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hs-faq {
    padding: 0 0 40px;
  }

  .hs-faq-top {
    padding: 0;
  }

  .hs-faq-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 16px;
  }

  .hs-faq-tabs {
    justify-content: center;
    width: 100%;
  }

  .hs-faq-tab {
    flex: 1;
    padding: 12px 10px;
    font-size: 13px;
    text-align: center;
  }

  /* Hide desktop FAQ layout on mobile */
  .hs-faq-card .row {
    display: none;
  }

  .hs-faq-card {
    padding: 0;
  }

  /* Mobile FAQ accordion */
  .hs-faq-mobile-wrap {
    display: block;
  }

  .hs-faq-mobile-panel {
    display: none;
  }

  .hs-faq-mobile-panel.active {
    display: block;
    padding-top: 16px;
  }

  .hs-faq-mobile-section {
    margin-bottom: 10px;
  }

  .hs-faq-mobile-section:last-child {
    margin-bottom: 0;
  }

  .hs-faq-mobile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
  
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    background: #F5F9FB;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
  }

  .hs-faq-mobile-section-header i {
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.3s;
    color: #555;
  }

  .hs-faq-mobile-section.active .hs-faq-mobile-section-header {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
  }

  .hs-faq-mobile-section.active .hs-faq-mobile-section-header i {
    transform: rotate(180deg);
    color: #fff;
  }

  .hs-faq-mobile-section-body {
    max-height: 0;
    overflow: hidden;
  }

  .hs-faq-mobile-section.active .hs-faq-mobile-section-body {
    max-height: none;
    overflow: visible;
    padding: 0 4px 12px;
  }

  /* Sub-accordion questions inside mobile sections */
  .hs-faq-mobile-section-body .accordion-item {
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    background: transparent;
  }

  .hs-faq-mobile-section-body .accordion-item:last-child {
    border-bottom: none;
  }

  .hs-faq-mobile-section-body .accordion-header {
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
  }

  .hs-faq-mobile-section-body .accordion-header i {
    font-size: 0.7rem;
    margin-left: 8px;
  }

  .hs-faq-mobile-section-body .accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: none;
  }

  .hs-faq-mobile-section-body .accordion-item.active .accordion-body {
    max-height: 600px;
    padding-bottom: 12px;
  }

  .hs-faq-mobile-section-body .accordion-body p {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

  /* Mobile CTA */
  .hs-faq-mobile-cta {
    position: relative;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
    align-items: stretch;
  }

  .hs-faq-mobile-cta .hs-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px 20px;
    flex: none;
    max-width: 100%;
    border-radius: 10px;
  }

  .hs-faq-mobile-cta .hs-cta-text h4 {
    font-size: 16px;
    font-weight: 700;
  }

  .hs-faq-mobile-cta .hs-cta-text p {
    font-size: 13px;
  }

  .hs-faq-mobile-cta .hs-cta-btn {
    padding: 10px 28px;
    font-size: 14px;
  }

  .hs-faq-mobile-cta .hs-cta-img {
    width: 140px;
    order: 2;
    margin-top: 16px;
    align-self: center;
  }

  .hs-faq-mobile-cta .hs-chat-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    margin: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
    justify-content: center;
  }

  .hs-faq-mobile-cta .hs-chat-btn span {
    display: none;
  }

  .hs-faq-mobile-cta .hs-chat-btn i {
    font-size: 1.2rem;
  }

  .feedback-illustration-col {
    display: none;
  }

  /* Edit Profile - Small Mobile */
  .edit-profile-avatar-col {
    width: 100%;
  }

  .profile-avatar-card {
    padding: 20px 16px;
  }

  .profile-avatar-upload {
    width: 170px;
    height: 170px;
  }

  .profile-avatar-upload img {
    width: 170px;
    height: 170px;
  }

  .avatar-camera-btn {
    width: 34px;
    height: 34px;
    bottom: 4px;
    right: 4px;
  }

  .profile-card {
    padding: 20px 16px;
  }

  .career-select-wrap {
    max-width: 100%;
  }

  .verify-id-upload {
    align-items: flex-start;
  }

  .verify-id-upload-circle {
    width: 100px;
    height: 100px;
  }

  .verify-id-upload-circle i {
    font-size: 1.5rem;
  }
}

/* Course Details - Tablet */
@media (max-width: 991px) {
  .course-details-header h1 {
    font-size: 1.75rem;
  }

  .instructor-info img {
    width: 56px;
    height: 56px;
  }

  .course-meta-item {
    padding: 14px 16px;
  }

  .learn-grid {
    grid-template-columns: 1fr;
  }

  .course-sidebar {
    position: static;
  }
}

/* Course Details - Mobile */
@media (max-width: 575px) {
  .course-details-header h1 {
    font-size: 1.5rem;
  }

  .course-details-header .description {
    font-size: 0.9375rem;
    margin-bottom: 20px;
  }

  .instructor-info {
    gap: 12px;
    margin-bottom: 24px;
  }

  .instructor-info img {
    width: 72px;
    height: 72px;
  }

  .course-meta-item {
    padding: 12px 14px;
  }

  .course-meta-label {
    font-size: 0.75rem;
  }

  .course-meta-value {
    font-size: 0.875rem;
  }

  .course-sidebar-price {
    padding: 16px 20px 0;
  }

  .course-sidebar-includes {
    padding: 12px 20px 0;
  }

  .course-sidebar-credly {
    padding: 10px 20px;
  }

  .course-sidebar-actions {
    padding: 8px 20px 20px;
  }
}

/* ============================================
   Video Preview Modal
   ============================================ */
.video-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.video-modal-overlay.active {
  display: flex;
}

.video-modal-container {
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.video-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.video-modal-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  font-family: 'Poppins', sans-serif;
}

.video-modal-title {
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  line-height: 1.3;
}

.video-modal-close {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.75rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.video-modal-close:hover {
  opacity: 0.7;
}

.video-modal-body {
  min-height: 0;
}

.video-modal-player-wrap {
  position:relative; 
  padding-bottom:56.25%; 
  height:0; 
  overflow:hidden;
}

.video-modal-player-wrap iframe {
  position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* .video-modal-player-wrap {
  position: relative;
  width: 100%;
  background-color: #000;
  aspect-ratio: 16/9;
} */

/* .video-modal-thumbnail {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}

.video-modal-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-modal-thumbnail.hidden {
  display: none;
} */

.video-modal-body video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
  object-fit: contain;
}

#video-modal-pause-overlay {
  z-index: 3;
}

@media (max-width: 575px) {
  .video-modal-overlay {
    padding: 20px 12px;
  }

  .video-modal-container {
    width: 95%;
  }

  .video-modal-title {
    font-size: 0.95rem;
  }

  .video-modal-header {
    margin-bottom: 14px;
  }
}

/* ============================================
   Course Content / Player — Mobile
   ============================================ */
@media (max-width: 767px) {
  /* Hide desktop player bar, show mobile */
  .course-player-bar-inner {
    display: none;
  }

  .course-player-bar-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: var(--navbar-height);
  }

  /* Single column layout */
  .course-player-page {
    flex-direction: column;
  }

  /* Hide sidebar on mobile — content moves to tab */
  .course-sidebar-panel {
    display: none;
  }

  .course-main-content {
    padding: 10px 16px 24px;
  }

  .course-lesson-title {
    display: none;
  }

  /* Video player full width, no border radius on mobile */
  .video-player {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  .video-controls {
    padding: 8px 0;
    gap: 8px;
  }

  .video-controls-left,
  .video-controls-right {
    gap: 8px;
  }

  .video-controls button {
    font-size: 1rem;
  }

  .video-time {
    font-size: 0.75rem;
  }

  /* Hide desktop tabs, show mobile tabs */
  .course-player-tabs {
    display: none;
  }

  .course-player-tabs-mobile {
    display: flex;
    gap: 16px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .course-player-tabs-mobile .tab-btn {
    padding: 10px 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
  }

  .course-player-tabs-mobile .tab-btn.active {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text);
  }

  /* Show mobile tab content, hide desktop tab content */
  [data-tab-content="course-player"] {
    display: none;
  }

  [data-tab-content="course-player-mobile"] {
    display: block;
  }

  /* Module items inside mobile Course Content tab */
  .mobile-modules-wrap .module-header {
    margin: 6px 0;
    width: 100%;
    padding: 10px 14px;
  }

  .mobile-modules-wrap .lesson-item {
    padding: 8px 14px 8px 20px;
  }

  /* PDF items stack tighter */
  .pdf-download-item {
    gap: 12px;
    padding: 12px 0;
  }

  .pdf-icon-thumb {
    width: 48px;
    height: 48px;
  }

  .pdf-icon-thumb i {
    font-size: 1.5rem;
  }
/* 
  .submit-assignment-section {
    margin-top: 24px;
    padding-top: 20px;
  } */
}

/* Hide mobile course-player tab content once the tablet sidebar layout takes over */
@media (min-width: 768px) {
  [data-tab-content="course-player-mobile"] {
    display: none;
  }

  .course-player-tabs-mobile {
    display: none;
  }
}

/* Hide mobile tab content on desktop/tablet */
@media (min-width: 576px) {
  [data-tab-content="assignment-mobile"] {
    display: none;
  }

  .assignment-tabs-mobile {
    display: none;
  }
}

/* ============================================
   Assignment Overview — Mobile
   ============================================ */
@media (max-width: 575px) {
  /* Hide desktop assignment content, show mobile tabs */
  [data-tab-content="assignment-desktop"] {
    display: none;
  }

  .assignment-tabs-mobile {
    display: flex;
    gap: 16px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .assignment-tabs-mobile .tab-btn {
    padding: 10px 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
  }

  .assignment-tabs-mobile .tab-btn.active {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text);
  }

  [data-tab-content="assignment-mobile"] {
    display: block;
  }

  /* Module items inside mobile Course Content tab */
  [data-tab-content="assignment-mobile"] .mobile-modules-wrap .module-header {
    margin: 6px 0;
    width: 100%;
    padding: 10px 14px;
  }

  [data-tab-content="assignment-mobile"] .mobile-modules-wrap .lesson-item {
    padding: 8px 14px 8px 20px;
  }

  .assignment-title {
    font-size: 1.0625rem;
  }



  .assignment-details-row {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .assignment-detail-action {
    margin-left: 0;
  }

  /* Quiz Page - Mobile */
  .quiz-header-inner {
    flex-direction: column;
    padding: 12px 16px;
    gap: 6px;
  }

  .quiz-header-left {
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .quiz-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .quiz-header-title {
    font-size: 0.8125rem;
  }

  .quiz-page {
    padding: 16px 16px 20px;
  }

  .quiz-question {
    padding: 20px 0;
  }

  .quiz-options {
    padding-left: 24px;
  }

  .quiz-answer-field {
    padding-left: 24px;
  }

  .quiz-order-list {
    padding-left: 44px;
  }

  .quiz-order-area {
    padding-left: 24px;
    flex-wrap: wrap;
  }

  .quiz-match-terms {
    padding-left: 44px;
  }

  .quiz-match-definitions {
    padding-left: 24px;
  }

  .quiz-equation-card {
    max-width: 100%;
  }

  .quiz-submit-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   50. Assignment Grades Section
   ============================================ */
.assign-grades-section {
  padding: 48px 0 64px;
}

.assign-grades-heading h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.assign-grades-underline {
  width: 40px;
  height: 3px;
  background: var(--color-text);
  margin-bottom: 32px;
}

/* Card wrapper */
.assign-grades-card {
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
}

/* Card header */
.assign-grades-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  gap: 16px;
}

.assign-grades-card-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.assign-grades-thumb {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.assign-grades-card-info {
  min-width: 0;
}

.assign-grades-card-info h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.4;
}

.assign-grades-level {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.assign-grades-card-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.assign-grades-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 576px) {
  .assign-grades-progress {
    margin-right: 16px;
  }
}

.assign-grades-progress i {
  color: var(--color-primary);
  font-size: 1.125rem;
}

.assign-grades-progress span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
}

.assign-grades-download {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text);
}

.assign-grades-chevron {
  font-size: 1rem;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}

/* Expanded body - hidden by default */
.assign-grades-card-body {
  display: none;
  padding: 0 24px 20px;
}

.assign-grades-card.active .assign-grades-card-body {
  display: block;
}

.assign-grades-card.active .assign-grades-chevron {
  transform: rotate(180deg);
}

/* Module rows inside expanded card */
.assign-grades-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
  gap: 16px;
}

.assign-grades-module:first-child {
  padding-top: 0;
}

.assign-grades-module:last-child {
  border-bottom: none;
}

.assign-grades-module-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.assign-grades-module-left > i {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  flex-shrink: 0;
}

.assign-grades-module-left h6 {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 1.4;
}

.assign-grades-module-type {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.assign-grades-module-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.assign-grades-status {
  font-size: 0.8125rem;
  font-weight: 600;
}

.assign-grades-status.pass {
  color: #4a8c5c;
}

.assign-grades-status.fail {
  color: #dc3545;
}

.assign-grades-date {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.assign-grades-weight {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.assign-grades-score {
  font-size: 0.8125rem;
  font-weight: 600;
}

.assign-grades-score.high {
  color: #4a8c5c;
}

.assign-grades-score.low {
  color: #dc3545;
}

/* Tablet: 576px – 991px */
@media (max-width: 991.98px) {
  .assign-grades-card-header {
    padding: 16px 20px;
  }

  .assign-grades-card-body {
    padding: 0 20px 16px;
  }

  .assign-grades-module {
    flex-wrap: wrap;
    gap: 8px;
  }

  .assign-grades-module-left {
    flex: 1 1 40%;
    min-width: 200px;
  }

  .assign-grades-module-right {
    width: 100%;
    flex-shrink: 1;
    justify-content: space-between;
    gap: 16px;
  }
}

/* Mobile: below 576px */
@media (max-width: 575.98px) {
  .assign-grades-section {
    padding: 32px 0 48px;
  }

  .assign-grades-card-header {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
  }

  .assign-grades-thumb {
    display: none;
  }

  .assign-grades-card-info h5 {
    font-size: 1rem;
    font-weight: 700;
  }

  .assign-grades-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .assign-grades-card-body {
    padding: 0 16px 12px;
  }

  .assign-grades-module {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .assign-grades-module-left {
    width: 100%;
  }

  .assign-grades-module-left > i {
    display: none;
  }

  .assign-grades-module-right {
    width: 100%;
    flex-shrink: 1;
    justify-content: space-between;
    gap: 12px;
  }
}


/* ========================================================================
   NNPC TECH SCHOLARSHIP PAGE
   ======================================================================== */

/* --- Page Tab Navigation --- */
.nnpc-page-tabs {
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0 0;
}

.nnpc-page-tabs .container {
  display: flex;
  gap: 32px;
}

.nnpc-page-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nnpc-page-tab:hover {
  color: #1a5276;
}

.nnpc-page-tab.active {
  color: #1a5276;
  font-weight: 600;
  border-bottom-color: #1a5276;
}

/* --- Tab Panels --- */
.nnpc-panel {
  display: none;
}

.nnpc-panel.active {
  display: block;
}

/* --- Scholarship Banner (Tab 1) --- */
.nnpc-banner {
  background-color: #1a5276;
  color: #fff;
  padding: 40px 0;
}

.nnpc-banner h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.nnpc-banner p {
  font-size: 0.9375rem;
  opacity: 0.9;
  margin-bottom: 0;
  color: #fff;
}

/* --- Scholarship Heading (Tab 2) --- */
.nnpc-scholarship-heading {
  padding-bottom: 0;
}

.nnpc-scholarship-heading h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .nnpc-page-tabs .container {
    gap: 24px;
  }

  .nnpc-page-tab {
    font-size: 0.8125rem;
  }
}

@media (max-width: 575px) {
  .nnpc-page-tabs .container {
    gap: 16px;
  }

  .nnpc-page-tab {
    font-size: 0.75rem;
  }

  .nnpc-banner {
    padding: 24px 0;
  }

  .nnpc-banner h1 {
    font-size: 1.375rem;
  }

  .nnpc-banner p {
    font-size: 0.8125rem;
  }

  .nnpc-scholarship-heading h1 {
    font-size: 1.375rem;
  }
}

/* ============================================
   Device Gate (quiz + assignment pages)
   ============================================ */
.device-gate {
  display: none;
}

.device-gate-icon {
  font-size: 3rem;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.device-gate-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.device-gate-message {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  text-align: center;
  max-width: 300px;
}

@media (max-width: 767.98px) {
  body:has(.device-gate) > *:not(.device-gate) {
    display: none !important;
  }

  .device-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 24px;
    text-align: center;
    background: #fff;
  }
}

/* ============================================
   Assignment Page Modals (Upload + New Attempt)
   ============================================ */
#uploadAssignmentModal,
#newAttemptModal {
  align-items: center;
}

.assignment-upload-modal,
.assignment-attempt-modal {
  min-height: auto;
  border-radius: 12px;
  padding: 36px 40px;
}

.assignment-modal-title,
.assignment-attempt-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.assignment-modal-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.assignment-modal-desc,
.assignment-attempt-body {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: 14px;
}

.assignment-upload-area {
  margin-top: 8px;
}

.assignment-file-input {
  display: none;
}

.assignment-file-name {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
}

.assignment-attempt-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.assignment-attempt-continue {
  padding: 10px 32px;
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .assignment-attempt-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .assignment-attempt-actions .btn,
  .assignment-attempt-actions .quiz-review-cancel {
    width: 100%;
    text-align: center;
  }
}

/* Aui Alert */
.aui-message {
    background: #fff;
    border: 1px solid #3572b0;
    border-radius: 5px;
    color: #333;
    line-height: 20px;
    margin: 20px 0 0 0;
    overflow-wrap: break-word;
    padding-bottom: 15px;
    padding-left: 50px;
    padding-right: 15px;
    padding-top: 13px;
    position: relative;
    word-wrap: break-word;
    word-break: break-word;
    margin-bottom: 1.5rem !important;
}

.aui-message.warning, .aui-message-warning {
    background: #fff;
    border-color: #ffa800;
    color: #333;
}

.aui-message.error, .aui-message-error {
    background: #fff;
    border-color: #d04437;
    color: #333;
}

.aui-message.success, .aui-message-success {
    background: #fff;
    border-color: #669900;
    color: #333;
}

.aui-message.success:before, .aui-message-success:before {
    background-color: #669900;
}
.aui-message.error:before, .aui-message-error:before {
    background-color: #d04437;
}

.aui-message.warning:before, .aui-message-warning:before {
    background-color: #ffa800;
}

.aui-message:before {
    background-color: #3572b0;
}

.aui-message:before {
    background-color: #3572b0;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    width: 40px;
}

.aui-message.success:after, .aui-message-success:after {
    content: "\f05d";
    color: #fff;
}
.aui-message.warning:after, .aui-message-warning:after{
    content: "\f071";
    color: #fff;
}
.aui-message.error:after, .aui-message-error:after {
    content: "\f06a";
    color: #fff;
}

.aui-message:after {
    content: "\f05a";
    color: #fff;
}

.aui-message:after {
    color: #fff;
    font-family: 'FontAwesome';
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    left: 12px;
    line-height: 1;
    margin-top: -8px;
    position: absolute;
    speak: none;
    top: 50%;
}

/* ===== Skeleton shimmer ===== */
.skeleton {
	position: relative;
	overflow: hidden;
	background-color: #e9e9e9;
	border-radius: 4px;
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, 0.75) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.skeleton::after { animation: none; }
}

.course-card-image {
    width: 100%;
	height: 180px;
    aspect-ratio: 345 / 220;
    border-radius: 0;
    display: block;
}

.sk-provider    { height: 12px; width: 55%; margin-top: 7px; margin-bottom: 10px; }
.sk-title       { height: 30px; width: 92%; margin-bottom: 15px; }
.sk-meta        { height: 12px; width: 78%; margin-bottom: 14px; }
.sk-instructor  { height: 12px; width: 45%; margin-bottom: 14px; }
.sk-stars       { height: 14px; width: 88px; border-radius: 3px; }
.sk-count       { height: 14px; width: 14px; border-radius: 50%; }
.sk-price-label { height: 11px; width: 58px; margin-bottom: 6px; }
.sk-price       { height: 18px; width: 76px; }
.sk-bookmark    { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }

.sk-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 23px;
}

.sk-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

@media (max-width: 767px) {
	.programs-section .course-card-image {
		width: 120px;
		min-width: 120px;
		height: auto;
		min-height: 100px;
		object-fit: cover;
		border-radius: 8px;
		}

	.sk-rating-row {
		margin-bottom: 23px;
	}
}

/* No content */
.no-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F8FAFC;
  box-shadow: 0 2px 6px 0 rgba(67, 89, 113, .12);
  border-radius: 10px;
  text-align: center;
  padding: 15px;
}

.no-content i {
  font-size: 4rem;
  color: #0567a0;
  margin-bottom: 10px;
}

.no-content h4 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.no-content p {
  margin-bottom: 0;
  font-size: 14px;
}

.vh-30 {
  min-height: 30vh;
}

.vh-60 {
  min-height: 60vh;
}

.vh-370 {
  min-height: 370px;
}

.fa-1x {
	font-size: 1.5em;
}

/* ── Validation styles ── */
.form-control.is-valid, .form-select.is-valid {
	border-color: #28a745;
	background-image: none;
}

.form-control.is-invalid, .form-select.is-invalid {
	border-color: #dc3545;
	background-image: none;
}

.ui-datepicker {
  z-index: 1090 !important; /* Bootstrap 5 modal is 1055, backdrop 1050 */
}

/* Checkout cards */
.checkout-panel{
    border:1px solid #e5e4ef;
    border-radius:14px;
}
.checkout-panel + .checkout-panel{
    margin-top:1.25rem;
}
.checkout-panel-head{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:1rem 1.4rem;
    border-bottom:1px solid #e5e4ef;
    background-color: var(--color-bg-light);
}

/* Checkout order summary */
.summary{
    position:sticky;
    top:1.5rem;
}
.summary .course-row{
    display:flex;
    gap:.9rem;
    padding:.9rem 0;
}
.summary .course-row + .summary .course-row{
    border-top:1px dashed #e5e4ef;
}
.summary .course-thumb{
    width:72px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.summary .course-title{
    font-weight:600;
    font-size:.88rem;
    line-height:1.3;
}
.summary .course-meta{
    font-size:.76rem;
    color:#5b5772;
}
.summary .price-old{
    color:#5b5772;
    text-decoration:line-through;
    font-size:.78rem;
}
.summary .price-now{
    font-weight:600;
}
.summary .tally{
    font-size:.9rem;
}
.summary .tally .row + .row{
    margin-top:.4rem;
}
.summary .savings{
    color:#0f8a5f;
    font-weight:600;
}
.summary .total-line{
    border-top:1px solid #e5e4ef;
    margin-top:.9rem;
    padding-top:.9rem;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
}
.summary .total-amount{
    font-size:1.6rem;
    font-weight:700;
}
@media (max-width: 991.98px){
    .summary{
        position:static;
    }
}

/* ==========================================================================
    QUIZ RESULT PAGE
    ========================================================================== */
.quiz-result-shell { margin: 0 auto; }

/* --- Verdict banner ---------------------------------------------------- */

.quiz-verdict {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 2rem;
    align-items: center;
    border: 1px solid #e3e8ed;
    border-radius: 16px;
    padding: 2rem;
    background: #fff;
}

.quiz-verdict.is-pass { border-color: #bfe3d3; background: linear-gradient(180deg, #e8f5ef 0%, #fff 68%); }
.quiz-verdict.is-fail { border-color: #f3c9c5; background: linear-gradient(180deg, #fdecea 0%, #fff 68%); }

/* Score dial — scaled-up sibling of the header timer ring */
.quiz-score-dial { position: relative; width: 168px; height: 168px; }
.quiz-score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-score-track { fill: none; stroke: #dfe6ec; stroke-width: 9; }
.quiz-score-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 439.8;
  stroke-dashoffset: 439.8;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,.85,.3,1);
}
.is-pass .quiz-score-fill { stroke: #1b7f5a; }
.is-fail .quiz-score-fill { stroke: #b3261e; }

.quiz-score-readout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.quiz-score-value { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; }
.quiz-score-value sup { font-size: 1.1rem; font-weight: 600; top: -.7em; margin-left: 1px; }
.quiz-score-caption { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #5a6b7a; margin-top: .45rem; }

.quiz-verdict-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .34rem .75rem; border-radius: 999px; margin-bottom: .75rem;
}
.is-pass .quiz-verdict-badge { background: #1b7f5a; color: #fff; }
.is-fail .quiz-verdict-badge { background: #b3261e; color: #fff; }

.quiz-verdict-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .4rem; }
.quiz-verdict-note { color: #5a6b7a; font-size: .95rem; margin: 0; max-width: 46ch; }

.quiz-verdict-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

.qr-btn {
  display: inline-flex; 
  align-items: center; 
  gap: .45rem;
  font-size: .9rem; 
  font-weight: 600; 
  padding: .6rem 1.15rem;
  border-radius: 8px; 
  border: 1px solid transparent; 
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.qr-btn:disabled { opacity: .5; pointer-events: none; }
.qr-btn-primary { background: #1a5276; color: #fff; }
.qr-btn-primary:hover { background: #14425e; color: #fff; }
.qr-btn-ghost { background: #fff; border-color: #e3e8ed; color: #0f1e2b; }
.qr-btn-ghost:hover { border-color: #c3ccd5; color: #0f1e2b; }
.qr-btn:focus-visible { outline: 2px solid #1a5276; outline-offset: 2px; }

/* --- Stat strip -------------------------------------------------------- */

.quiz-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e3e8ed;
  border-radius: 12px;
  margin-top: 1rem;
  overflow: hidden;
  background: #fff;
}
.quiz-stat { padding: 1.1rem 1.25rem; border-right: 1px solid #e3e8ed; }
.quiz-stat:last-child { border-right: 0; }
.quiz-stat-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #5a6b7a; margin-bottom: .35rem; }
.quiz-stat-value { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.quiz-stat-value small { font-size: .8rem; font-weight: 500; color: #5a6b7a; }

/* --- Breakdown --------------------------------------------------------- */

.quiz-breakdown-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 2.5rem 0 1rem; flex-wrap: wrap;
}
.quiz-breakdown-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.quiz-breakdown-filters { display: flex; gap: .4rem; }

.qr-review {
  border: 1px solid #e3e8ed;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin-bottom: .75rem;
  background: #fff;
  border-left: 3px solid #e3e8ed;
}
.qr-review.is-correct { border-left-color: #1b7f5a; }
.qr-review.is-wrong { border-left-color: #b3261e; }
.qr-review-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
.qr-review-num { font-size: .95rem; font-weight: 700; color: #5a6b7a; min-width: 1.5rem; }
.qr-review-question { font-size: .98rem; font-weight: 600; margin: 0; flex: 1; line-height: 1.5; }
.qr-review-mark { font-size: 1.15rem; line-height: 1.3; }
.is-correct .qr-review-mark { color: #1b7f5a; }
.is-wrong .qr-review-mark { color: #b3261e; }

.qr-answer { display: flex; gap: .6rem; padding: .5rem 0; font-size: .92rem; align-items: baseline; }
.qr-answer-label { min-width: 8.5rem; color: #5a6b7a; font-size: .82rem; font-weight: 600; }
.qr-answer-text { flex: 1; }
.qr-answer.is-wrong .qr-answer-text { color: #b3261e; text-decoration: line-through; text-decoration-thickness: 1px; }
.qr-answer.is-key .qr-answer-text { color: #1b7f5a; font-weight: 600; }
.qr-answer.is-blank .qr-answer-text { color: #5a6b7a; font-style: italic; }
.qr-points { font-size: .78rem; font-weight: 600; color: #5a6b7a; white-space: nowrap; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 767.98px) {
  .quiz-verdict { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.5rem; }
  .quiz-verdict-note { max-width: none; }
  .quiz-verdict-actions { justify-content: center; }
  .quiz-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .quiz-stat:nth-child(2) { border-right: 0; }
  .quiz-stat:nth-child(-n+2) { border-bottom: 1px solid #e3e8ed; }
  .qr-answer { flex-direction: column; gap: .15rem; }
  .qr-answer-label { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-score-fill { transition: none; }
  .qr-btn { transition: none; }
}

/* --- Gap bar (fail only) ----------------------------------------------- */

.quiz-gap-bar { margin-top: 1.25rem; }
.quiz-gap-track {
  position: relative; height: 8px; border-radius: 999px;
  background: #e6ebef; overflow: visible;
}
.quiz-gap-fill {
  height: 100%; border-radius: 999px; background: #b3261e;;
  width: 0; transition: width 1.1s cubic-bezier(.22,.85,.3,1);
}
.quiz-gap-threshold {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: #0f1e2b; opacity: .55; border-radius: 2px;
}
.quiz-gap-legend {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: #5a6b7a; margin-top: .5rem;
}
.quiz-gap-legend strong { color: #0f1e2b; font-weight: 600; }

.quiz-shell {
    margin-inline: auto;
    background: #fdfdfd;
    border: 1px solid #e4e8ee;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    padding: 2.75rem 3rem 3rem;
}

/* ---------- QUIZ banner ---------- */
.quiz-banner {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 0 auto 2.5rem;
}

/* ---------- Type ---------- */
.quiz-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1b2a4e;
    letter-spacing: -.01em;
    margin-bottom: .5rem;
}

.quiz-author {
    font-size: .8125rem;
    font-weight: 400;
    color: #7b8798;
    margin-bottom: 1.5rem;
}

.quiz-intro {
    font-size: .78125rem;
    line-height: 1.85;
    margin-bottom: 1.75rem;
}

.quiz-subhead {
    font-size: .78125rem;
    font-weight: 600;
    color: #1b2a4e;
    margin-bottom: .625rem;
}
.quiz-shell ul {
    list-style: none;
    padding-left: .875rem;
    font-size: .78125rem;
    line-height: 1.6;
}
.quiz-shell ul li {
    position: relative;
    margin-bottom: .4375rem;
}
.quiz-shell ul li::before {
    content: "";
    position: absolute;
    left: -.875rem;
    top: .5625rem;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6b7a90;
}
.quiz-shell ul li:last-child { margin-bottom: 0; }

/* ---------- Quiz details panel ---------- */
.quiz-details {
    background: #eef2f7;
    border-radius: .5rem;
    padding: 1.375rem 1.5rem;
}

.btn-continue {
    font-size: .8125rem;
    font-weight: 500;
    color: #1b2a4e;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: #fff;
    border: 1px solid #b9c2ce;
    border-radius: .375rem;
    padding: .5rem 3rem;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-continue:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1b2a4e;
}
.btn-continue:focus-visible {
    outline: 2px solid #1b2a4e;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .quiz-shell {
      padding: 2rem 1.5rem 2.25rem; 
      border-radius: 0; 
  }
}