/* ============================================================
   KruDevTech Academy — Main Stylesheet  v1.0.1
   Font    : Prompt (Google Fonts)
   Primary : #1E88E5  |  Secondary : #1565C0  |  Accent : #FF9800
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
  --ka-primary:       #1E88E5;
  --ka-primary-dark:  #1565C0;
  --ka-accent:        #FF9800;
  --ka-accent-dark:   #E65100;
  --ka-bg:            #F5F7FA;
  --ka-white:         #FFFFFF;
  --ka-text:          #1a1a2e;
  --ka-text-light:    #5a6374;
  --ka-border:        #e2e8f0;
  --ka-shadow-sm:     0 1px 6px rgba(30,136,229,.10);
  --ka-shadow:        0 4px 16px rgba(30,136,229,.12);
  --ka-shadow-lg:     0 8px 32px rgba(30,136,229,.18);
  --ka-radius:        14px;
  --ka-radius-sm:     8px;
  --ka-radius-xs:     6px;
  --ka-transition:    all 0.24s cubic-bezier(.4,0,.2,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Prompt', 'Helvetica Neue', Arial, sans-serif;
  background: var(--ka-bg);
  color: var(--ka-text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--ka-primary); text-decoration: none; transition: var(--ka-transition); }
a:hover { color: var(--ka-primary-dark); }

/* ── Utility: font-weight ── */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

/* ── Utility: misc ── */
.text-primary   { color: var(--ka-primary) !important; }
.text-accent    { color: var(--ka-accent)  !important; }
.bg-primary     { background-color: var(--ka-primary) !important; }
.bg-accent      { background-color: var(--ka-accent)  !important; }
.shadow-ka      { box-shadow: var(--ka-shadow) !important; }
.rounded-ka     { border-radius: var(--ka-radius) !important; }
.object-fit-cover { object-fit: cover; }

/* ── Bootstrap overrides ── */
.btn-primary {
  background: var(--ka-primary);
  border-color: var(--ka-primary);
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--ka-primary-dark);
  border-color: var(--ka-primary-dark);
}
.btn-outline-primary { color: var(--ka-primary); border-color: var(--ka-primary); }
.btn-outline-primary:hover { background: var(--ka-primary); border-color: var(--ka-primary); }
.btn-accent {
  background: var(--ka-accent);
  border-color: var(--ka-accent);
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover { background: var(--ka-accent-dark); border-color: var(--ka-accent-dark); color: #fff; }

.form-control:focus,
.form-select:focus {
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 .2rem rgba(30,136,229,.18);
}
.form-label { font-weight: 500; margin-bottom: .35rem; }

.badge { font-weight: 500; letter-spacing: .02em; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar-krudev {
  background: linear-gradient(120deg, var(--ka-primary-dark) 0%, var(--ka-primary) 100%);
  box-shadow: 0 2px 12px rgba(21,101,192,.25);
  padding: .6rem 0;
}
.navbar-krudev .navbar-brand {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar-krudev .navbar-brand:hover { color: #fff; }
.navbar-krudev .navbar-brand i { font-size: 1.5rem; }

.navbar-krudev .nav-link {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: .45rem .9rem !important;
  border-radius: var(--ka-radius-xs);
  transition: var(--ka-transition);
}
.navbar-krudev .nav-link:hover,
.navbar-krudev .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.14);
}

/* Mobile hamburger */
.navbar-krudev .navbar-toggler {
  border: none;
  color: #fff;
  padding: .3rem .5rem;
}
.navbar-krudev .navbar-toggler:focus { box-shadow: none; }

/* Register button */
.btn-register {
  background: var(--ka-accent) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: .35rem 1.1rem !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  border: none !important;
  transition: var(--ka-transition);
}
.btn-register:hover { background: var(--ka-accent-dark) !important; }

/* Search bar in navbar */
.navbar-krudev .form-control {
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .88rem;
  padding: .4rem 1rem;
}
.navbar-krudev .form-control::placeholder { color: rgba(255,255,255,.6); }
.navbar-krudev .form-control:focus {
  background: rgba(255,255,255,.25);
  color: #fff;
  box-shadow: none;
}

/* Dropdown menu */
.navbar-krudev .dropdown-menu {
  border: none;
  border-radius: var(--ka-radius-sm);
  box-shadow: var(--ka-shadow-lg);
  padding: .5rem 0;
  margin-top: .4rem !important;
}
.navbar-krudev .dropdown-item {
  font-size: .88rem;
  padding: .45rem 1rem;
  color: var(--ka-text);
  font-weight: 400;
}
.navbar-krudev .dropdown-item:hover { background: #e3f2fd; color: var(--ka-primary); }
.navbar-krudev .dropdown-item i { width: 18px; }

/* Live search results */
#live-search-results {
  border-radius: 0 0 var(--ka-radius-sm) var(--ka-radius-sm);
  border: 1px solid var(--ka-border);
}
#live-search-results .list-group-item {
  border: none;
  border-bottom: 1px solid var(--ka-border);
  font-size: .88rem;
}
#live-search-results .list-group-item:last-child { border-bottom: none; }
#live-search-results .list-group-item:hover { background: #e3f2fd; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  background:
    radial-gradient(circle 520px at calc(100% + 80px) -180px, rgba(255,255,255,.06) 0%, transparent 70%),
    radial-gradient(circle 300px at -60px calc(100% + 120px), rgba(255,152,0,.08) 0%, transparent 70%),
    linear-gradient(135deg, #0d1f5c 0%, var(--ka-primary-dark) 45%, var(--ka-primary) 100%);
  color: #fff;
  padding: 80px 0 70px;
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

.hero-section h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.5px;
}
.hero-section .lead {
  font-size: 1rem;
  font-weight: 300;
  opacity: .9;
  max-width: 520px;
}

/* Hero search */
.hero-search { max-width: 520px; }
.hero-search .form-control {
  border: none;
  border-radius: 30px 0 0 30px !important;
  padding: .75rem 1.4rem;
  font-size: .95rem;
  color: var(--ka-text);
  box-shadow: none;
  background: #fff;
}
.hero-search .btn-search {
  border-radius: 0 30px 30px 0 !important;
  padding: .75rem 1.4rem;
  background: var(--ka-accent);
  border: none;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.hero-search .btn-search:hover { background: var(--ka-accent-dark); }

/* Popular tags */
.hero-tags .badge {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 400;
  padding: .35em .9em;
  font-size: .82rem;
  border-radius: 20px;
  transition: var(--ka-transition);
}
.hero-tags .badge:hover { background: rgba(255,255,255,.3); }

/* Stats */
.hero-stats { gap: 2rem; }
.hero-stats .stat-item strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.hero-stats .stat-item span {
  font-size: .82rem;
  opacity: .8;
}
.hero-stats .vr { background: rgba(255,255,255,.3); opacity: 1; }


/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ka-primary-dark);
  line-height: 1.2;
}
.section-subtitle { color: var(--ka-text-light); font-size: .95rem; }
.section-line {
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, var(--ka-primary), var(--ka-accent));
  border-radius: 2px;
  margin-bottom: 1rem;
}
.section-line.center { margin-left: auto; margin-right: auto; }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.category-card {
  background: var(--ka-white);
  border: 1.5px solid var(--ka-border);
  border-radius: var(--ka-radius);
  padding: 1.6rem 1rem 1.2rem;
  text-align: center;
  display: block;
  color: var(--ka-text);
  transition: var(--ka-transition);
  text-decoration: none;
  height: 100%;
}
.category-card:hover {
  border-color: var(--ka-primary);
  box-shadow: var(--ka-shadow);
  transform: translateY(-4px);
  color: var(--ka-primary);
}
.category-card .cat-icon {
  font-size: 2.4rem;
  color: var(--ka-primary);
  margin-bottom: .75rem;
  display: block;
}
.category-card:hover .cat-icon { color: var(--ka-primary-dark); }
.category-card .cat-name {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .2rem;
}
.category-card .cat-count {
  font-size: .78rem;
  color: var(--ka-text-light);
}

/* ============================================================
   COURSE CARD
   ============================================================ */
.course-card {
  background: var(--ka-white);
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius);
  overflow: hidden;
  transition: var(--ka-transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-card:hover {
  box-shadow: var(--ka-shadow-lg);
  transform: translateY(-5px);
  border-color: transparent;
}

/* Thumbnail */
.course-card .course-thumb {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;           /* 16:9 ratio */
  background: #e8edf2;
}
.course-card .course-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.course-card:hover .course-thumb img { transform: scale(1.06); }

/* Badges on thumbnail */
.course-card .course-badge {
  position: absolute;
  top: .65rem;
  left: .65rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  z-index: 2;
}

/* Body */
.course-card .course-body {
  padding: 1rem 1rem .5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.course-card .course-cat {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ka-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.course-card .course-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ka-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card .course-instructor {
  font-size: .8rem;
  color: var(--ka-text-light);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.course-card .course-meta-row {
  font-size: .78rem;
  color: var(--ka-text-light);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.course-card .course-meta-row span {
  display: flex;
  align-items: center;
  gap: .2rem;
}

/* Seat bar */
.seat-wrap {
  margin-top: .25rem;
}
.seat-bar {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.seat-fill {
  height: 100%;
  background: var(--ka-primary);
  border-radius: 3px;
  transition: width .5s ease;
}
.seat-fill.danger { background: #ef5350; }
.seat-label { font-size: .75rem; color: var(--ka-text-light); }

/* Price */
.course-card .course-price-box {
  margin-top: auto;
  padding-top: .5rem;
}
.course-card .price-current {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ka-primary);
}
.course-card .price-original {
  font-size: .85rem;
  color: var(--ka-text-light);
  text-decoration: line-through;
}
.price-free {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2e7d32;
}

/* Card Footer */
.course-card .course-footer {
  padding: .6rem 1rem;
  border-top: 1px solid var(--ka-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--ka-text-light);
  gap: .5rem;
}

/* ── Badges ── */
.badge-free  { background: #e8f5e9; color: #2e7d32; }
.badge-paid  { background: #e3f2fd; color: var(--ka-primary); }
.badge-live  { background: #fce4ec; color: #c62828; }
.badge-full  { background: #ffebee; color: #b71c1c; }
.badge-new   { background: #fff8e1; color: #e65100; }

/* ============================================================
   MINI COURSE LIST ITEM (Free / New section)
   ============================================================ */
.course-list-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .75rem;
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius-sm);
  background: var(--ka-white);
  text-decoration: none;
  color: var(--ka-text);
  transition: var(--ka-transition);
}
.course-list-item:hover {
  border-color: var(--ka-primary);
  box-shadow: var(--ka-shadow-sm);
  color: var(--ka-text);
}
.course-list-item .thumb {
  width: 80px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--ka-radius-xs);
  overflow: hidden;
  background: #e8edf2;
}
.course-list-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-list-item .info { flex: 1; min-width: 0; }
.course-list-item .info .title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-list-item .info .sub {
  font-size: .75rem;
  color: var(--ka-text-light);
  margin-top: .15rem;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  padding: 1.5rem;
  box-shadow: var(--ka-shadow-sm);
  border-left: 4px solid var(--ka-primary);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--ka-transition);
}
.stat-card:hover { box-shadow: var(--ka-shadow); transform: translateY(-2px); }
.stat-card .stat-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--ka-radius-sm);
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ka-primary);
  flex-shrink: 0;
}
.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ka-primary);
  line-height: 1;
}
.stat-card .stat-label { font-size: .82rem; color: var(--ka-text-light); margin-top: .15rem; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  padding: 1.75rem;
  box-shadow: var(--ka-shadow-sm);
  border: 1px solid var(--ka-border);
  height: 100%;
  position: relative;
}
.testimonial-card .quote-icon {
  font-size: 4rem;
  color: var(--ka-primary);
  opacity: .08;
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-family: Georgia, serif;
  line-height: 1;
}
.testimonial-card .content {
  font-size: .9rem;
  color: var(--ka-text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.testimonial-card .author { display: flex; align-items: center; gap: .75rem; }
.testimonial-card .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ka-primary);
  flex-shrink: 0;
}
.testimonial-card .avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ka-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.testimonial-card .author-name { font-weight: 600; font-size: .88rem; }
.testimonial-card .author-role { font-size: .77rem; color: var(--ka-text-light); }

/* Stars */
.stars { color: #ffb300; letter-spacing: .05em; font-size: .85rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-accordion .accordion-item {
  border: 1px solid var(--ka-border);
  border-radius: var(--ka-radius-sm) !important;
  margin-bottom: .6rem;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  font-weight: 500;
  font-size: .95rem;
  background: var(--ka-white);
  color: var(--ka-text);
  padding: 1rem 1.25rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: #e3f2fd;
  color: var(--ka-primary);
  box-shadow: none;
}
.faq-accordion .accordion-button::after { filter: none; }
.faq-accordion .accordion-body {
  font-size: .9rem;
  color: var(--ka-text-light);
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--ka-border);
}

/* ============================================================
   CHECKOUT / PAYMENT
   ============================================================ */
.checkout-card {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  box-shadow: var(--ka-shadow);
  padding: 2rem;
}
.payment-option {
  border: 2px solid var(--ka-border);
  border-radius: var(--ka-radius-sm);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: var(--ka-transition);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.payment-option:hover,
.payment-option.selected {
  border-color: var(--ka-primary);
  background: #e3f2fd;
}
.qr-code-box {
  text-align: center;
  padding: 1.5rem;
  border: 2px dashed var(--ka-border);
  border-radius: var(--ka-radius);
  background: #fafafa;
}
.qr-code-box img { max-width: 180px; margin: 0 auto; }

/* ============================================================
   ADMIN SIDEBAR
   ============================================================ */
.admin-sidebar {
  width: 250px;
  min-height: 100vh;
  background: var(--ka-primary-dark);
  position: fixed;
  top: 0; left: 0;
  z-index: 1050;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: transform .3s ease;
}
.admin-sidebar .sidebar-brand {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.admin-sidebar .sidebar-section {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.35);
  padding: 1rem 1.25rem .3rem;
}
.admin-sidebar .nav-link {
  color: rgba(255,255,255,.78);
  padding: .55rem 1.25rem;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-left: 3px solid transparent;
  transition: var(--ka-transition);
}
.admin-sidebar .nav-link i { font-size: 1rem; width: 18px; flex-shrink: 0; }
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-left-color: var(--ka-accent);
}

.admin-content { margin-left: 250px; min-height: 100vh; }
.admin-topnav {
  background: var(--ka-white);
  border-bottom: 1px solid var(--ka-border);
  padding: .75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.show { transform: translateX(0); }
  .admin-content { margin-left: 0; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-ka {
  font-size: .82rem;
  background: transparent;
  padding: 0;
  margin: 0;
}
.breadcrumb-ka .breadcrumb-item a { color: var(--ka-primary); }
.breadcrumb-ka .breadcrumb-item.active { color: var(--ka-text-light); }
.breadcrumb-ka .breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--ka-text-light);
}

/* ============================================================
   COURSE DETAIL
   ============================================================ */
.detail-hero {
  background: linear-gradient(135deg, #0d1f5c 0%, var(--ka-primary-dark) 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.course-sidebar-sticky {
  position: sticky;
  top: 80px;
}
.sidebar-card {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  box-shadow: var(--ka-shadow-lg);
  overflow: hidden;
}
.sidebar-card .sidebar-thumb {
  position: relative;
  padding-top: 56.25%;
  background: #e8edf2;
}
.sidebar-card .sidebar-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-card .sidebar-body { padding: 1.25rem; }
.sidebar-card .price-big {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ka-primary);
}
.sidebar-card .price-old {
  font-size: 1rem;
  color: var(--ka-text-light);
  text-decoration: line-through;
}
.course-features li {
  padding: .4rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  border-bottom: 1px dashed var(--ka-border);
}
.course-features li:last-child { border-bottom: none; }
.course-features li i { color: var(--ka-primary); font-size: 1rem; }

/* ============================================================
   DASHBOARD — STUDENT
   ============================================================ */
.dashboard-nav {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  box-shadow: var(--ka-shadow-sm);
  overflow: hidden;
}
.dashboard-nav .nav-link {
  color: var(--ka-text);
  font-weight: 500;
  font-size: .9rem;
  padding: .75rem 1.25rem;
  border-left: 3px solid transparent;
  transition: var(--ka-transition);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dashboard-nav .nav-link:hover,
.dashboard-nav .nav-link.active {
  color: var(--ka-primary);
  background: #e3f2fd;
  border-left-color: var(--ka-primary);
}

/* ============================================================
   PROGRESS / ENROLLMENT
   ============================================================ */
.enroll-progress .progress {
  height: 7px;
  border-radius: 4px;
  background: #e2e8f0;
}
.enroll-progress .progress-bar {
  background: var(--ka-primary);
  border-radius: 4px;
}

/* ============================================================
   FORMS — Auth
   ============================================================ */
.auth-card {
  background: var(--ka-white);
  border-radius: var(--ka-radius);
  box-shadow: var(--ka-shadow-lg);
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ka-text-light);
  font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ka-border);
}

/* Password strength */
#password-strength { font-size: .78rem; margin-top: .3rem; font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-main {
  background: linear-gradient(135deg, #0d1f5c 0%, #1a237e 100%);
  color: rgba(255,255,255,.8);
  padding: 3.5rem 0 1.5rem;
}
.footer-main h5 {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.footer-main a {
  color: rgba(255,255,255,.65);
  display: block;
  margin-bottom: .45rem;
  font-size: .87rem;
  transition: var(--ka-transition);
}
.footer-main a:hover { color: #fff; padding-left: 4px; }
.footer-main .footer-desc { font-size: .87rem; line-height: 1.7; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  margin: 0;
  padding: 0;
  transition: var(--ka-transition);
}
.footer-social a:hover { background: var(--ka-primary); color: #fff; padding-left: 0; }

.footer-bottom {
  background: #333333;
  padding: 1rem 0;
  font-size: .82rem;
  color: #ffffff;
  text-align: center;
}

/* ============================================================
   HOVER LIFT
   ============================================================ */
.hover-lift { transition: var(--ka-transition); }
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ka-shadow);
}

/* ============================================================
   GRADIENT BACKGROUNDS
   ============================================================ */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--ka-primary-dark), var(--ka-primary)) !important;
}
.bg-gradient-accent {
  background: linear-gradient(135deg, var(--ka-accent-dark), var(--ka-accent)) !important;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#backToTop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ka-primary);
  color: #fff;
  border: none;
  box-shadow: var(--ka-shadow);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  z-index: 999;
  cursor: pointer;
  transition: var(--ka-transition);
}
#backToTop:hover { background: var(--ka-primary-dark); transform: translateY(-2px); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge-status-open     { background: #e8f5e9; color: #2e7d32; }
.badge-status-full     { background: #ffebee; color: #b71c1c; }
.badge-status-closed   { background: #eeeeee; color: #424242; }
.badge-status-draft    { background: #fff8e1; color: #e65100; }
.badge-status-pending  { background: #fff8e1; color: #e65100; }
.badge-status-approved { background: #e8f5e9; color: #2e7d32; }
.badge-status-rejected { background: #ffebee; color: #b71c1c; }

/* ============================================================
   TABLES
   ============================================================ */
.table-ka thead {
  background: linear-gradient(90deg, var(--ka-primary-dark), var(--ka-primary));
  color: #fff;
}
.table-ka thead th { font-weight: 500; border: none; padding: .85rem 1rem; }
.table-ka tbody tr:hover { background: #f0f7ff; }
.table-ka td, .table-ka th { vertical-align: middle; }

/* ============================================================
   ALERTS / FLASH
   ============================================================ */
.alert { border-radius: var(--ka-radius-sm); font-size: .9rem; }
.alert-auto-dismiss { animation: slideInRight .4s ease; }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--ka-primary-dark) 0%, var(--ka-primary) 60%, #42a5f5 100%);
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  top: -150px; right: -100px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .hero-section { padding: 50px 0 40px; }
  .course-sidebar-sticky { position: static; margin-top: 2rem; }
}

@media (max-width: 767.98px) {
  .hero-section h1 { font-size: 1.7rem; }
  .section-title    { font-size: 1.25rem; }
  .stat-card        { margin-bottom: .75rem; }
  .auth-card        { padding: 1.5rem; }
}

@media (max-width: 575.98px) {
  .hero-section h1           { font-size: 1.4rem; }
  .navbar-krudev .navbar-brand { font-size: 1rem; }
  .hero-search .btn-search   { padding: .75rem .9rem; }
}

/* ============================================================
   AUTH PAGES  (login / register / forgot-password / reset)
   ============================================================ */
.auth-page {
  min-height: calc(100vh - 70px); /* 70px = ความสูง navbar โดยประมาณ */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--ka-bg);
}

/* wrapper กว้างเท่ากันทั้ง login และ register = 500px */
.auth-wrap {
  width: 100%;
  max-width: 500px;
}

.auth-card {
  border-radius: var(--ka-radius) !important;
  border: 1.5px solid var(--ka-border) !important;
}
.auth-card .input-group-text {
  background: #f8fafc;
  border-color: #dee2e6;
  color: var(--ka-text-light);
}
.auth-card .form-control,
.auth-card .form-select {
  border-color: #dee2e6;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 .18rem rgba(30,136,229,.15);
}
/* input-group focus ring — ใช้ wrapper แทน individual field */
.auth-card .input-group:focus-within {
  border-radius: var(--ka-radius-xs);
  box-shadow: 0 0 0 .18rem rgba(30,136,229,.15);
}
.auth-card .input-group:focus-within .form-control,
.auth-card .input-group:focus-within .input-group-text {
  box-shadow: none !important;
}

/* Icon-only toggle button in input-group */
.btn-icon-plain {
  cursor: pointer;
  background: #f8fafc;
  border: 1px solid #dee2e6;
  border-left: none;
  padding: .375rem .65rem;
  line-height: 1;
  color: var(--ka-text-light);
  transition: var(--ka-transition);
}
.btn-icon-plain:hover { color: var(--ka-primary); }

/* CAPTCHA image container */
.captcha-img-wrap img { display: block; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-stat-card {
  border-radius: var(--ka-radius);
  border: none;
  transition: var(--ka-transition);
}
.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ka-shadow-lg) !important;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar-krudev, .footer-main, .footer-bottom,
  .course-sidebar-sticky, #backToTop { display: none !important; }
  body { background: #fff; font-size: 12px; }
}