@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Brand Identity Fonts - Local System Fallbacks & CDN */
@font-face {
  font-family: 'Hacen Algeria Hd';
  src: local('Hacen Algeria Hd'), local('Hacen-Algeria-Hd'), local('Hacen Algeria Heading'), local('Hacen Algeria'),
    url('https://db.onlinewebfonts.com/t/5d049ea9207da8a06caa1a61779224dc.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/5d049ea9207da8a06caa1a61779224dc.woff') format('woff'),
    url('https://db.onlinewebfonts.com/t/5d049ea9207da8a06caa1a61779224dc.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Final OTP screen overrides: kept last to isolate it from legacy card/form rules. */
#view-otp.auth-container {
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: clamp(1rem, 3vh, 2rem) auto !important;
  padding: 0 0.75rem !important;
  box-sizing: border-box !important;
}

#view-otp .otp-card {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: clamp(1.75rem, 4vw, 2.4rem) !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(30, 67, 129, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 42px rgba(24, 59, 112, 0.1) !important;
  box-sizing: border-box !important;
}

#view-otp .otp-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #1e4381, #3499cc, #1e4381);
}

#view-otp .otp-card:hover {
  transform: none !important;
  box-shadow: 0 16px 42px rgba(24, 59, 112, 0.1) !important;
}

#view-otp .otp-card > :not(.otp-watermark) {
  position: relative;
  z-index: 1;
}

#view-otp .otp-security-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 1rem !important;
  color: #1e4381 !important;
  background: #eef6fb !important;
  border: 1px solid #d9eaf5 !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
}

#view-otp .otp-watermark {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  bottom: -30px !important;
  left: -40px !important;
  width: 250px !important;
  height: auto !important;
  opacity: 0.035 !important;
  pointer-events: none !important;
}

#view-otp .otp-title {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 0.65rem !important;
  padding: 0 !important;
  color: #172f5b !important;
  border: 0 !important;
  font-size: clamp(1.25rem, 4vw, 1.55rem) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

#view-otp .otp-description {
  width: min(100%, 390px) !important;
  margin: 0 auto !important;
  color: #60708a !important;
  font-size: 0.92rem !important;
  line-height: 1.8 !important;
  text-align: center !important;
}

#view-otp .otp-mail-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0.75rem auto 0 !important;
  padding: 0.45rem 0.7rem !important;
  gap: 0.4rem !important;
  color: #718096 !important;
  background: #f7f9fc !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

#view-otp .otp-mail-note i {
  flex: 0 0 auto !important;
  color: #3499cc !important;
  font-size: 0.85rem !important;
}

#view-otp #otp-inputs-wrapper {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 390px) !important;
  margin: 1.5rem auto !important;
  gap: clamp(0.35rem, 1.4vw, 0.6rem) !important;
  direction: ltr !important;
}

html[dir="rtl"] #view-otp #otp-inputs-wrapper input.otp-input,
#view-otp #otp-inputs-wrapper input.otp-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #14294e !important;
  background: #f8fbff !important;
  border: 2px solid #dce6f2 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 56px !important;
  text-align: center !important;
  text-indent: 0 !important;
  direction: ltr !important;
  appearance: none !important;
}

#view-otp #otp-inputs-wrapper input.otp-input:focus {
  color: #1e4381 !important;
  background: #ffffff !important;
  border-color: #3499cc !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(52, 153, 204, 0.14) !important;
  transform: translateY(-2px) !important;
}

#view-otp .otp-verify-button,
#view-otp .otp-resend-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 390px) !important;
  min-height: 48px !important;
  margin-inline: auto !important;
  border-radius: 11px !important;
  text-align: center !important;
}

#view-otp .otp-verify-button {
  margin-top: 0 !important;
  gap: 0.55rem !important;
}

#view-otp .otp-resend-button {
  margin-top: 0.7rem !important;
  gap: 0.45rem !important;
  color: #1e4381 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  #view-otp.auth-container {
    margin: 0.75rem auto !important;
    padding: 0 0.35rem !important;
  }

  #view-otp .otp-card {
    padding: 1.4rem 0.9rem 1.1rem !important;
    border-radius: 18px !important;
  }

  #view-otp .otp-security-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 0.8rem !important;
    font-size: 1.35rem !important;
  }

  #view-otp .otp-description {
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
  }

  #view-otp .otp-mail-note {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.7rem !important;
  }

  #view-otp #otp-inputs-wrapper {
    width: 100% !important;
    margin: 1.25rem auto !important;
    gap: clamp(0.28rem, 1.8vw, 0.48rem) !important;
  }

  html[dir="rtl"] #view-otp #otp-inputs-wrapper input.otp-input,
  #view-otp #otp-inputs-wrapper input.otp-input {
    height: 54px !important;
    border-radius: 11px !important;
    font-size: 1.35rem !important;
    line-height: 54px !important;
  }
}

@media (max-width: 360px) {
  #view-otp .otp-card {
    padding-inline: 0.7rem !important;
  }

  #view-otp #otp-inputs-wrapper {
    gap: 0.22rem !important;
  }

  html[dir="rtl"] #view-otp #otp-inputs-wrapper input.otp-input,
  #view-otp #otp-inputs-wrapper input.otp-input {
    height: 48px !important;
    font-size: 1.2rem !important;
    line-height: 48px !important;
  }
}

@font-face {
  font-family: 'Hacen Algeria Bd';
  src: local('Hacen Algeria Bd'), local('Hacen-Algeria-Bd'), local('Hacen Algeria Bold'), local('Hacen Algeria');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hacen Beirut Light';
  src: local('Hacen Beirut Light'), local('Hacen-Beirut-Light'), local('Hacen Beirut Lt'), local('Hacen Beirut');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light Theme - Official Hayat Fund Palette */
  --bg-color: #f3f7fb;
  /* Elegant light gray-blue background */
  --surface-color: #ffffff;
  --surface-hover: #f8fafc;
  --text-primary: #0f172a;
  /* Slate 900 for modern feel */
  --text-secondary: #334155;
  /* Slate 700 */
  --text-muted: #64748b;
  /* Slate 500 */
  --border-color: rgba(30, 67, 129, 0.08);
  /* Softer and modern border tone */

  --primary-color: #1E4381;
  --primary-rgb: 30, 67, 129;
  --primary-dark: #122953;
  --primary-glow: rgba(30, 67, 129, 0.08);

  --secondary-color: #3499CC;
  /* Official Medium Blue */
  --secondary-glow: rgba(52, 153, 204, 0.08);

  --accent-color: #3499CC;
  /* Official Teal/Sky Blue */
  --accent-glow: rgba(52, 153, 204, 0.08);

  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --success-color: #10b981;

  --font-title: 'Hacen Algeria Hd', 'Almarai', sans-serif;
  --font-arabic: 'Hacen Algeria Bd', 'Cairo', 'Almarai', sans-serif;
  --font-latin: 'Hacen Beirut Light', 'Outfit', sans-serif;
  --font-formal: 'Amiri', serif;

  /* Glassmorphism settings */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);
  --card-glow: rgba(30, 67, 129, 0.02);

  --shadow-sm: 0 2px 8px rgba(30, 67, 129, 0.03);
  --shadow-md: 0 10px 30px rgba(30, 67, 129, 0.05);
  --shadow-lg: 0 20px 40px rgba(30, 67, 129, 0.08);
  --shadow-premium: 0 30px 60px -15px rgba(30, 67, 129, 0.12), 0 4px 20px rgba(30, 67, 129, 0.02);

  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-xl: 100px;
  /* Premium pill buttons */

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-premium: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  /* Dark Theme adaptation using corporate dark tones */
  --bg-color: #0b0f19;
  --surface-color: #121826;
  --surface-hover: #1b2336;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border-color: rgba(255, 255, 255, 0.06);

  --primary-color: #4f78e0;
  --primary-dark: #37549c;
  --primary-glow: rgba(79, 120, 224, 0.15);

  --secondary-color: #35a3e0;
  --secondary-glow: rgba(53, 163, 224, 0.15);

  --accent-color: #5bb2d4;

  /* Glassmorphism settings dark */
  --glass-bg: rgba(18, 24, 38, 0.75);
  --glass-border: rgba(255, 255, 255, 0.05);
  --card-glow: rgba(255, 255, 255, 0.01);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-premium: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-arabic);
  background-color: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  direction: rtl;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
}

html[lang="en"] body,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6 {
  font-family: var(--font-latin), sans-serif;
}

input,
select,
textarea,
.latin-text {
  font-family: var(--font-latin), var(--font-arabic);
}

/* Header & Official Navigation bar */
header {
  background-color: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.6rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(34, 57, 121, 0.04);
  transition: background-color var(--transition-premium), border-color var(--transition-premium), box-shadow var(--transition-premium);
}


[data-theme="dark"] header {
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Desktop-only elements */
.header-desktop-only {
  display: flex;
}

/* Visitor nav - desktop only */
.visitor-nav-menu {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-right: auto;
  margin-left: 1.5rem;
}

.visitor-nav-menu .nav-link {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-xl);
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.visitor-nav-menu .nav-link.active {
  color: var(--primary-color);
  background-color: var(--primary-glow);
  border-color: rgba(34, 57, 121, 0.05);
  font-weight: 700;
}

.visitor-nav-menu .nav-link:hover:not(.active) {
  color: var(--primary-color);
  background-color: var(--surface-hover);
  border-color: var(--border-color);
}


.official-logo-img {
  height: 52px;
  object-fit: contain;
  transition: transform var(--transition-premium);
  filter: drop-shadow(0 4px 10px rgba(34, 57, 121, 0.06));
}


.logo-text h1 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.logo-text span {
  font-size: 0.72rem;
  color: var(--secondary-color);
  font-weight: 700;
  letter-spacing: 0.2px;
  display: block;
  margin-top: 0.15rem;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#user-display-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

#btn-logout {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  width: auto;
  display: inline-flex;
}

.btn-dropdown-item:hover {
  background: var(--surface-hover) !important;
  color: var(--primary-color) !important;
}

[data-theme="dark"] .btn-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
}

/* Utility buttons */
.btn-icon {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.btn-icon:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#btn-lang-toggle {
  display: none !important;
}

@media (max-width: 768px) {
  .header-desktop-only {
    display: none !important;
  }
}

.btn-icon:hover,
#btn-header-inbox:hover,
#btn-header-my-courses:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 67, 129, 0.25);
}

#btn-header-profile-menu:hover i {
  color: white !important;
}

.btn-icon:active {
  transform: scale(0.95);
}

/* Rounded Pill Corporate Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  border: none;
  padding: 0.75rem 2.25rem;
  border-radius: var(--border-radius-xl);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all var(--transition-premium);
  box-shadow: 0 4px 14px rgba(14, 117, 175, 0.2);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 22px rgba(14, 117, 175, 0.3), 0 4px 12px rgba(34, 57, 121, 0.15);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}

.btn-primary:disabled {
  background: var(--border-color) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  padding: 0.75rem 2.25rem;
  border-radius: var(--border-radius-xl);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all var(--transition-premium);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 18px var(--primary-glow);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}

.btn-secondary:disabled {
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
  background-color: transparent !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-danger-outline {
  background-color: transparent;
  color: var(--danger-color);
  border: 1.5px solid var(--danger-color);
  padding: 0.75rem 2.25rem;
  border-radius: var(--border-radius-xl);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all var(--transition-premium);
}

.btn-danger-outline:hover:not(:disabled) {
  background-color: var(--danger-color);
  color: white;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.15);
}

.btn-danger-outline:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}


.wizard-buttons-wrapper {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.wizard-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Main Container & Layout */
main {
  flex: 1;
  max-width: 100%;
  width: 100%;
  margin: 2.5rem auto;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
}

.view-section {
  display: none;
}

.view-section.active {
  display: block;
  animation: scaleIn var(--transition-premium);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Corporate Cards */
.card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-premium), box-shadow var(--transition-premium), border-color var(--transition-premium), background-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 10px 30px var(--card-glow);
  border-color: rgba(14, 117, 175, 0.15);
}

.card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 2.5px solid var(--border-color);
  padding-bottom: 0.75rem;
  transition: border-color var(--transition-normal);
}

.card:hover .card-title {
  border-bottom-color: var(--secondary-color);
}


/* Inputs with inner icons prefix/suffix */
.input-with-icon .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

[dir="rtl"] .input-with-icon .form-control {
  padding-right: 2.75rem !important;
  padding-left: 2.75rem !important;
}

[dir="ltr"] .input-with-icon .form-control {
  padding-left: 2.75rem !important;
  padding-right: 2.75rem !important;
}

.input-prefix-icon {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: var(--primary-color) !important;
  opacity: 0.85;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

[dir="rtl"] .input-prefix-icon {
  right: 1.1rem;
  left: auto;
}

[dir="ltr"] .input-prefix-icon {
  left: 1.1rem;
  right: auto;
}

.input-wrapper:focus-within .input-prefix-icon {
  color: var(--secondary-color) !important;
  opacity: 1 !important;
}

.toggle-password-visibility {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: var(--primary-color) !important;
  opacity: 0.85;
  cursor: pointer;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

[dir="rtl"] .toggle-password-visibility {
  left: 1.1rem;
  right: auto;
}

[dir="ltr"] .toggle-password-visibility {
  right: 1.1rem;
  left: auto;
}

.toggle-password-visibility:hover {
  color: var(--secondary-color) !important;
  opacity: 1 !important;
}

.btn-auth-submit {
  width: 100%;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.auth-container {
  max-width: 460px;
  margin: 2rem auto;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

@media (min-width: 769px) {
  label[for="w-hours-total"],
  label[for="w-reg-fees-regular"],
  label[for="w-reg-fees-summer"],
  label[for="w-sibling-prev"],
  label[for="w-other-aid"],
  label[for="w-hour-price-discounted"] {
    white-space: nowrap;
    font-size: 0.78rem;
    letter-spacing: -0.15px;
  }
}

.form-group small,
.form-hint {
  display: block;
  font-size: 0.72rem !important;
  color: var(--text-muted, #64748b) !important;
  line-height: 1.4 !important;
  margin-top: 0.25rem !important;
}

.manual-location-card {
  transition: all var(--transition-normal);
}
.manual-location-card:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-control {
  width: 100%;
  height: 48px !important;
  box-sizing: border-box !important;
  padding: 0.65rem 1.25rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--surface-hover);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
}

select.form-control {
  height: 48px !important;
  padding: 0 1.25rem !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 100px;
  padding: 0.85rem 1.25rem !important;
}

.locked-field-wrapper {
  height: 48px !important;
  box-sizing: border-box !important;
}

.locked-field-wrapper .form-control {
  height: 100% !important;
}

.gpa-input-group {
  display: flex !important;
  align-items: stretch !important;
  height: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gpa-input-group select {
  height: 48px !important;
  flex: 0 0 135px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  padding-left: 1.75rem !important;
  padding-right: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
}

.gpa-input-group input {
  height: 48px !important;
  flex: 1 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-control:hover:not(:disabled):not(:focus) {
  border-color: rgba(14, 117, 175, 0.35);
  background-color: var(--surface-color);
}

.form-control:focus {
  outline: none;
  border-color: var(--secondary-color);
  background-color: var(--surface-color);
  box-shadow: 0 0 0 4px var(--secondary-glow);
}

.form-control:disabled,
.form-control[readonly]:disabled {
  background-color: var(--surface-hover);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 1;
  border-color: var(--border-color);
  border-style: dashed;
  box-shadow: none;
  user-select: none;
  font-weight: 600;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  accent-color: var(--secondary-color);
  margin-top: 0.2rem;
}

.form-check label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
  font-weight: 600;
}

.form-check label a {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 700;
}

.form-check label a:hover {
  text-decoration: underline;
}

/* Password Strength Indicator & Requirement Chips */
.pw-strength-container {
  margin-top: 0.6rem;
}

.pw-strength-bar {
  height: 6px;
  background-color: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}

[data-theme="dark"] .pw-strength-bar {
  background-color: #334155;
}

.pw-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.pw-strength-text {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  display: block;
  margin-bottom: 0.25rem;
  transition: color 0.25s ease;
}

.pw-hints-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.pw-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 0.25s ease;
  user-select: none;
}

.pw-hint-chip i {
  font-size: 0.75rem;
  color: #94a3b8;
  transition: all 0.25s ease;
}

.pw-hint-chip.valid {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #065f46 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.pw-hint-chip.valid i {
  color: #10b981 !important;
}

[data-theme="dark"] .pw-hint-chip {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pw-hint-chip.valid {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

/* OTP Code inputs */
.otp-container {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
  direction: ltr;
}

.otp-input {
  width: 48px;
  height: 56px;
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--surface-hover);
  color: var(--text-primary);
  transition: all var(--transition-normal);
}

.otp-input:hover:not(:focus) {
  border-color: rgba(14, 117, 175, 0.35);
}

.otp-input:focus {
  outline: none;
  border-color: var(--secondary-color);
  background-color: var(--surface-color);
  box-shadow: 0 0 0 4px var(--secondary-glow);
  transform: scale(1.05);
}

/* 7-Step Progress Wizard */
.wizard-progress-container {
  max-width: 1650px;
  margin: 0 auto 3.5rem auto;
  padding: 0 2rem;
}

.wizard-mobile-steps-summary {
  display: none;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.wizard-steps::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--border-color);
  z-index: 1;
}

.wizard-progress-bar {
  position: absolute;
  top: 22px;
  right: 0;
  height: 4px;
  background: linear-gradient(to left, var(--primary-color), var(--secondary-color), var(--accent-color));
  z-index: 2;
  transition: width var(--transition-normal);
  width: 0%;
}

.wizard-step-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--surface-color);
  border: 3px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
  z-index: 3;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.wizard-step-node::after {
  content: attr(data-title);
  position: absolute;
  top: 52px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-secondary);
}

.wizard-step-node.active {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
  box-shadow: 0 0 0 5px var(--secondary-glow);
}

.wizard-step-node.active::after {
  color: var(--secondary-color);
  font-weight: 800;
}

.wizard-step-node.completed {
  border-color: var(--secondary-color);
  background-color: var(--secondary-color);
  color: white;
}

.wizard-step-node.completed::after {
  color: var(--secondary-color);
}

/* Wizard Autosave Status Bar & Interactive Toggle */
.wizard-autosave-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  box-sizing: border-box;
}

.wizard-autosave-clickable {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 14px;
  background: rgba(30, 67, 129, 0.04);
  border: 1px solid rgba(30, 67, 129, 0.09);
  color: var(--text-secondary);
  font-size: 0.72rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.wizard-autosave-clickable:hover {
  background: rgba(30, 67, 129, 0.08);
  border-color: rgba(30, 67, 129, 0.2);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.wizard-autosave-clickable:active {
  transform: scale(0.98);
}

.autosave-view-default,
.autosave-view-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1.3;
  max-width: 100%;
}

.autosave-icon-shield {
  color: var(--primary-color, #1E4381);
  font-size: 0.78rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.autosave-icon-shield.saved-pulse {
  color: #10b981 !important;
  transform: scale(1.2);
}

#wizard-autosave-icon {
  font-size: 0.78rem;
  flex-shrink: 0;
}

#wizard-autosave-status {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.autosave-time {
  color: var(--text-muted);
  font-size: 0.68rem;
  margin-right: 0.2rem;
  display: inline-block;
}

[data-theme="dark"] .wizard-autosave-clickable {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

[data-theme="dark"] .wizard-autosave-clickable:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}

[data-theme="dark"] .autosave-icon-shield {
  color: #60a5fa;
}

/* Ensure all icons and SVGs inside labels have proper spacing from text */
label i,
label svg,
label .svg-inline--fa,
.form-group label i,
.form-group label svg,
.form-group label .svg-inline--fa {
  margin-inline-end: 0.55rem !important;
  margin-left: 0.55rem !important;
  color: var(--secondary-color);
  vertical-align: -0.1em;
}

/* Wizard Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  align-items: stretch;
}

.form-grid > .form-group {
  margin-bottom: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.form-grid > .form-group > .form-control,
.form-grid > .form-group > select,
.form-grid > .form-group > input,
.form-grid > .form-group > .input-wrapper,
.form-grid > .form-group > .locked-field-wrapper,
.form-grid > .form-group > .gpa-input-group {
  margin-top: auto;
}

@media (min-width: 769px) {
  .form-grid > .form-group:not(.form-grid-full) > label:not(.form-check) {
    display: flex;
    align-items: flex-end;
    min-height: 26px;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.35;
    white-space: normal;
  }

  .form-grid > .form-group > label[for="w-sibling-prev"],
  .form-grid > .form-group > label[for="w-other-aid"],
  .form-grid > .form-group > label[for="w-hours-total"],
  .form-grid > .form-group > label[for="w-reg-fees-regular"],
  .form-grid > .form-group > label[for="w-reg-fees-summer"],
  .form-grid > .form-group > label[for="w-hour-price-discounted"],
  #attachments-dropzone-grid .form-group > label,
  #admin-scholarship-custom-attachments .form-group > label,
  #admin-loan-custom-attachments .form-group > label {
    white-space: nowrap !important;
    font-size: 0.76rem !important;
    letter-spacing: -0.2px !important;
  }
}

#attachments-dropzone-grid .form-group > label,
#admin-scholarship-custom-attachments .form-group > label,
#admin-loan-custom-attachments .form-group > label {
  white-space: nowrap !important;
  letter-spacing: -0.2px;
}

.table-header-row,
.form-group.form-grid-full > label,
.form-grid-full label {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Explicit bounds for map container */
#leaflet-map-wrapper,
.map-visual-container {
  height: 340px !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 5 !important;
  border-radius: var(--border-radius-md) !important;
  box-sizing: border-box !important;
}

.form-grid-full {
  grid-column: 1 / -1;
}

/* Interactive tables */
.table-responsive {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  background-color: var(--surface-color);
  transition: all var(--transition-normal);
  -webkit-overflow-scrolling: touch;
}

/* Premium Custom Scrollbar for responsive tables */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--bg-color);
  border-radius: var(--border-radius-sm);
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(34, 57, 121, 0.15);
  border-radius: var(--border-radius-sm);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

.dynamic-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  min-width: 800px;
}

#table-family-members {
  min-width: 1350px;
}

#table-family-health {
  min-width: 900px;
}

.dynamic-table th,
.dynamic-table td {
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.dynamic-table th {
  background-color: var(--surface-hover);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.88rem;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  padding: 0.75rem 1rem;
}

.dynamic-table td {
  background-color: var(--surface-color);
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.dynamic-table tr.unread-msg-row {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

.dynamic-table tr.unread-msg-row td {
  background-color: transparent !important;
}

/* Compact input fields inside tables on desktop */
@media (min-width: 769px) {
  .dynamic-table td .form-control {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.88rem !important;
    border-radius: var(--border-radius-sm) !important;
    height: 38px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
  }

  /* Prevent inputs from squeezing below readable widths */
  .dynamic-table td .m-name {
    min-width: 180px;
  }

  .dynamic-table td .m-nat-id {
    min-width: 110px;
  }

  .dynamic-table td .m-dob {
    min-width: 85px;
  }

  .dynamic-table td .m-gender {
    min-width: 90px;
  }

  .dynamic-table td .m-relation {
    min-width: 110px;
  }

  .dynamic-table td .m-marital {
    min-width: 115px;
  }

  .dynamic-table td .m-edu-stage {
    min-width: 140px;
  }

  .dynamic-table td .m-uni-name {
    min-width: 160px;
  }

  .dynamic-table td .m-work {
    min-width: 140px;
  }

  .dynamic-table td .m-income {
    min-width: 95px;
  }

  .dynamic-table td .h-patient {
    min-width: 160px;
  }

  .dynamic-table td .h-disease {
    min-width: 160px;
  }

  .dynamic-table td .h-cost {
    min-width: 95px;
  }

  .dynamic-table td .h-notes {
    min-width: 200px;
  }
}

.dynamic-table tr {
  transition: background-color var(--transition-fast);
}

.dynamic-table tr:hover td {
  background-color: var(--surface-hover);
}

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

.dynamic-table .btn-action {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.btn-add-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.45rem 1.1rem !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--transition-normal) !important;
  box-shadow: 0 3px 10px rgba(30, 67, 129, 0.2) !important;
  transform: none !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
}

.btn-add-row i,
.btn-add-row svg,
.btn-add-row .svg-inline--fa {
  color: #ffffff !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  vertical-align: middle !important;
}

.btn-add-row:hover {
  background: linear-gradient(135deg, #2b82ad, var(--primary-dark)) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(30, 67, 129, 0.3) !important;
}

.btn-add-row:active {
  transform: scale(0.97) !important;
}

.btn-delete-row {
  background-color: rgba(239, 68, 68, 0.08);
  color: var(--danger-color);
}

.btn-delete-row:hover {
  background-color: var(--danger-color);
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-sm);
}

/* Terms content */
.terms-content {
  height: auto;
  overflow: visible;
  border: 1px dashed var(--border-color);
  background-color: transparent;
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Leaflet maps container styled with official colors */
.map-visual-container {
  height: 320px;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.map-visual-container:hover {
  border-color: var(--secondary-color);
}

.map-visual-marker {
  width: 24px;
  height: 36px;
  background-color: var(--danger-color);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: absolute;
  top: calc(50% - 28px);
  left: calc(50% - 12px);
  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.15);
  animation: pinBounce 1.5s infinite ease-in-out;
}

.map-visual-marker::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--surface-color);
  position: absolute;
  border-radius: 50%;
  top: 7px;
  left: 7px;
}

@keyframes pinBounce {

  0%,
  100% {
    transform: rotate(-45deg) translateY(0);
  }

  50% {
    transform: rotate(-45deg) translateY(-8px);
  }
}

.map-coords-badge {
  position: absolute;
  bottom: 1rem;
  background-color: rgba(34, 57, 121, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.8rem;
  direction: ltr;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

/* File Upload Containers */
.upload-dropzone {
  border: 2px dashed var(--border-color);
  background-color: var(--surface-hover);
  border-radius: var(--border-radius-md);
  padding: 2.25rem 1.5rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.upload-dropzone:hover {
  border-color: var(--secondary-color);
  background-color: var(--bg-color);
  transform: translateY(-2px);
}

.upload-dropzone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-icon {
  font-size: 2.25rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.upload-dropzone:hover .upload-icon {
  color: var(--secondary-color);
}

.upload-progress {
  width: 100%;
  height: 6px;
  background-color: var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  margin-top: 0.5rem;
  display: none;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--secondary-color);
  transition: width 0.1s linear;
}

.uploaded-file-preview {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.85rem;
  width: 100%;
}

.file-name {
  color: var(--secondary-color);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* Custom Visual Notification Toast Alert Boxes */
.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: calc(100vw - 3rem);
  pointer-events: none;
}

.toast {
  background-color: var(--surface-color);
  border-right: 5px solid var(--secondary-color);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 280px;
  max-width: 460px;
  width: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  animation: slideInLeft 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: auto;
  overflow: hidden;
}

.toast.toast-danger {
  border-right-color: var(--danger-color);
}

.toast.toast-success {
  border-right-color: var(--success-color);
}

.toast.toast-warning {
  border-right-color: var(--warning-color);
}

.toast-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.toast-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.toast-content {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  flex-shrink: 0;
  padding: 0 0.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.toast-close:hover {
  color: var(--text-primary);
}

/* Dashboard design */
.dashboard-header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 1rem;
}

.dashboard-header h2 {
  color: var(--primary-color);
}

.welcome-banner {
  background: radial-gradient(circle at 0% 0%, rgba(52, 153, 204, 0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(30, 67, 129, 0.2) 0%, transparent 50%), linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: white;
  padding: 3rem;
  border-radius: var(--border-radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md), 0 10px 30px rgba(30, 67, 129, 0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform var(--transition-premium), box-shadow var(--transition-premium);
}

.welcome-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 15px 35px rgba(30, 67, 129, 0.2);
}

.welcome-banner::before {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 80%);
  pointer-events: none;
}

.welcome-banner button {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.welcome-banner button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.05);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.82rem;
  font-weight: 700;
  background-color: var(--border-color);
  color: var(--text-secondary);
  border: 1.5px solid transparent;
  transition: all var(--transition-normal);
}

.status-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.status-badge.status-received {
  background-color: rgba(14, 117, 175, 0.08);
  color: var(--secondary-color);
  border-color: rgba(14, 117, 175, 0.2);
}

.status-badge.status-under-study {
  background-color: rgba(245, 158, 11, 0.08);
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.2);
}

.status-badge.status-test {
  background-color: rgba(53, 163, 224, 0.08);
  color: var(--secondary-color);
  border-color: rgba(53, 163, 224, 0.2);
}

.status-badge.status-interview_invitation {
  background-color: rgba(16, 185, 129, 0.08);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.2);
}

.status-badge.status-social_study {
  background-color: rgba(245, 158, 11, 0.08);
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.2);
}

.status-badge.status-approved_scholarship {
  background-color: rgba(16, 185, 129, 0.08);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.2);
}

.status-badge.status-approved_loan {
  background-color: rgba(52, 129, 159, 0.08);
  color: var(--accent-color);
  border-color: rgba(52, 129, 159, 0.2);
}

.status-badge.status-rejected {
  background-color: rgba(239, 68, 68, 0.08);
  color: var(--danger-color);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Badges for tables and status displays */
.badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--border-radius-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.badge:hover {
  transform: scale(1.05);
}

.badge-pending {
  background-color: rgba(245, 158, 11, 0.08);
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.2);
}

.badge-approved,
.badge-approved_scholarship {
  background-color: rgba(16, 185, 129, 0.08);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.2);
}

.badge-approved_loan {
  background-color: rgba(52, 129, 159, 0.08);
  color: var(--accent-color);
  border-color: rgba(52, 129, 159, 0.2);
}

.badge-rejected {
  background-color: rgba(239, 68, 68, 0.08);
  color: var(--danger-color);
  border-color: rgba(239, 68, 68, 0.2);
}

.badge-test {
  background-color: rgba(14, 117, 175, 0.08);
  color: var(--secondary-color);
  border-color: rgba(14, 117, 175, 0.2);
}

.badge-interview_invitation {
  background-color: rgba(16, 185, 129, 0.08);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.2);
}

.badge-social_study {
  background-color: rgba(245, 158, 11, 0.08);
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.2);
}

/* Footer structure */
footer {
  background-color: var(--surface-color);
  border-top: 1px solid var(--border-color);
  padding: 1.5rem 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: auto;
  box-shadow: 0 -4px 18px rgba(34, 57, 121, 0.02);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

footer p {
  line-height: 1.6;
}

footer p:last-child {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Portal Badges styling */
.portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.95rem;
  font-weight: 900;
  white-space: nowrap;
  transition: all var(--transition-normal);
}

/* Responsive grid layouts - "فعال ع الجهازين" (Works perfectly on Mobile and Desktop) */
@media (max-width: 768px) {


  /* ===== HEADER MOBILE ===== */
  header {
    padding: 0.6rem 0.9rem;
    gap: 0.4rem;
    overflow: hidden;
  }

  /* اللوغو */
  .logo-container {
    gap: 0.4rem;
  }

  .portal-badge {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    margin-inline-start: 0.25rem !important;
    border-width: 1.5px !important;
  }

  .portal-badge i {
    font-size: 0.85rem !important;
  }

  @media (max-width: 480px) {
    .portal-badge {
      padding: 0.2rem 0.40rem !important;
      font-size: 0.65rem !important;
    }

    .portal-badge i {
      display: none !important;
    }
  }

  .official-logo-img {
    height: 32px;
  }

  .logo-text {
    display: none;
  }

  /* اخفاء عناصر الديسكتوب */
  .visitor-nav-menu {
    display: none !important;
  }

  .header-desktop-only {
    display: none !important;
  }


  #btn-lang-toggle,
  #btn-theme-toggle,
  #btn-header-login,
  #user-profile-widget {
    display: none !important;
  }

  #btn-header-hamburger {
    display: flex !important;
  }


  /* Nav controls — لا يطلع بره الشاشة */
  .nav-controls {
    gap: 0.35rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }

  /* المستخدم وزر الخروج */
  #user-display-name {
    font-size: 0.72rem;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #btn-logout {
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }

  .logout-text {
    display: none;
  }

  /* أيقونة الخروج فقط على الموبايل */

  /* ===== MAIN CONTENT ===== */
  main {
    margin: 1rem auto;
    padding: 0 0.75rem;
  }

  .card {
    padding: 1.25rem;
  }

  .welcome-banner {
    padding: 1.5rem;
  }

  .welcome-banner h2 {
    font-size: 1.4rem;
  }

  .welcome-banner p {
    font-size: 0.9rem;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .dashboard-header div {
    text-align: center;
  }

  .dashboard-header h2,
  .dashboard-header p {
    text-align: center !important;
  }

  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
  }

  .toast {
    min-width: unset;
    max-width: 100%;
    width: 100%;
  }

  /* Wizard Progress Stepper Mobile Styles */
  .wizard-progress-container {
    display: none !important;
    /* Hide horizontal 7 nodes stepper on mobile to prevent squishing */
  }

  .wizard-mobile-steps-summary {
    display: block !important;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.05);
    transition: all var(--transition-premium);
  }

  .mobile-step-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .mobile-step-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
  }

  .mobile-step-badge {
    background-color: var(--secondary-glow);
    color: var(--secondary-color);
    padding: 0.15rem 0.5rem;
    border-radius: var(--border-radius-xl);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid rgba(52, 153, 204, 0.1);
  }

  .mobile-step-title-text {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mobile-step-progress-bar {
    width: 100%;
    height: 5px;
    background-color: var(--border-color);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .mobile-step-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-radius: var(--border-radius-xl);
    transition: width var(--transition-premium);
  }

  /* Compact Sleek Buttons */
  #btn-wizard-prev-mob,
  #btn-wizard-next-mob {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.72rem !important;
    border-radius: 50% !important;
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--primary-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transition: all var(--transition-premium) !important;
    flex-shrink: 0 !important;
  }

  #btn-wizard-prev-mob:not(:disabled),
  #btn-wizard-next-mob:not(:disabled) {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
  }

  #btn-wizard-prev-mob:not(:disabled):active,
  #btn-wizard-next-mob:not(:disabled):active {
    background: var(--primary-dark) !important;
    transform: scale(0.92) !important;
  }

  #btn-wizard-prev-mob:disabled,
  #btn-wizard-next-mob:disabled {
    opacity: 0.3 !important;
    background-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger-outline {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    width: 100%;
    /* Force buttons block on mobile */
  }

  /* Fix wizard control layout on mobile */
  .view-section form>div:last-child,
  .wizard-buttons-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
  }

  .wizard-nav-actions {
    display: flex !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .wizard-nav-actions button {
    flex: 1 !important;
    width: 100% !important;
  }

  #btn-wizard-cancel {
    margin-inline-start: 0 !important;
    width: 100% !important;
  }

  .otp-input {
    width: 100%;
    height: 54px;
    line-height: 54px;
    font-size: 1.4rem;
  }

  .split-auth-container {
    flex-direction: column;
    min-height: auto;
  }

  .brand-panel {
    display: none !important;
    /* Hide brand panel on mobile */
  }

  .auth-form-panel {
    padding: 1.5rem;
  }

  /* Mobile Autosave Status Bar */
  .wizard-autosave-bar {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.45rem !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wizard-autosave-clickable {
    font-size: 0.68rem !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 12px !important;
    max-width: 100% !important;
  }

  .autosave-view-default,
  .autosave-view-detail {
    font-size: 0.68rem !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
  }

  .autosave-icon-shield,
  #wizard-autosave-icon {
    font-size: 0.72rem !important;
  }

  #wizard-autosave-status {
    font-size: 0.68rem !important;
  }

  .btn-add-row {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.8rem !important;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-grid > .form-group {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-grid > .form-group > label,
  .form-group label {
    white-space: normal !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    max-width: 100% !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .form-control,
  select.form-control,
  input.form-control,
  textarea.form-control,
  .locked-field-wrapper,
  .gpa-input-group {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Dynamic Table Mobile card responsiveness layout */
  .table-responsive {
    border: none !important;
    box-shadow: none !important;
    overflow-x: visible !important;
  }

  .dynamic-table {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  .dynamic-table thead {
    display: none !important;
    /* Hide standard headers */
  }

  .dynamic-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .dynamic-table tr {
    display: block !important;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  }

  .dynamic-table tr:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(14, 117, 175, 0.35);
  }

  .dynamic-table td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem !important;
    border-bottom: 1px dashed var(--border-color) !important;
    background-color: transparent !important;
    text-align: right;
    width: 100% !important;
  }

  .dynamic-table td:last-child {
    border-bottom: none !important;
  }

  /* Use data-label for mobile labels */
  .dynamic-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: inline-block;
    text-align: right;
    margin-left: 1rem;
    white-space: nowrap;
  }

  /* Align cells input control */
  .dynamic-table td .form-control {
    width: 60% !important;
    max-width: 200px;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    text-align: right;
  }

  /* Styling delete action cell */
  .dynamic-table td:last-child {
    justify-content: flex-end !important;
  }

  .dynamic-table td:last-child::before {
    display: none !important;
  }

  .dynamic-table td:last-child .btn-delete-row {
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: var(--border-radius-xl) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  .dynamic-table td:last-child .btn-delete-row::after {
    content: " حذف";
    margin-right: 0.25rem;
  }

  /* Inbox message content mobile layout fix */
  .td-message-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 1rem 0.5rem !important;
  }

  .td-message-content::before {
    margin-bottom: 0.4rem;
    align-self: flex-start;
  }

  .msg-text-wrapper {
    width: 100% !important;
    text-align: right !important;
    line-height: 1.6 !important;
    font-size: 0.92rem !important;
    white-space: normal !important;
  }
}

/* 2026 portal refinement: scoped to scholarship, loan, and vocational pages. */
body.hf-portal-page {
  --portal-navy: #1E4381;
  --portal-navy-dark: #173563;
  --portal-sky: #3499CC;
  --portal-pale: #eaf4fb;
  --portal-line: rgba(30, 67, 129, 0.14);
  background: #f4f8fb;
}

body.hf-portal-page .view-section.active {
  animation: none;
}

body.hf-portal-page header,
body.hf-gateway-page header {
  min-height: 76px;
  padding: 0.95rem max(1.5rem, calc((100% - min(1600px, 97.5vw)) / 2 + 1.25rem));
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--portal-line);
  box-shadow: 0 5px 18px rgba(30, 67, 129, 0.07);
  overflow: visible;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1000;
}

body.hf-portal-page main {
  max-width: min(1600px, 97.5vw);
  width: 100%;
  margin: 1.5rem auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
  flex: 1;
}

body.hf-portal-page header::after,
body.hf-gateway-page header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--portal-sky, #0084C7), var(--portal-navy, #1E4381));
  pointer-events: none;
}

body.hf-portal-page .official-logo-img,
body.hf-gateway-page .official-logo-img {
  height: 52px;
  max-width: min(300px, 45vw);
  filter: none;
  transition: none;
}

body.hf-portal-page .nav-controls,
body.hf-gateway-page .nav-controls {
  gap: 0.75rem;
}

body.hf-portal-page .btn-icon,
body.hf-gateway-page .btn-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  color: #1B365D;
  box-shadow: none;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.hf-portal-page .btn-icon i,
body.hf-gateway-page .btn-icon i {
  font-size: 1.15rem;
}

body.hf-portal-page #btn-header-profile-menu,
body.hf-gateway-page #btn-header-profile-menu {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
}

body.hf-portal-page #btn-header-profile-menu i,
body.hf-gateway-page #btn-header-profile-menu i {
  font-size: 1.75rem !important;
}

body.hf-portal-page .btn-icon:hover,
body.hf-gateway-page .btn-icon:hover,
body.hf-portal-page #btn-header-inbox:hover,
body.hf-portal-page #btn-header-my-courses:hover {
  background: #f0f6fb !important;
  border-color: #cbd5e1 !important;
  color: #0E75AF !important;
  box-shadow: none;
  transform: none;
}

[data-theme="dark"] body.hf-portal-page .btn-icon,
[data-theme="dark"] body.hf-gateway-page .btn-icon {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1;
}

[data-theme="dark"] body.hf-portal-page .btn-icon:hover,
[data-theme="dark"] body.hf-gateway-page .btn-icon:hover {
  background: #334155 !important;
  color: #38bdf8 !important;
}

body.hf-portal-page .hf-auth-wrap {
  gap: 1rem;
  padding: 72px 1.5rem 3.5rem !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(135deg, var(--portal-navy-dark) 0%, var(--portal-navy) 52%, #2f87b5 100%);
}

body.hf-portal-page .hf-auth-wrap::before {
  height: 25%;
  background: #f4f8fb;
}

body.hf-portal-page .hf-auth-wrap::after {
  bottom: 25%;
  width: 42%;
  max-width: 460px;
  background-position: left 5% bottom -12px;
  background-size: 430px auto;
  opacity: 0.16;
}

body.hf-portal-page .hf-auth-background-text {
  gap: 0.25rem;
  margin: 0 0 0.75rem !important;
}

body.hf-portal-page .hf-auth-background-text h1,
body.hf-portal-page .hf-auth-bg-title,
body.hf-portal-page .hf-auth-bg-line1 {
  font-family: var(--font-title) !important;
  font-size: 1.85rem !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

body.hf-portal-page .hf-auth-background-text p,
body.hf-portal-page .hf-auth-bg-subtitle,
body.hf-portal-page .hf-auth-bg-line2 {
  font-family: var(--font-arabic) !important;
  max-width: 760px;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: none !important;
}

body.hf-portal-page .hf-split-container {
  max-width: 1020px;
  min-height: 520px !important;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(15, 41, 83, 0.2), 0 5px 16px rgba(15, 41, 83, 0.1);
  transform: none !important;
}

body.hf-portal-page .hf-split-container::after {
  height: 6px !important;
  background: linear-gradient(90deg, var(--portal-sky), var(--portal-navy)) !important;
}

body.hf-portal-page .hf-brand-panel {
  padding: 2.4rem 2.65rem !important;
  justify-content: center !important;
  background: var(--portal-pale);
  border: 0;
  border-inline-end: 1px solid var(--portal-line);
}

body.hf-portal-page .hf-brand-overlay {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(52, 153, 204, 0.03));
  opacity: 1;
}

body.hf-portal-page .hf-brand-bg-watermark {
  right: auto;
  bottom: -45px;
  left: -35px;
  width: 230px;
  height: 230px;
  opacity: 0.13;
}

body.hf-portal-page .hf-brand-title {
  margin-bottom: 0.45rem !important;
  font-family: var(--font-title);
  font-size: 1.55rem !important;
  line-height: 1.35;
  color: var(--portal-navy) !important;
}

body.hf-portal-page .hf-brand-tagline {
  margin-bottom: 0.7rem !important;
  font-size: 0.9rem !important;
  color: #44617e;
}

body.hf-portal-page .hf-brand-description {
  margin-bottom: 1rem !important;
  font-size: 0.86rem !important;
  line-height: 1.7 !important;
  color: #334d68;
}

body.hf-portal-page .hf-brand-features {
  gap: 0.65rem !important;
  padding-top: 0.9rem;
  border-top-color: rgba(30, 67, 129, 0.16);
}

body.hf-portal-page .hf-brand-feature {
  gap: 0.65rem;
  font-size: 0.8rem !important;
  line-height: 1.55;
  color: var(--portal-navy);
}

body.hf-portal-page .hf-brand-feature i {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(30, 67, 129, 0.09);
  color: var(--portal-navy);
  font-size: 0.85rem;
}

body.hf-portal-page .hf-form-panel {
  padding: 2.8rem 2.5rem !important;
  background: #ffffff;
}

body.hf-portal-page .hf-auth-header {
  position: relative;
  margin-bottom: 1.4rem;
  padding-inline-start: 0.85rem;
  text-align: start;
}

body.hf-portal-page .hf-auth-header::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--portal-sky);
}

body.hf-portal-page .hf-auth-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--portal-navy);
}

body.hf-portal-page .hf-auth-desc {
  font-size: 0.84rem;
  line-height: 1.7;
}

body.hf-portal-page .hf-tabs {
  padding: 4px;
  border: 1px solid rgba(30, 67, 129, 0.08);
  border-radius: 12px;
  background: #eef5fa;
}

body.hf-portal-page .hf-tab {
  min-height: 42px;
  border-radius: 9px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

body.hf-portal-page .hf-tab.active {
  color: var(--portal-navy);
  box-shadow: 0 2px 8px rgba(30, 67, 129, 0.09);
}

body.hf-portal-page .hf-btn {
  min-height: 66px;
  border-radius: 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.hf-portal-page .hf-btn-primary,
body.hf-portal-page .btn-primary {
  background: linear-gradient(135deg, var(--portal-navy) 0%, #285f94 72%, var(--portal-sky) 100%);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(30, 67, 129, 0.18);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.hf-portal-page .hf-btn-primary:hover,
body.hf-portal-page .btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(30, 67, 129, 0.23);
  transform: none;
}

body.hf-portal-page .hf-btn-outline,
body.hf-portal-page .btn-secondary {
  border-color: rgba(30, 67, 129, 0.18);
  border-radius: 12px;
  box-shadow: none;
}

body.hf-portal-page .hf-btn-outline:hover,
body.hf-portal-page .btn-secondary:hover:not(:disabled) {
  border-color: rgba(30, 67, 129, 0.38);
  background: #f5f9fc;
  box-shadow: none;
  transform: none;
}

body.hf-portal-page .hf-btn-icon {
  border-radius: 10px;
}

body.hf-portal-page .hf-input,
body.hf-portal-page .form-control {
  min-height: 46px;
  border-color: rgba(30, 67, 129, 0.16);
  border-radius: 11px;
  background: #ffffff;
}

body.hf-portal-page .hf-input:focus,
body.hf-portal-page .form-control:focus {
  border-color: var(--portal-sky);
  box-shadow: 0 0 0 3px rgba(52, 153, 204, 0.12);
}

body.hf-portal-page .card {
  border: 1px solid var(--portal-line);
  border-radius: 16px;
  box-shadow: 0 9px 25px rgba(30, 67, 129, 0.07);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.hf-portal-page .card:hover {
  border-color: rgba(30, 67, 129, 0.22);
  box-shadow: 0 10px 28px rgba(30, 67, 129, 0.09);
  transform: none;
}

body.hf-portal-page .card-title {
  border-bottom: 1px solid var(--portal-line);
}

body.hf-portal-page .welcome-banner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0f2752 0%, var(--portal-navy, #1E4381) 55%, #2575a7 100%) !important;
  box-shadow: 0 14px 34px rgba(15, 39, 82, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.hf-portal-page .welcome-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  left: -40px !important;
  width: 380px !important;
  height: 380px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 75%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body.hf-portal-page .welcome-banner::after {
  content: '\f19d' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  left: 3% !important;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none !important;
  line-height: 1 !important;
  z-index: 1 !important;
}

body.hf-portal-page .welcome-banner:hover {
  box-shadow: 0 16px 38px rgba(15, 39, 82, 0.22) !important;
  transform: none !important;
}

body.hf-portal-page .welcome-banner__content {
  flex: 1 1 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

body.hf-portal-page .welcome-banner h3,
body.hf-portal-page #banner-user-name {
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  letter-spacing: -0.01em !important;
}

.banner-welcome-prefix {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.banner-welcome-name {
  display: block;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.35;
}

body.hf-portal-page .welcome-banner p,
body.hf-portal-page #banner-ref-wrapper {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  align-items: center !important;
}

body.hf-portal-page #banner-ref-number {
  font-weight: 800 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.hf-portal-page .welcome-banner__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

body.hf-portal-page .welcome-banner button#btn-start-application {
  background: #ffffff !important;
  color: #1E4381 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  display: inline-flex;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

body.hf-portal-page .welcome-banner button#btn-start-application[style*="display: none"],
body.hf-portal-page .welcome-banner button#btn-start-application.hidden {
  display: none !important;
}

body.hf-portal-page .welcome-banner button#btn-start-application:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26) !important;
  background: #f8fafc !important;
}

@media (max-width: 767px) {
  body.hf-portal-page .welcome-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.4rem !important;
    padding: 1.75rem 1.25rem !important;
  }

  body.hf-portal-page .welcome-banner p,
  body.hf-portal-page #banner-ref-wrapper {
    margin: 0 !important;
  }

  body.hf-portal-page .welcome-banner__actions {
    width: 100% !important;
    justify-content: stretch !important;
  }

  body.hf-portal-page .welcome-banner button#btn-start-application {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Desktop sizing (min-width: 768px) */
@media (min-width: 768px) {
  body.hf-portal-page .welcome-banner {
    padding: 2.6rem 3rem !important;
    border-radius: 22px !important;
    gap: 2.5rem !important;
  }

  body.hf-portal-page .welcome-banner::after {
    font-size: 15rem !important;
    color: rgba(255, 255, 255, 0.08) !important;
  }

  body.hf-portal-page .welcome-banner h3,
  body.hf-portal-page #banner-user-name {
    font-size: 2.15rem !important;
    margin: 0 0 0.85rem 0 !important;
  }

  body.hf-portal-page .banner-welcome-prefix {
    font-size: 1.25rem !important;
    margin-bottom: 0.35rem !important;
    display: block !important;
  }

  body.hf-portal-page .banner-welcome-name {
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  body.hf-portal-page .welcome-banner p,
  body.hf-portal-page #banner-ref-wrapper {
    font-size: 1.18rem !important;
    margin: 0 !important;
    gap: 0.75rem !important;
  }

  body.hf-portal-page #banner-ref-number {
    font-size: 1.25rem !important;
    padding: 0.35rem 1rem !important;
    border-radius: 12px !important;
  }

  body.hf-portal-page .welcome-banner__actions {
    gap: 1.1rem !important;
  }

  body.hf-portal-page .welcome-banner button#btn-start-application {
    font-size: 1.15rem !important;
    padding: 0.95rem 2.2rem !important;
    border-radius: 14px !important;
    gap: 0.7rem !important;
  }

}

body.hf-portal-page .course-card {
  border-radius: 16px;
  border-top: 3px solid var(--portal-sky);
  box-shadow: 0 6px 18px rgba(30, 67, 129, 0.06);
}

body.hf-portal-page .course-card:hover {
  border-top-color: var(--portal-navy);
  box-shadow: 0 8px 22px rgba(30, 67, 129, 0.09);
  transform: none;
}

body.hf-portal-page[data-theme="dark"] header,
body.hf-portal-page[data-theme="dark"] .hf-form-panel {
  background: #121826;
}

body.hf-portal-page[data-theme="dark"] .hf-brand-panel {
  background: #17253b;
  border-inline-end-color: rgba(255, 255, 255, 0.08);
}

body.hf-portal-page[data-theme="dark"] .hf-brand-title,
body.hf-portal-page[data-theme="dark"] .hf-brand-tagline,
body.hf-portal-page[data-theme="dark"] .hf-brand-description,
body.hf-portal-page[data-theme="dark"] .hf-brand-feature {
  color: #e7f1fa !important;
}

body.hf-portal-page[data-theme="dark"] .hf-brand-feature i {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

body.hf-portal-page[data-theme="dark"] .hf-input,
body.hf-portal-page[data-theme="dark"] .form-control {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  body.hf-portal-page header {
    min-height: 58px;
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem;
  }

  body.hf-portal-page .logo-container {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  body.hf-portal-page .official-logo-img {
    width: auto;
    height: 34px !important;
    max-width: 100%;
    object-position: right center;
  }

  body.hf-portal-page .nav-controls {
    flex: 0 0 auto;
    overflow: visible;
  }

  body.hf-portal-page .btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    font-size: 0.95rem !important;
  }

  body.hf-portal-page .hf-auth-wrap {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(100vh - 58px) !important;
    margin-top: -1rem !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: -50vw !important;
    padding: 1.35rem 0.75rem 2rem !important;
    gap: 0.65rem !important;
    overflow: hidden !important;
  }

  body.hf-portal-page .hf-auth-wrap::before {
    display: block !important;
    height: 48% !important;
  }

  body.hf-portal-page .hf-auth-wrap::after {
    bottom: 48% !important;
    width: 65%;
    background-size: 230px auto !important;
    opacity: 0.11 !important;
  }

  body.hf-portal-page .hf-auth-background-text {
    margin: 0 0 0.25rem !important;
    padding: 0 0.4rem;
  }

  body.hf-portal-page .hf-auth-background-text h1,
  body.hf-portal-page .hf-auth-bg-title,
  body.hf-portal-page .hf-auth-bg-line1 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
  }

  body.hf-portal-page .hf-auth-background-text p,
  body.hf-portal-page .hf-auth-bg-subtitle,
  body.hf-portal-page .hf-auth-bg-line2 {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
  }

  body.hf-portal-page .hf-split-container {
    width: 100% !important;
    max-width: 440px;
    min-height: 0 !important;
    margin: 0.35rem auto 0 !important;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(15, 41, 83, 0.18), 0 4px 12px rgba(15, 41, 83, 0.08);
    overflow: hidden !important;
  }

  body.hf-portal-page .hf-split-container::after {
    height: 5px !important;
  }

  body.hf-portal-page .hf-brand-panel {
    min-height: 0 !important;
    padding: 1.25rem 1.15rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-inline-end: 0;
    border-bottom: 1px solid var(--portal-line);
    text-align: center !important;
  }

  body.hf-portal-page .hf-brand-content {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .hf-brand-logo {
    margin-inline: auto !important;
  }

  body.hf-portal-page .logo-fallback {
    justify-content: center !important;
    margin-inline: auto !important;
  }

  body.hf-portal-page .hf-brand-title {
    width: 100%;
    margin-bottom: 0.3rem !important;
    font-size: 1.15rem !important;
    text-align: center !important;
  }

  body.hf-portal-page .hf-brand-tagline {
    width: 100%;
    margin-bottom: 0.4rem !important;
    font-size: 0.8rem !important;
    text-align: center !important;
  }

  body.hf-portal-page .hf-brand-description {
    margin-bottom: 0.6rem !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .hf-brand-features {
    align-items: center !important;
    gap: 0.4rem !important;
    margin-top: 0 !important;
    padding-top: 0.65rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .hf-brand-feature {
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 0.76rem !important;
    line-height: 1.45;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .hf-brand-feature span {
    font-size: inherit !important;
    text-align: center !important;
  }

  body.hf-portal-page .hf-brand-feature i {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 0.75rem !important;
  }

  body.hf-portal-page .hf-brand-btn-wrap {
    justify-content: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .hf-brand-bg-watermark {
    right: auto;
    bottom: -28px;
    left: -22px;
    width: 130px;
    height: 130px;
    opacity: 0.1;
  }

  body.hf-portal-page .hf-brand-mobile-arrow {
    display: none !important;
    animation: none !important;
  }

  body.hf-portal-page .hf-form-panel {
    min-height: 0 !important;
    padding: 1.35rem 1rem 1.7rem !important;
    overflow: visible !important;
  }

  body.hf-portal-page .hf-auth-header {
    margin-bottom: 0.9rem !important;
    padding-inline-start: 0.7rem;
  }

  body.hf-portal-page .hf-auth-title {
    font-size: 1.15rem !important;
  }

  body.hf-portal-page .hf-auth-desc {
    margin-bottom: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.6;
  }

  body.hf-portal-page .hf-auth-actions {
    gap: 0.55rem !important;
  }

  body.hf-portal-page .hf-btn {
    min-height: 62px;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem !important;
  }

  body.hf-portal-page .hf-btn-text span {
    font-size: 0.88rem;
  }

  body.hf-portal-page .hf-btn-text small {
    display: block !important;
    font-size: 0.7rem;
    line-height: 1.4;
  }

  body.hf-portal-page .hf-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  body.hf-portal-page .card {
    padding: 1.1rem !important;
    border-radius: 14px;
  }

  body.hf-portal-page .card-title {
    font-size: 1rem;
    line-height: 1.5;
  }

  body.hf-portal-page .hf-input,
  body.hf-portal-page .form-control,
  body.hf-portal-page input,
  body.hf-portal-page select,
  body.hf-portal-page textarea {
    font-size: 1rem !important;
  }

  body.hf-portal-page .wizard-actions {
    gap: 0.65rem !important;
  }
}

@media (max-width: 380px) {
  body.hf-portal-page .hf-auth-wrap {
    padding-inline: 0.6rem !important;
  }

  body.hf-portal-page .hf-brand-panel {
    padding-inline: 0.9rem !important;
  }

  body.hf-portal-page .hf-form-panel {
    padding-inline: 0.85rem !important;
  }

  body.hf-portal-page .hf-auth-background-text h1,
  body.hf-portal-page .hf-auth-bg-title,
  body.hf-portal-page .hf-auth-bg-line1 {
    font-size: 1.12rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  body.hf-portal-page *,
  body.hf-portal-page *::before,
  body.hf-portal-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   About Page Styles (من نحن / عن صندوق حياة للتعليم)
   ========================================================================== */
.about-page {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.about-hero {
  position: relative;
  background: radial-gradient(circle at 0% 0%, rgba(52, 153, 204, 0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(30, 67, 129, 0.2) 0%, transparent 50%), linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: white;
  padding: 3.5rem 3rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.about-hero-bg-icon {
  position: absolute;
  top: -30px;
  left: -20px;
  font-size: 10rem;
  opacity: 0.06;
  pointer-events: none;
  transform: rotate(-15deg);
}

.about-hero-content {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.about-hero-logo {
  height: 60px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}

.about-hero h1,
.about-hero-content h1 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

.about-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 0.4rem 1.25rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-hero-sub,
.about-hero p,
.about-hero-content p {
  font-size: 1.05rem;
  opacity: 0.85;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  box-sizing: border-box;
}

.about-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.about-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  justify-content: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.about-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.about-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.about-card-mission {
  border-top: 4px solid #1E4381;
}

.about-card-vision {
  border-top: 4px solid #3499CC;
}

.about-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.about-card-mission .about-card-icon {
  background: rgba(30, 67, 129, 0.1);
  color: #1E4381;
}

.about-card-vision .about-card-icon {
  background: rgba(52, 153, 204, 0.1);
  color: #3499CC;
}

.about-card h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.about-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

.about-section {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 2rem 2rem 2.25rem;
  box-shadow: var(--shadow-sm);
}

.about-section-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.about-section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border-color);
}

.about-value-card {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--border-radius-md);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.about-value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.about-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 0.75rem;
}

.about-value-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-feat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.3s ease;
}

.about-feat-card:hover {
  transform: translateX(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--secondary-color);
}

.about-feat-card i {
  font-size: 1.3rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.about-steps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.about-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
}

.about-step:hover {
  transform: translateX(-4px);
  border-color: var(--secondary-color);
  box-shadow: var(--shadow-sm);
}

.about-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.about-step-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.about-step-label {
  font-weight: 800;
  color: var(--text-primary);
}

.about-step-dash {
  color: var(--text-muted);
  opacity: 0.5;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.about-stat-item {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.about-stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-stat-num {
  display: block;
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.about-stat-lbl {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.about-cta {
  text-align: center;
  background: radial-gradient(circle at 0% 0%, rgba(52, 153, 204, 0.15) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(30, 67, 129, 0.2) 0%, transparent 50%), linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: white;
  padding: 3rem 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

.about-cta h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.about-cta p {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 0;
  line-height: 1.7;
}

.about-cta .btn-primary {
  background: white !important;
  color: var(--primary-color) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.about-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.about-footer-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}

/* About Page Mobile */
@media (max-width: 768px) {
  .about-page {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .about-hero {
    padding: 2rem 1.25rem;
  }

  .about-hero h1 {
    font-size: 1.5rem;
  }

  .about-hero-sub {
    font-size: 0.9rem;
  }

  .about-grid-2,
  .about-grid-4,
  .about-stats {
    grid-template-columns: 1fr 1fr;
  }

  .about-card {
    padding: 1.25rem;
  }

  .about-section {
    padding: 1.25rem;
  }

  .about-stat-item {
    padding: 1.25rem 0.75rem;
  }

  .about-stat-num {
    font-size: 1.35rem;
  }

  .about-cta {
    padding: 2rem 1.25rem;
  }

  .about-cta h2 {
    font-size: 1.2rem;
  }

  .about-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .about-step-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .about-step-dash {
    display: none;
  }

  .about-feat-card {
    padding: 0.85rem 1rem;
  }
}

@media (max-width: 480px) {
  .about-page {
    padding: 0;
  }

  .about-grid-2,
  .about-grid-4,
  .about-stats {
    grid-template-columns: 1fr;
  }

  .about-hero h1 {
    font-size: 1.3rem;
  }

  .about-section-title {
    font-size: 1.1rem;
  }

  .about-body {
    gap: 1.5rem;
  }

  .about-feat-card {
    font-size: 0.85rem;
  }

  .about-step {
    padding: 0.75rem 1rem;
  }

  .about-step-num {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Portal Gateway (Identical to hayatfund.org/ar/page/22/UniversityEducationProgram)
   ========================================================================== */
body.hf-gateway-page {
  background-color: #F2F7FA;
}

[data-theme="dark"] body.hf-gateway-page {
  background-color: #0b1120;
}

body.hf-gateway-page main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  flex: 1;
}

.portal-exact-section {
  width: 100%;
  background: #F2F7FA;
  padding: 1.5rem max(1.5rem, calc((100% - min(1600px, 97.5vw)) / 2 + 1.25rem)) 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: auto;
  box-sizing: border-box;
}

[data-theme="dark"] .portal-exact-section {
  background: #0b1120;
}

.portal-exact-container {
  max-width: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: stretch;
  margin: 0 auto;
  box-sizing: border-box;
}

.portal-exact-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: none;
  padding: 2.25rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .portal-exact-card {
  background: #1e293b;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.portal-exact-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

[data-theme="dark"] .portal-exact-card:hover {
  box-shadow: none;
}

.portal-exact-icon {
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
}

.portal-exact-icon-img {
  height: 64px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}

.portal-exact-card:hover .portal-exact-icon-img {
  transform: scale(1.06);
}

.portal-exact-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #1B365D;
  margin: 0.35rem 0 1.75rem;
  text-align: center;
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  line-height: 1.3;
}

[data-theme="dark"] .portal-exact-title {
  color: #93c5fd;
}

.portal-exact-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.portal-exact-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0.85rem;
  box-sizing: border-box;
  flex-direction: row-reverse;
}

.portal-exact-text {
  font-size: 1.18rem;
  color: #1e293b;
  line-height: 1.75;
  text-align: right;
  flex: 1;
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  font-weight: 700;
}

[data-theme="dark"] .portal-exact-text {
  color: #e2e8f0;
}

.portal-exact-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 3px;
}

.portal-exact-check svg {
  width: 26px;
  height: 26px;
}

.portal-exact-check svg path {
  stroke: #0E75AF !important;
}

.portal-btn-apply-scholarship {
  background: #0E75AF;
  color: #ffffff !important;
  border-radius: 50px;
  padding: 0.75rem 3.25rem;
  font-size: 1.12rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #0E75AF;
  transition: all 0.2s ease;
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  cursor: pointer;
  box-sizing: border-box;
}

.portal-btn-apply-scholarship:hover {
  background: #0a5f8f;
  border-color: #0a5f8f;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 117, 175, 0.3);
}

.portal-btn-apply-loan {
  background: transparent;
  color: #0E75AF !important;
  border: 2px solid #0E75AF;
  border-radius: 50px;
  padding: 0.75rem 3.25rem;
  font-size: 1.12rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #0E75AF;
  transition: all 0.2s ease;
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  cursor: pointer;
  box-sizing: border-box;
}

.portal-btn-apply-loan:hover {
  background: #0E75AF;
  border-color: #0E75AF;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 117, 175, 0.3);
}

@media (min-width: 769px) {
  .portal-nowrap-desktop {
    white-space: nowrap !important;
  }
}

@media (max-width: 860px) {
  body.hf-gateway-page {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  body.hf-gateway-page header {
    min-height: 56px !important;
    padding: 0.5rem 0.85rem !important;
  }

  body.hf-gateway-page .official-logo-img {
    height: 38px !important;
    max-width: 160px !important;
  }

  body.hf-gateway-page .nav-controls {
    gap: 0.4rem !important;
    overflow: visible !important;
  }

  body.hf-gateway-page .btn-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
  }

  body.hf-gateway-page #btn-theme-toggle {
    display: flex !important;
  }

  .portal-nowrap-desktop {
    white-space: normal !important;
  }

  .portal-exact-section {
    padding: 1.25rem 0.85rem 2rem !important;
    align-items: stretch !important;
  }

  .portal-exact-container {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .portal-exact-card {
    padding: 1.75rem 1.25rem 1.5rem !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .portal-exact-icon {
    height: 52px !important;
    margin-bottom: 0.4rem !important;
  }

  .portal-exact-icon-img {
    height: 48px !important;
    max-width: 60px !important;
  }

  .portal-exact-title {
    font-size: 1.35rem !important;
    margin: 0.25rem 0 1rem !important;
    line-height: 1.35 !important;
  }

  .portal-exact-list {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 1.25rem !important;
    gap: 0.85rem !important;
  }

  .portal-exact-item {
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .portal-exact-text {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .portal-exact-check {
    width: 22px !important;
    height: 22px !important;
  }

  .portal-exact-check svg {
    width: 20px !important;
    height: 20px !important;
  }

  .portal-btn-apply-scholarship,
  .portal-btn-apply-loan {
    width: 100% !important;
    max-width: 280px !important;
    padding: 0.65rem 1.5rem !important;
    font-size: 1.05rem !important;
    text-align: center !important;
  }

  .portal-simple-footer {
    padding: 1.25rem 0.75rem !important;
  }

  .portal-simple-footer p {
    font-size: 0.82rem !important;
  }

  .terms-modal-overlay {
    padding: 0.5rem !important;
  }

  .terms-modal-card {
    max-height: 94vh !important;
    border-radius: 16px !important;
  }

  .terms-modal-header {
    padding: 0.85rem 1rem !important;
  }

  .terms-modal-header h3 {
    font-size: 1.05rem !important;
  }

  .terms-modal-body {
    padding: 1rem 0.85rem !important;
  }

  .terms-modal-footer {
    padding: 0.75rem 1rem !important;
  }

  .terms-modal-footer button {
    width: 100% !important;
    padding: 0.6rem 1.5rem !important;
  }
}

/* Print media CSS style override rules (Section 13) */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  header,
  footer,
  .btn-icon,
  button,
  .nav-controls,
  .visitor-nav-menu,
  .no-print,
  .card.no-print,
  select,
  input,
  textarea {
    display: none !important;
    visibility: hidden !important;
  }

  .dynamic-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1rem !important;
  }

  .dynamic-table th,
  .dynamic-table td {
    border: 1px solid #333 !important;
    color: black !important;
    padding: 8px !important;
    font-size: 10pt !important;
    text-align: right !important;
  }
}

/* RTL / LTR Internationalization (i18n) Engine & Directional Helpers */
[dir="ltr"] {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif !important;
  text-align: left;
}

[dir="rtl"] {
  font-family: 'Almarai', 'Inter', system-ui, -apple-system, sans-serif !important;
  text-align: right;
}

/* Prevent English text/phrases from wrapping or splitting across lines */
.english-text {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  white-space: nowrap;
}

/* Explicit direction-flipped icons in LTR */
[dir="ltr"] .dir-flip {
  transform: scaleX(-1) !important;
  display: inline-block !important;
}

/* Automatic directional icon mirroring in LTR mode (e.g. navigation arrows) */
[dir="ltr"] .fa-arrow-left:not(.no-flip),
[dir="ltr"] .fa-arrow-right:not(.no-flip),
[dir="ltr"] .fa-chevron-left:not(.dir-flip):not(.no-flip),
[dir="ltr"] .fa-chevron-right:not(.dir-flip):not(.no-flip),
[dir="ltr"] .fa-angle-left:not(.no-flip),
[dir="ltr"] .fa-angle-right:not(.no-flip),
[dir="ltr"] .fa-right-from-bracket:not(.no-flip),
[dir="ltr"] .fa-left-long:not(.no-flip),
[dir="ltr"] .fa-right-long:not(.no-flip) {
  transform: scaleX(-1);
  display: inline-block;
}

/* Text alignment & directional behavior for forms & inputs */
[dir="ltr"] input:not([type="checkbox"]):not([type="radio"]),
[dir="ltr"] select,
[dir="ltr"] textarea,
[dir="ltr"] .form-control,
[dir="ltr"] .custom-select {
  text-align: left !important;
  direction: ltr !important;
}

[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .form-control,
[dir="rtl"] .custom-select {
  text-align: right !important;
  direction: rtl !important;
}

/* Headings, labels, paragraphs alignment */
[dir="ltr"] label,
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4,
[dir="ltr"] h5,
[dir="ltr"] h6,
[dir="ltr"] p,
[dir="ltr"] td,
[dir="ltr"] th,
[dir="ltr"] label,
[dir="ltr"] small,
[dir="ltr"] .form-group {
  text-align: left !important;
  direction: ltr !important;
}

/* Cards, banners & dashboard headers */
[dir="ltr"] .card-title,
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4,
[dir="ltr"] h5,
[dir="ltr"] h6 {
  text-align: left !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  direction: ltr !important;
}

[dir="rtl"] .card-title,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  text-align: right !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  direction: rtl !important;
}

[dir="ltr"] .dashboard-header {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  text-align: left !important;
}

[dir="ltr"] .dashboard-header>div:first-child {
  text-align: left !important;
  direction: ltr !important;
}

[dir="ltr"] .dashboard-header p,
[dir="ltr"] .welcome-banner p,
[dir="ltr"] .welcome-banner h3,
[dir="ltr"] .welcome-banner span {
  text-align: left !important;
  direction: ltr !important;
}

[dir="ltr"] .status-badge {
  direction: ltr !important;
  flex-direction: row !important;
}

[dir="ltr"] .welcome-banner {
  direction: ltr !important;
  text-align: left !important;
}

[dir="ltr"] .wizard-step-header,
[dir="ltr"] .auth-header {
  text-align: left !important;
}

[dir="ltr"] .forgot-pw-wrapper {
  justify-content: flex-end !important;
}

[dir="ltr"] .wizard-steps {
  direction: ltr !important;
}

[dir="ltr"] .dynamic-table,
[dir="ltr"] .table-responsive {
  direction: ltr !important;
}

[dir="ltr"] .dynamic-table th,
[dir="ltr"] .dynamic-table td {
  text-align: left !important;
}

[dir="rtl"] .wizard-nav-actions {
  flex-direction: row-reverse !important;
}

[dir="rtl"] .wizard-nav-group {
  flex-direction: row !important;
}

[dir="ltr"] .wizard-progress-bar {
  left: 0 !important;
  right: auto !important;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--accent-color)) !important;
}

/* ========================================================
   PREMIUM DESIGN OVERRIDES (Glassmorphism & Animations)
   ======================================================== */
:root {
  --primary-color: #1E4381;
  /* Corporate Dark Blue */
  --secondary-color: #3499CC;
  /* Corporate Light Blue */
  --accent-color: #5bb2d4;
  /* Corporate Accent Blue */
  --card-bg-gradient: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);
  --btn-primary-gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --glass-effect: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(12px);
}

[data-theme="dark"] {
  --primary-color: #4f78e0;
  --secondary-color: #35a3e0;
  --card-bg-gradient: linear-gradient(145deg, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%);
  --glass-effect: rgba(15, 23, 42, 0.7);
}

.card {
  background: var(--card-bg-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal) !important;
}

.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-premium) !important;
}

.btn-primary {
  background: var(--btn-primary-gradient) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
  transition: all var(--transition-normal) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.5) !important;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.form-control {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  border: 2px solid transparent !important;
  border-bottom: 2px solid var(--border-color) !important;
  transition: all var(--transition-fast) !important;
}

[data-theme="dark"] .form-control {
  background: rgba(0, 0, 0, 0.2) !important;
}

.form-control:focus {
  background: var(--surface-color) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

/* Fix for select dropdown visibility (transparent backgrounds and backdrop-filters break select popups in many browsers) */
select.form-control {
  background: var(--surface-color) !important;
  backdrop-filter: none !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] select.form-control {
  background: var(--surface-color) !important;
}

select.form-control option {
  background-color: var(--surface-color) !important;
  color: var(--text-primary) !important;
}

/* ─── Locked / Disabled Field ─────────────────────────────── */
.form-control:disabled,
.form-control[readonly]:disabled,
.form-control[readonly] {
  background-color: rgba(30, 67, 129, 0.06) !important;
  border-style: dashed !important;
  border-color: #1E4381 !important;
  border-width: 1.5px !important;
  color: #1a202c !important;
  -webkit-text-fill-color: #1a202c !important;
  cursor: default !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  user-select: text !important;
  pointer-events: none !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly]:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: rgba(30, 67, 129, 0.18) !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: rgba(79, 120, 224, 0.6) !important;
}

/* Lock icon badge on disabled field wrapper */
.locked-field-wrapper {
  position: relative;
}

.locked-field-wrapper::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.6;
}

[dir="rtl"] .locked-field-wrapper::after {
  left: auto;
  right: 0.9rem;
}

[dir="rtl"] .locked-field-wrapper .form-control:disabled,
[dir="rtl"] .locked-field-wrapper .form-control[readonly]:disabled,
[dir="rtl"] .locked-field-wrapper .form-control[readonly] {
  padding-right: 2.8rem !important;
}

[dir="ltr"] .locked-field-wrapper .form-control:disabled,
[dir="ltr"] .locked-field-wrapper .form-control[readonly]:disabled,
[dir="ltr"] .locked-field-wrapper .form-control[readonly] {
  padding-left: 2.8rem !important;
}


header {
  background: var(--glass-effect) !important;
  backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fix for blurry SVG / Icons inside backdrop-filter and browser native reveal/autofill icons */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button,
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.input-prefix-icon,
.toggle-password-visibility {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Global fix for sharp, crystal clear Font Awesome SVG & font icons */
svg,
.fa-solid,
.fa-regular,
.fa-brands,
.far,
.fas,
.fab,
svg[class*="fa-"],
i[class*="fa-"] {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  transform: translateZ(0);
}

/* Ensure vertically centered input icons preserve their vertical translation */
.toggle-password-visibility,
.input-prefix-icon,
.hf-input-wrap .toggle-password-visibility,
.hf-input-wrap>i:first-child {
  transform: translateY(-50%) !important;
}

/* Fix blurry search icons positioned absolute inside backdrop-filter inputs */
i.fa-search,
i.fa-magnifying-glass,
svg.fa-search,
svg.fa-magnifying-glass,
i[class*="fa-search"],
i[class*="fa-magnifying-glass"],
svg[class*="fa-search"],
svg[class*="fa-magnifying-glass"] {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Validation Failure Highlight Ring */
.validation-failed {
  border: 2px solid var(--danger-color) !important;
  border-bottom: 2px solid var(--danger-color) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35) !important;
  animation: pulse-border-err 1.5s infinite !important;
}

@keyframes pulse-border-err {
  0% {
    box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(239, 68, 68, 0);
  }
}

/* ==============================================
   REVIEW FORM PREMIUM DESIGN
   ============================================== */
/* Review Banner (Horizontal Strip) */
.review-banner {
  margin-top: 3rem;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Watermark in the background */
.review-banner::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  background: url('hayat-watermark.png') no-repeat center;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

.review-banner-content {
  flex: 1.2;
  min-width: 250px;
  z-index: 2;
  text-align: right;
}

.review-banner-content h3 {
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: right;
}

.review-banner-content h3 i {
  color: var(--warning-color);
  animation: starPulse 2s ease-in-out infinite;
}

@keyframes starPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.review-banner-content p {
  font-size: 0.88rem;
  opacity: 0.9;
  line-height: 1.5;
  margin: 0;
  text-align: right;
}

.review-banner-form {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 2;
  justify-content: flex-end;
  z-index: 2;
  width: 100%;
}

.review-banner-form .review-stars {
  display: flex;
  gap: 0.4rem;
  font-size: 2rem;
  cursor: pointer;
  direction: rtl;
  justify-content: center;
}

.review-banner-form .review-stars i {
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}

.review-banner-form .review-stars i:hover {
  transform: scale(1.2);
  color: var(--warning-color);
}

.review-banner-form .review-stars i.fa-solid.fa-star {
  color: var(--warning-color);
  animation: starPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes starPop {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.review-input-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--border-radius-md);
  padding: 0.25rem;
  flex: 1;
  max-width: 450px;
  min-width: 250px;
  transition: border-color 0.2s, background 0.2s;
}

.review-input-group:focus-within {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

.review-input-group input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.6rem 0.8rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: inherit;
  flex: 1;
  width: 100%;
}

.review-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.btn-banner-submit {
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  outline: none;
  border-radius: var(--border-radius-md);
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-banner-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.btn-banner-submit:active {
  transform: translateY(1px);
}

/* Responsive adjustment */
@media (max-width: 991px) {
  .review-banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
  }

  .review-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .review-banner-content h3 {
    justify-content: center;
    width: 100%;
    font-size: 0.9rem !important;
    margin-bottom: 0.15rem !important;
  }

  .review-banner-content h3:nth-of-type(2) {
    margin-top: 0.35rem !important;
  }

  .review-banner-content p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  .review-rating-stars {
    justify-content: center;
    width: 100%;
    margin-bottom: 0.15rem !important;
  }

  .review-rating-stars i {
    font-size: 0.85rem !important;
  }

  .review-banner-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.15rem !important;
  }

  .review-banner-form .review-stars {
    justify-content: center;
    font-size: 1.25rem !important;
    gap: 0.2rem !important;
  }

  .review-input-group {
    max-width: 100%;
    min-width: 100%;
  }

  .review-input-group input {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
  }

  .btn-banner-submit {
    padding: 0.4rem 1rem !important;
    font-size: 0.75rem !important;
    justify-content: center;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

/* Review success animation */
.review-success-toast {
  animation: toastBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastBounce {
  0% {
    transform: translateX(100%) scale(0.5);
    opacity: 0;
  }

  60% {
    transform: translateX(-10px) scale(1.05);
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   HAYATFUND PREMIUM DESIGN SYSTEM — Auth & Type Selection Views
   ═══════════════════════════════════════════════════════════════════════════════ */
.hf-auth-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100vh - 70px);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -2.5rem;
  margin-bottom: -2.5rem;
  padding: 5.5rem 1.5rem 3rem 1.5rem;
  /* Increased top padding to 5.5rem to push text below header */
  box-sizing: border-box;
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  overflow: hidden;
}

.hf-auth-background-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5;
  margin-top: 1rem;
  /* Clean margin below the header padding */
  margin-bottom: 1rem;
  /* Nice gap above the main card */
  width: 100%;
}

.hf-auth-bg-title {
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  text-shadow: 0 2px 4px rgba(15, 23, 42, 0.25);
  white-space: nowrap;
}

.hf-auth-bg-subtitle {
  font-family: 'Cairo', var(--font-arabic), sans-serif;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  opacity: 0.9;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hf-auth-wrap {
    width: auto;
    left: auto;
    right: auto;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: calc(100vh - 65px) !important;
    max-height: none !important;
    overflow: visible !important;
    /* Allow normal body scroll if screen is too small */
    padding-top: 55px !important;
    /* Re-align comfortably below header */
    padding-bottom: 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
  }

  .hf-auth-wrap::before {
    display: block !important;
    height: 65% !important;
  }

  .hf-auth-wrap::after {
    display: block !important;
    background-size: 260px auto !important;
    bottom: 65% !important;
    opacity: 0.25 !important;
  }

  .hf-auth-background-text {
    margin-top: 0.25rem !important;
    margin-bottom: 5px !important;
    padding: 0 1rem;
  }

  .hf-auth-bg-title {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    /* Shrunk even more for ultra compactness */
    text-shadow: 0 2px 4px rgba(15, 23, 42, 0.25) !important;
    white-space: normal;
    margin-bottom: 0.08rem !important;
    line-height: 1.25 !important;
  }

  .hf-auth-bg-subtitle {
    color: #e2e8f0 !important;
    font-size: 0.6rem !important;
    /* Shrunk to 0.6rem */
    text-shadow: 0 1px 3px rgba(15, 23, 42, 0.2) !important;
    white-space: normal;
    line-height: 1.35 !important;
    margin-bottom: 0.04rem !important;
  }

  [data-theme="dark"] .hf-auth-bg-title {
    color: #ffffff !important;
  }

  [data-theme="dark"] .hf-auth-bg-subtitle {
    color: #cbd5e1 !important;
  }
}

/* Solid light background blocker covering the bottom area to prevent color gaps and eliminate line artifacts */
.hf-auth-wrap::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  background-color: #f3f7fb;
  z-index: 1;
  pointer-events: none;
}

/* Beautiful watermark Logo floating elegantly on the left side of the blue background */
.hf-auth-wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 28%;
  /* Aligns with the bottom of the blue background area */
  width: 50%;
  max-width: 500px;
  background: url('hayat-watermark.png') no-repeat left 8% bottom -5px;
  /* Shunted down 5px to clip the white line at the image bottom */
  background-size: 480px auto;
  opacity: 0.45;
  /* Clearly visible watermark logo */
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* Clips the shunted bottom edge containing the white line */
}

/* Dark Mode adaptation for the background elements */
[data-theme="dark"] .hf-auth-wrap {
  background: #0f172a;
}

[data-theme="dark"] .hf-auth-wrap::before {
  background-color: var(--bg-color);
}

[data-theme="dark"] .hf-auth-wrap::after {
  display: none !important;
}

.hf-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .hf-auth-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.06);
}

.hf-card-lg {
  max-width: 500px;
}

.hf-auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.hf-auth-logo {
  height: 56px;
  margin-bottom: 1.25rem;
}

.hf-auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-color);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

[data-theme="dark"] .hf-auth-title {
  color: #e2e8f0;
}

.hf-auth-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

[data-theme="dark"] .hf-auth-desc {
  color: #94a3b8;
}

/* ─── Tabs ─── */
.hf-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 1.75rem;
  gap: 4px;
}

[data-theme="dark"] .hf-tabs {
  background: #0f172a;
}

.hf-tab {
  flex: 1;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.hf-tab.active {
  background: #fff;
  color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .hf-tab.active {
  background: #1e293b;
  color: #e2e8f0;
}

/* ─── Form Body ─── */
.hf-form-body {
  padding: 0;
}

.hf-field {
  margin-bottom: 1.25rem;
}

.hf-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 0.4rem;
}

[data-theme="dark"] .hf-field label {
  color: #cbd5e1;
}

.hf-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hf-input-wrap>i:first-child {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 14px;
  color: #94a3b8;
  font-size: 0.9rem;
  pointer-events: none;
  margin: 0 !important;
}

.hf-input-wrap .toggle-password-visibility {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: var(--primary-color) !important;
  opacity: 0.85;
  cursor: pointer;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 !important;
  padding: 0 !important;
}

[dir="rtl"] .hf-input-wrap .toggle-password-visibility {
  left: 14px !important;
  right: auto !important;
}

[dir="ltr"] .hf-input-wrap .toggle-password-visibility {
  right: 14px !important;
  left: auto !important;
}

.hf-input-wrap input[type="password"] {
  padding-left: 2.6rem;
  padding-right: 2.6rem;
}

.hf-input-suffix {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 14px;
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0 !important;
}

.hf-input {
  width: 100%;
  padding: 0.75rem 2.6rem 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
  transition: all 0.2s;
  outline: none;
}

[data-theme="dark"] .hf-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.hf-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(34, 57, 121, 0.1);
}

.hf-input::placeholder {
  color: #94a3b8;
}

.hf-forgot {
  display: block;
  text-align: left;
  font-size: 0.8rem;
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 0.5rem;
  text-decoration: none;
}

.hf-forgot:hover {
  text-decoration: underline;
}

/* ─── Checkbox ─── */
.hf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.hf-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}

.hf-checkbox label {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.6;
}

[data-theme="dark"] .hf-checkbox label {
  color: #94a3b8;
}

.hf-checkbox a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.hf-checkbox a:hover {
  text-decoration: underline;
}

/* ─── Buttons ─── */
.hf-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  text-align: right;
  border: none;
}

.hf-btn-block {
  width: 100%;
}

.hf-btn-lg {
  padding: 0.85rem 1.5rem;
  justify-content: center;
  font-size: 0.95rem;
}

.hf-btn-primary {
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30, 67, 129, 0.25);
  justify-content: center;
}

.hf-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30, 67, 129, 0.35);
}

[data-theme="dark"] .hf-btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hf-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.hf-btn-primary i {
  font-size: 0.9rem;
}

.hf-btn-outline {
  background: #fff;
  color: #0f172a;
  border: 2px solid #e2e8f0;
  justify-content: space-between;
}

[data-theme="dark"] .hf-btn-outline {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}

.hf-btn-outline:hover {
  border-color: var(--primary-color);
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .hf-btn-outline:hover {
  background: #1e293b;
  border-color: #3b82f6;
}

/* ─── Button internal layout (for choice buttons) ─── */
.hf-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hf-btn-outline .hf-btn-icon {
  background: rgba(34, 57, 121, 0.08);
  color: var(--primary-color);
}

[data-theme="dark"] .hf-btn-outline .hf-btn-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #3b82f6;
}

.hf-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: start;
}

.hf-btn-text span {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.hf-btn-text small {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.7;
}

.hf-btn-arrow {
  color: #94a3b8;
  font-size: 0.85rem;
  opacity: 0.5;
}

.hf-btn-outline .hf-btn-text span {
  color: var(--primary-color);
}

[data-theme="dark"] .hf-btn-outline .hf-btn-text span {
  color: #e2e8f0;
}

.hf-btn-outline .hf-btn-text small {
  color: #64748b;
  opacity: 1;
}

/* ─── Auth actions container ─── */
.hf-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ─── Premium Type Selection Cards ─── */
.type-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.type-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  text-align: right;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.type-card:active {
  transform: scale(0.98);
}

/* Colored accent borders */
.type-card-new {
  border-inline-start: 5px solid #1E4381;
}

.type-card-active {
  border-inline-start: 5px solid #2A9D8F;
}

.type-card-grad {
  border-inline-start: 5px solid #F4A261;
}

.type-card-voc {
  border-inline-start: 5px solid #3499CC;
}

[data-theme="dark"] .type-card-new {
  border-inline-start-color: #4f78e0;
}

[data-theme="dark"] .type-card-active {
  border-inline-start-color: #34d399;
}

[data-theme="dark"] .type-card-grad {
  border-inline-start-color: #fbbf24;
}

[data-theme="dark"] .type-card-voc {
  border-inline-start-color: #35a3e0;
}

.type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);
  border-color: transparent;
}

.type-card-new:hover {
  border-color: #1E4381;
  background: linear-gradient(135deg, var(--surface-color) 60%, rgba(30, 67, 129, 0.03));
}

.type-card-active:hover {
  border-color: #2A9D8F;
  background: linear-gradient(135deg, var(--surface-color) 60%, rgba(42, 157, 143, 0.03));
}

.type-card-grad:hover {
  border-color: #F4A261;
  background: linear-gradient(135deg, var(--surface-color) 60%, rgba(244, 162, 97, 0.03));
}

.type-card-voc:hover {
  border-color: #3499CC;
  background: linear-gradient(135deg, var(--surface-color) 60%, rgba(52, 153, 204, 0.05));
}

[data-theme="dark"] .type-card-new:hover {
  border-color: #4f78e0;
}

[data-theme="dark"] .type-card-active:hover {
  border-color: #34d399;
}

[data-theme="dark"] .type-card-grad:hover {
  border-color: #fbbf24;
}

[data-theme="dark"] .type-card-voc:hover {
  border-color: #35a3e0;
}

.type-card-bg-icon {
  position: absolute;
  top: -10px;
  left: -5px;
  font-size: 5rem;
  opacity: 0.04;
  pointer-events: none;
  transform: rotate(-10deg);
  transition: opacity 0.4s ease;
}

.type-card:hover .type-card-bg-icon {
  opacity: 0.08;
}

.type-card-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.type-card-new .type-card-icon-wrapper {
  background: rgba(30, 67, 129, 0.1);
  color: #1E4381;
}

.type-card-active .type-card-icon-wrapper {
  background: rgba(42, 157, 143, 0.1);
  color: #2A9D8F;
}

.type-card-grad .type-card-icon-wrapper {
  background: rgba(244, 162, 97, 0.1);
  color: #F4A261;
}

.type-card-voc .type-card-icon-wrapper {
  background: rgba(52, 153, 204, 0.1);
  color: #3499CC;
}

[data-theme="dark"] .type-card-new .type-card-icon-wrapper {
  background: rgba(79, 120, 224, 0.15);
  color: #4f78e0;
}

[data-theme="dark"] .type-card-active .type-card-icon-wrapper {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

[data-theme="dark"] .type-card-grad .type-card-icon-wrapper {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .type-card-voc .type-card-icon-wrapper {
  background: rgba(53, 163, 224, 0.15);
  color: #35a3e0;
}

.type-card:hover .type-card-icon-wrapper {
  transform: scale(1.08) rotate(-4deg);
}

.type-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  position: relative;
  z-index: 1;
}

.type-card-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
}

.type-card-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.5;
  color: var(--text-muted);
  font-family: var(--font-latin), monospace;
  direction: ltr;
  display: inline-block;
  width: fit-content;
}

.type-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  opacity: 0.8;
  line-height: 1.4;
}

.type-card-arrow {
  color: #94a3b8;
  font-size: 0.85rem;
  opacity: 0.4;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.type-card:hover .type-card-arrow {
  opacity: 0.8;
  transform: translateX(-3px);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .type-card {
    padding: 0.7rem 0.9rem;
    gap: 0.75rem;
    border-radius: 14px;
  }

  .type-card-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .type-card-title {
    font-size: 0.88rem;
  }

  .type-card-code {
    font-size: 0.65rem;
  }

  .type-card-desc {
    display: none;
  }

  .type-card-bg-icon {
    font-size: 3.5rem;
  }
}

/* ─── Mobile responsive ─── */
@media (max-width: 480px) {
  .hf-auth-card {
    padding: 1.75rem 1.25rem;
    border-radius: 18px;
  }

  .hf-auth-title {
    font-size: 1.25rem;
  }

  .hf-auth-logo {
    height: 44px;
  }

  .hf-auth-wrap {
    padding: 1.25rem 1rem;
  }

  .hf-btn {
    padding: 0.85rem 1rem;
  }

  .hf-btn-text span {
    font-size: 0.9rem;
  }

  .hf-btn-icon {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }
}

/* ─── Premium Split Layout for Onboarding ─── */
.hf-split-container {
  display: flex;
  width: 100%;
  max-width: 1020px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 45px 100px rgba(15, 23, 42, 0.38), 0 18px 45px rgba(15, 23, 42, 0.18), 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  min-height: 580px;
  position: relative;
  z-index: 10;
  transform: perspective(1500px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(0);
}

.hf-brand-panel {
  flex: 1.15;
  background: #cde0f2;
  position: relative;
  padding: 4rem 3.5rem;
  display: flex;
  align-items: center;
  color: var(--primary-color);
  border-left: 1px solid rgba(34, 57, 121, 0.1);
  overflow: hidden;
}

.hf-brand-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(34, 57, 121, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}

.hf-brand-bg-watermark {
  position: absolute;
  bottom: -35px;
  right: -35px;
  width: 250px;
  height: 250px;
  background: url('hayat-star-watermark.png') no-repeat center;
  background-size: contain;
  opacity: 0.7;
  /* Increased opacity to make it clearly visible */
  pointer-events: none;
  z-index: 1;
}

.hf-brand-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hf-brand-logo {
  height: 70px;
  margin-bottom: 2rem;
}

.hf-brand-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: var(--primary-color) !important;
}

.hf-brand-tagline {
  font-size: 1.1rem;
  opacity: 0.95;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: #475569;
}

.hf-brand-description {
  font-size: 0.92rem;
  line-height: 1.65;
  opacity: 0.9;
  margin-bottom: 2.25rem;
  font-weight: 500;
  color: #334155;
}

.hf-brand-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid rgba(34, 57, 121, 0.15);
  padding-top: 1.5rem;
}

.hf-brand-feature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
}

.hf-brand-feature i {
  font-size: 1.1rem;
  color: var(--primary-color);
}

.hf-form-panel {
  flex: 0.85;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
}

.hf-form-panel .hf-auth-card {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
}

/* Adjustments for dark theme split layout */
[data-theme="dark"] .hf-split-container {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .hf-form-panel {
  background: rgba(30, 41, 59, 0.9);
}

[data-theme="dark"] .hf-brand-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.8) 100%);
  color: white;
}

[data-theme="dark"] .hf-brand-panel .hf-brand-title {
  color: white !important;
}

[data-theme="dark"] .hf-brand-panel .hf-brand-tagline {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .hf-brand-panel .hf-brand-description {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .hf-brand-panel .hf-brand-logo {
  filter: brightness(0) invert(1) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

[data-theme="dark"] header .official-logo-img {
  filter: brightness(0) invert(1) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

[data-theme="dark"] .hf-footer-logo {
  filter: brightness(0) invert(1) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

[data-theme="dark"] .hf-brand-panel .hf-brand-feature {
  color: white;
}

[data-theme="dark"] .hf-brand-panel .hf-brand-feature i {
  color: white;
}

[data-theme="dark"] .hf-brand-panel .hf-brand-features {
  border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .hf-brand-panel .hf-brand-overlay {
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 0);
}

[data-theme="dark"] .hf-brand-bg-watermark {
  display: none !important;
}

@media (max-width: 900px) {
  .hf-split-container {
    flex-direction: column;
    max-width: 440px;
    /* Reduced from 500px to look smaller and tighter */
    min-height: auto;
    margin: 1rem auto;
    transform: none !important;
  }

  .hf-brand-panel {
    padding: 2.5rem 2rem;
    text-align: center;
    justify-content: center;
    overflow: hidden;
  }

  .hf-brand-bg-watermark {
    width: 150px;
    height: 150px;
    bottom: -30px;
    right: -30px;
    opacity: 0.25;
  }

  .hf-brand-logo {
    margin: 0 auto 1.25rem auto;
    height: 55px;
  }

  .hf-brand-title {
    font-size: 1.5rem;
  }

  .hf-brand-tagline {
    margin-bottom: 0.5rem;
  }

  .hf-brand-description {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .hf-brand-features {
    display: none;
  }

  .hf-form-panel {
    padding: 2.5rem 1.75rem;
  }
}

/* ─── Corner Logo inside Form Panel ─── */
.hf-form-panel {
  position: relative;
}

.hf-corner-logo {
  position: absolute;
  bottom: 1.25rem;
  left: 1.5rem;
  height: 28px;
  opacity: 0.65;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

[data-theme="dark"] .hf-corner-logo {
  filter: brightness(0) invert(1);
  opacity: 0.45;
}

/* ─── Official Footer (100% Match to Official Website) ─── */
.hf-footer {
  background-color: #e6f0f8;
  color: #1E4381;
  padding: 3.5rem 1.5rem 3rem;
  border-top: none;
  font-family: var(--font-arabic), 'Cairo', sans-serif;
  margin-top: auto;
  direction: rtl;
}

.hf-footer-container {
  max-width: 1240px;
  width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1.15fr 1fr;
  gap: 2.5rem;
  box-sizing: border-box;
}

.hf-footer-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: right;
}

.hf-footer-logo {
  height: 46px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0.15rem;
}

.hf-footer-desc {
  font-size: 0.88rem;
  line-height: 1.85;
  color: #1E3A8A;
  text-align: right;
  margin: 0;
  font-weight: 600;
  opacity: 0.9;
}

.hf-footer-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #1E3A8A;
  margin: 0;
  display: block;
  text-align: right;
  padding-bottom: 0;
}

.hf-footer-title::after {
  display: none !important;
}

.hf-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.hf-footer-links a {
  color: #1E3A8A;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.hf-footer-links a:hover {
  color: #0284c7;
  transform: translateX(-3px);
}

.hf-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.88rem;
}

.hf-footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hf-footer-contact-label {
  font-weight: 700;
  color: #1E3A8A;
  font-size: 0.98rem;
}

.hf-footer-contact-val {
  color: #1E3A8A;
  font-weight: 600;
  font-size: 0.88rem;
  opacity: 0.9;
}

.hf-footer-phone {
  direction: ltr;
  display: inline-block;
  text-align: right;
  font-family: inherit;
}

.hf-footer-social {
  display: flex;
  gap: 0.65rem;
  align-self: flex-start;
  margin-top: 0.2rem;
}

.hf-footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E4381;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hf-footer-social-btn:hover {
  transform: translateY(-2px);
  background: #1E4381;
  color: #ffffff;
}

.hf-footer-social-btn:hover svg {
  fill: #ffffff !important;
}

.hf-footer-copy,
.hf-footer-bottom-text {
  font-size: 0.88rem;
  color: #1E3A8A;
  line-height: 1.7;
  font-weight: 600;
  text-align: right;
  margin: 1.5rem 0 0;
  opacity: 0.95;
}

/* Dark Mode adaptation for the footer */
[data-theme="dark"] .hf-footer {
  background-color: #0f172a;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .hf-footer-title {
  color: #93c5fd;
}

[data-theme="dark"] .hf-footer-desc,
[data-theme="dark"] .hf-footer-links a,
[data-theme="dark"] .hf-footer-contact-val,
[data-theme="dark"] .hf-footer-copy,
[data-theme="dark"] .hf-footer-bottom-text {
  color: #94a3b8;
}

[data-theme="dark"] .hf-footer-contact-label {
  color: #e2e8f0;
}

[data-theme="dark"] .hf-footer-links a:hover {
  color: #38bdf8;
}

[data-theme="dark"] .hf-footer-social-btn {
  background: #1e293b;
  color: #93c5fd;
  box-shadow: none;
}

[data-theme="dark"] .hf-footer-social-btn:hover {
  background: #38bdf8;
  color: #0f172a;
}

[data-theme="dark"] .hf-footer-social-btn svg {
  fill: #93c5fd;
}

[data-theme="dark"] .hf-footer-social-btn:hover svg {
  fill: #0f172a !important;
}

/* Responsive Footer */
@media (max-width: 900px) {
  .hf-footer-container {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    padding: 0 1rem;
    gap: 2rem;
  }
}

@media (max-width: 500px) {
  .hf-footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0;
  }

  .hf-footer {
    padding: 2.5rem 1.25rem 2rem;
  }
}

/* ─── LTR Language Adaptations ─── */
html[lang="en"] body {
  direction: ltr;
}

html[lang="en"] .hf-footer {
  direction: ltr;
}

html[lang="en"] .hf-btn {
  text-align: left;
}

html[lang="en"] .hf-footer-col {
  text-align: left;
}

html[lang="en"] .hf-footer-bottom-text {
  text-align: left;
}



/* Flip directional icons in LTR mode */
html[lang="en"] .fa-arrow-right,
html[lang="en"] .fa-arrow-left,
html[lang="en"] .fa-chevron-left,
html[lang="en"] .fa-chevron-right {
  display: inline-block;
  transform: scaleX(-1);
}

/* ==========================================================================
   Comprehensive Mobile Responsiveness Overrides for 100% functional display
   ========================================================================== */
@media (max-width: 900px) {

  /* Prevent any horizontal layout overflow */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Optimize Main spacing */
  main {
    margin: 0.75rem auto !important;
    padding: 0 0.5rem !important;
  }

  /* Heading adjustments on mobile for better fit */
  h1 {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }

  h2,
  .card-title {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
  }

  h3 {
    font-size: 1.05rem !important;
  }

  /* Card padding reduction */
  .card {
    padding: 1rem !important;
    border-radius: var(--border-radius-md) !important;
  }

  /* Welcome Banner margins and layout - Reverted to Previous Mobile Design */
  body.hf-portal-page .welcome-banner,
  .welcome-banner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.75rem 1.5rem !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, var(--portal-navy-dark, #0d1e3d), var(--portal-navy, #1E4381) 62%, #2f87b5) !important;
    box-shadow: 0 10px 25px rgba(30, 67, 129, 0.14) !important;
    gap: 0 !important;
    border: none !important;
  }

  body.hf-portal-page .welcome-banner::before,
  body.hf-portal-page .welcome-banner::after {
    display: none !important;
  }

  .welcome-banner__illustration {
    display: none !important;
  }

  body.hf-portal-page .welcome-banner__content,
  .welcome-banner__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .welcome-banner h3,
  body.hf-portal-page #banner-user-name,
  .welcome-banner h3 {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
  }

  .banner-welcome-prefix {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    opacity: 0.92 !important;
    margin-bottom: 0.35rem !important;
    text-align: center !important;
  }

  .banner-welcome-name {
    display: block !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  body.hf-portal-page .welcome-banner p,
  body.hf-portal-page #banner-ref-wrapper,
  .welcome-banner p {
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page #banner-ref-number,
  #banner-ref-number {
    font-size: 1.15rem !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-weight: 800 !important;
  }

  /* Buttons flex layout wrapping */
  .welcome-banner__actions,
  .welcome-banner div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
  }

  body.hf-portal-page .welcome-banner button,
  body.hf-portal-page .welcome-banner .btn-primary,
  .welcome-banner button,
  .welcome-banner .btn-primary {
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.7rem !important;
  }

  body.hf-portal-page .welcome-banner button#btn-start-application,
  .welcome-banner button#btn-start-application {
    background: #ffffff !important;
    color: var(--primary-color, #1E4381) !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
  }



  /* Dashboard Header wrapping */
  .dashboard-header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  .dashboard-header div {
    text-align: center !important;
  }

  .dashboard-header h2,
  .dashboard-header p {
    text-align: center !important;
  }

  .status-badge {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Forms & Grid Fixes (Override any inline grid styles) */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
  div[style*="grid-template-columns: 1fr 1.5fr"],
  div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Interview layout grid columns stacking */
  .card div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Modal: دوراتي and popup modals */
  #modal-my-courses > div,
  #modal-my-completed-courses > div {
    padding: 0.65rem 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  #modal-my-courses header,
  #modal-my-completed-courses header {
    padding: 0.5rem 0.75rem !important;
  }

  #modal-my-courses-body {
    padding: 0 !important;
    width: 100% !important;
  }

  /* OTP inputs padding and size for narrow screens */
  .otp-container {
    width: 100% !important;
    gap: clamp(0.3rem, 2vw, 0.5rem) !important;
  }

  .otp-input {
    width: 100% !important;
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    border-radius: 11px !important;
  }

  /* Tables: clean td padding for narrow mobile */
  .dynamic-table td {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.82rem !important;
  }

  .dynamic-table td::before {
    font-size: 0.78rem !important;
  }

  .dynamic-table td .form-control {
    width: 55% !important;
    font-size: 0.8rem !important;
  }

  /* Ensure the blue and white curve divider is visible on mobile devices */
  .hf-split-container {
    position: relative !important;
  }

  .hf-split-container::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 38px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M 0 45 C 300 85, 700 85, 1000 45 L 1000 100 L 0 100 Z' fill='%23122953'/%3E%3C/svg%3E") no-repeat bottom/cover !important;
    z-index: 99 !important;
    pointer-events: none !important;
  }

  /* Style hamburger, about, inbox & courses buttons with the official deep corporate blue */
  #btn-header-hamburger,
  #btn-about-site,
  #btn-header-my-courses {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
  }

  /* No hover effects on tap for header buttons on mobile */
  .nav-controls .btn-icon:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Style the brand description to be readable yet compact on mobile */
  .hf-brand-description {
    display: block !important;
    font-size: 0.72rem !important;
    /* Shrunk from 0.78rem */
    line-height: 1.38 !important;
    margin-bottom: 0.45rem !important;
    text-align: center !important;
    /* Center description text */
  }

  .hf-brand-features {
    display: flex !important;
    /* Enable the 3 bullet points */
    flex-direction: column !important;
    align-items: center !important;
    /* Center the features container items */
    gap: 0.45rem !important;
    /* Compressed gap */
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 0.45rem !important;
    margin-top: 0.2rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hf-brand-feature {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Center features horizontally */
    gap: 0.35rem !important;
    font-size: 0.7rem !important;
    /* Shrunk from 0.75rem */
    color: inherit !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .hf-brand-feature i {
    font-size: 0.8rem !important;
    color: inherit !important;
  }

  .hf-brand-panel {
    padding: 1.25rem 1rem !important;
    /* Compact padding */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: none !important;
    min-height: auto !important;
    overflow: hidden !important;
    /* Clip the watermark image to prevent leaking into the white panel */
  }

  .hf-brand-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hf-brand-logo {
    height: 24px !important;
    /* Shrunk from 35px to 24px for a neat, compact look on mobile */
    width: auto !important;
    max-width: 85% !important;
    margin-bottom: 0.35rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  [dir="rtl"] .hf-brand-title,
  [dir="ltr"] .hf-brand-title,
  .hf-brand-title {
    font-size: 1.05rem !important;
    /* Shrunk from 1.15rem */
    margin-bottom: 0.12rem !important;
    text-align: center !important;
    /* Centered completely (both lines) */
    justify-content: center !important;
    display: block !important;
    width: 100% !important;
  }

  .hf-brand-tagline {
    font-size: 0.74rem !important;
    /* Shrunk from 0.8rem */
    margin-bottom: 0.3rem !important;
    text-align: center !important;
    justify-content: center !important;
    display: block !important;
    width: 100% !important;
  }

  .hf-form-panel {
    padding: 1rem 1rem 2.25rem 1rem !important;
    /* Optimally balanced bottom padding for the SVG wave */
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
    /* Reverted internal scroll to prevent text cutting */
  }

  .hf-auth-header {
    margin-bottom: 0.4rem !important;
  }

  .hf-auth-title {
    font-size: 1.05rem !important;
    /* Shrunk from 1.15rem */
  }

  .hf-auth-desc {
    font-size: 0.71rem !important;
    /* Shrunk from 0.76rem */
    margin-bottom: 0.4rem !important;
  }

  .hf-auth-actions {
    gap: 0.35rem !important;
  }

  .hf-btn {
    padding: 0.38rem 0.6rem !important;
    /* Slightly tighter padding */
  }

  .hf-btn-text {
    font-size: 0.76rem !important;
    /* Shrunk from 0.8rem */
  }

  .hf-btn-text small {
    display: none !important;
    /* Hide secondary descriptions to save space */
  }

  .hf-split-container {
    flex: none !important;
    min-height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0.5rem auto !important;
  }

  /* Center English/LTR text on mobile to override global LTR left alignment */
  [dir="ltr"] .hf-auth-background-text,
  [dir="ltr"] .hf-auth-background-text h1,
  [dir="ltr"] .hf-auth-background-text p,
  [dir="ltr"] .hf-auth-bg-line1,
  [dir="ltr"] .hf-auth-bg-line2,
  [dir="ltr"] .hf-auth-bg-line3,
  [dir="ltr"] .hf-brand-title,
  [dir="ltr"] .hf-brand-tagline,
  [dir="ltr"] .hf-brand-description,
  [dir="ltr"] .hf-brand-feature {
    text-align: center !important;
    justify-content: center !important;
    display: block !important;
  }

  /* Compact lang button on small screen sizes */
  #btn-lang-toggle {
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 0.65rem !important;
  }

  /* Bouncing indicator arrow pointing down on mobile */
  .hf-brand-mobile-arrow {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.5rem !important;
    /* Slightly smaller top margin */
    color: var(--primary-color) !important;
    font-size: 1.05rem !important;
    /* Shrunk from 1.25rem */
    animation: hf-bounce 1.6s infinite !important;
    width: 100% !important;
  }
}

/* Global hidden state for desktop and animations */
.hf-brand-mobile-arrow {
  display: none;
}

@keyframes hf-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}


/* Profile Dropdown Menu */
.profile-menu-container {
  position: relative;
  display: inline-block;
}

#btn-header-profile-menu {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#btn-header-profile-menu:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(30, 67, 129, 0.15);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  width: 280px;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RTL layout alignment */
html[dir="rtl"] .profile-dropdown {
  left: 0;
  right: auto;
  transform-origin: top left;
}

/* LTR layout alignment */
html[dir="ltr"] .profile-dropdown {
  right: 0;
  left: auto;
  transform-origin: top right;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: right;
  width: 100%;
}

.profile-dropdown-avatar {
  font-size: 2.5rem;
  color: var(--secondary-color);
}

.profile-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profile-dropdown-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
}

.profile-dropdown-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
}

.profile-dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 0 -1.25rem;
}

.btn-dropdown-logout {
  width: 100%;
  background: #dc2626;
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: var(--border-radius-xl);
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
  font-family: inherit;
}

.btn-dropdown-logout:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.3);
}

.btn-dropdown-logout:active {
  transform: translateY(1px);
}

.btn-dropdown-logout i {
  font-size: 1rem;
  transform: scaleX(-1);
  /* Orient arrow correctly for RTL logout */
}


/* Pre and Post Evaluation Modern Styling */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-assessment-box {
  padding: 0 !important;
}


.assess-rating-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.assess-rating-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: var(--border-radius-md);
  border: 2px solid var(--border-color);
  background: var(--surface-color);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-secondary);
  position: relative;
}

.assess-rating-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.assess-rating-chip:hover {
  border-color: var(--secondary-color);
  background: var(--surface-hover);
}

.assess-rating-chip:has(input[type="radio"]:checked),
.assess-selected {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(30, 67, 129, 0.25);
  transform: scale(1.05);
}

.assess-question-item.has-error {
  border: 2px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.07) !important;
  border-radius: 14px !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2) !important;
  animation: assessErrorShake 0.4s ease-in-out !important;
}

@keyframes assessErrorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Mobile responsive fixes for assessment modal */
@media (max-width: 576px) {
  .modal-assessment-box {
    border-radius: 20px 20px 0 0 !important;
    max-height: 90svh !important;
    margin: 0 !important;
  }

  .modal-assessment-box h3 {
    font-size: 0.95rem !important;
  }

  .modal-assessment-box>p {
    font-size: 0.82rem !important;
    margin-bottom: 1rem !important;
  }

  .assess-question-item {
    margin-bottom: 1rem !important;
  }

  .assess-question-item label {
    font-size: 0.85rem !important;
    margin-bottom: 0.4rem !important;
  }

  .assess-rating-row {
    gap: 0.25rem !important;
    justify-content: stretch !important;
  }

  .assess-rating-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 38px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
  }

  .assess-rating-row+div {
    font-size: 0.68rem !important;
    margin-top: 0.2rem !important;
  }
}

/* My Courses Card Modern Styling */
.mc-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  background: rgba(30, 67, 129, 0.04);
  border: 1px solid rgba(30, 67, 129, 0.08);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="dark"] .mc-meta-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.mc-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.mc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
}

@media (max-width: 600px) {
  .mc-card {
    border-radius: 14px !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  .mc-card > div:last-child {
    padding: 0.85rem 0.75rem !important;
  }

  .mc-meta-pill {
    font-size: 0.72rem;
    padding: 0.18rem 0.45rem;
  }
}

/* Empty states for capacity courses and student activities */
.catalog-empty-state {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 230px;
  padding: 2rem;
  overflow: hidden;
  border: 1px dashed rgba(30, 67, 129, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 67, 129, 0.035), rgba(52, 153, 204, 0.07));
  text-align: center;
}

.catalog-empty-state::before,
.catalog-empty-state::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(30, 67, 129, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.catalog-empty-state::before {
  width: 210px;
  height: 210px;
  inset-block-start: -130px;
  inset-inline-end: -80px;
}

.catalog-empty-state::after {
  width: 150px;
  height: 150px;
  inset-block-end: -100px;
  inset-inline-start: -55px;
}

.catalog-empty-state-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 620px;
}

.catalog-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(30, 67, 129, 0.15);
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #1e4381, #3499cc);
  box-shadow: 0 10px 22px rgba(30, 67, 129, 0.16);
  font-size: 1.35rem;
}

.catalog-empty-state-kicker {
  margin-bottom: 0.45rem;
  color: #1e4381;
  font-size: 0.72rem;
  font-weight: 800;
}

.catalog-empty-state h4 {
  margin: 0 0 0.55rem;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.6;
}

.catalog-empty-state p {
  max-width: 540px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.8;
}

.catalog-empty-state-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(30, 67, 129, 0.13);
  border-radius: 999px;
  color: #1e4381;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 800;
}

[data-theme="dark"] .catalog-empty-state {
  border-color: rgba(52, 153, 204, 0.2);
  background: linear-gradient(145deg, rgba(30, 67, 129, 0.14), rgba(52, 153, 204, 0.07));
}

[data-theme="dark"] .catalog-empty-state-kicker,
[data-theme="dark"] .catalog-empty-state-note {
  color: #93c5fd;
}

[data-theme="dark"] .catalog-empty-state-note {
  border-color: rgba(147, 197, 253, 0.14);
  background: rgba(30, 67, 129, 0.14);
}

@media (max-width: 600px) {
  .catalog-empty-state {
    min-height: 210px;
    padding: 1.5rem 1.1rem;
  }

  .catalog-empty-state-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-size: 1.15rem;
  }

  .catalog-empty-state h4 {
    font-size: 0.95rem;
  }
}

/* ─── Back-to-Home Button ───────────────────────────────── */
#btn-back-to-home {
  transition: background 0.2s, transform 0.15s;
}

#btn-back-to-home:hover {
  transform: translateX(3px);
  background: rgba(30, 67, 129, 0.12) !important;
}

/* On mobile: hide the label, keep only the icon */
@media (max-width: 600px) {
  .back-btn-label {
    display: none !important;
  }

  #btn-back-to-home {
    padding: 0.4rem 0.5rem !important;
    border-radius: 50% !important;
  }
}

/* --- Redesigned Semester Transactions UI --- */

/* Welcome Overlay Styling */
.trans-instructions-card {
  background: linear-gradient(135deg, var(--surface-color), var(--bg-color));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
}

.trans-instructions-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.trans-instructions-header h4 {
  color: var(--primary-color);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.trans-instructions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.trans-instruction-item {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transition: all var(--transition-normal);
}

.trans-instruction-item:hover {
  transform: translateY(-2px);
  border-color: var(--secondary-color);
  box-shadow: var(--shadow-sm);
}

.trans-instruction-item i {
  font-size: 1.25rem;
  color: var(--success-color);
  margin-top: 0.15rem;
}

.trans-instruction-item .text-wrap h5 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.trans-instruction-item .text-wrap p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Calculator Style Display for Total Cost */
.cost-calculator-card {
  background: radial-gradient(circle at 0% 0%, rgba(52, 153, 204, 0.2) 0%, transparent 50%), linear-gradient(135deg, #1E4381 0%, #3499CC 100%) !important;
  color: white;
  border-radius: var(--border-radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 25px rgba(30, 67, 129, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 120px;
}

.cost-calculator-card label {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cost-calculator-card .total-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Input Fields with Icons - Crystal Clear & Sharp SVGs */
.input-with-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-icon-wrapper i,
.input-with-icon-wrapper svg,
.input-with-icon-wrapper .svg-inline--fa {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) translateZ(0) !important;
  color: var(--primary-color) !important;
  font-size: 1.05rem !important;
  width: 1.1em !important;
  height: 1.1em !important;
  pointer-events: none !important;
  z-index: 10 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

[dir="rtl"] .input-with-icon-wrapper i,
[dir="rtl"] .input-with-icon-wrapper svg,
[dir="rtl"] .input-with-icon-wrapper .svg-inline--fa {
  right: 1rem !important;
  left: auto !important;
}

.input-with-icon-wrapper .form-control,
.input-with-icon-wrapper select,
.input-with-icon-wrapper input {
  padding-right: 2.85rem !important;
  width: 100%;
}



/* Student Action Banners Styling - Clean & Beautiful (Centered & Responsive) */
.student-action-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.9rem !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 18px !important;
  margin: 0 auto 1.25rem auto !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 580px !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.student-action-banner.state-checkin {
  background: linear-gradient(145deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.65) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.12), 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

.student-action-banner.state-checkout {
  background: linear-gradient(145deg, rgba(254, 242, 242, 0.95) 0%, rgba(255, 228, 230, 0.65) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.14), 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

.student-action-banner.state-hub {
  background: linear-gradient(145deg, rgba(240, 249, 255, 0.95) 0%, rgba(224, 242, 254, 0.65) 100%) !important;
  border: 1.5px solid rgba(30, 67, 129, 0.25) !important;
  box-shadow: 0 10px 25px -5px rgba(30, 67, 129, 0.1), 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .student-action-banner.state-checkin {
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.35) 0%, rgba(4, 120, 87, 0.15) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .student-action-banner.state-checkout {
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.35) 0%, rgba(153, 27, 27, 0.15) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .student-action-banner.state-hub {
  background: linear-gradient(145deg, rgba(30, 58, 138, 0.35) 0%, rgba(30, 67, 129, 0.15) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

.student-action-banner .banner-content-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.student-action-banner .banner-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  color: #ffffff !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.student-action-banner.state-checkin .banner-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32) !important;
}

.student-action-banner.state-checkout .banner-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}

.student-action-banner.state-hub .banner-icon {
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%) !important;
  box-shadow: 0 6px 16px rgba(30, 67, 129, 0.3) !important;
}

.student-action-banner .banner-text-block {
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
}

.student-action-banner .banner-title {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  margin: 0 auto !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.student-action-banner.state-checkin .banner-title {
  color: #065f46 !important;
}

.student-action-banner.state-checkout .banner-title {
  color: #991b1b !important;
}

.student-action-banner.state-hub .banner-title {
  color: #1e3a8a !important;
}

[data-theme="dark"] .student-action-banner.state-checkin .banner-title {
  color: #34d399 !important;
}
[data-theme="dark"] .student-action-banner.state-checkout .banner-title {
  color: #f87171 !important;
}
[data-theme="dark"] .student-action-banner.state-hub .banner-title {
  color: #60a5fa !important;
}

.student-action-banner .banner-desc {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  margin: 0 auto !important;
}

.student-action-banner .banner-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.25rem 0.8rem !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.14) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  margin: 0 auto !important;
}

[data-theme="dark"] .student-action-banner .banner-status-pill {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

.student-action-banner .banner-desc-text {
  font-size: 0.86rem !important;
  color: #475569 !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

[data-theme="dark"] .student-action-banner .banner-desc-text {
  color: #cbd5e1 !important;
}

.student-action-banner .banner-btn {
  height: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  padding: 0 1.4rem !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.student-action-banner.state-checkin .banner-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.student-action-banner.state-checkout .banner-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.38) !important;
}

.student-action-banner.state-hub .banner-btn {
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%) !important;
  box-shadow: 0 4px 14px rgba(30, 67, 129, 0.3) !important;
}

.student-action-banner .banner-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

.student-action-banner .banner-btn:active {
  transform: scale(0.97) !important;
}

@media (max-width: 768px) {
  .student-action-banner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.8rem 0.9rem !important;
    gap: 0.5rem !important;
    border-radius: 16px !important;
    margin-bottom: 0.9rem !important;
  }

  .student-action-banner .banner-content-wrap {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .student-action-banner .banner-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    margin: 0 auto !important;
  }

  .student-action-banner .banner-text-block {
    text-align: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.2rem !important;
  }

  .student-action-banner .banner-title {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .student-action-banner .banner-desc {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.2rem !important;
  }

  .student-action-banner .banner-desc-text {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .student-action-banner .banner-status-pill {
    font-size: 0.7rem !important;
    padding: 0.12rem 0.55rem !important;
    gap: 0.3rem !important;
  }

  .student-action-banner .banner-btn {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
    padding: 0 1rem !important;
    margin-top: 0.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Collapsible Registered Course Card */
.course-card.is-registered {
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  transition: all 0.28s ease !important;
}

.course-card.is-registered.card-collapsed {
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.06) !important;
}

.course-card-collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.course-collapse-toggle-btn {
  background: rgba(30, 67, 129, 0.07);
  color: var(--primary-color, #1E4381);
  border: 1px solid rgba(30, 67, 129, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.course-collapse-toggle-btn:hover {
  background: rgba(30, 67, 129, 0.14);
  transform: translateY(-1px);
}

.course-collapsible-body {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.25s ease;
  max-height: 1200px;
  opacity: 1;
}

.course-collapsible-body.is-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Document Upload Dropzones Specific Styling */
.upload-dropzone.has-prev-file {
  border-color: var(--success-color);
  background-color: rgba(16, 185, 129, 0.02);
}

/* Responsive Table to Cards on Mobile */
@media (max-width: 768px) {
  .dynamic-table-responsive {
    border: none;
    overflow-x: visible;
  }

  .dynamic-table-responsive .dynamic-table {
    display: block;
    min-width: auto !important;
    background: transparent !important;
    border: none;
  }

  .dynamic-table-responsive .dynamic-table thead {
    display: none;
    /* Hide header */
  }

  .dynamic-table-responsive .dynamic-table tbody {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }

  .dynamic-table-responsive .dynamic-table tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
  }

  .dynamic-table-responsive .dynamic-table tr:hover {
    transform: translateY(-2px);
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-md);
  }

  .dynamic-table-responsive .dynamic-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    background: transparent !important;
  }

  /* Make main actions/status/semester span 2 cols */
  .dynamic-table-responsive .dynamic-table td[data-label="الفصل"],
  .dynamic-table-responsive .dynamic-table td[data-label="Semester"],
  .dynamic-table-responsive .dynamic-table td[data-label="التكلفة الإجمالية"],
  .dynamic-table-responsive .dynamic-table td[data-label="Total Cost"],
  .dynamic-table-responsive .dynamic-table td[data-label="حالة المعاملة"],
  .dynamic-table-responsive .dynamic-table td[data-label="Status"],
  .dynamic-table-responsive .dynamic-table td[data-label="العمليات"],
  .dynamic-table-responsive .dynamic-table td[data-label="Actions"] {
    grid-column: span 2;
  }

  .dynamic-table-responsive .dynamic-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.2rem;
    display: block;
  }

  /* Inside table formatting adjustments on mobile */
  .dynamic-table-responsive .dynamic-table td[data-label="الفصل"] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-color);
    border-bottom: 1px dashed var(--border-color) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.25rem;
    flex-direction: row;
    justify-content: space-between;
  }

  .dynamic-table-responsive .dynamic-table td[data-label="الفصل"]::before {
    display: none;
  }

  .dynamic-table-responsive .dynamic-table td[data-label="التكلفة الإجمالية"] {
    font-weight: 800;
    color: var(--success-color);
    font-size: 1.05rem;
    background: var(--surface-hover) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--border-radius-sm) !important;
    margin: 0.25rem 0;
  }

  .dynamic-table-responsive .dynamic-table td[data-label="العمليات"] {
    border-top: 1px solid var(--border-color) !important;
    padding-top: 0.75rem !important;
    margin-top: 0.25rem;
    width: 100%;
  }

  .dynamic-table-responsive .dynamic-table td[data-label="العمليات"] button {
    width: 100% !important;
    justify-content: center;
    padding: 0.5rem 1rem !important;
  }
}


/* Custom Accordion for Terms & Conditions */
.terms-accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--surface-color);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.terms-accordion:hover {
  border-color: rgba(30, 67, 129, 0.2);
  box-shadow: var(--shadow-md);
}

.terms-accordion.active {
  border-color: var(--primary-color);
}

.terms-accordion-header {
  padding: 1.25rem 1.5rem;
  background: var(--surface-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-color);
  transition: background 0.3s ease, color 0.3s ease;
}

.terms-accordion-header:hover {
  background: var(--surface-hover);
}

.terms-accordion.active .terms-accordion-header {
  background: rgba(30, 67, 129, 0.03);
  border-bottom: 1px solid var(--border-color);
}

.terms-accordion-icon {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
}

.terms-accordion.active .terms-accordion-icon {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.terms-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--surface-color);
  line-height: 1.8;
  color: var(--text-primary);
}

.terms-accordion-inner {
  padding: 1.5rem;
}

/* Hide logo from entrance brand showcase panels as requested */
.hf-brand-panel .hf-brand-logo,
.hf-brand-panel .logo-fallback {
  display: none !important;
}

/* Align right brand panel content to top matching left form panel */
.hf-brand-panel {
  padding-top: 2.25rem !important;
  justify-content: flex-start !important;
}

/* Mobile responsive styles for thinner header */
@media (max-width: 900px) {
  header {
    padding: 0.7rem 1.25rem !important;
  }

  .official-logo-img {
    height: 42px !important;
  }

  .logo-fallback i {
    font-size: 1.5rem !important;
  }

  .logo-text h1 {
    font-size: 1.1rem !important;
  }

  .logo-text span {
    font-size: 0.65rem !important;
  }

  .btn-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  #btn-lang-toggle {
    min-width: 38px !important;
    font-size: 0.8rem !important;
    padding: 0 0.6rem !important;
  }

  /* Reduce font sizes of white background text behind the card on mobile */
  .hf-auth-background-text h1,
  .hf-auth-bg-title,
  .hf-auth-bg-line1 {
    font-size: 1.1rem !important;
  }

  .hf-auth-background-text p,
  .hf-auth-bg-subtitle,
  .hf-auth-bg-line2 {
    font-size: 0.78rem !important;
  }

  /* Reduce font sizes of white text inside the blue brand panel on mobile */
  .hf-brand-title {
    font-size: 1.15rem !important;
  }

  .hf-brand-tagline {
    font-size: 0.78rem !important;
  }

  .hf-brand-description {
    font-size: 0.72rem !important;
  }

  .hf-brand-feature span {
    font-size: 0.72rem !important;
  }
}

/* Responsive adjustments for status cards and interview section on mobile */
@media (max-width: 768px) {

  /* Override inline padding/margin for status cards on mobile and center text */
  .card[id^="card-student-"] {
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    text-align: center !important;
  }

  /* Align card titles icons to right */
  .card[id^="card-student-"] .card-title {
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .card[id^="card-student-"] p {
    text-align: center !important;
  }

  /* Reduce inner padding of info boxes on mobile */
  .card[id^="card-student-"] div[style*="padding: 1.5rem"],
  .card[id^="card-student-"] div[style*="padding:1.5rem"] {
    padding: 1rem !important;
  }

  /* Reduce date group padding and margins on mobile */
  .interview-date-group {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Reduce slot cards padding on mobile to give more text space */
  .student-interview-slot-card {
    padding: 1rem !important;
    gap: 0.75rem !important;
  }

  /* Styled badge-like button for map location link */
  .interview-date-header a {
    padding: 0.35rem 0.75rem !important;
    background: rgba(15, 118, 110, 0.08) !important;
    border-radius: var(--border-radius-md) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }
}

/* Mobile full-bleed correction for the two different portal wrappers. */
@media (max-width: 900px) {
  body.hf-portal-page .hf-auth-wrap {
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: -2.5rem !important;
    margin-left: -2.5rem !important;
  }

  body.hf-portal-page>#login-gate .hf-auth-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  body.hf-portal-page .hf-auth-wrap {
    margin-right: -0.75rem !important;
    margin-left: -0.75rem !important;
  }

  body.hf-portal-page>#login-gate .hf-auth-wrap {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Keep the refined portal hierarchy legible when the existing dark theme is active. */
body.hf-portal-page[data-theme="dark"] {
  background: var(--bg-color);
}

body.hf-portal-page[data-theme="dark"] .hf-auth-wrap::before {
  background: var(--bg-color);
}

body.hf-portal-page[data-theme="dark"] .hf-split-container {
  border-color: rgba(255, 255, 255, 0.1);
}

body.hf-portal-page[data-theme="dark"] .hf-auth-title {
  color: #e7f1fa !important;
}

body.hf-portal-page[data-theme="dark"] .hf-auth-desc,
body.hf-portal-page[data-theme="dark"] .hf-field label {
  color: #aebdd0;
}

body.hf-portal-page[data-theme="dark"] .hf-tabs {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
}

body.hf-portal-page[data-theme="dark"] .hf-tab.active {
  background: #1e293b;
  color: #e7f1fa;
}

body.hf-portal-page[data-theme="dark"] .hf-btn-outline,
body.hf-portal-page[data-theme="dark"] .btn-secondary {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
}

body.hf-portal-page .card-title {
  color: var(--portal-navy);
}

body.hf-portal-page[data-theme="dark"] .card-title {
  color: #e7f1fa;
}

body.hf-portal-page[data-theme="dark"] .hf-btn-outline .hf-btn-text small {
  color: #94a3b8;
}

/* Compact application status shared by the loan and scholarship portals. */
body.hf-portal-page .application-status-card {
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 0 !important;
  border: 1px solid rgba(30, 67, 129, 0.13);
  border-inline-start: 4px solid var(--portal-sky);
  border-radius: 14px;
  background: var(--surface-color);
  box-shadow: 0 7px 20px rgba(30, 67, 129, 0.055);
}

body.hf-portal-page .application-status-card:hover {
  border-color: rgba(30, 67, 129, 0.2);
  border-inline-start-color: var(--portal-sky);
  box-shadow: 0 8px 22px rgba(30, 67, 129, 0.07);
}

body.hf-portal-page .application-status-card__body {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem !important;
}

body.hf-portal-page .application-status-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(52, 153, 204, 0.16);
  border-radius: 11px;
  background: rgba(52, 153, 204, 0.09);
  color: var(--portal-sky);
  font-size: 1.05rem;
}

body.hf-portal-page .application-status-card__content,
body.hf-portal-page .application-status-card__copy {
  min-width: 0;
}

body.hf-portal-page .application-status-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}

body.hf-portal-page .application-status-card__title {
  margin: 0 0 0.2rem;
  color: var(--portal-navy);
  font-size: 1.08rem !important;
  font-weight: 800;
  line-height: 1.5;
}

body.hf-portal-page .application-status-card__title.update-info-title,
body.hf-portal-page #card-student-update-info .application-status-card__title {
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
  text-align: right;
}

body.hf-portal-page .application-status-card__description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
}

body.hf-portal-page .application-status-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

body.hf-portal-page .application-status-card__badge {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.32rem 0.6rem;
  border: 1px solid rgba(52, 153, 204, 0.2);
  border-radius: 999px;
  background: rgba(52, 153, 204, 0.075);
  color: var(--portal-navy);
  font-size: 0.72rem;
  font-weight: 700;
}

body.hf-portal-page .application-status-card__badge i {
  color: var(--portal-sky);
  font-size: 0.65rem;
}

body.hf-portal-page .application-status-card__review-state {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

body.hf-portal-page .application-status-card__pulse {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--portal-sky);
  box-shadow: 0 0 0 3px rgba(52, 153, 204, 0.11);
}

/* Mobile-first guidance for the current application stage. */
body.hf-portal-page .stage-guidance-card {
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 0 !important;
  border: 1px solid rgba(30, 67, 129, 0.12);
  border-radius: 18px;
  background: var(--surface-color);
  box-shadow: 0 8px 24px rgba(30, 67, 129, 0.065);
}

body.hf-portal-page .stage-guidance-card:hover {
  border-color: rgba(30, 67, 129, 0.18);
  box-shadow: 0 9px 26px rgba(30, 67, 129, 0.075);
}

body.hf-portal-page .stage-guidance-card__header {
  padding: 1rem 1rem 0.8rem;
  border-bottom: 1px solid rgba(30, 67, 129, 0.08);
}

body.hf-portal-page .stage-guidance-card .card-title {
  gap: 0.65rem;
  align-items: center !important;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--portal-navy);
  font-size: 1.08rem !important;
  line-height: 1.55;
}

body.hf-portal-page .stage-guidance-card .card-title>i {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: rgba(30, 67, 129, 0.08);
  color: var(--portal-navy);
  font-size: 0.9rem;
}

body.hf-portal-page .stage-guidance-card__heading>p {
  margin: 0.3rem 0 0;
  padding-inline-start: 3.05rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

body.hf-portal-page .stage-guidance-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  list-style: none;
}

body.hf-portal-page .stage-guidance-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem;
  border: 1px solid rgba(30, 67, 129, 0.09);
  border-radius: 12px;
  background: #f8fbfd;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.85;
}

body.hf-portal-page .stage-guidance-list li::before {
  content: "\f00c";
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  font-family: "Font Awesome 6 Free";
  font-size: 0.78rem;
  font-weight: 900;
}

body.hf-portal-page .stage-guidance-list li:nth-child(2)::before {
  content: "\f071";
  background: rgba(245, 158, 11, 0.11);
  color: #c27803;
}

body.hf-portal-page .stage-guidance-list li:nth-child(3)::before {
  content: "\f044";
  background: rgba(52, 153, 204, 0.11);
  color: var(--portal-sky);
}

body.hf-portal-page[data-theme="dark"] .application-status-card,
body.hf-portal-page[data-theme="dark"] .stage-guidance-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: #121826;
}

body.hf-portal-page[data-theme="dark"] .application-status-card {
  border-inline-start-color: var(--portal-sky);
}

body.hf-portal-page[data-theme="dark"] .application-status-card__title,
body.hf-portal-page[data-theme="dark"] .stage-guidance-card .card-title {
  color: #e7f1fa;
}

body.hf-portal-page[data-theme="dark"] .application-status-card__badge {
  border-color: rgba(52, 153, 204, 0.28);
  background: rgba(52, 153, 204, 0.14);
  color: #d9effb;
}

body.hf-portal-page[data-theme="dark"] .stage-guidance-card__header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.hf-portal-page[data-theme="dark"] .stage-guidance-list li {
  border-color: rgba(255, 255, 255, 0.08);
  background: #172033;
  color: #cbd5e1;
}

@media (max-width: 767.98px) {
  body.hf-portal-page .application-status-card {
    text-align: center !important;
  }

  body.hf-portal-page .application-status-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.85rem !important;
    padding: 1.2rem 1rem !important;
  }

  body.hf-portal-page .application-status-card__icon {
    margin: 0 auto !important;
  }

  body.hf-portal-page .application-status-card__content,
  body.hf-portal-page .application-status-card__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .application-status-card__title,
  body.hf-portal-page .application-status-card__title.update-info-title,
  body.hf-portal-page #card-student-update-info .application-status-card__title,
  body.hf-portal-page #card-student-received .application-status-card__title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.hf-portal-page .application-status-card__description {
    text-align: center !important;
    width: 100% !important;
  }

  body.hf-portal-page .application-status-card__meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
    margin-top: 0.25rem !important;
  }

  body.hf-portal-page .application-status-card__badge {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.hf-portal-page .application-status-card__review-state {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
}

@media (max-width: 380px) {
  body.hf-portal-page .application-status-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0.95rem;
  }

  body.hf-portal-page .stage-guidance-card__header {
    padding: 0.75rem 0.85rem 0.55rem !important;
  }

  body.hf-portal-page .application-status-card__title,
  body.hf-portal-page .stage-guidance-card .card-title {
    font-size: 0.95rem !important;
  }

  body.hf-portal-page .stage-guidance-card .card-title>i {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 0.8rem !important;
    border-radius: 9px !important;
  }

  body.hf-portal-page .stage-guidance-card__heading>p {
    padding-inline-start: 2.5rem !important;
    font-size: 0.73rem !important;
    line-height: 1.45 !important;
  }

  body.hf-portal-page .application-status-card__body {
    padding-inline: 0.85rem !important;
  }

  body.hf-portal-page .stage-guidance-list {
    padding: 0.5rem 0.75rem 0.65rem !important;
    gap: 0.42rem !important;
  }

  body.hf-portal-page .stage-guidance-list li {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 0.55rem !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    border-radius: 9px !important;
    align-items: center !important;
  }

  body.hf-portal-page .stage-guidance-list li::before {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 0.65rem !important;
  }
}

@media (min-width: 768px) {
  body.hf-portal-page .application-status-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.2rem;
  }

  body.hf-portal-page .application-status-card__title {
    font-size: 1.18rem !important;
    text-align: right !important;
    justify-content: flex-start !important;
  }

  body.hf-portal-page .application-status-card__content {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
  }

  body.hf-portal-page .application-status-card__body {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1.05rem 1.2rem !important;
  }

  body.hf-portal-page .application-status-card__description {
    font-size: 0.85rem;
  }

  body.hf-portal-page .application-status-card__meta {
    flex: 0 0 auto;
    gap: 0.45rem;
  }

  body.hf-portal-page .application-status-card__review-state {
    width: auto;
  }

  body.hf-portal-page .stage-guidance-card__header {
    padding: 1.15rem 1.35rem 0.9rem;
  }

  body.hf-portal-page .stage-guidance-card .card-title {
    font-size: 1.16rem !important;
  }

  body.hf-portal-page .stage-guidance-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 1rem 1.35rem 1.2rem;
  }

  body.hf-portal-page .stage-guidance-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    min-height: 118px;
    padding: 0.9rem;
    font-size: 0.86rem;
  }

  body.hf-portal-page .stage-guidance-list li::before {
    width: 38px;
    height: 38px;
  }
}

/* Unified student status cards for both application portals. */
body.hf-portal-page .student-status-card {
  --status-color: var(--portal-navy);
  --status-soft: rgba(30, 67, 129, 0.08);
}

body.hf-portal-page .student-status-card--info,
body.hf-portal-page .student-status-card--documents,
body.hf-portal-page .student-status-card--review,
body.hf-portal-page .student-status-card--interview {
  --status-color: var(--portal-navy);
  --status-soft: rgba(30, 67, 129, 0.08);
}

body.hf-portal-page .student-status-card--received,
body.hf-portal-page .student-status-card--social {
  --status-color: var(--portal-sky);
  --status-soft: rgba(52, 153, 204, 0.1);
}

body.hf-portal-page .student-status-card--action {
  --status-color: #c77800;
  --status-soft: rgba(245, 158, 11, 0.11);
}

body.hf-portal-page .student-status-card--success {
  --status-color: #07865f;
  --status-soft: rgba(16, 185, 129, 0.1);
}

body.hf-portal-page .student-status-card--danger {
  --status-color: #dc3e3e;
  --status-soft: rgba(239, 68, 68, 0.09);
}

body.hf-portal-page .student-status-card:not(.application-status-card) {
  overflow: hidden;
  margin-bottom: 1rem !important;
  padding: 1rem !important;
  border: 1px solid rgba(30, 67, 129, 0.12) !important;
  border-inline-start: 4px solid var(--status-color) !important;
  border-radius: 14px !important;
  background: var(--surface-color) !important;
  box-shadow: 0 7px 20px rgba(30, 67, 129, 0.055) !important;
}

body.hf-portal-page .student-status-card:not(.application-status-card):hover {
  border-color: rgba(30, 67, 129, 0.18) !important;
  border-inline-start-color: var(--status-color) !important;
  box-shadow: 0 8px 22px rgba(30, 67, 129, 0.07) !important;
}

body.hf-portal-page .student-status-card:not(.application-status-card)>.card-title {
  display: flex;
  gap: 0.7rem;
  align-items: center !important;
  margin: 0 0 0.85rem !important;
  padding: 0 0 0.8rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(30, 67, 129, 0.09) !important;
  color: var(--status-color) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}

body.hf-portal-page .student-status-card:not(.application-status-card)>.card-title>i {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--status-soft);
  color: var(--status-color);
  font-size: 1rem;
}

body.hf-portal-page .student-status-card__text {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.91rem;
  line-height: 1.85;
}

body.hf-portal-page .student-status-card__text:last-child {
  margin-bottom: 0;
}

body.hf-portal-page .student-status-card__text--letter {
  padding: 0.9rem;
  border: 1px solid rgba(30, 67, 129, 0.08);
  border-radius: 11px;
  background: #f8fbfd;
}

body.hf-portal-page .student-status-card__action {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-color: var(--status-color) !important;
  background: var(--status-color) !important;
  font-weight: 800;
}

body.hf-portal-page #card-suggest-switch>.btn-primary,
body.hf-portal-page #card-student-loan-docs button[type="submit"] {
  width: 100%;
  min-height: 46px;
  margin: 0;
}

body.hf-portal-page #card-student-loan-docs .form-group {
  padding: 0.85rem;
  border: 1px solid rgba(30, 67, 129, 0.09);
  border-radius: 11px;
  background: #f8fbfd;
}

body.hf-portal-page #card-student-loan-docs .form-group label {
  line-height: 1.65;
}

/* Interview card: extended variant of the shared status system. */
body.hf-portal-page .interview-overview {
  margin-bottom: 0.8rem;
  padding: 0.9rem;
  border: 1px solid rgba(30, 67, 129, 0.09);
  border-radius: 12px;
  background: #f8fbfd;
}

body.hf-portal-page .interview-section-title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.55rem;
  color: var(--portal-navy);
  font-size: 0.98rem;
  line-height: 1.55;
}

body.hf-portal-page .interview-section-title i {
  color: var(--portal-sky);
}

body.hf-portal-page .interview-overview__text {
  margin: 0 0 0.75rem;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.85;
}

body.hf-portal-page .interview-next-step {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px dashed rgba(52, 153, 204, 0.26);
  border-radius: 10px;
  background: rgba(52, 153, 204, 0.06);
}

body.hf-portal-page .interview-next-step__icon {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: rgba(52, 153, 204, 0.11);
  color: var(--portal-sky);
  font-size: 0.75rem;
}

body.hf-portal-page .interview-next-step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.75;
}

body.hf-portal-page .status-inline-notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  padding: 0.8rem;
  border: 1px solid rgba(30, 67, 129, 0.1);
  border-radius: 11px;
  background: rgba(30, 67, 129, 0.035);
}

body.hf-portal-page .status-inline-notice--action {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(245, 158, 11, 0.055);
}

body.hf-portal-page .status-inline-notice__icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--status-soft);
  color: var(--status-color);
  font-size: 0.82rem;
}

body.hf-portal-page .status-inline-notice--action .status-inline-notice__icon {
  background: rgba(245, 158, 11, 0.12);
  color: #c77800;
}

body.hf-portal-page .status-inline-notice h5 {
  margin: 0 0 0.2rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.55;
}

body.hf-portal-page .status-inline-notice p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.7;
}

body.hf-portal-page .interview-booking-panel,
body.hf-portal-page .interview-confirmed-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(30, 67, 129, 0.09);
}

body.hf-portal-page .interview-booking-label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
}

body.hf-portal-page .interview-slots-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

body.hf-portal-page .interview-primary-action,
body.hf-portal-page .interview-secondary-action {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 800;
}

body.hf-portal-page .interview-secondary-action {
  border: 1px dashed var(--portal-navy) !important;
  background: transparent !important;
  color: var(--portal-navy) !important;
}

body.hf-portal-page .interview-confirmation-banner {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.85rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 11px;
  background: rgba(16, 185, 129, 0.08);
  color: #07865f;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.65;
}

body.hf-portal-page .interview-confirmation-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

body.hf-portal-page .interview-detail-row {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem;
  border: 1px solid rgba(30, 67, 129, 0.09);
  border-radius: 11px;
  background: #f8fbfd;
}

body.hf-portal-page .interview-confirmation-details .interview-detail-row:first-child {
  grid-column: 1 / -1;
}

body.hf-portal-page .interview-detail-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-size: 0.74rem;
}

body.hf-portal-page .interview-detail-label i {
  margin-inline-end: 0.25rem;
  color: #07865f;
}

body.hf-portal-page .interview-detail-row strong,
body.hf-portal-page #student-interview-address {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

body.hf-portal-page .interview-map-link {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--portal-navy) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--portal-navy) !important;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

/* Override the interview slot styles injected by app.js. */
body.hf-portal-page #card-student-interview .interview-date-group {
  margin-bottom: 0.8rem !important;
  padding: 0.8rem !important;
  border: 1px solid rgba(30, 67, 129, 0.1) !important;
  border-radius: 12px !important;
  background: #f8fbfd !important;
}

body.hf-portal-page #card-student-interview .interview-date-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  align-items: flex-start !important;
  margin-bottom: 0.7rem !important;
  padding-bottom: 0.7rem !important;
  text-align: start !important;
}

body.hf-portal-page #card-student-interview .interview-date-header a {
  display: inline-flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  background: rgba(52, 153, 204, 0.08);
  color: var(--portal-sky) !important;
  font-size: 0.75rem !important;
  text-decoration: none !important;
}

body.hf-portal-page #card-student-interview .interview-hour-accordion {
  border-color: rgba(30, 67, 129, 0.1) !important;
  border-radius: 10px !important;
}

body.hf-portal-page #card-student-interview .interview-hour-header {
  gap: 0.55rem !important;
  padding: 0.75rem !important;
}

body.hf-portal-page #card-student-interview .interview-hour-header .hour-label {
  font-size: 0.82rem !important;
}

body.hf-portal-page #card-student-interview .interview-hour-body .slots-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.6rem !important;
  padding: 0.7rem !important;
}

body.hf-portal-page #card-student-interview .student-interview-slot-card {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.8rem !important;
  border-width: 1px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.hf-portal-page #card-student-interview .student-interview-slot-card:hover {
  transform: none !important;
}

body.hf-portal-page[data-theme="dark"] .student-status-card:not(.application-status-card),
body.hf-portal-page[data-theme="dark"] .interview-overview,
body.hf-portal-page[data-theme="dark"] .interview-detail-row,
body.hf-portal-page[data-theme="dark"] #card-student-loan-docs .form-group,
body.hf-portal-page[data-theme="dark"] #card-student-interview .interview-date-group {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #121826 !important;
}

body.hf-portal-page[data-theme="dark"] .student-status-card:not(.application-status-card) {
  border-inline-start-color: var(--status-color) !important;
}

body.hf-portal-page[data-theme="dark"] .student-status-card__text--letter,
body.hf-portal-page[data-theme="dark"] .stage-guidance-list li {
  background: #172033;
}

@media (min-width: 768px) {
  body.hf-portal-page .student-status-card:not(.application-status-card) {
    padding: 1.25rem !important;
  }

  body.hf-portal-page .student-status-card:not(.application-status-card)>.card-title {
    font-size: 1.18rem !important;
  }

  body.hf-portal-page .student-status-card__text {
    font-size: 0.95rem;
  }

  body.hf-portal-page .student-status-card__action,
  body.hf-portal-page #card-suggest-switch>.btn-primary {
    width: auto;
  }

  body.hf-portal-page .interview-overview {
    padding: 1.15rem;
  }

  body.hf-portal-page .interview-overview__text {
    font-size: 0.93rem;
  }

  body.hf-portal-page .interview-confirmation-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.hf-portal-page .interview-detail-row--address {
    grid-column: 1 / -1;
  }

  body.hf-portal-page .interview-map-link {
    width: auto;
  }

  body.hf-portal-page #card-student-interview .interview-date-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.hf-portal-page #card-student-interview .interview-date-header a {
    width: auto;
  }

  body.hf-portal-page #card-student-interview .interview-hour-body .slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  }
}

/* Validation failed input highlighting & shake animation */
.validation-failed {
  border-color: var(--danger-color) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  animation: hfShake 0.4s ease-in-out !important;
  transition: all 0.2s ease-in-out !important;
}

@keyframes hfShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

/* Student courses and activities: Responsive catalog grid matching mobile & desktop aesthetics */
#active-courses-grid,
#active-activities-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#active-courses-grid > *,
#active-activities-grid > *,
#active-courses-grid .course-card-compact,
#active-activities-grid .course-card-compact,
#active-courses-grid .course-card,
#active-activities-grid .course-card,
#active-courses-grid .catalog-empty-state,
#active-activities-grid .catalog-empty-state {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* ─── Compact Mini Course Card Design (Modern Aesthetic) ─── */
.course-card-compact {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3.5px solid #1E4381;
  border-radius: 16px;
  padding: 1.15rem 1.25rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center;
  gap: 0.85rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  direction: rtl;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  min-height: unset !important;
  margin: 0 auto !important;
}

.course-card-compact:hover {
  transform: translateY(-4px);
  border-top-color: #3499CC;
  box-shadow: 0 12px 26px rgba(30, 67, 129, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.course-card-mini-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 0.5rem !important;
}

.course-card-mini-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 auto !important;
  line-height: 1.35 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.course-card-mini-pills-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
}

.mini-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.mini-pill i {
  color: #1E4381;
  font-size: 0.8rem;
}

.mini-pill.pill-available {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.mini-pill.pill-available i {
  color: #10b981;
}

.mini-pill.pill-full {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.mini-pill.pill-full i {
  color: #ef4444;
}

.mini-pill.is-registered {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}

.mini-pill.is-pending {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.course-card-mini-btn-wrap {
  width: 100%;
}

.course-mini-btn {
  width: 100%;
  background: linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.58rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 4px 12px rgba(30, 67, 129, 0.2);
  transition: all 0.22s ease;
}

.course-mini-btn:hover {
  background: linear-gradient(135deg, #163261 0%, #2b84b1 100%);
  box-shadow: 0 6px 16px rgba(30, 67, 129, 0.3);
  transform: translateY(-1px);
}

/* ─── Course Details Dialog Modal (Compact & Sleek) ─── */
.course-details-hero {
  background: radial-gradient(circle at 0% 0%, rgba(52, 153, 204, 0.2) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(30, 67, 129, 0.3) 0%, transparent 50%), linear-gradient(135deg, #1E4381 0%, #3499CC 100%);
  color: white;
  border-radius: 20px 20px 0 0;
  padding: 1.1rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.course-details-close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.course-details-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.course-details-body {
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: calc(82vh - 160px);
  overflow-y: auto;
}

.course-details-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.course-details-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

[data-theme="dark"] .course-details-tile {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.course-details-tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(30, 67, 129, 0.08);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.course-details-tile-text {
  min-width: 0;
  flex: 1;
}

.course-details-tile-text small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.12rem;
  line-height: 1.25;
  white-space: normal;
}

.course-details-tile-text strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.course-details-tile-text strong .meta-date-val {
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-block;
}

.course-details-tile-text strong .meta-date-sep {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 700;
  margin: 0 0.2rem;
  display: inline-block;
}

.course-details-desc-box {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  font-size: 0.84rem;
}

.course-details-footer-bar {
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-hover);
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .course-details-dialog {
    max-height: 96vh !important;
    width: 96% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .course-details-hero {
    padding: 0.6rem 0.8rem !important;
    gap: 0.2rem !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .course-details-hero h2 {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    gap: 0.35rem !important;
  }

  .course-details-close-btn {
    top: 8px !important;
    left: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 0.75rem !important;
  }

  .course-details-body {
    padding: 0.45rem 0.65rem !important;
    gap: 0.35rem !important;
    max-height: calc(96vh - 120px) !important;
    overflow-y: auto !important;
  }

  .course-details-tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.3rem !important;
  }

  .course-details-tile {
    padding: 0.28rem 0.45rem !important;
    gap: 0.35rem !important;
    border-radius: 8px !important;
    align-items: center !important;
  }

  .course-details-tile-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
    border-radius: 5px !important;
    margin: 0 !important;
  }

  .course-details-tile-text small {
    font-size: 0.6rem !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
  }

  .course-details-tile-text strong {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .course-details-tile-text strong .meta-date-val {
    font-size: 0.68rem !important;
  }

  .course-details-desc-box {
    padding: 0.55rem 0.75rem !important;
    border-radius: 10px !important;
  }

  .course-details-desc-box h4 {
    font-size: 0.78rem !important;
    margin-bottom: 0.25rem !important;
    gap: 0.35rem !important;
  }

  .course-details-desc-box p {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
    display: block !important;
    white-space: pre-line !important;
    overflow: visible !important;
    color: var(--text-secondary) !important;
  }

  .course-details-footer-bar {
    padding: 0.45rem 0.65rem !important;
    gap: 0.45rem !important;
    border-radius: 0 0 16px 16px !important;
    flex-wrap: nowrap !important;
  }

  .course-details-footer-bar button {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }

  #course-details-action-btn-wrap button {
    padding: 0.45rem 1rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }
}

.catalog-card--course,
.catalog-card--activity {
  --catalog-accent: #1e4381;
  --catalog-accent-rgb: 30, 67, 129;
  --catalog-accent-secondary: #3499cc;
}

.course-card.catalog-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100% !important;
  min-height: 100%;
  padding: 0 !important;
  overflow: hidden;
  border: 1.5px solid rgba(var(--catalog-accent-rgb), 0.16) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(var(--catalog-accent-rgb), 0.075) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.course-card.catalog-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  z-index: 2;
  background: linear-gradient(90deg, var(--catalog-accent), var(--catalog-accent-secondary));
}

.course-card.catalog-card::after {
  display: none;
}

body.hf-portal-page .course-card.catalog-card:hover,
.course-card.catalog-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--catalog-accent-rgb), 0.25) !important;
  box-shadow: 0 12px 26px rgba(var(--catalog-accent-rgb), 0.11) !important;
}

.catalog-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 1.35rem;
}

.catalog-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 25px;
  margin-bottom: 0.9rem;
}

.catalog-card-eyebrow,
.catalog-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.catalog-card-eyebrow {
  color: var(--catalog-accent);
  letter-spacing: 0.015em;
}

.catalog-card-status {
  flex-shrink: 0;
  padding: 0.36rem 0.62rem;
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.16);
  border-radius: 999px;
  color: var(--catalog-accent);
  background: rgba(var(--catalog-accent-rgb), 0.065);
}

.catalog-card-status.is-pending {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.25);
  background: rgba(245, 158, 11, 0.1);
}

.catalog-card-status.is-rejected {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(239, 68, 68, 0.08);
}

.catalog-card-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.catalog-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #ffffff;
  font-size: 1.2rem;
  background: linear-gradient(135deg, var(--catalog-accent), var(--catalog-accent-secondary));
  box-shadow: 0 6px 14px rgba(var(--catalog-accent-rgb), 0.18);
}

.catalog-card:hover .catalog-card-icon {
  transform: none;
}

.catalog-card-title {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.55;
  text-align: start;
  overflow-wrap: anywhere;
}

.catalog-card-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 100%;
  margin-bottom: 0.85rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.14);
  border-radius: 9px;
  color: var(--catalog-accent);
  background: rgba(var(--catalog-accent-rgb), 0.065);
  font-size: 0.75rem;
  line-height: 1.45;
}

.catalog-badges-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  margin-bottom: 0.85rem !important;
  width: 100% !important;
}

.catalog-badges-row .catalog-card-badge {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: start !important;
  padding: 0.45rem 0.75rem !important;
  min-height: 40px !important;
  gap: 0.45rem !important;
  border-radius: 11px !important;
}

.catalog-badges-row .badge-title-line {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.catalog-badges-row .badge-val-line {
  font-size: clamp(0.75rem, 2.4vw, 0.86rem) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.catalog-card-badge strong {
  font-weight: 800;
}

.catalog-card-badge--trainer {
  color: var(--primary-color) !important;
  background: rgba(30, 67, 129, 0.07) !important;
  border-color: rgba(30, 67, 129, 0.18) !important;
}

.catalog-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.catalog-meta-item,
.catalog-location-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 52px;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-location-row {
  margin-bottom: 0.85rem;
}

.catalog-meta-item:hover,
.catalog-location-row:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07);
}

.catalog-meta-icon,
.catalog-location-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.meta-icon-date {
  color: #2563eb !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06)) !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
}

.meta-icon-time {
  color: #d97706 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.06)) !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
}

.meta-icon-duration {
  color: #8b5cf6 !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.06)) !important;
  border: 1px solid rgba(139, 92, 246, 0.24) !important;
}

.meta-icon-hours {
  color: #059669 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.06)) !important;
  border: 1px solid rgba(16, 185, 129, 0.24) !important;
}

.meta-icon-level {
  color: #0284c7 !important;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(2, 132, 199, 0.06)) !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
}

.meta-icon-trainer {
  color: #7c3aed !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.06)) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
}

.meta-icon-location {
  color: #e11d48 !important;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.14), rgba(225, 29, 72, 0.06)) !important;
  border: 1px solid rgba(225, 29, 72, 0.22) !important;
}

.catalog-meta-copy,
.catalog-location-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: start;
  flex: 1;
}

.catalog-meta-copy small,
.catalog-location-copy small {
  margin-bottom: 0.15rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.catalog-meta-copy strong,
.catalog-location-copy strong {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

.meta-date-val {
  display: inline-block;
  direction: ltr !important;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-family: 'Outfit', 'Cairo', sans-serif;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.meta-date-sep {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin: 0 0.25rem;
}

[data-theme="dark"] .meta-date-sep {
  color: #94a3b8 !important;
}

.meta-time-val {
  display: inline-block;
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 800;
}

.catalog-location-copy {
  flex: 1;
}

.catalog-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.3rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.18);
  border-radius: 9px;
  color: var(--catalog-accent);
  background: var(--surface-color);
  font-size: 0.68rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.catalog-map-link:hover {
  color: #ffffff;
  background: var(--catalog-accent);
  transform: translateY(-1px);
}

.catalog-map-link .fa-arrow-up-right-from-square {
  font-size: 0.58rem;
}

.catalog-card-desc {
  flex: 1;
  min-height: 58px;
  margin: 0 0 1rem;
  padding: 0.85rem 0.95rem;
  border: 0;
  border-inline-start: 3px solid rgba(var(--catalog-accent-rgb), 0.28);
  border-radius: 8px;
  color: var(--text-secondary);
  background: rgba(var(--catalog-accent-rgb), 0.035);
  font-size: 0.78rem;
  line-height: 1.8;
  text-align: start;
  overflow-wrap: anywhere;
}

.catalog-card-footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed rgba(var(--catalog-accent-rgb), 0.16);
}

.catalog-seat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.35rem;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  border-radius: 11px;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.catalog-seat-pill.is-available {
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.16);
  color: var(--catalog-accent);
  background: rgba(var(--catalog-accent-rgb), 0.06);
}

.catalog-seat-pill.is-full {
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.24);
  color: var(--catalog-accent);
  background: rgba(var(--catalog-accent-rgb), 0.11);
}

.catalog-card-action {
  flex: 1;
  min-width: 0;
}

.catalog-action-btn {
  width: 100%;
  min-height: 42px;
  padding: 0.65rem 0.9rem;
  border-radius: 11px !important;
  background: linear-gradient(135deg, var(--catalog-accent), var(--catalog-accent-secondary)) !important;
  box-shadow: 0 8px 18px rgba(var(--catalog-accent-rgb), 0.19) !important;
  font-size: 0.78rem;
}

.catalog-action-btn.is-withdraw {
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.22) !important;
  color: #dc2626 !important;
  background: rgba(var(--catalog-accent-rgb), 0.065) !important;
  box-shadow: none !important;
}

.catalog-action-btn:disabled {
  border: 1px solid rgba(var(--catalog-accent-rgb), 0.12) !important;
  color: rgba(var(--catalog-accent-rgb), 0.55) !important;
  background: rgba(var(--catalog-accent-rgb), 0.06) !important;
}

.catalog-action-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 11px 22px rgba(var(--catalog-accent-rgb), 0.25) !important;
}

[data-theme="dark"] .course-card.catalog-card,
[data-theme="dark"] .activity-card.catalog-card {
  border-color: rgba(56, 189, 248, 0.22) !important;
  background: linear-gradient(180deg, #131c2e 0%, #0d1524 100%) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .catalog-card-eyebrow {
  color: #38bdf8 !important;
}

[data-theme="dark"] .catalog-card-title {
  color: #f8fafc !important;
}

[data-theme="dark"] .catalog-card-badge {
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .catalog-card-badge strong {
  color: #e0f2fe !important;
}

[data-theme="dark"] .catalog-card-badge--trainer,
[data-theme="dark"] .catalog-card-badge[style*="chalkboard"],
[data-theme="dark"] .catalog-card-badge[style*="var(--primary-color)"] {
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .catalog-card-badge--trainer strong,
[data-theme="dark"] .catalog-card-badge[style*="chalkboard"] strong {
  color: #f0f9ff !important;
}

[data-theme="dark"] .catalog-meta-item,
[data-theme="dark"] .catalog-location-row {
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(18, 26, 42, 0.95) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .catalog-meta-item:hover,
[data-theme="dark"] .catalog-location-row:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: rgba(26, 38, 62, 0.95) !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .catalog-meta-copy small,
[data-theme="dark"] .catalog-location-copy small {
  color: #94a3b8 !important;
}

[data-theme="dark"] .catalog-meta-copy strong,
[data-theme="dark"] .catalog-location-copy strong {
  color: #f8fafc !important;
}

[data-theme="dark"] .meta-icon-date {
  color: #60a5fa !important;
  background: rgba(37, 99, 235, 0.22) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
}

[data-theme="dark"] .meta-icon-time {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

[data-theme="dark"] .meta-icon-duration {
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
}

[data-theme="dark"] .meta-icon-hours {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

[data-theme="dark"] .meta-icon-level {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

[data-theme="dark"] .meta-icon-trainer {
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
}

[data-theme="dark"] .meta-icon-location {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.22) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
}

[data-theme="dark"] .meta-date-sep {
  color: #94a3b8 !important;
}

[data-theme="dark"] .catalog-map-link {
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: rgba(18, 26, 42, 0.8) !important;
}

[data-theme="dark"] .catalog-map-link:hover {
  color: #ffffff !important;
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}

[data-theme="dark"] .catalog-card-desc {
  color: #cbd5e1 !important;
  background: rgba(18, 26, 42, 0.6) !important;
  border-inline-start: 3px solid #38bdf8 !important;
}

[data-theme="dark"] .catalog-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .catalog-card-status {
  border-color: rgba(56, 189, 248, 0.28);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

[data-theme="dark"] .catalog-seat-pill.is-available {
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
}

[data-theme="dark"] .catalog-seat-pill.is-full {
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

[data-theme="dark"] .catalog-action-btn {
  background: linear-gradient(135deg, #1d4ed8, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="dark"] .catalog-action-btn:disabled {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .catalog-action-btn.is-withdraw {
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.catalog-meta-grid-dynamic {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

@media (max-width: 600px) {
  .catalog-card-body {
    padding: 0.85rem 0.9rem !important;
  }

  .catalog-card-topline {
    min-height: auto !important;
    margin-bottom: 0.4rem !important;
  }

  .catalog-card-heading {
    gap: 0.55rem !important;
    margin-bottom: 0.5rem !important;
  }

  .catalog-card-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
  }

  .catalog-card-title {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  .catalog-badges-row {
    gap: 0.4rem !important;
    margin-bottom: 0.5rem !important;
  }

  .catalog-badges-row .catalog-card-badge {
    min-height: 42px !important;
    padding: 0.35rem 0.45rem !important;
    gap: 0.1rem !important;
    border-radius: 9px !important;
  }

  .catalog-badges-row .badge-title-line {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
  }

  .catalog-badges-row .badge-val-line {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }

  .catalog-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    margin-bottom: 0.45rem !important;
  }

  .catalog-meta-grid-dynamic {
    gap: 0.45rem !important;
    margin-bottom: 0.45rem !important;
  }

  .catalog-meta-item,
  .catalog-location-row {
    padding: 0.38rem 0.55rem !important;
    gap: 0.45rem !important;
    border-radius: 9px !important;
    min-height: 40px !important;
    border-width: 1px !important;
  }

  .catalog-location-row {
    margin-bottom: 0.5rem !important;
  }

  .catalog-meta-icon,
  .catalog-location-icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 0.78rem !important;
  }

  .catalog-meta-copy small,
  .catalog-location-copy small {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.05rem !important;
    line-height: 1.1 !important;
  }

  .catalog-meta-copy strong,
  .catalog-location-copy strong {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .catalog-card-desc {
    padding: 0.5rem 0.65rem !important;
    margin: 0 0 0.55rem !important;
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    min-height: auto !important;
    border-radius: 7px !important;
  }

  .catalog-card-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.5rem !important;
    margin-top: auto !important;
  }

  .catalog-seat-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 38px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
  }

  .catalog-card-action {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  .catalog-action-btn {
    min-height: 38px !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
  }
}

/* Lock background scrolling when modals are open */
body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none;
}


/* All Section & Panel Card Titles - Aligned to Right */
.card-title,
.active-tab-content-panel .card-title,
.card > .card-title,
.card > h3,
.active-tab-content-panel > h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  gap: 0.55rem !important;
  white-space: nowrap !important;
  font-size: clamp(0.92rem, 3.8vw, 1.28rem) !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 1.35rem !important;
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  width: 100% !important;
}

[dir="ltr"] .card-title,
[dir="ltr"] .active-tab-content-panel .card-title,
[dir="ltr"] .card > .card-title,
[dir="ltr"] .card > h3,
[dir="ltr"] .active-tab-content-panel > h3 {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

.card-title i,
.active-tab-content-panel .card-title i {
  flex-shrink: 0 !important;
  color: var(--primary-color) !important;
}




/* ─── Review Banner Mobile-Only Centering ─── */
@media (max-width: 991px) {
  .review-banner,
  .review-banner-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .review-banner-content h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 0.35rem auto !important;
    width: 100% !important;
    gap: 0.5rem !important;
    font-size: clamp(0.95rem, 4vw, 1.25rem) !important;
    font-weight: 800 !important;
  }

  .review-banner-content h3 i {
    color: #ffc107 !important;
    flex-shrink: 0 !important;
  }

  .review-banner-content p {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    font-size: clamp(0.75rem, 3.2vw, 0.88rem) !important;
    line-height: 1.5 !important;
    opacity: 0.92 !important;
  }

  .review-banner-form .review-stars {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   PASSWORD STRENGTH SEGMENTED BAR & COMPACT SINGLE-ROW FEEDBACK
   ========================================================================== */
.pw-strength-container {
  margin-top: 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pw-bar-wrap {
  display: flex;
  gap: 6px;
  width: 100%;
  height: 5px;
}

.pw-bar-segment {
  flex: 1;
  height: 100%;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .pw-bar-segment {
  background: rgba(255, 255, 255, 0.12);
}

.pw-bar-segment.active-weak {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}

.pw-bar-segment.active-medium {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

.pw-bar-segment.active-good {
  background: #0284c7;
  box-shadow: 0 0 6px rgba(2, 132, 199, 0.35);
}

.pw-bar-segment.active-strong {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.pw-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}

.pw-strength-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  transition: color 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.pw-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  transition: all 0.3s ease;
}

[data-theme="dark"] .pw-status-dot {
  background: #475569;
}

.pw-weakness-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  transition: color 0.3s ease;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir="rtl"] .pw-weakness-hint {
  text-align: left;
}

[dir="ltr"] .pw-weakness-hint {
  text-align: right;
}

/* ==========================================================================
   TERMS ACCORDION & MODERN CHEVRON ARROW
   ========================================================================== */
.terms-accordion {
  border: 1px solid rgba(30, 67, 129, 0.12);
  border-radius: 14px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: var(--surface-color, #ffffff);
  box-shadow: 0 2px 8px rgba(30, 67, 129, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.terms-accordion.active {
  border-color: rgba(30, 67, 129, 0.3);
  box-shadow: 0 6px 20px rgba(30, 67, 129, 0.08);
}

.terms-accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.1rem 1.35rem !important;
  background: var(--surface-color, #ffffff);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.terms-accordion-header:hover {
  background: rgba(30, 67, 129, 0.025);
}

.terms-accordion.active .terms-accordion-header {
  background: rgba(30, 67, 129, 0.04);
}

.terms-accordion-header > span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--primary-color, #1E4381);
  line-height: 1.5;
  flex: 1;
}

.terms-accordion-header > span i {
  color: var(--primary-color, #1E4381);
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* الأيقونة الدائرية الأنيقة لسهم الأكورديون */
.terms-accordion-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  background: rgba(30, 67, 129, 0.06) !important;
  color: var(--primary-color, #1E4381) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  border: 1px solid rgba(30, 67, 129, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.terms-accordion-header:hover .terms-accordion-icon {
  background: rgba(30, 67, 129, 0.12) !important;
  border-color: rgba(30, 67, 129, 0.25) !important;
  transform: scale(1.08);
}

.terms-accordion.active .terms-accordion-icon {
  transform: rotate(180deg) !important;
  background: var(--primary-color, #1E4381) !important;
  color: #ffffff !important;
  border-color: var(--primary-color, #1E4381) !important;
  box-shadow: 0 4px 12px rgba(30, 67, 129, 0.28) !important;
}

.terms-accordion.active .terms-accordion-header:hover .terms-accordion-icon {
  transform: rotate(180deg) scale(1.08) !important;
}

/* دعم الوضع الليلي Dark Mode */
[data-theme="dark"] .terms-accordion {
  background: var(--surface-color, #1e293b);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .terms-accordion.active {
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .terms-accordion-header {
  background: transparent;
}

[data-theme="dark"] .terms-accordion-header > span {
  color: #e2e8f0;
}

[data-theme="dark"] .terms-accordion-header > span i {
  color: #60a5fa;
}

[data-theme="dark"] .terms-accordion-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #93c5fd !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .terms-accordion-header:hover .terms-accordion-icon {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="dark"] .terms-accordion.active .terms-accordion-icon {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* ─── Portal Simple Footer (Copyright & Agency link) ─── */
.portal-simple-footer {
  width: 100%;
  padding: 1rem 1rem 1.25rem;
  text-align: center;
  direction: ltr;
  margin-top: auto;
  box-sizing: border-box;
}

.portal-simple-footer p {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.2px;
  font-weight: 500;
}

.portal-simple-footer a {
  color: #0077c8;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.portal-simple-footer a:hover {
  color: #005590;
  text-decoration: underline;
}

[data-theme="dark"] .portal-simple-footer p {
  color: #94a3b8;
}

[data-theme="dark"] .portal-simple-footer a {
  color: #38bdf8;
}

/* ==========================================================================
   Terms Modal Popup (index.html)
   ========================================================================== */
.terms-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  animation: termsFadeIn 0.25s ease-out;
}

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

.terms-modal-card {
  max-width: 860px;
  width: 100%;
  max-height: 88vh;
  background: var(--surface-color, #ffffff);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15, 41, 83, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(30, 67, 129, 0.12));
  animation: termsScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes termsScaleUp {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.terms-modal-header {
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--portal-line, rgba(30, 67, 129, 0.1));
  background: var(--surface-color, #ffffff);
  position: sticky;
  top: 0;
  z-index: 2;
}

.terms-modal-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 117, 175, 0.1);
  color: #0E75AF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.terms-modal-close {
  border: none;
  background: rgba(30, 67, 129, 0.06);
  color: #1B365D;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.terms-modal-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: rotate(90deg);
}

.terms-modal-body {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  flex: 1;
  box-sizing: border-box;
}

.terms-modal-footer {
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--portal-line, rgba(30, 67, 129, 0.1));
  display: flex;
  justify-content: center;
  background: var(--surface-color, #ffffff);
}

[data-theme="dark"] .terms-modal-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .terms-modal-header,
[data-theme="dark"] .terms-modal-footer {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #terms-modal-title {
  color: #93c5fd !important;
}

[data-theme="dark"] .terms-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Terms Modal Accordion Visibility & Text Clipping Fix */
.terms-modal-card .terms-accordion {
  margin-bottom: 1rem;
}

.terms-modal-card .terms-accordion-content {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  transition: none !important;
  background: transparent !important;
}

.terms-modal-card .terms-accordion:not(.active) .terms-accordion-content {
  display: none !important;
}

.terms-modal-card .terms-accordion.active .terms-accordion-content {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

.terms-accordion.active .terms-accordion-content {
  max-height: none !important;
  overflow: visible !important;
}

/* Card Under Study / Review - Align Title to Right */
body.hf-portal-page #card-student-under-study .card-title,
body.hf-portal-page .student-status-card--review .card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 100% !important;
}

[dir="ltr"] body.hf-portal-page #card-student-under-study .card-title,
[dir="ltr"] body.hf-portal-page .student-status-card--review .card-title {
  justify-content: flex-start !important;
  text-align: left !important;
}

body.hf-portal-page .application-status-card__review-state {
  display: none !important;
}

/* Ensure all card titles across the portal are aligned to the right in RTL */
body.hf-portal-page .card-title,
body.hf-portal-page .student-status-card .card-title,
body.hf-portal-page .card[id^="card-student-"] .card-title,
body.hf-portal-page .card > .card-title,
body.hf-portal-page .card > h3,
body.hf-portal-page .active-tab-content-panel .card-title,
body.hf-portal-page .active-tab-content-panel > h3,
body.hf-portal-page .stage-guidance-card .card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 100% !important;
}

[dir="ltr"] body.hf-portal-page .card-title,
[dir="ltr"] body.hf-portal-page .student-status-card .card-title,
[dir="ltr"] body.hf-portal-page .card[id^="card-student-"] .card-title,
[dir="ltr"] body.hf-portal-page .card > .card-title,
[dir="ltr"] body.hf-portal-page .card > h3,
[dir="ltr"] body.hf-portal-page .active-tab-content-panel .card-title,
[dir="ltr"] body.hf-portal-page .active-tab-content-panel > h3,
[dir="ltr"] body.hf-portal-page .stage-guidance-card .card-title {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* إخفاء شارة نتليفاي نهائياً بجميع حالاتها وأشكالها */
a[href*="netlify"],
div:has(> a[href*="netlify"]),
div:has(a[href*="netlify"]),
[class*="netlify"], 
[id*="netlify"],
.netlify-badge, 
iframe[src*="netlify"],
div[data-netlify-badge],
[aria-label*="Netlify" i],
[title*="Netlify" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}