/* ================================================================
   DARS ACADEMY — DESIGN SYSTEM  v4.0
   Works across: public (Tailwind), student/teacher portals + admin (Bootstrap)
   ================================================================ */

/* Persian / RTL typeface — loaded centrally so every page that uses
   main.css gets RTL support without editing each layout. */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

/* ── 1. Design Tokens ──────────────────────────────────────────── */
:root {
  --da-primary:       #01EE9C;
  --da-primary-dark:  #00c97d;
  --da-secondary:     #2CC295;
  --da-primary-bg:    rgba(1,238,156,.10);
  --da-dark:          #0f172a;
  --da-sidebar-bg:    #0f172a;
  --da-sidebar-w:     260px;
  --da-sidebar-cw:    72px;
  --da-topbar-h:      60px;
  --da-border:        #e2e8f0;
  --da-bg:            #f8fafc;
  --da-muted:         #64748b;
  --da-card-radius:   1rem;
  --da-input-radius:  .625rem;
  /* Soft, layered premium shadows (Stripe/Linear feel) */
  --da-shadow-sm:     0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --da-shadow-md:     0 4px 12px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
  --da-shadow-lg:     0 16px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.05);
  --da-ring:          0 0 0 3px rgba(1,238,156,.28);
  --da-transition:    all .2s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   UNIFIED ICON SYSTEM (.dico)
   Premium Lucide stroke icons injected into existing <i> elements
   by assets/js/icons.js. The Font Awesome glyph is suppressed; the
   <i> keeps all its classes so existing size/colour/spacing rules
   continue to drive the icon (svg sizes to 1em → follows font-size).
   ================================================================ */
.dico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: -0.125em;
}
.dico::before, .dico::after { content: none !important; }
.dico > svg {
  width: 1em; height: 1em; flex-shrink: 0;
  stroke-width: 2;
  stroke: currentColor;
  transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .15s ease, color .15s ease;
}
.dico.dico-spin > svg { animation: dico-spin .9s linear infinite; }
@keyframes dico-spin { to { transform: rotate(360deg); } }

/* Premium micro-interaction — sidebar icons lift slightly on hover */
.nav-item-admin .nav-link:hover  .dico > svg,
.portal-nav-item .nav-link:hover .dico > svg { transform: scale(1.08); }
.nav-item-admin .nav-link.active .dico > svg,
.portal-nav-item .nav-link.active .dico > svg { transform: none; }

/* ── 2. Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
img[loading="lazy"] { background: #f1f5f9; }

/* ── 3. Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: #cbd5e1; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--da-primary); }
*                               { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ── 4. Animations ──────────────────────────────────────────────── */
.animate-fade-in-up {
  animation: fadeInUp .65s cubic-bezier(0.16,1,0.3,1) both;
  opacity: 0;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp .4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. Glassmorphism Navbar (public) ───────────────────────────── */
.glass {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Standard navbar gains a soft shadow once the page is scrolled */
.glass.nav-scrolled { box-shadow: 0 4px 20px rgba(15,23,42,.07); }

/* ── Transparent-over-hero navbar (home only) → glass on scroll ────
   Selectors are deliberately element+class (nav.…, img.…) so the
   longer, smoother transitions win over Tailwind's transition-*
   utilities on the same elements. */
nav.nav-transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .35s ease, backdrop-filter .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}
nav.nav-transparent.nav-scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(15,23,42,.07);
  box-shadow: 0 6px 28px rgba(15,23,42,.07);
}
/* Logo: white at the transparent top ONLY over a coloured hero
   (.nav-logo-hero); brand colours once scrolled. Transition both filter
   (colour swap) and transform (existing hover). */
img.nav-logo { transition: filter .35s ease, transform .3s ease; }
.nav-transparent:not(.nav-scrolled) .nav-logo-hero { filter: brightness(0) invert(1); }
/* Primary CTA stays visible over the green hero, reverts on scroll */
.nav-transparent:not(.nav-scrolled) .nav-cta {
  background: #0f172a !important;
  color: #fff !important;
}

/* ── 6. Certificate Status (public verify page) ─────────────────── */
.cert-status-valid   { border-left: 4px solid #10B981; }
.cert-status-expired { border-left: 4px solid #F59E0B; }
.cert-status-revoked { border-left: 4px solid #EF4444; }
.cert-status-pending { border-left: 4px solid #94a3b8; }

/* ── 7. Score Bars ──────────────────────────────────────────────── */
.score-bar  { height: 4px; border-radius: 9999px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.rank-gold  { background: linear-gradient(135deg,#FDE68A,#F59E0B); }
.rank-silver{ background: linear-gradient(135deg,#E2E8F0,#94A3B8); }
.rank-bronze{ background: linear-gradient(135deg,#FDBA74,#D97706); }

/* ── 8. Print ───────────────────────────────────────────────────── */
@media print {
  nav, footer, .no-print, .portal-sidebar, .portal-topbar { display: none !important; }
  .portal-main  { margin-left: 0 !important; }
  .print-card   { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
  body * { visibility: hidden !important; }
  #certificate-card, #certificate-card * { visibility: visible !important; }
  #certificate-card { position: fixed !important; inset: 0 !important; width: 100% !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
}


/* ================================================================
   PORTAL SYSTEM — Student & Teacher layouts
   ================================================================ */

/* ── P1. Sidebar ────────────────────────────────────────────────── */
.portal-sidebar {
  width: var(--da-sidebar-w);
  min-height: 100vh;
  background: var(--da-sidebar-bg);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1050;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.portal-sidebar::-webkit-scrollbar       { width: 3px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* Sidebar logo area */
.portal-sidebar-logo {
  padding: 1.375rem 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.portal-sidebar-logo .portal-brand-full {
  height: 28px;
  filter: brightness(0) invert(1);
  opacity: .88;
  max-width: 140px;
  object-fit: contain;
}
.portal-sidebar-portal-label {
  color: rgba(255,255,255,.3);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: .375rem;
}

/* Sidebar section label */
.portal-nav-label {
  color: rgba(255,255,255,.28);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 1.25rem 1.5rem .5rem;
}

/* Sidebar nav items */
.portal-nav-item .nav-link {
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: .82rem;
  padding: .575rem 1.5rem;
  border-radius: 0;
  transition: var(--da-transition);
  display: flex;
  align-items: center;
  gap: .625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.portal-nav-item .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.portal-nav-item .nav-link.active {
  color: #0f172a !important;
  background: var(--da-primary) !important;
  border-radius: 8px;
  margin: 2px .75rem;
  padding: .55rem .75rem;
}
.portal-nav-item .nav-link.active i { color: #0f172a !important; }
.portal-nav-item .nav-link i        { width: 18px; text-align: center; flex-shrink: 0; font-size: .9rem; }
.portal-nav-item .nav-link .nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: .58rem;
  padding: .1rem .45rem;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1.5;
}

/* Sidebar footer */
.portal-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

/* ── P2. Sidebar Mobile Overlay ─────────────────────────────────── */
.portal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1040;
  cursor: pointer;
  opacity: 0;
  transition: opacity .28s;
}

@media (max-width: 991.98px) {
  .portal-sidebar { transform: translateX(-100%); }
  .portal-sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 80px rgba(0,0,0,.5);
  }
  .portal-main { margin-left: 0 !important; }
  .portal-overlay { display: block; pointer-events: none; }
  .portal-overlay.visible { opacity: 1; pointer-events: auto; }
}

/* ── P3. Main Content Area ──────────────────────────────────────── */
.portal-main {
  margin-left: var(--da-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--da-bg);
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* ── P4. Topbar ─────────────────────────────────────────────────── */
.portal-topbar {
  background: #fff;
  border-bottom: 1px solid var(--da-border);
  padding: .8rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 999;
  flex-shrink: 0;
  min-height: var(--da-topbar-h);
}

/* ── P5. Page Body ──────────────────────────────────────────────── */
.portal-body { flex: 1; padding: 1.5rem; }

/* ════════════════════════════════════════════════════════════════
   P5b. COLLAPSIBLE SIDEBAR  (icons-only rail) — desktop only
   Toggled by adding .sb-c to <html>. Persisted in localStorage.
   ════════════════════════════════════════════════════════════════ */

/* ════ Unified dashboard brand — ALL roles (admin + portals) ════
   Expanded: full logo + collapse button.
   Collapsed: small collaps.png that morphs into an expand icon on hover;
   the whole brand becomes the click target to re-open the sidebar. */
.dash-brand {
  display:flex; align-items:center; gap:.625rem;
  padding:1rem 1.25rem; min-height:60px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative;
  pointer-events:none;            /* expanded: only the collapse btn reacts */
}
.dash-brand-full { height:30px; max-width:150px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; flex-shrink:0; }
.dash-brand-mark { display:none; }       /* shown only when collapsed */
.dash-collapse-btn {
  margin-left:auto; flex-shrink:0; pointer-events:auto;
  width:26px; height:26px; border-radius:7px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.7rem;
  transition:background .15s, color .15s;
}
.dash-collapse-btn:hover { background:rgba(255,255,255,.14); color:#fff; }

/* Footer profile link — base layout (used by teacher portal) */
.portal-footer-user { display:flex; align-items:center; gap:.625rem; text-decoration:none; padding:.5rem .625rem; border-radius:.5rem; transition:background .15s; width:100%; }
.portal-footer-user:hover { background:rgba(255,255,255,.06); }

/* Floating tooltip (collapsed mode) — shared with admin */
#sb-tip {
  position:fixed; z-index:9999; background:#1e293b; color:#fff;
  font-size:.75rem; font-weight:600; padding:.3rem .65rem; border-radius:.375rem;
  pointer-events:none; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.3);
  opacity:0; transition:opacity .1s ease;
}
#sb-tip.on { opacity:1; }

/* ── Collapsed state (desktop ≥992px only) ── */
@media (min-width: 992px) {
  html.sb-c .portal-sidebar { width: var(--da-sidebar-cw); }
  html.sb-c .portal-main    { margin-left: var(--da-sidebar-cw); }

  /* ── Unified brand: collapsed = morphing logo/expand icon ── */
  html.sb-c .dash-brand {
    justify-content:center; padding:1rem .5rem;
    cursor:pointer; pointer-events:auto;     /* whole brand re-opens sidebar */
  }
  html.sb-c .dash-brand-full   { display:none; }
  html.sb-c .dash-collapse-btn { display:none; }
  html.sb-c .dash-brand-mark {
    display:block; position:relative;
    width:30px; height:30px; flex-shrink:0;
  }
  .dash-brand-mark > * {
    position:absolute; inset:0;
    transition:opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
  }
  .dash-brand-icon {
    width:100%; height:100%; object-fit:contain;
    filter:brightness(0) invert(1);
  }
  .dash-brand-expand {
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.05rem;
    opacity:0; transform:scale(.7);
  }
  /* Hover morph — logo fades/scales out, expand icon fades/scales in */
  html.sb-c .dash-brand:hover .dash-brand-icon   { opacity:0; transform:scale(.7); }
  html.sb-c .dash-brand:hover .dash-brand-expand { opacity:1; transform:scale(1); }

  /* Section labels hidden, keep slim spacer */
  html.sb-c .portal-nav-label { opacity:0; max-height:0; padding-top:.4rem; padding-bottom:0; overflow:hidden; }

  /* Nav links → centered icons, no text */
  html.sb-c .portal-nav-item .nav-link { justify-content:center; gap:0; padding:0; height:40px; margin:2px .6rem; border-radius:10px; }
  html.sb-c .portal-nav-item .nav-link span { display:none; }
  html.sb-c .portal-nav-item .nav-link .nav-badge { display:none; }
  html.sb-c .portal-nav-item .nav-link.active { margin:2px .6rem; padding:0; height:40px; }
  html.sb-c .portal-nav-item .nav-link i { font-size:1rem; }

  /* Footer → centered avatar only */
  html.sb-c .portal-sidebar-footer { padding-left:.5rem; padding-right:.5rem; }
  html.sb-c .portal-footer-user { justify-content:center; padding:.625rem 0; gap:0; }
  html.sb-c .portal-footer-user .rounded-circle { width:38px !important; height:38px !important; }
  html.sb-c .portal-footer-info, html.sb-c .portal-footer-edit { display:none; }
  html.sb-c .portal-logout-text { display:none; }
  html.sb-c .portal-logout-btn { padding-left:0!important; padding-right:0!important; }
}

/* Collapse toggle never shows on mobile (hamburger handles it) */
@media (max-width: 991.98px) {
  .dash-collapse-btn { display:none; }
  .dash-brand-mark   { display:none; }
}

/* ── P6. Welcome Banner ─────────────────────────────────────────── */
.portal-welcome {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--da-card-radius);
  padding: 1.5rem 1.75rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.portal-welcome::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -3%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(1,238,156,.07);
  pointer-events: none;
}
.portal-welcome::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: 20%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(1,238,156,.05);
  pointer-events: none;
}
.portal-welcome .welcome-id-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .875rem;
  border-radius: 9999px;
  background: rgba(1,238,156,.14);
  border: 1px solid rgba(1,238,156,.28);
  color: var(--da-primary);
  font-size: .8rem;
  font-weight: 700;
  margin-top: .75rem;
}

/* ── P7. Stat Cards ─────────────────────────────────────────────── */
.portal-stat-card {
  background: #fff;
  border: 1px solid var(--da-border);
  border-radius: var(--da-card-radius);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  transition: var(--da-transition);
  height: 100%;
}
.portal-stat-card:hover {
  box-shadow: var(--da-shadow-md);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}
.portal-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.portal-stat-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.portal-stat-label { font-size: .78rem; color: #64748b; font-weight: 500; margin-top: .15rem; }

/* ── P8. Card / Panel ───────────────────────────────────────────── */
.portal-card {
  background: #fff;
  border: 1px solid var(--da-border);
  border-radius: var(--da-card-radius);
  overflow: hidden;
}
.portal-card-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--da-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.portal-card-header h6 { margin: 0; font-weight: 700; font-size: .875rem; color: #0f172a; }
.portal-card-body { padding: 1.25rem; }

/* ── P9. Table Wrapper ──────────────────────────────────────────── */
.portal-table-wrapper {
  background: #fff;
  border: 1px solid var(--da-border);
  border-radius: var(--da-card-radius);
  overflow: hidden;
}
.portal-table-header {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--da-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.portal-table-header h6 { margin: 0; font-weight: 700; font-size: .875rem; color: #0f172a; }

.portal-table .table { margin: 0; }
.portal-table .table thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #64748b;
  border-bottom: 2px solid var(--da-border);
  white-space: nowrap;
  padding: .75rem 1rem;
}
.portal-table .table tbody td {
  padding: .8rem 1rem;
  vertical-align: middle;
  font-size: .875rem;
  border-bottom-color: #f1f5f9;
}
.portal-table .table tbody tr { transition: background .12s; }
.portal-table .table tbody tr:hover { background: #fafbfc; }
.portal-table .table tbody tr:last-child td { border-bottom: none; }

/* Table toolbar (search + actions row) */
.portal-table-toolbar {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--da-border);
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  background: #fafbfc;
}
.portal-table-search {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  position: relative;
}
.portal-table-search input {
  width: 100%;
  padding: .475rem .75rem .475rem 2rem;
  border: 1px solid var(--da-border);
  border-radius: .5rem;
  font-size: .8rem;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.portal-table-search input:focus {
  border-color: var(--da-primary);
  box-shadow: 0 0 0 3px rgba(1,238,156,.12);
}
.portal-table-search .search-icon {
  position: absolute;
  left: .625rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .75rem;
  pointer-events: none;
}

/* ── P10. Badge System ──────────────────────────────────────────── */
.da-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .625rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.da-badge-active    { background: #d1fae5; color: #065f46; }
.da-badge-inactive  { background: #fee2e2; color: #991b1b; }
.da-badge-pending   { background: #fef9c3; color: #854d0e; }
.da-badge-approved  { background: #d1fae5; color: #065f46; }
.da-badge-rejected  { background: #fee2e2; color: #991b1b; }
.da-badge-valid     { background: #d1fae5; color: #065f46; }
.da-badge-expired   { background: #fef3c7; color: #92400e; }
.da-badge-revoked   { background: #fee2e2; color: #991b1b; }
.da-badge-draft     { background: #f1f5f9; color: #64748b; }
.da-badge-published { background: #dbeafe; color: #1d4ed8; }
.da-badge-info      { background: #e0f2fe; color: #0369a1; }

/* ── P11. Form System ───────────────────────────────────────────── */
.portal-form .form-control,
.portal-form .form-select {
  border-color: var(--da-border);
  border-radius: var(--da-input-radius);
  font-size: .875rem;
  padding: .575rem .875rem;
  transition: border-color .2s, box-shadow .2s;
  color: #0f172a;
}
.portal-form .form-control:focus,
.portal-form .form-select:focus {
  border-color: var(--da-primary);
  box-shadow: 0 0 0 3px rgba(1,238,156,.14);
  outline: none;
}
.portal-form .form-control::placeholder { color: #94a3b8; }
.portal-form .form-label {
  font-weight: 600;
  font-size: .8rem;
  color: #334155;
  margin-bottom: .375rem;
}
.portal-form-section {
  background: #fff;
  border: 1px solid var(--da-border);
  border-radius: var(--da-card-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.portal-form-section-title {
  font-weight: 700;
  font-size: .9rem;
  color: #0f172a;
  margin-bottom: 1.125rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.portal-form-section-title .step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--da-primary);
  color: #0f172a;
  font-size: .7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── P12. Buttons ───────────────────────────────────────────────── */
.btn-da-primary {
  background: var(--da-primary);
  color: #0f172a !important;
  border: none;
  font-weight: 700;
  border-radius: .5rem;
  transition: var(--da-transition);
}
.btn-da-primary:hover {
  background: var(--da-primary-dark);
  color: #0f172a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(1,238,156,.32);
}
.btn-da-primary:active { transform: scale(.98) !important; }

/* Small size override */
.btn-xs { padding: .2rem .5rem; font-size: .75rem; }

/* ── P13. Flash / Alert Cards ───────────────────────────────────── */
.portal-flash {
  border-radius: .75rem;
  border: 1px solid transparent;
  padding: .875rem 1.125rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  animation: fadeInUp .35s ease both;
  margin-bottom: 1rem;
}
.portal-flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.portal-flash-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.portal-flash-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.portal-flash-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* ── P14. Empty States ──────────────────────────────────────────── */
.portal-empty {
  text-align: center;
  padding: 3rem 1.5rem;
}
.portal-empty i {
  font-size: 2.25rem;
  display: block;
  margin-bottom: .875rem;
  color: #cbd5e1;
}
.portal-empty h5 {
  font-weight: 700;
  color: #64748b;
  font-size: .95rem;
  margin-bottom: .375rem;
}
.portal-empty p { font-size: .825rem; color: #94a3b8; margin: 0; }

/* ── P15. Avatar ────────────────────────────────────────────────── */
.da-avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--da-primary), var(--da-primary-dark));
  color: #0f172a;
}
.da-avatar-sm  { width: 32px; height: 32px; font-size: .75rem; }
.da-avatar-md  { width: 40px; height: 40px; font-size: .875rem; }
.da-avatar-lg  { width: 56px; height: 56px; font-size: 1.25rem; }
.da-avatar-xl  { width: 72px; height: 72px; font-size: 1.625rem; }

/* ── P16. Toast Notification System ────────────────────────────── */
#da-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.da-toast {
  background: #0f172a;
  color: #fff;
  padding: .825rem 1.125rem;
  border-radius: .875rem;
  font-size: .825rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .625rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  pointer-events: auto;
  animation: toastIn .32s cubic-bezier(.4,0,.2,1) both;
  max-width: 320px;
  min-width: 200px;
  line-height: 1.4;
}
.da-toast.da-toast-success { border-left: 3px solid var(--da-primary); }
.da-toast.da-toast-error   { border-left: 3px solid #ef4444; }
.da-toast.da-toast-warning { border-left: 3px solid #f59e0b; }
.da-toast.da-toast-info    { border-left: 3px solid #3b82f6; }
.da-toast.da-toast-out     { animation: toastOut .28s cubic-bezier(.4,0,.2,1) both; }
.da-toast i { font-size: .875rem; flex-shrink: 0; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(120%); } }

/* ── Shared Checklist (multi-select student picker, etc.) ───────── */
.da-checklist {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--da-border, #e2e8f0);
  border-radius: .625rem;
  background: #fff;
  scrollbar-width: thin;
}
.da-checklist-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: #94a3b8;
  font-size: .8rem;
}
.da-checklist-empty.da-checklist-error { color: #ef4444; }
.da-checklist-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .55rem .75rem;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.da-checklist-row:last-child { border-bottom: 0; }
.da-checklist-row:hover { background: #f8fafc; }
.da-checklist-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--da-primary, #01EE9C);
  flex-shrink: 0; cursor: pointer;
}
.da-checklist-name {
  font-size: .82rem;
  font-weight: 500;
  color: #1e293b;
  display: flex; align-items: center; gap: .4rem;
  min-width: 0;
}
.da-checklist-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: .1rem .4rem;
  border-radius: 5px;
  background: #f1f5f9;
  color: #64748b;
}
.da-checklist-tag-done { background: #d1fae5; color: #065f46; }

/* ── Premium Modal / Confirm Dialog (replaces native alert/confirm) ─ */
.da-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity .2s ease;
}
.da-modal-backdrop.da-modal-open { opacity: 1; }
.da-modal {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  overflow: hidden;
  transform: scale(.94) translateY(8px);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.da-modal-backdrop.da-modal-open .da-modal { transform: scale(1) translateY(0); }
.da-modal-body { padding: 1.5rem 1.5rem 1.25rem; text-align: center; }
.da-modal-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.35rem;
}
.da-modal-icon.is-danger  { background: #fee2e2; color: #dc2626; }
.da-modal-icon.is-warning { background: #fef3c7; color: #d97706; }
.da-modal-icon.is-success { background: #d1fae5; color: #059669; }
.da-modal-icon.is-info    { background: #dbeafe; color: #2563eb; }
.da-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .375rem;
}
.da-modal-text {
  font-size: .85rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}
.da-modal-actions {
  display: flex;
  gap: .625rem;
  padding: 0 1.5rem 1.5rem;
}
.da-modal-actions .da-modal-btn {
  flex: 1;
  padding: .6rem 1rem;
  border-radius: .625rem;
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s;
}
.da-modal-btn-cancel {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}
.da-modal-btn-cancel:hover { background: #f8fafc; }
.da-modal-btn-confirm { color: #fff; background: #0f172a; }
.da-modal-btn-confirm.is-danger  { background: #dc2626; }
.da-modal-btn-confirm.is-warning { background: #d97706; }
.da-modal-btn-confirm.is-success { background: #059669; }
.da-modal-btn-confirm:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .da-modal-actions { flex-direction: column-reverse; }
}

/* ── P17. List Group Enhancements ───────────────────────────────── */
.portal-list .list-group-item {
  border-color: #f1f5f9;
  padding: .875rem 1.25rem;
  transition: background .12s;
}
.portal-list .list-group-item:hover { background: #fafbfc; }

/* ── P18. Pagination ────────────────────────────────────────────── */
.da-pagination {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
}
.da-pagination a,
.da-pagination span {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--da-transition);
  border: 1px solid var(--da-border);
  color: #64748b;
  background: #fff;
}
.da-pagination a:hover { border-color: #94a3b8; color: #0f172a; }
.da-pagination .active, .da-pagination span.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

/* ── P19. Topbar Avatar Button ──────────────────────────────────── */
.topbar-avatar-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .625rem;
  border-radius: .625rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.topbar-avatar-btn:hover {
  background: #f8fafc;
  border-color: var(--da-border);
}

/* ── P20. Result Cards on public page ───────────────────────────── */
.result-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: .875rem;
  padding: 1rem;
  box-shadow: var(--da-shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.result-card:hover {
  box-shadow: var(--da-shadow-md);
  transform: translateY(-2px);
}

/* ── P21. Public Course Card Enhancement ────────────────────────── */
.course-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  color: #0f172a;
  font-size: .7rem;
  padding: .3rem .75rem;
  border-radius: 9999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ── P22. Footer Enhancement ────────────────────────────────────── */
.footer-link {
  transition: color .2s;
  text-decoration: none;
}
.footer-link:hover { color: var(--da-primary) !important; }

/* ── P23. Responsive Helpers ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .portal-body { padding: 1rem; }
  .portal-topbar { padding: .75rem 1rem; }
  .portal-card-body { padding: 1rem; }
  .portal-form-section { padding: 1rem; }
}


/* ================================================================
   v4.0 — PREMIUM ENHANCEMENT LAYER
   Additive only. Refines components without changing existing markup.
   ================================================================ */

/* ── V1. RTL / Persian typography ───────────────────────────────── */
[dir="rtl"], :lang(fa), :lang(ps) {
  font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif;
}
html[dir="rtl"] body, body[dir="rtl"] { font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif; }
/* Mirror directional spacing/icons in RTL */
[dir="rtl"] .portal-sidebar { left: auto; right: 0; }
[dir="rtl"] .portal-main    { margin-left: 0; margin-right: var(--da-sidebar-w); }
[dir="rtl"] .portal-nav-item .nav-link i { text-align: center; }
[dir="rtl"] .da-toast { left: 1.5rem; right: auto; }
@media (max-width: 991.98px) {
  [dir="rtl"] .portal-main { margin-right: 0 !important; }
  [dir="rtl"] .portal-sidebar { transform: translateX(100%); }
  [dir="rtl"] .portal-sidebar.open { transform: translateX(0); }
}

/* ── V2. Accessibility — visible keyboard focus everywhere ──────── */
:focus-visible {
  outline: 2px solid var(--da-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Don't show the ring for mouse clicks on buttons/inputs that already glow */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a.btn:focus-visible { outline-offset: 2px; }
/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── V3. Brand-consistent inputs (covers admin Bootstrap forms) ─── */
.form-control, .form-select {
  border-color: var(--da-border);
  border-radius: var(--da-input-radius);
  transition: border-color .18s, box-shadow .18s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--da-primary);
  box-shadow: var(--da-ring);
}
.input-group-sm > .form-control, .form-control-sm, .form-select-sm { border-radius: .5rem; }
.form-control::placeholder { color: #94a3b8; }

/* ── V4. Buttons — subtle premium motion (all Bootstrap buttons) ── */
.btn {
  border-radius: .625rem;
  font-weight: 600;
  transition: var(--da-transition);
}
.btn:active { transform: scale(.985); }
.btn-primary {
  background: var(--da-primary);
  border-color: var(--da-primary);
  color: #0f172a;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--da-primary-dark);
  border-color: var(--da-primary-dark);
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(1,238,156,.30);
}
.btn-dark { background: var(--da-dark); border-color: var(--da-dark); }
.btn-dark:hover { background: #1e293b; border-color: #1e293b; }
/* Loading state: <button class="is-loading"> */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(15,23,42,.25); border-top-color: #0f172a;
  animation: daSpin .6s linear infinite;
}
@keyframes daSpin { to { transform: rotate(360deg); } }

/* ── V5. Premium Bootstrap modals ───────────────────────────────── */
.modal-content {
  border: none;
  border-radius: 1.1rem;
  box-shadow: var(--da-shadow-lg);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--da-border);
  padding: 1.1rem 1.35rem;
}
.modal-header .modal-title { font-weight: 700; font-size: 1rem; color: #0f172a; }
.modal-body   { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--da-border); padding: 1rem 1.35rem; }
.modal-backdrop.show { opacity: .4; }
.modal.fade .modal-dialog { transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s; transform: translateY(12px) scale(.99); }
.modal.show .modal-dialog { transform: none; }

/* ── V6. Premium dropdowns ──────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--da-border);
  border-radius: .85rem;
  box-shadow: var(--da-shadow-lg);
  padding: .35rem;
  font-size: .85rem;
  animation: daDropIn .16s ease both;
}
@keyframes daDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item {
  border-radius: .55rem;
  padding: .5rem .75rem;
  font-weight: 500;
  display: flex; align-items: center; gap: .55rem;
}
.dropdown-item:active { background: var(--da-primary); color: #0f172a; }
.dropdown-item i { width: 16px; text-align: center; color: #94a3b8; }
.dropdown-item:hover i, .dropdown-item:active i { color: inherit; }
.dropdown-divider { margin: .35rem .25rem; border-color: #f1f5f9; }

/* ── V7. Card hover lift utility ────────────────────────────────── */
.da-card-hover { transition: var(--da-transition); }
.da-card-hover:hover { transform: translateY(-3px); box-shadow: var(--da-shadow-md); border-color: #cbd5e1; }
.card { border-color: var(--da-border); border-radius: var(--da-card-radius); }

/* ── V8. Skeleton loaders ───────────────────────────────────────── */
.da-skeleton {
  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: daShimmer 1.3s ease infinite;
  border-radius: .5rem;
}
@keyframes daShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.da-skeleton-text { height: .8rem; margin-bottom: .5rem; }
.da-skeleton-title { height: 1.1rem; width: 55%; margin-bottom: .75rem; }

/* ── V9. Inline spinner ─────────────────────────────────────────── */
.da-spinner {
  display: inline-block; width: 1.05rem; height: 1.05rem;
  border: 2px solid rgba(15,23,42,.18); border-top-color: var(--da-primary);
  border-radius: 50%; animation: daSpin .6s linear infinite; vertical-align: -2px;
}

/* ── V10. Badge with status dot ─────────────────────────────────── */
.da-badge .da-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .4rem; opacity: .8; }
[dir="rtl"] .da-badge .da-dot { margin-right: 0; margin-left: .4rem; }

/* ── V11. Refined pagination active = brand ─────────────────────── */
.pagination .page-item.active .page-link {
  background: var(--da-dark);
  border-color: var(--da-dark);
  color: #fff;
}
.pagination .page-link { color: #475569; border-radius: .5rem; margin: 0 2px; border-color: var(--da-border); }
.pagination .page-link:hover { color: #0f172a; background: #f1f5f9; }
.pagination .page-link:focus { box-shadow: var(--da-ring); }

/* ── V12. Premium empty state (upgrade of P14) ──────────────────── */
.portal-empty .da-empty-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem; font-size: 1.5rem; color: #94a3b8;
}

/* ================================================================
   PUBLIC LAYOUT SPACING SYSTEM
   One consistent rhythm across every public page.
   ─────────────────────────────────────────────────────────────────
   .page-shell          — root <main> wrapper (bg, flex column)
   .page-container      — max-width + horizontal padding (default 5xl)
   .page-container-wide — max-width 7xl (home, programs, team grid)
   .page-container-narrow — max-width 3xl (verify, faq)
   .page-top            — top entry space after navbar
   .page-section        — internal section rhythm
   ================================================================ */
.page-shell {
  flex: 1;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.page-container {
  width: 100%;
  max-width: 72rem;        /* ~5xl = 1024px inner */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .page-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .page-container { padding-left: 2rem; padding-right: 2rem; }
}
.page-container-wide {
  width: 100%;
  max-width: 88rem;        /* ~7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .page-container-wide { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .page-container-wide { padding-left: 2rem; padding-right: 2rem; }
}
.page-container-narrow {
  width: 100%;
  max-width: 48rem;        /* ~3xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
/* Top entry — same gap after navbar on every page */
.page-top {
  padding-top: 2.5rem;     /* 40px */
  padding-bottom: 3rem;    /* 48px */
}
@media (min-width: 768px) {
  .page-top { padding-top: 3.5rem; padding-bottom: 4rem; }
}
/* Section — internal rhythm between sections */
.page-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .page-section { padding-top: 4rem; padding-bottom: 4rem; }
}
/* Hero variant — slightly taller for visual hierarchy */
.page-section-hero {
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .page-section-hero { padding-top: 3.5rem; padding-bottom: 3rem; }
}

/* ================================================================
   PUBLIC PAGE PRIMITIVES — unified premium system (Apple × Notion)
   Shared heading / button / card / link classes so every public
   (Tailwind) page speaks ONE design language. Purely additive: works
   next to Tailwind utilities, safe to roll out page-by-page.
   ================================================================ */

/* — Section heading block — */
.da-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #01AA6D;                 /* darker brand green → readable on white */
  margin-bottom: .85rem;
}
.da-title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #0f172a;
  margin: 0;
}
.da-title .da-accent { color: #01EE9C; }
.da-subtitle {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #64748b;
  margin: .85rem 0 0;
  max-width: 42rem;
}
@media (min-width: 768px) { .da-subtitle { font-size: 1.15rem; } }

/* — Buttons (pill, premium) — */
.da-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 800;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: .9rem 1.7rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform .15s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.da-btn:active { transform: scale(.96); }
.da-btn-lg { padding: 1.15rem 2.3rem; font-size: 1.0625rem; }
.da-btn-primary {
  background: #01EE9C; color: #0f172a;
  box-shadow: 0 14px 32px -10px rgba(1,238,156,.55);
}
.da-btn-primary:hover { background: #01d68c; color: #0f172a; }
.da-btn-outline {
  background: #fff; color: #1e293b; border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.da-btn-outline:hover { border-color: #01EE9C; background: rgba(1,238,156,.06); color: #0f172a; }
/* Dark + white variants — for use on the green hero (where the green
   primary button would disappear into the background). */
.da-btn-dark {
  background: #0f172a; color: #fff;
  box-shadow: 0 16px 34px -12px rgba(15,23,42,.55);
}
.da-btn-dark:hover { background: #1e293b; color: #fff; }
.da-btn-white {
  background: #fff; color: #0f172a;
  box-shadow: 0 12px 26px -12px rgba(15,23,42,.3);
}
.da-btn-white:hover { background: #f1f5f9; color: #0f172a; }
.da-btn i { transition: transform .18s ease; }
.da-btn-primary:hover i, .da-btn-dark:hover i { transform: translateX(3px); }

/* — “View all →” style arrow link — */
.da-link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; color: #0f172a; text-decoration: none;
  transition: color .15s ease;
}
.da-link-arrow:hover { color: #01EE9C; }
.da-link-arrow i, .da-link-arrow span { transition: transform .18s ease; }
.da-link-arrow:hover i, .da-link-arrow:hover span { transform: translateX(4px); }

/* — Unified surface card — */
.da-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 2rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s ease;
}
.da-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px -22px rgba(15,23,42,.28);
  border-color: #e2e8f0;
}

/* ================================================================
   HERO CERTIFICATE MOCKUP (landing) — self-contained, on-brand
   A miniature of the real certificate used as the hero's right-side
   visual, with floating accent pills (Skillshare-style).
   ================================================================ */
.da-hero-visual { position: relative; width: 100%; max-width: 470px; margin: 0 auto; }
.da-cert-mock {
  position: relative;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  box-shadow: 0 34px 64px -28px rgba(15,23,42,.4), 0 10px 24px -14px rgba(15,23,42,.22);
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.da-hero-visual:hover .da-cert-mock { transform: rotate(0deg) translateY(-4px); }
.da-cert-stripe { display: flex; height: 8px; }
.da-cert-stripe::before { content: ''; flex: 1; background: #01EE9C; }
.da-cert-stripe::after  { content: ''; flex: 1; background: #01AA6D; }
.da-cert-inner { padding: 1.4rem 1.7rem 1.6rem; text-align: center; }
.da-cert-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.da-cert-logo { height: 22px; width: auto; object-fit: contain; }
.da-cert-verify {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: .25rem .55rem; border-radius: 9999px;
}
.da-cert-presents { font-size: .72rem; color: #94a3b8; margin: 0 0 .15rem; }
.da-cert-type { font-size: 1.05rem; font-weight: 900; color: #0f172a; letter-spacing: -.01em; margin: 0 0 .7rem; }
.da-cert-rule { width: 44px; height: 3px; border-radius: 3px; background: #01EE9C; margin: 0 auto .85rem; }
.da-cert-awarded { font-size: .72rem; color: #94a3b8; margin: 0 0 .25rem; }
.da-cert-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.55rem; font-weight: 700; color: #0f172a; line-height: 1.1; margin-bottom: .35rem;
}
.da-cert-course { font-size: .8rem; font-weight: 700; color: #475569; margin: 0 0 1.2rem; }
.da-cert-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.da-cert-sig, .da-cert-idblock { flex: 1; min-width: 0; }
.da-cert-idblock { text-align: right; }
.da-cert-sig-line { height: 1px; background: #cbd5e1; margin-bottom: .3rem; }
.da-cert-cap { font-size: .58rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; display: block; }
.da-cert-id-val { font-size: .7rem; font-weight: 800; color: #0f172a; font-family: ui-monospace, Menlo, monospace; }
.da-cert-seal {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, #01EE9C, #01AA6D);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: 0 7px 16px -5px rgba(1,170,109,.65);
}
/* Floating accent pills */
.da-float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid #eef2f7;
  box-shadow: 0 14px 30px -12px rgba(15,23,42,.3);
  padding: .6rem .85rem; border-radius: .85rem;
  font-size: .78rem; font-weight: 800; color: #0f172a; white-space: nowrap;
}
.da-float i { color: #01AA6D; }
.da-float-1 { top: 12%; left: -1.4rem; animation: daFloatA 5s ease-in-out infinite; }
.da-float-2 { bottom: 13%; right: -1.2rem; animation: daFloatB 6s ease-in-out infinite; }
@keyframes daFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes daFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (max-width: 540px) {
  .da-float-1 { left: -.2rem; } .da-float-2 { right: -.2rem; }
  .da-float { font-size: .72rem; padding: .5rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .da-float-1, .da-float-2 { animation: none; }
}

/* ================================================================
   TEAM MEMBER SHARED COMPONENT SYSTEM  (.tmem-*)
   Used by: pages/team.php  +  pages/team-profile.php
   ================================================================ */

/* ── Base card ─────────────────────────────────────────────────── */
.tmem-card {
  background: #fff;
  border: 1px solid var(--da-border);
  border-radius: 1.125rem;
  overflow: hidden;
}

/* ── Grid member card (team listing page) ──────────────────────── */
.tmem-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
  text-decoration: none;
  height: 100%;
  border-radius: 1.125rem;
  border: 1px solid var(--da-border);
  background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tmem-member:hover {
  border-color: var(--da-primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15,23,42,.09);
}
.tmem-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
  border: 3px solid #f1f5f9;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.tmem-avatar img { width:100%;height:100%;object-fit:cover;object-position:top; }
.tmem-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--da-primary), var(--da-secondary));
  color: #0f172a;
}
.tmem-name {
  font-size: .975rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: .3rem;
  transition: color .15s;
}
.tmem-member:hover .tmem-name { color: #059669; }
.tmem-position {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #94a3b8;
}

/* ── Profile label & info rows ─────────────────────────────────── */
.tmem-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94a3b8;
  display: block;
  margin-bottom: .625rem;
}
.tmem-info-row {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.tmem-info-row:last-child { border-bottom: 0; }
.tmem-info-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .78rem;
  color: #64748b;
}

/* ── Social link button ────────────────────────────────────────── */
.tmem-social {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: .625rem;
  border: 1px solid var(--da-border);
  font-size: .8rem;
  font-weight: 700;
  color: #475569;
  text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
  background: #fff;
  width: 100%;
}
.tmem-social:hover {
  border-color: var(--da-primary);
  color: #0f172a;
  background: #f0fdf9;
}
.tmem-social .tmem-social-ext { margin-left: auto; color: #cbd5e1; font-size: .7rem; }

/* ── Hero photo frame (profile page) ──────────────────────────── */
.tmem-hero-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 2px solid var(--da-border);
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
  flex-shrink: 0;
  background: #f1f5f9;
}
.tmem-hero-photo img { width:100%;height:100%;object-fit:cover;object-position:top; }

/* ── V12a. Dashboard breadcrumbs ────────────────────────────────── */
.da-breadcrumb{
  display:flex;align-items:center;gap:0;overflow:hidden;min-width:0;max-width:100%;
}
.da-breadcrumb__home{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:.375rem;flex-shrink:0;
  color:#94a3b8;font-size:.72rem;transition:color .15s,background .15s;
  text-decoration:none;
}
.da-breadcrumb__home:hover{color:#475569;background:#f1f5f9;}
.da-breadcrumb__sep{
  color:#cbd5e1;font-size:.6rem;margin:0 .3rem;flex-shrink:0;line-height:1;
}
.da-breadcrumb__link{
  color:#94a3b8;font-size:.775rem;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:color .15s;
  overflow:hidden;text-overflow:ellipsis;
}
.da-breadcrumb__link:hover{color:#475569;}
.da-breadcrumb__current{
  color:#1e293b;font-size:.775rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Responsive: shrink middle crumbs on mobile */
@media(max-width:575.98px){
  .da-breadcrumb__link.da-bc-hide-mobile{display:none;}
  .da-breadcrumb__sep.da-bc-hide-mobile{display:none;}
}

/* ── V12b. "Back" button — matches the course-card Enroll button ── */
.da-back, .da-back-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:700;color:#0f172a;
  background:#f8fafc;border:none;
  padding:.375rem 1rem .375rem .375rem;border-radius:100px;   /* matches Enroll py-1.5 pl-4 pr-1.5 */
  text-decoration:none;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.da-back i, .da-back-ghost i{
  width:1.5rem;height:1.5rem;border-radius:50%;        /* matches Enroll w-6 h-6 */
  background:#fff;color:#0f172a;font-size:.72rem;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.da-back:hover, .da-back-ghost:hover{background:var(--da-primary);color:#0f172a}
.da-back:hover i, .da-back-ghost:hover i{background:#0f172a;color:#fff}
.da-back:active, .da-back-ghost:active{transform:scale(.97)}
.da-back:focus-visible, .da-back-ghost:focus-visible{outline:2px solid var(--da-primary);outline-offset:2px}
[dir="rtl"] .da-back i, [dir="rtl"] .da-back-ghost i{transform:scaleX(-1)}

/* ── V13. Misc polish ───────────────────────────────────────────── */
.da-divider { height: 1px; background: var(--da-border); border: 0; margin: 1.25rem 0; }
hr { border-color: var(--da-border); opacity: 1; }
.da-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
  padding: .12rem .4rem; border: 1px solid var(--da-border); border-bottom-width: 2px;
  border-radius: .35rem; background: #f8fafc; color: #475569;
}
::selection { background: rgba(1,238,156,.22); color: #0f172a; }
.text-da-primary { color: var(--da-primary) !important; }
.bg-da-primary   { background: var(--da-primary) !important; color: #0f172a !important; }
a { transition: color .15s; }

/* ================================================================
   PUBLIC UNIFIED PRIMITIVES — v4.1
   One design language for every public page. Additive; pairs with
   the existing .page-* / .da-* system. Roll out page-by-page.
   ================================================================ */

/* ── Page header block (eyebrow + title + subtitle) ─────────────── */
.da-page-head { margin-bottom: 2.25rem; }
@media (min-width: 768px) { .da-page-head { margin-bottom: 3rem; } }
.da-page-head--center { text-align: center; }
.da-page-head--center .da-subtitle { margin-left: auto; margin-right: auto; }
.da-page-head .da-title { margin: 0; }
.da-page-head .da-eyebrow { margin-bottom: .75rem; }

/* ── Filter chips (category / tab pills) ────────────────────────── */
.da-chip-group {
  display: flex; flex-wrap: wrap; gap: .625rem;
}
.da-chip-group--center { justify-content: center; }
.da-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.15rem;
  border-radius: 9999px;
  font-size: .85rem; font-weight: 700; line-height: 1;
  color: #475569; background: #f1f5f9;
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: var(--da-transition);
}
.da-chip:hover { background: #e2e8f0; color: #0f172a; }
.da-chip.is-active, .da-chip[aria-current="true"] {
  background: #0f172a; color: #fff;
  box-shadow: 0 8px 20px -10px rgba(15,23,42,.5);
}

/* ── Public form system ─────────────────────────────────────────── */
.da-form { display: block; }
.da-form-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  box-shadow: var(--da-shadow-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.da-form-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.5rem;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
}
.da-form-head h2, .da-form-head h3 {
  margin: 0; font-size: 1rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em;
}
.da-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; flex-shrink: 0;
  border-radius: 9999px; background: var(--da-primary); color: #0f172a;
  font-size: .8rem; font-weight: 900;
}
.da-form-body { padding: 1.5rem; }
@media (max-width: 575.98px) {
  .da-form-head { padding: 1rem 1.1rem; }
  .da-form-body { padding: 1.15rem; }
}

/* Field grid — single column → two columns on tablet+ */
.da-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) { .da-grid-2 { grid-template-columns: 1fr 1fr; } }
.da-col-full { grid-column: 1 / -1; }

.da-field { display: flex; flex-direction: column; min-width: 0; }
.da-label {
  font-size: .82rem; font-weight: 700; color: #334155;
  margin-bottom: .45rem; line-height: 1.3;
}
.da-label .da-req { color: #ef4444; margin-left: .15rem; font-weight: 800; }

.da-input, .da-select, .da-textarea {
  width: 100%;
  border: 1px solid var(--da-border);
  border-radius: .75rem;
  padding: .72rem .9rem;
  font-size: .9rem; font-family: inherit; color: #0f172a;
  background: #fff;
  transition: border-color .18s, box-shadow .18s, background .18s;
  outline: none;
}
.da-input::placeholder, .da-textarea::placeholder { color: #94a3b8; }
.da-input:focus, .da-select:focus, .da-textarea:focus {
  border-color: var(--da-primary);
  box-shadow: var(--da-ring);
}
.da-input:hover:not(:focus), .da-select:hover:not(:focus), .da-textarea:hover:not(:focus) {
  border-color: #cbd5e1;
}
.da-textarea { resize: vertical; min-height: 5.25rem; }
.da-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  padding-right: 2.4rem;
}
[dir="rtl"] .da-select { background-position: left .85rem center; padding-right: .9rem; padding-left: 2.4rem; }
.da-help { font-size: .76rem; color: #94a3b8; margin-top: .4rem; line-height: 1.4; }
/* Invalid state hook (optional, set .is-invalid on the control) */
.da-input.is-invalid, .da-select.is-invalid, .da-textarea.is-invalid {
  border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,.14);
}

/* ── Public alerts (form errors / success summaries) ────────────── */
.da-alert {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  font-size: .875rem; line-height: 1.5;
  margin-bottom: 1.25rem;
}
.da-alert i { font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.da-alert-title { font-weight: 800; margin: 0 0 .2rem; }
.da-alert ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.da-alert-error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.da-alert-error i { color: #ef4444; }
.da-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.da-alert-success i { color: #16a34a; }
.da-alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.da-alert-info i  { color: #3b82f6; }

/* ── CTA band (conversion sections) ─────────────────────────────── */
.da-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 2rem;
  padding: 2.75rem 1.75rem;
  text-align: center;
  color: #fff;
}
@media (min-width: 768px) { .da-cta { padding: 3.75rem 3rem; } }
.da-cta::before {
  content: ''; position: absolute; top: -45%; right: -10%;
  width: 22rem; height: 22rem; border-radius: 50%;
  background: rgba(1,238,156,.10); pointer-events: none;
}
.da-cta > * { position: relative; z-index: 1; }
.da-cta h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .85rem;
}
.da-cta p {
  color: #94a3b8; font-size: 1.0625rem; line-height: 1.6;
  max-width: 36rem; margin: 0 auto 1.75rem;
}
.da-cta .da-cta-actions {
  display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center;
}