/* Icon Sizing */
.admin-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
}

:root {
  /* 
   * AEROTRUST VENTURES - DEFENCE-COMPLIANT METALLIC THEME
   * Theme: Dark Navy Metallic (Executive & Professional)
   * Default: Dark Mode for authority
   */

  /* Brand Core - Darker Navy Blues */
  --brand-primary: #062442;
  /* Deep Dark Navy - Primary */
  --brand-primary-light: #0A3A5D;
  /* Navy Accent */
  --brand-secondary: #1F3A52;
  /* Darker Secondary Blue */
  --metallic-navy: #0D2D47;
  /* Metallic Navy Gradient Base */
  --metallic-silver: #8B96A0;
  /* Metallic Silver */
  --metallic-shine: #A8B4BF;
  /* Lighter Metallic Highlight */

  /* Accent Colors */
  --saffron-accent: #F47920;
  /* Saffron - CTA only */
  --green-accent: #2E7D32;
  /* Green - Success/Dark theme */
  --neutral-grey: #5D6970;

  /* Text Colors */
  --text-main: #F8FAFC;
  /* Light text for dark theme */
  --text-body: #CBD5E1;
  /* Body text */
  --text-muted: #94a3b8;
  /* Muted text */
  --text-light: #ffffff;
  /* Pure White */

  /* Backgrounds - Dark Theme Default */
  --bg-page: #062442;
  /* Deep Navy Background */
  --bg-surface: #0A3A5D;
  /* Elevated surfaces */
  --bg-overlay: rgba(6, 36, 66, 0.95);

  /* Borders */
  --border-main: #1F3A52;
  /* Dark Navy Border */
  --border-focus: #F47920;
  /* Saffron Focus */
  --border-metallic: linear-gradient(135deg, #1F3A52, #375E84);

  /* Functional Colors */
  --success: #2E7D32;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0A3A5D;

  /* Metallic Shadows & Effects */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);
  --shadow-metallic: 0 8px 16px rgba(6, 36, 66, 0.7), inset 0 1px 0 rgba(168, 180, 191, 0.1);
  --glow-saffron: 0 0 20px rgba(244, 121, 32, 0.3);
  --glow-navy: 0 0 16px rgba(10, 58, 93, 0.5);

  /* --- LEGACY MAPPING (For Backward Compatibility) --- */
  --bg-deep: var(--bg-page);
  --bg-soft: var(--bg-surface);
  --card-dark: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --card-soft-bg: var(--bg-page);

  --blue-main: var(--brand-primary);
  --blue-strong: #041829;
  /* Even darker navy */
  --blue-light: var(--brand-primary-light);

  --silver-main: var(--text-body);
  --silver-soft: var(--text-muted);

  --border-subtle: var(--border-main);
  --border-soft: var(--border-main);

  --white: #ffffff;
  --header-bg: rgba(6, 36, 66, 0.98);
  --header-border: var(--border-main);

  --accent: var(--saffron-accent);
  --accent-soft: #FFF3E0;
  --accent-dark: #E65100;
}

/* Dark Mode - System Preference (Matches our default dark metallic theme) */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #062442;
    --brand-primary-light: #0A3A5D;
    --brand-secondary: #1F3A52;

    --text-main: #F8FAFC;
    --text-body: #CBD5E1;
    --text-muted: #94a3b8;

    --bg-page: #062442;
    --bg-surface: #0A3A5D;
    --bg-overlay: rgba(6, 36, 66, 0.95);

    --border-main: #1F3A52;

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);

    /* Legacy Mapping Update for Dark */
    --header-bg: rgba(6, 36, 66, 0.98);
    --blue-main: var(--brand-primary);
  }
}

/* Explicit Dark Mode Overrides (for JS Toggler) - Metallic Navy */
html[data-theme="dark"] {
  --brand-primary: #062442;
  --brand-primary-light: #0A3A5D;
  --brand-secondary: #1F3A52;
  --metallic-navy: #0D2D47;
  --metallic-silver: #8B96A0;

  --text-main: #F8FAFC;
  --text-body: #CBD5E1;
  --text-muted: #94a3b8;

  --bg-page: #062442;
  --bg-surface: #0A3A5D;
  --border-main: #1F3A52;
  --header-bg: rgba(6, 36, 66, 0.98);

  /* Legacy Mapping Update */
  --bg-deep: var(--bg-page);
  --bg-soft: var(--bg-surface);
  --card-dark: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --card-soft-bg: var(--bg-page);
  --blue-main: var(--brand-primary);
  --silver-main: var(--text-body);
  --border-subtle: var(--border-main);
}

/* Explicit Light Mode Overrides (for JS Toggler) - Clean Professional */
html[data-theme="light"] {
  --brand-primary: #062442;
  --brand-primary-light: #0A3A5D;
  --brand-secondary: #375E84;
  --metallic-navy: #0D2D47;
  --metallic-silver: #8B96A0;
  --metallic-shine: #A8B4BF;

  --text-main: #062442;
  --text-body: #1F3A52;
  --text-muted: #5D6970;

  /* Subtle navy/metallic tinted backgrounds */
  --bg-page: #E8ECF1;
  /* Deeper navy-tinted background for better contrast */
  --bg-surface: #F2F5F8;
  /* Light navy tint for cards/surfaces */
  --border-main: #D1D9E0;
  --border-focus: #F47920;
  --header-bg: rgba(248, 250, 251, 0.98);

  --shadow-sm: 0 2px 4px 0 rgba(6, 36, 66, 0.12);
  --shadow-md: 0 4px 8px -1px rgba(6, 36, 66, 0.18);
  --shadow-lg: 0 10px 20px -3px rgba(6, 36, 66, 0.22);
  --shadow-metallic: 0 6px 16px rgba(6, 36, 66, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Legacy Mapping Update */
  --bg-deep: var(--bg-page);
  --bg-soft: var(--bg-surface);
  --card-dark: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --card-soft-bg: var(--bg-page);
  --blue-main: var(--brand-primary);
  --silver-main: var(--text-body);
  --border-subtle: var(--border-main);
}

/* Metallic Gradient Helpers */
.metallic-navy-gradient {
  background: linear-gradient(135deg, #062442 0%, #0A3A5D 50%, #1F3A52 100%);
}

.metallic-silver-gradient {
  background: linear-gradient(135deg, #8B96A0 0%, #A8B4BF 100%);
}

.text-gradient-metallic {
  background: linear-gradient(135deg, #8B96A0 0%, #CBD5E1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-saffron {
  background: linear-gradient(135deg, #F47920 0%, #FF9547 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Text Selection Colors - Theme Aware */
::selection {
  background-color: rgba(244, 121, 32, 0.3);
  /* Saffron selection for dark theme */
  color: #FFFFFF;
}

::-moz-selection {
  background-color: rgba(244, 121, 32, 0.3);
  color: #FFFFFF;
}

html[data-theme="light"] ::selection {
  background-color: rgba(46, 125, 50, 0.25);
  /* Green selection for light theme */
  color: #062442;
}

html[data-theme="light"] ::-moz-selection {
  background-color: rgba(46, 125, 50, 0.25);
  color: #062442;
}

body {
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-surface) 100%);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
  scroll-behavior: smooth;
  min-height: 100vh;
}

html[data-theme="light"] body {
  background: linear-gradient(180deg, #E8ECF1 0%, #F2F5F8 100%);
  /* Deeper navy-tinted gradient for better contrast */
  color: var(--text-body);
}

a {
  text-decoration: none;
  color: inherit;
}

/* HEADER & NAV */

header {
  background: linear-gradient(180deg, rgba(6, 36, 66, 0.98) 0%, rgba(10, 58, 93, 0.96) 100%);
  backdrop-filter: blur(12px);
  color: var(--text-main);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(31, 58, 82, 0.6);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 250, 0.96) 100%);
  border-bottom: 1px solid var(--border-main);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.brand-logo {
  width: 80px;
  /* Increased from 70px */
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(10, 58, 93, 0.4));
}

/* Logo Switching Logic */
.brand-logo-light {
  display: block;
}

.brand-logo-dark {
  display: none;
}

html[data-theme="light"] .brand-logo-light {
  display: none;
}

html[data-theme="light"] .brand-logo-dark {
  display: block;
}

html[data-theme="light"] .brand-logo {
  filter: drop-shadow(0 0 6px rgba(6, 36, 66, 0.2));
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-name {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 1.1rem;
  /* Increased from 0.95rem */
  text-transform: uppercase;
  color: var(--text-main);
}

.brand-tagline {
  font-size: 0.85rem;
  /* Increased from 0.78rem */
  color: var(--text-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-theme="light"] .brand-tagline {
  color: var(--text-muted);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  font-size: 0.9rem;
  align-items: center;
}

nav a {
  color: var(--text-main);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
  font-weight: 500;
}

html[data-theme="light"] nav a {
  color: var(--text-body);
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--saffron-accent), var(--brand-primary-light));
  border-radius: 999px;
  transition: width 0.2s ease;
}

nav a:hover {
  color: var(--saffron-accent);
}

html[data-theme="light"] nav a:hover {
  color: var(--green-accent);
}

nav a:hover::after {
  width: 100%;
}

/* Theme toggle button */

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  color: #e5e7eb;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(15, 23, 42, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.7);
  border-color: var(--blue-light);
}

html[data-theme="light"] .theme-toggle {
  color: #4b5563;
  border-color: #d1d5db;
}

html[data-theme="light"] .theme-toggle:hover {
  background: #e5e7eb;
  box-shadow: 0 6px 14px rgba(148, 163, 184, 0.5);
}

/* Mobile Nav Toggle */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

html[data-theme="light"] .nav-toggle span {
  background: #4b5563;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-links.mobile {
  display: none;
  flex-direction: column;
  padding: 0 1.5rem 1rem;
  background: #020617;
  border-bottom: 1px solid rgba(31, 41, 55, 0.9);
}

html[data-theme="light"] .nav-links.mobile {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.nav-links.mobile ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* HERO */

.hero {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 55%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.95), #020617);
  color: var(--silver-main);
  padding: 4.2rem 1.5rem 4rem;
}

html[data-theme="light"] .hero {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 55%),
    linear-gradient(to bottom, #ffffff, #f3f4f6);
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 0.7rem;
}

html[data-theme="light"] .hero-kicker {
  color: #6b7280;
}

.hero h1 {
  font-size: 2.7rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.hero-tagline-main {
  font-size: 0.9rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1.1rem;
}

.hero-subline {
  font-size: 1.08rem;
  color: rgba(229, 231, 235, 0.93);
  margin-bottom: 1.4rem;
}

html[data-theme="light"] .hero-subline {
  color: #4b5563;
}

.hero p {
  font-size: 0.96rem;
  max-width: 630px;
  color: rgba(209, 213, 219, 0.9);
  margin-bottom: 1.7rem;
}

html[data-theme="light"] .hero p {
  color: #4b5563;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.btn-primary,
.btn-outline {
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.18s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #E65100 0%, #F47920 50%, #FF9547 100%);
  color: #ffffff !important;
  box-shadow: var(--shadow-md), var(--glow-saffron);
  border: 1px solid rgba(244, 121, 32, 0.3);
}

html[data-theme="light"] .btn-primary {
  box-shadow: 0 6px 16px rgba(244, 121, 32, 0.3), 0 2px 8px rgba(6, 36, 66, 0.1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(244, 121, 32, 0.5);
  background: linear-gradient(135deg, #F47920 0%, #FF9547 50%, #FFAB6B 100%);
}

html[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 10px 24px rgba(244, 121, 32, 0.4), 0 4px 12px rgba(6, 36, 66, 0.15);
}

.btn-outline {
  background: transparent;
  color: var(--text-main);
  border-color: var(--metallic-silver);
}

html[data-theme="light"] .btn-outline {
  color: var(--text-main);
  border-color: var(--border-main);
}

.btn-outline:hover {
  background: linear-gradient(135deg, rgba(6, 36, 66, 0.1), rgba(10, 58, 93, 0.2));
  border-color: var(--saffron-accent);
  color: var(--saffron-accent);
  transform: translateY(-1px);
}

html[data-theme="light"] .btn-outline:hover {
  background: linear-gradient(135deg, rgba(6, 36, 66, 0.05), rgba(10, 58, 93, 0.08));
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.hero-card {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.98));
  border-radius: 1.4rem;
  padding: 1.8rem;
  border: 1px solid rgba(51, 65, 85, 0.9);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(4, 120, 196, 0.4);
}

html[data-theme="light"] .hero-card {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), #ffffff);
  border-color: #e5e7eb;
  box-shadow:
    0 18px 40px rgba(148, 163, 184, 0.4);
}

.hero-card h2 {
  font-size: 1.05rem;
  margin-bottom: 1.4rem;
  color: #e5e7eb;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-weight: 600;
}

html[data-theme="light"] .hero-card h2 {
  color: #111827;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.3rem;
}

.stat {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(55, 65, 81, 0.9);
}

html[data-theme="light"] .stat {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.stat span {
  display: block;
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 0.3rem;
}

html[data-theme="light"] .stat span {
  color: #6b7280;
}

.stat strong {
  font-size: 0.9rem;
  color: #f9fafb;
}

html[data-theme="light"] .stat strong {
  color: #111827;
}

.hero-note {
  font-size: 0.8rem;
  color: rgba(156, 163, 175, 0.95);
}

/* SECTIONS */

section {
  padding: 4rem 1.5rem;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.4rem;
  color: var(--silver-main);
  font-weight: 700;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title::before {
  content: "";
  width: 10px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue-light), var(--blue-main));
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7);
}

.section-subtitle {
  font-size: 1rem;
  margin-top: 0.8rem;
  margin-bottom: 2.5rem;
  color: var(--muted);
  max-width: 720px;
}

/* ABOUT */

#about {
  background: radial-gradient(circle at top right, rgba(15, 23, 42, 0.8), #020617);
}

html[data-theme="light"] #about {
  background: #f9fafb;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.8rem;
  margin-top: 1.4rem;
}

.about-card {
  background: rgba(15, 23, 42, 0.96);
  border-radius: 1.2rem;
  padding: 1.7rem 1.8rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(31, 41, 55, 0.95);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .about-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.4);
}

.about-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 65%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.about-card:hover::after {
  opacity: 1;
}

.about-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.8rem;
  color: var(--silver-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.about-card h3::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--blue-light);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
}

.about-card ul {
  margin-left: 1.2rem;
  font-size: 0.94rem;
  color: rgba(209, 213, 219, 0.95);
}

html[data-theme="light"] .about-card ul {
  color: #4b5563;
}

.about-card li {
  margin-bottom: 0.6rem;
}

/* SERVICES */

.services {
  background: linear-gradient(145deg, #020617, #020617 40%, #020617 60%, #020617 100%);
}

html[data-theme="light"] .services {
  background: #ffffff;
}

.services .section-title,
.services .section-subtitle {
  color: #e5e7eb;
}

html[data-theme="light"] .services .section-title,
html[data-theme="light"] .services .section-subtitle {
  color: #111827;
}

html[data-theme="light"] .services .section-subtitle {
  color: #6b7280;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.8rem;
}


/* Global Password Toggle Styles */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-wrapper .form-control {
  padding-right: 70px !important;
  /* Make space for the toggle button */
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--saffron-accent);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 50px;
  text-align: center;
  letter-spacing: 0.03em;
}

.password-toggle-btn:hover {
  color: #FF9547;
  transform: translateY(-50%) scale(1.05);
}

.password-toggle-btn:focus {
  outline: none;
  color: var(--saffron-accent);
}

.password-toggle-btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* Light Theme - Green Accent */
html[data-theme="light"] .password-toggle-btn {
  background: transparent;
  border: none;
  color: var(--green-accent);
}

html[data-theme="light"] .password-toggle-btn:hover {
  color: #1B5E20;
}

html[data-theme="light"] .password-toggle-btn:focus {
  outline: none;
  color: var(--green-accent);
}

/* Legacy password-toggle support (if any remain) */
.password-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.password-toggle:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.password-toggle:focus {
  outline: none;
  color: var(--accent);
}

html[data-theme="light"] .service-item {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.1), #ffffff);
  border-color: #e5e7eb;
  box-shadow: 0 10px 28px rgba(148, 163, 184, 0.4);
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.service-item:hover::before {
  opacity: 1;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.65);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #bae6fd;
  margin-bottom: 0.9rem;
}

html[data-theme="light"] .chip {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.service-item h3 {
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
  color: #f9fafb;
}

html[data-theme="light"] .service-item h3 {
  color: #111827;
}

.service-item p {
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.88);
}

html[data-theme="light"] .service-item p {
  color: #4b5563;
}

/* HIGHLIGHTS */

#highlights {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.85), #020617);
}

html[data-theme="light"] #highlights {
  background: #f3f4f6;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.highlight {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 1.1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(31, 41, 55, 0.95);
  font-size: 0.92rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
  color: rgba(229, 231, 235, 0.95);
}

html[data-theme="light"] .highlight {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #4b5563;
  box-shadow: 0 10px 28px rgba(148, 163, 184, 0.4);
}

.highlight::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-light), var(--blue-main));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.highlight:hover::after {
  transform: scaleX(1);
}

.highlight strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--silver-main);
  font-size: 1rem;
}

/* CONTACT */

.contact {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), #020617);
}

html[data-theme="light"] .contact {
  background: #ffffff;
}

.contact .section-title,
.contact .section-subtitle {
  color: #e5e7eb;
}

html[data-theme="light"] .contact .section-title {
  color: #111827;
}

html[data-theme="light"] .contact .section-subtitle {
  color: #6b7280;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 2.8rem;
  align-items: flex-start;
}

.contact-details p {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="light"] .contact-details p {
  color: #4b5563;
}

.contact-details strong {
  color: #e5e7eb;
}

html[data-theme="light"] .contact-details strong {
  color: #111827;
}

.contact-form {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.13), rgba(15, 23, 42, 0.98));
  border-radius: 1.2rem;
  padding: 1.9rem 1.8rem;
  border: 1px solid rgba(51, 65, 85, 0.95);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(8, 47, 73, 0.7);
}

html[data-theme="light"] .contact-form {
  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.08), #ffffff);
  border-color: #e5e7eb;
  box-shadow: 0 16px 40px rgba(148, 163, 184, 0.5);
}

.contact-form h3 {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  color: #e5e7eb;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

html[data-theme="light"] .contact-form h3 {
  color: #111827;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 1.3rem;
}

.form-field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.3rem;
  display: block;
  color: rgba(156, 163, 175, 0.95);
  font-weight: 500;
}

html[data-theme="light"] .form-field label {
  color: #6b7280;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border-radius: 0.8rem;
  border: 1px solid rgba(55, 65, 81, 0.95);
  background: rgba(15, 23, 42, 0.9);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: #f9fafb;
  transition: all 0.18s ease;
}

html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field textarea {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.8);
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-small {
  font-size: 0.78rem;
  color: rgba(156, 163, 175, 0.95);
  line-height: 1.5;
}

html[data-theme="light"] .form-small {
  color: #6b7280;
}

/* FOOTER */

footer {
  background: #020617;
  color: rgba(148, 163, 184, 0.9);
  text-align: center;
  padding: 1.6rem 1rem 1.8rem;
  font-size: 0.82rem;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

html[data-theme="light"] footer {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
}

footer a {
  color: var(--blue-light);
}

footer a:hover {
  color: var(--silver-main);
}

/* =========================
   COMPATIBILITY / BACKEND STYLES
   ========================= */

.alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}

.alert-success {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.alert-error,
.alert-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.alert-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.alert-info {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}

.admin-container {
  display: flex;
  min-height: calc(100vh - 80px);
}

.admin-sidebar {
  width: 250px;
  background: var(--card-bg);
  border-right: 1px solid var(--border-soft);
  padding: 2rem 1rem;
}

.admin-nav .nav-link {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--text-main);
  border-radius: 8px;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
  background: var(--card-soft-bg);
}

.admin-content {
  flex: 1;
  padding: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

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

.admin-table th,
.admin-table td {
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  text-align: left;
  color: var(--text-main);
  /* Enforce text color */
}

.admin-table th {
  background: var(--card-soft-bg);
}

/* AUTH / FORMS COMPATIBILITY */
.auth-card {
  max-width: 600px;
  /* Widened to 600px as requested */
  width: 100%;
  margin: 3rem auto;
  padding: 3rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.5rem;
  background: var(--card-soft-bg);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: 4px;
}

/* Products Grid compat */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}

.product-info {
  padding: 1rem;
}

/* RESPONSIVE */


/* RESPONSIVE */

@media (max-width: 1024px) {

  .hero-inner,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  /* Mobile Navigation */
  .nav-container {
    padding: 0.7rem 1.2rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hide the nav container by default on mobile */
  .nav-links {
    display: none;
  }

  /* Show when 'mobile' class is toggle */
  .nav-links.mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(5, 8, 22, 0.99);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(31, 41, 55, 0.9);
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

  html[data-theme="light"] .nav-links.mobile {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  /* Stack items vertically */
  .nav-links.mobile ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.2rem;
  }

  /* Full width buttons */
  .nav-links.mobile .btn-primary,
  .nav-links.mobile .btn-sm {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 0.5rem;
  }

  /* Theme toggle positioning */
  .nav-links.mobile .theme-toggle {
    margin-top: 0.5rem;
    width: 40px;
    height: 40px;
  }

  .hero {
    padding: 3rem 1.2rem;
  }

  .hero-inner {
    gap: 2.5rem;
  }

  .admin-container {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
  }
}

/* AUTH PAGES EXTENSIONS */
.auth-wrapper {
  min-height: calc(100vh - 150px);
  /* Account for header and footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

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

.auth-header h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--silver-main);
}

/* HERO COMPONENT */
.hero {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-secondary) 100%);
  padding: 4rem 0;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hero-kicker {
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.2;
}

html[data-theme="light"] .hero-title {
  color: #111827;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero {
    padding: 3rem 0;
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }

  .hero-actions {
    flex-direction: column;
  }
}

html[data-theme="light"] .auth-header h1 {
  color: #111827;
}

.auth-header p {
  color: var(--muted);
}

.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-theme="light"] .password-toggle {
  color: #6b7280;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.auth-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.link:hover {
  text-decoration: underline;
}

/* Auth Card Override */
.auth-card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at top, var(--card-soft-bg), var(--card-bg));
}

/* ADMIN DASHBOARD EXTENSIONS & OVERRIDES */
.admin-container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 80vh;
}

.admin-sidebar {
  flex: 0 0 250px;
  /* Fixed width sidebar */
  position: sticky;
  top: 2rem;
  height: calc(100vh - 4rem);
  padding: 1.5rem;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-main);
  border-radius: 12px;
  overflow-y: auto;
}

.admin-content {
  flex: 1;
  min-width: 0;
  /* Prevents flex overflow */
}

/* Enhanced Stat Cards */
.stat-card {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-main);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
}

/* Light Mode Enhancement: Make cards pop more */
html[data-theme="light"] .stat-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  background: #ffffff;
}

/* CSS-based Icons for Stats */
.stat-icon {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 10px;
  background-color: var(--bg-page);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-main);
}

.stat-icon::before {
  display: none;
}

.stat-icon[data-icon="box"] {
  background-image: url('../images/icons/box.svg');
}

.stat-icon[data-icon="users"] {
  background-image: url('../images/icons/users-group.svg');
}

.stat-icon[data-icon="cart"] {
  background-image: url('../images/icons/cart.svg');
}

.stat-icon[data-icon="star"] {
  background-image: url('../images/icons/star.svg');
}

.stat-icon[data-icon="visits"] {
  background-image: url('../images/icons/visits.svg');
}

/* Better CSS Icons using Borders/Shapes if desired, but grayscale emojis are a safe "neutral" middle ground 
   Or we can use Font Awesome variable mapping if installed. 
   For "Metallic" feel, we can use SVG masks, but simpliest "Senior Dev" approach is clean SVG or Font Icons.
   Let's stick to the styling - the container makes it look pro.
*/

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Dashboard Grid Fix */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Increased min-width to prevent squishing */
  gap: 2rem;
  margin-bottom: 2rem;
}

.dashboard-section {
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-main);
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Activity Log Badges */
.activity-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-transform: uppercase;
  background-color: var(--bg-page);
  color: var(--text-main);
  border: 1px solid var(--border-main);
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-main);
  align-items: center;
}

.activity-item:last-child {
  border-bottom: none;
}

/* Action Cards */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.action-card {
  padding: 1.5rem;
  border: 1px solid var(--border-main);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-main);
  text-align: center;
  transition: all 0.2s;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.action-card:hover {
  border-color: var(--brand-primary);
  background: var(--bg-page);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.action-icon {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 1rem;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-page);
  border-radius: 50%;
  border: 1px solid var(--border-main);
}

.action-icon::before {
  display: none;
}

.action-icon[data-icon="plus"] {
  background-image: url('../images/icons/plus.svg');
}

.action-icon[data-icon="box"] {
  background-image: url('../images/icons/box.svg');
}

.action-icon[data-icon="users"] {
  background-image: url('../images/icons/users-group.svg');
}

.action-icon[data-icon="chart"] {
  background-image: url('../images/icons/chart.svg');
}


@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    /* Mobile sidebar hidden by default off-screen */
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 260px;
    height: 100vh;
    z-index: 1001;
    transition: left 0.3s ease;
    border-radius: 0;
    border-right: 1px solid var(--border-main);
    box-shadow: var(--shadow-lg);
    display: block;
    /* Ensure it's reachable via transition */
  }

  .admin-sidebar.show {
    left: 0;
  }

  .admin-toggle-btn {
    display: flex !important;
  }

  .sidebar-close-btn {
    display: block !important;
  }

  .admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
  }

  .admin-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .admin-container {
    flex-direction: column;
    padding: 1rem;
  }
}

/* CERTIFICATES PAGE EXTENSIONS */
.certificates-page {
  min-height: 80vh;
}

.certificates-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.certificate-card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s, box-shadow 0.3s;
}

.certificate-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.certificate-image {
  width: 100%;
  height: 250px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.certificate-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

.certificate-image .no-image {
  font-size: 3rem;
  color: var(--text-tertiary);
}

.certificate-content {
  padding: 1.5rem;
}

.certificate-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.certificate-issuer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1rem;
}

.certificate-details {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.certificate-details strong {
  color: var(--text-primary);
}

.certificate-description {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.no-certificates {
  text-align: center;
  padding: 4rem 2rem;
}

.no-certificates-icon {
  font-size: 5rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .certificates-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   FOOTER STYLES
   ================================ */

footer {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page) 100%);
  color: var(--text-body);
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--border-main);
  margin-top: 4rem;
}

html[data-theme="light"] footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.footer-section {
  min-width: 0;
}

.footer-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 1.2rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--saffron-accent), transparent);
}

.footer-description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--text-body);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--saffron-accent);
  transform: translateX(4px);
}

.footer-contact,
.footer-business {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item,
.business-item {
  font-size: 0.875rem;
}

.contact-item strong,
.business-item strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.contact-link {
  color: var(--saffron-accent);
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--brand-primary-light);
  text-decoration: underline;
}

html[data-theme="light"] .contact-link:hover {
  color: var(--brand-primary);
}

.business-item p {
  color: var(--text-body);
  margin: 0;
}

.footer-bottom {
  border-top: 1px solid var(--border-main);
  padding-top: 1.5rem;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* Footer Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  footer {
    padding: 2rem 0 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-section {
    text-align: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    align-items: center;
  }

  .footer-links a:hover {
    transform: none;
  }
}

/* =================================
   MOBILE FORM FIELD IMPROVEMENTS
   ================================= */

@media (max-width: 768px) {

  /* Increase form field heights for better mobile usability */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  textarea,
  select {
    min-height: 48px !important;
    /* Touch-friendly height */
    padding: 0.85rem 1rem !important;
    font-size: 16px !important;
    /* Prevents zoom on iOS */
  }

  /* Password fields need more right padding for toggle button */
  .password-wrapper input[type="password"],
  .password-wrapper input[type="text"] {
    min-height: 50px !important;
    padding: 0.9rem 75px 0.9rem 1rem !important;
    /* Extra padding for toggle button */
    font-size: 16px !important;
  }

  /* Adjust password toggle button for mobile */
  .password-toggle-btn {
    right: 8px;
    padding: 0.5rem 0.9rem;
    min-width: 60px;
    font-size: 0.85rem;
  }

  /* Form groups spacing */
  .form-group {
    margin-bottom: 1.2rem;
  }

  /* Labels */
  label {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 600;
  }

  /* Auth forms specific */
  .auth-form input {
    min-height: 50px !important;
  }

  .auth-form .form-row {
    grid-template-columns: 1fr !important;
    /* Stack fields on mobile */
  }
}

@media (max-width: 480px) {

  /* Extra small screens */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"] {
    min-height: 52px !important;
    padding: 1rem !important;
    font-size: 16px !important;
  }

  .password-wrapper input {
    min-height: 54px !important;
    padding: 1rem 80px 1rem 1rem !important;
  }
}

/* =================================
   AUTH PAGES - LOGIN & REGISTER
   Enhanced Field Sizes for Better UX
   ================================= */

.auth-wrapper input[type="text"],
.auth-wrapper input[type="email"],
.auth-wrapper input[type="password"],
.auth-wrapper input[type="tel"] {
  min-height: 50px !important;
  padding: 0.9rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.5;
}

.auth-wrapper .password-wrapper input {
  padding-right: 70px !important;
}

.auth-wrapper label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.auth-wrapper .form-group {
  margin-bottom: 1.3rem;
}

/* Buttons */
.auth-wrapper .btn {
  min-height: 50px;
  font-size: 1rem;
  padding: 0.9rem 1.5rem;
}

/* Checkbox labels */
.auth-wrapper .checkbox-label {
  font-size: 0.95rem;
}

/* Mobile - even larger */
@media (max-width: 768px) {

  .auth-wrapper input[type="text"],
  .auth-wrapper input[type="email"],
  .auth-wrapper input[type="password"],
  .auth-wrapper input[type="tel"] {
    min-height: 54px !important;
    padding: 1rem 1.1rem !important;
    font-size: 16px !important;
  }

  .auth-wrapper .password-wrapper input {
    padding-right: 75px !important;
  }

  .auth-wrapper .btn {
    min-height: 54px;
    font-size: 1.05rem;
  }
}/* =================================
   CENTER ALL PAGE HEADINGS
   ================================= */

/* Section titles and subtitles */
.section-inner {
    text-align: center;
}

.section-title {
    display: inline-flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Auth page headers */
.auth-header,
.auth-card h1,
.auth-card>div:first-child {
    text-align: center;
}

/* Contact page and other page titles */
h1,
h2.section-title {
    text-align: center;
}

/* About section */
.about-grid {
    text-align: left;
}

.about-card h3 {
    text-align: left;
}