/* ===== 1. DESIGN TOKENS & VARIABLES ===== */
:root {
  --max-width: 1180px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bg: #f6f8fb;
  --surface: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --primary: #004A84;

  --sharp-radius: 8px;
  --sharp-radius-sm: 6px;
  --sharp-shadow-1: 0 8px 20px rgba(2,6,23,0.12);
  --sharp-shadow-2: 0 18px 48px rgba(2,6,23,0.14);
  --sharp-border: rgba(15,23,42,0.08);
  --sharp-muted: #52575e;
  --sharp-text: #0b1220;
  --bs-primary: #004A84;
  --bs-btn-color: #004A84;
}

/* ===== 2. BASE ===== */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.text-muted { color: var(--sharp-muted) !important; }
.d-none { display: none !important; }

/* ===== 3. NAVBAR ===== */
.navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98));
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: var(--sharp-shadow-1);
}

/* ===== 4. UI ELEMENTS (Global) ===== */
.card {
  border-radius: var(--sharp-radius);
  box-shadow: var(--sharp-shadow-1);
  border: 1px solid var(--sharp-border);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn {
  border-radius: 10px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.hero-panel {
  border-radius: var(--sharp-radius);
  padding: 1.6rem;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
}

/* ===== DIVERS ===== */
.ea-detail .ea-label-nowrap .form-field-label,
.ea-detail .ea-label-nowrap .field-label {
    white-space: nowrap !important;
}

[data-registration-field].d-none {
    display: none !important;
}

.text-primary {
    color: #004A84 !important;
}

.bg-primary {
    background-color: #004A84 !important;
}

.btn-primary {
  background: #004A84;
  border: none;
}

.btn-outline-primary {
  color: #004A84;
}

#variationTabs {
    --bs-nav-pills-link-active-bg: #004A84;
    --bs-nav-pills-link-active-color: #fff;
}

#variationTabs .nav-link {
    color: #004A84;
    border: 1px solid rgba(0, 75, 135, 0.25);
    background-color: #fff;
}

#variationTabs .nav-link:hover {
    background-color: rgba(0, 75, 135, 0.08);
    color: #004A84;
}

#variationTabs .nav-link.active {
    background-color: #004A84 !important;
    color: #fff !important;
}