@font-face {
  font-family: "Space Grotesk";
  src:
          url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2"),
          url("../fonts/SpaceGrotesk-VariableFont_wght.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Brand */
  --igrid-color-primary: #574CFF;
  --igrid-color-primary-rgb: 87 76 255;
  --igrid-color-secondary: #D6FC33;
  --igrid-color-secondary-rgb: 214 252 51;
  --igrid-header-logo-bg: var(--igrid-color-primary);
  --igrid-header-logo-color: var(--igrid-text-inverse);
  --igrid-header-logo-desktop-height: 64px;
  --igrid-header-logo-desktop-padding: 0 20px;
  --igrid-header-logo-desktop-font-size: 1rem;
  --igrid-header-logo-mobile-height: 56px;
  --igrid-header-logo-mobile-padding: 0 16px;
  --igrid-header-logo-mobile-font-size: 0.95rem;

  --igrid-color-success: var(--igrid-color-primary);
  --igrid-color-success-rgb: var(--igrid-color-primary-rgb);
  --igrid-color-warning: var(--igrid-color-secondary);
  --igrid-color-warning-rgb: var(--igrid-color-secondary-rgb);

  /* Base */
  --igrid-color-text: #232E30;
  --igrid-color-text-rgb: 35 46 48;
  --igrid-color-white: #ffffff;
  --igrid-color-white-rgb: 255 255 255;
  --igrid-color-black: #000000;
  --igrid-color-black-rgb: 0 0 0;
  --igrid-color-neutral: #6c757d;
  --igrid-color-neutral-rgb: 108 117 125;

  /* Danger */
  --igrid-color-danger: #DC3545;
  --igrid-color-danger-rgb: 220 53 69;
  --igrid-color-danger-deep: #842029;
  --igrid-color-danger-deep-rgb: 132 32 41;
  --igrid-color-danger-darker: #58151c;
  --igrid-color-danger-soft: #f1aeb5;
  --igrid-color-danger-muted: #f8d7da;
  --igrid-color-danger-bg: #fff5f5;
  --igrid-color-danger-bg-alt: #fffefe;
  --igrid-color-danger-text: #b4232f;

  --igrid-color-secondary-soft: rgb(var(--igrid-color-secondary-rgb) / 0.16);
  --igrid-color-success-soft: rgb(var(--igrid-color-success-rgb) / 0.16);
  --igrid-color-warning-soft: rgb(var(--igrid-color-warning-rgb) / 0.18);

  /* Text */
  --igrid-text-primary: var(--igrid-color-text);
  --igrid-text-inverse: var(--igrid-color-white);
  --igrid-text-muted: rgb(var(--igrid-color-text-rgb) / 0.65);
  --igrid-text-muted-strong: rgb(var(--igrid-color-text-rgb) / 0.7);
  --igrid-text-muted-soft: rgb(var(--igrid-color-text-rgb) / 0.75);
  --igrid-text-muted-faint: rgb(var(--igrid-color-text-rgb) / 0.55);
  --igrid-text-muted-light: rgb(var(--igrid-color-text-rgb) / 0.62);
  --igrid-text-muted-lighter: rgb(var(--igrid-color-text-rgb) / 0.66);
  --igrid-text-muted-subtle: rgb(var(--igrid-color-text-rgb) / 0.68);
  --igrid-text-muted-dark: rgb(var(--igrid-color-text-rgb) / 0.78);
  --igrid-text-muted-deep: rgb(var(--igrid-color-text-rgb) / 0.82);
  --igrid-text-strong: rgb(var(--igrid-color-text-rgb) / 0.85);
  --igrid-text-muted-60: rgb(var(--igrid-color-text-rgb) / 0.6);

  /* Backgrounds */
  --igrid-bg-page: #f6f7f9;
  --igrid-bg-surface: var(--igrid-color-white);
  --igrid-bg-surface-alt: #f1f4f7;
  --igrid-bg-card: var(--igrid-bg-surface);
  --igrid-bg-card-alt: var(--igrid-bg-surface-alt);
  --igrid-bg-strong: var(--igrid-color-text);
  --igrid-bg-muted: rgb(var(--igrid-color-black-rgb) / 0.02);
  --igrid-bg-muted-soft: rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-bg-muted-strong: rgb(var(--igrid-color-black-rgb) / 0.05);
  --igrid-bg-muted-subtle: rgb(var(--igrid-color-black-rgb) / 0.015);
  --igrid-bg-muted-light: rgb(var(--igrid-color-black-rgb) / 0.01);
  --igrid-bg-inverse-soft: rgb(var(--igrid-color-white-rgb) / 0.1);
  --igrid-bg-inverse-strong: rgb(var(--igrid-color-white-rgb) / 0.9);
  --igrid-bg-surface-60: rgb(var(--igrid-color-white-rgb) / 0.6);

  --igrid-color-bg: var(--igrid-bg-page);
  --igrid-color-border: var(--igrid-border-default);

  /* Borders & lines */
  --igrid-border-default: rgb(var(--igrid-color-black-rgb) / 0.06);
  --igrid-border-muted: rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-border-strong: rgb(var(--igrid-color-black-rgb) / 0.08);
  --igrid-border-stronger: rgb(var(--igrid-color-black-rgb) / 0.1);
  --igrid-border-dashed: rgb(var(--igrid-color-black-rgb) / 0.14);
  --igrid-border-dashed-strong: rgb(var(--igrid-color-black-rgb) / 0.18);
  --igrid-border-inverse: rgb(var(--igrid-color-white-rgb) / 0.2);
  --igrid-border-primary: rgb(var(--igrid-color-primary-rgb) / 0.25);
  --igrid-border-primary-soft: rgb(var(--igrid-color-primary-rgb) / 0.18);
  --igrid-border-primary-strong: rgb(var(--igrid-color-primary-rgb) / 0.55);
  --igrid-border-danger-soft: rgb(var(--igrid-color-danger-deep-rgb) / 0.2);
  --igrid-border-danger-strong: rgb(var(--igrid-color-danger-deep-rgb) / 0.35);
  --igrid-border-danger: rgb(var(--igrid-color-danger-rgb) / 0.22);
  --igrid-border-neutral: rgb(var(--igrid-color-neutral-rgb) / 0.22);

  /* States */
  --igrid-state-hover: rgb(var(--igrid-color-primary-rgb) / 0.1);
  --igrid-state-hover-strong: rgb(var(--igrid-color-primary-rgb) / 0.14);
  --igrid-state-active: rgb(var(--igrid-color-primary-rgb) / 0.16);
  --igrid-state-active-strong: rgb(var(--igrid-color-primary-rgb) / 0.22);
  --igrid-state-soft: rgb(var(--igrid-color-primary-rgb) / 0.08);
  --igrid-state-softest: rgb(var(--igrid-color-primary-rgb) / 0.06);
  --igrid-state-focus: rgb(var(--igrid-color-primary-rgb) / 0.25);
  --igrid-state-focus-strong: rgb(var(--igrid-color-primary-rgb) / 0.35);
  --igrid-state-primary-solid-hover: rgb(var(--igrid-color-primary-rgb) / 0.88);
  --igrid-state-primary-solid-active: rgb(var(--igrid-color-primary-rgb) / 0.76);
  --igrid-state-danger: rgb(var(--igrid-color-danger-rgb) / 0.1);
  --igrid-state-neutral: rgb(var(--igrid-color-neutral-rgb) / 0.1);

  /* Opacity helpers */
  --igrid-black-03: rgb(var(--igrid-color-black-rgb) / 0.03);
  --igrid-black-04: rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-black-06: rgb(var(--igrid-color-black-rgb) / 0.06);
  --igrid-black-08: rgb(var(--igrid-color-black-rgb) / 0.08);
  --igrid-black-10: rgb(var(--igrid-color-black-rgb) / 0.1);
  --igrid-black-12: rgb(var(--igrid-color-black-rgb) / 0.12);
  --igrid-black-14: rgb(var(--igrid-color-black-rgb) / 0.14);
  --igrid-black-18: rgb(var(--igrid-color-black-rgb) / 0.18);
  --igrid-black-65: rgb(var(--igrid-color-black-rgb) / 0.65);
  --igrid-white-75: rgb(var(--igrid-color-white-rgb) / 0.75);

  /* Shadows */
  --igrid-shadow-sm: 0 4px 20px rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-shadow-md: 0 10px 28px rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-shadow-lg: 0 18px 50px rgb(var(--igrid-color-black-rgb) / 0.12);
  --igrid-shadow-lg-soft: 0 18px 50px rgb(var(--igrid-color-black-rgb) / 0.10);
  --igrid-shadow-card: 0 10px 22px rgb(var(--igrid-color-black-rgb) / 0.04);
  --igrid-shadow-card-strong: 0 12px 28px rgb(var(--igrid-color-black-rgb) / 0.06);
  --igrid-shadow-card-soft: 0 10px 22px rgb(var(--igrid-color-black-rgb) / 0.03);
  --igrid-shadow-danger: 0 10px 30px rgb(var(--igrid-color-danger-deep-rgb) / 0.08);
  --igrid-shadow-danger-strong: 0 6px 18px rgb(var(--igrid-color-danger-deep-rgb) / 0.15);

  /* Links */
  --igrid-link-color: var(--igrid-color-primary);
  --igrid-link-color-hover: var(--igrid-state-primary-solid-hover);

  /* Buttons */
  --igrid-radius-btn: 12px;
  --igrid-btn-shadow: 0 8px 20px rgb(var(--igrid-color-black-rgb) / 0.08);
  --igrid-btn-shadow-hover: 0 10px 24px rgb(var(--igrid-color-black-rgb) / 0.12);
  --igrid-btn-disabled-bg: var(--igrid-bg-muted-strong);
  --igrid-btn-disabled-border: var(--igrid-border-default);
  --igrid-btn-disabled-text: var(--igrid-text-muted);

  --igrid-btn-primary-bg: var(--igrid-color-primary);
  --igrid-btn-primary-bg-hover: var(--igrid-state-primary-solid-hover);
  --igrid-btn-primary-bg-active: var(--igrid-state-primary-solid-active);
  --igrid-btn-primary-text: var(--igrid-text-inverse);
  --igrid-btn-primary-border: var(--igrid-color-primary);

  --igrid-btn-secondary-bg: var(--igrid-color-secondary);
  --igrid-btn-secondary-bg-hover: rgb(var(--igrid-color-secondary-rgb) / 0.88);
  --igrid-btn-secondary-bg-active: rgb(var(--igrid-color-secondary-rgb) / 0.78);
  --igrid-btn-secondary-text: var(--igrid-text-primary);
  --igrid-btn-secondary-border: var(--igrid-color-secondary);

  --igrid-btn-danger-bg: var(--igrid-color-danger);
  --igrid-btn-danger-bg-hover: rgb(var(--igrid-color-danger-rgb) / 0.88);
  --igrid-btn-danger-bg-active: rgb(var(--igrid-color-danger-rgb) / 0.76);
  --igrid-btn-danger-text: var(--igrid-text-inverse);
  --igrid-btn-danger-border: var(--igrid-color-danger);

  /* Focus rings */
  --igrid-focus-ring: 0 0 0 .2rem var(--igrid-state-focus);
  --igrid-focus-ring-strong: 0 0 0 .25rem var(--igrid-state-focus-strong);

  /* Gradients */
  --igrid-gradient-hero: linear-gradient(135deg, rgb(var(--igrid-color-primary-rgb) / 0.2), var(--igrid-black-04));
  --igrid-gradient-cta: linear-gradient(
    120deg,
    var(--igrid-color-primary),
    rgb(var(--igrid-color-primary-rgb) / 0.72),
    rgb(var(--igrid-color-text-rgb) / 0.22)
  );

  /* Typography */
  --igrid-font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Misc */
  --igrid-color-transparent: transparent;
  --igrid-mobile-toggle-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  --igrid-section-gap: 34px;
  --igrid-content-max: 1200px;

  /* Bootstrap theme overrides */
  --bs-primary: var(--igrid-color-primary);
  --bs-primary-rgb: var(--igrid-color-primary-rgb);
  --bs-secondary: var(--igrid-color-secondary);
  --bs-secondary-rgb: var(--igrid-color-secondary-rgb);
  --bs-success: var(--igrid-color-success);
  --bs-success-rgb: var(--igrid-color-success-rgb);
  --bs-warning: var(--igrid-color-warning);
  --bs-warning-rgb: var(--igrid-color-warning-rgb);
  --bs-danger: var(--igrid-color-danger);
  --bs-danger-rgb: var(--igrid-color-danger-rgb);
  --bs-body-color: var(--igrid-text-primary);
  --bs-body-color-rgb: var(--igrid-color-text-rgb);
  --bs-body-bg: var(--igrid-bg-page);
  --bs-border-color: var(--igrid-border-default);
  --bs-link-color: var(--igrid-link-color);
  --bs-link-color-rgb: var(--igrid-color-primary-rgb);
  --bs-link-hover-color: var(--igrid-link-color-hover);
  --bs-emphasis-color: var(--igrid-text-primary);
  --bs-secondary-color: var(--igrid-text-muted);
  --bs-tertiary-bg: var(--igrid-bg-muted);
  --bs-light: var(--igrid-bg-surface);
  --bs-light-rgb: var(--igrid-color-white-rgb);

  --bs-primary-bg-subtle: var(--igrid-state-soft);
  --bs-primary-text-emphasis: var(--igrid-color-primary);
  --bs-primary-border-subtle: var(--igrid-border-primary);
  --bs-secondary-bg-subtle: var(--igrid-color-secondary-soft);
  --bs-secondary-text-emphasis: var(--igrid-text-primary);
  --bs-secondary-border-subtle: var(--igrid-color-secondary-soft);
  --bs-success-bg-subtle: var(--igrid-color-success-soft);
  --bs-success-text-emphasis: var(--igrid-color-success);
  --bs-success-border-subtle: var(--igrid-color-success-soft);
  --bs-warning-bg-subtle: var(--igrid-color-warning-soft);
  --bs-warning-text-emphasis: var(--igrid-text-primary);
  --bs-warning-border-subtle: var(--igrid-color-warning-soft);
  --bs-danger-bg-subtle: var(--igrid-color-danger-muted);
  --bs-danger-text-emphasis: var(--igrid-color-danger-text);
  --bs-danger-border-subtle: var(--igrid-border-danger);

  --bs-focus-ring-color: var(--igrid-state-focus);
  --bs-focus-ring-box-shadow: var(--igrid-focus-ring);
  --bs-btn-focus-shadow-rgb: var(--igrid-color-primary-rgb);
  --bs-dropdown-link-hover-bg: var(--igrid-state-hover);
  --bs-dropdown-link-hover-color: var(--igrid-color-primary);
  --bs-dropdown-link-active-bg: var(--igrid-state-active);
  --bs-dropdown-link-active-color: var(--igrid-color-primary);
  --bs-nav-pills-link-active-bg: var(--igrid-color-primary);
  --bs-nav-pills-link-active-color: var(--igrid-text-inverse);
}

/* -----------------------------
   Base
------------------------------ */
html, body{
  height: 100%;
}

body{
  background: var(--igrid-bg-page);
  color: var(--igrid-text-primary);
  font-family: var(--igrid-font-family);
}

a{
  color: inherit;
}

.btn{
  border-radius: var(--igrid-radius-btn);
  box-shadow: var(--igrid-btn-shadow);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn:hover{
  box-shadow: var(--igrid-btn-shadow-hover);
}

.btn:focus,
.btn:focus-visible{
  box-shadow: var(--igrid-focus-ring);
}

.btn:disabled,
.btn.disabled{
  background-color: var(--igrid-btn-disabled-bg);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
  box-shadow: none;
}

.btn-primary{
  background-color: var(--igrid-btn-primary-bg);
  border-color: var(--igrid-btn-primary-border);
  color: var(--igrid-btn-primary-text);
}

.btn-primary:hover{
  background-color: var(--igrid-btn-primary-bg-hover);
  border-color: var(--igrid-btn-primary-bg-hover);
  color: var(--igrid-btn-primary-text);
}

.btn-primary:active,
.btn-primary.active{
  background-color: var(--igrid-btn-primary-bg-active);
  border-color: var(--igrid-btn-primary-bg-active);
  color: var(--igrid-btn-primary-text);
}

.btn-primary:focus-visible{
  box-shadow: var(--igrid-focus-ring-strong);
}

.btn-primary:disabled,
.btn-primary.disabled{
  background-color: var(--igrid-btn-disabled-bg);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
}

.btn-outline-primary{
  background-color: var(--igrid-color-transparent);
  color: var(--igrid-color-primary);
  border-color: var(--igrid-btn-primary-border);
}

.btn-outline-primary:hover{
  background-color: var(--igrid-btn-primary-bg);
  border-color: var(--igrid-btn-primary-border);
  color: var(--igrid-btn-primary-text);
}

.btn-outline-primary:active,
.btn-outline-primary.active{
  background-color: var(--igrid-btn-primary-bg-active);
  border-color: var(--igrid-btn-primary-bg-active);
  color: var(--igrid-btn-primary-text);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled{
  background-color: var(--igrid-color-transparent);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
  box-shadow: none;
}

.btn-secondary{
  background-color: var(--igrid-btn-secondary-bg);
  border-color: var(--igrid-btn-secondary-border);
  color: var(--igrid-btn-secondary-text);
}

.btn-secondary:hover{
  background-color: var(--igrid-btn-secondary-bg-hover);
  border-color: var(--igrid-btn-secondary-bg-hover);
  color: var(--igrid-btn-secondary-text);
}

.btn-secondary:active,
.btn-secondary.active{
  background-color: var(--igrid-btn-secondary-bg-active);
  border-color: var(--igrid-btn-secondary-bg-active);
  color: var(--igrid-btn-secondary-text);
}

.btn-secondary:focus-visible{
  box-shadow: var(--igrid-focus-ring-strong);
}

.btn-secondary:disabled,
.btn-secondary.disabled{
  background-color: var(--igrid-btn-disabled-bg);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
}

.btn-outline-secondary{
  background-color: var(--igrid-color-transparent);
  color: var(--igrid-btn-secondary-text);
  border-color: var(--igrid-btn-secondary-border);
}

.btn-outline-secondary:hover{
  background-color: var(--igrid-btn-secondary-bg);
  border-color: var(--igrid-btn-secondary-border);
  color: var(--igrid-btn-secondary-text);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active{
  background-color: var(--igrid-btn-secondary-bg-active);
  border-color: var(--igrid-btn-secondary-bg-active);
  color: var(--igrid-btn-secondary-text);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled{
  background-color: var(--igrid-color-transparent);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
  box-shadow: none;
}

.btn-danger{
  background-color: var(--igrid-btn-danger-bg);
  border-color: var(--igrid-btn-danger-border);
  color: var(--igrid-btn-danger-text);
}

.btn-danger:hover{
  background-color: var(--igrid-btn-danger-bg-hover);
  border-color: var(--igrid-btn-danger-bg-hover);
  color: var(--igrid-btn-danger-text);
}

.btn-danger:active,
.btn-danger.active{
  background-color: var(--igrid-btn-danger-bg-active);
  border-color: var(--igrid-btn-danger-bg-active);
  color: var(--igrid-btn-danger-text);
}

.btn-danger:focus-visible{
  box-shadow: var(--igrid-focus-ring-strong);
}

.btn-danger:disabled,
.btn-danger.disabled{
  background-color: var(--igrid-btn-disabled-bg);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
}

.btn-link{
  color: var(--igrid-link-color);
  text-decoration: none;
  box-shadow: none;
}

.btn-link:hover{
  color: var(--igrid-link-color-hover);
  text-decoration: underline;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled{
  color: var(--igrid-btn-disabled-text);
  text-decoration: none;
}

.btn-light{
  background-color: var(--igrid-bg-surface);
  border-color: var(--igrid-border-default);
  color: var(--igrid-text-primary);
}

.btn-light:hover{
  background-color: var(--igrid-bg-muted);
  border-color: var(--igrid-border-default);
  color: var(--igrid-text-primary);
}

.btn-light:active,
.btn-light.active{
  background-color: var(--igrid-bg-muted-strong);
  border-color: var(--igrid-border-strong);
  color: var(--igrid-text-primary);
}

.btn-light:disabled,
.btn-light.disabled{
  background-color: var(--igrid-btn-disabled-bg);
  border-color: var(--igrid-btn-disabled-border);
  color: var(--igrid-btn-disabled-text);
}

.fi{
  display: inline-block;
  width: 1.2em;
  height: 0.9em;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  line-height: 1;
  vertical-align: middle;
}

.igrid-primary-btn{
  background-color: var(--igrid-btn-primary-bg);
  border-color: var(--igrid-btn-primary-border);
  color: var(--igrid-btn-primary-text);
  font-weight: 850;
}

.igrid-primary-btn:hover,
.igrid-primary-btn:focus{
  background-color: var(--igrid-btn-primary-bg-hover);
  border-color: var(--igrid-btn-primary-bg-hover);
  color: var(--igrid-btn-primary-text);
}

.igrid-primary-btn:focus-visible{
  box-shadow: var(--igrid-focus-ring-strong);
}

/* Make sure dropdowns can float above everything */
body{
  position: relative;
}

/* Main stacking */
.igrid-main{
  position: relative;
  z-index: 1;
}

/* -----------------------------
   Header
------------------------------ */
.igrid-topbar{
  background: var(--igrid-bg-surface);
  border-bottom: 1px solid var(--igrid-border-default);
  box-shadow: var(--igrid-shadow-sm);
  position: relative;
  z-index: 5000;
  overflow: visible;
}

.igrid-header-top{
  display: flex;
  align-items: stretch;
  height: 64px;
  overflow: visible;
}

.igrid-brand-pill{
  display: flex;
  align-items: center;
  font-weight: 900;
  white-space: nowrap;
  border-radius: 0;
  flex: 0 0 auto;
}

.igrid-header-logo{
  background: var(--igrid-header-logo-bg);
  color: var(--igrid-header-logo-color);
  justify-content: center;
}

.igrid-header-logo-img{
  display: block;
  height: 100%;
  width: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

@media (min-width: 992px){
  .igrid-header-logo{
    height: var(--igrid-header-logo-desktop-height);
    padding: var(--igrid-header-logo-desktop-padding);
    font-size: var(--igrid-header-logo-desktop-font-size);
  }
}

@media (max-width: 991.98px){
  .igrid-header-logo{
    height: var(--igrid-header-logo-mobile-height);
    padding: var(--igrid-header-logo-mobile-padding);
    font-size: var(--igrid-header-logo-mobile-font-size);
  }
}

.igrid-header-inner{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: visible;
}

.igrid-desktop-nav{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  overflow: visible;
}

.igrid-topbar,
.igrid-header-top,
.igrid-header-inner,
.igrid-desktop-nav{
  position: relative;
  z-index: 6000;
  overflow: visible;
}

/* -----------------------------
   Navigation links
------------------------------ */
.nav-link{
  font-weight: 650;
  color: var(--igrid-text-primary);
  border-radius: 6px;
  padding: 10px 12px;
}

.nav-link:hover{
  background: var(--igrid-state-hover);
  color: var(--igrid-color-primary);
}

.nav-link.active{
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
}

/* -----------------------------
   Dropdown menus
------------------------------ */
.dropdown-menu{
  border-radius: 10px;
  box-shadow: var(--igrid-shadow-lg);
  border: 1px solid var(--igrid-border-strong);
  padding: 10px;
  z-index: 99999 !important;
}

.dropdown-item{
  font-weight: 650;
  border-radius: 8px;
  padding: 10px 10px;
}

.dropdown-item:hover{
  background: var(--igrid-state-hover);
  color: var(--igrid-color-primary);
}

/* Dropdown hero (optional component for fancy dropdowns) */
.igrid-dd-hero{
  background: var(--igrid-gradient-hero);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.igrid-dd-hero-inner{
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: center;
}

.igrid-dd-hero img{
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
}

.igrid-dd-hero-title{
  font-weight: 950;
  margin: 0;
}

.igrid-dd-hero-sub{
  margin: 0;
  font-size: .85rem;
  color: var(--igrid-text-muted);
  font-weight: 650;
}

/* -----------------------------
   Desktop hover dropdown behavior
   Fixes: out-of-bounds, flicker, behind content
------------------------------ */
@media (min-width: 992px){
  .igrid-desktop-nav .igrid-hover-dd,
  .igrid-user-dd.igrid-hover-dd{
    position: relative;
  }

  /* Hover bridge to prevent flicker when moving into menu */
  .igrid-desktop-nav .igrid-hover-dd::after,
  .igrid-user-dd.igrid-hover-dd::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }

  .igrid-desktop-nav .igrid-hover-dd:hover > .dropdown-menu,
  .igrid-user-dd.igrid-hover-dd:hover > .dropdown-menu{
    display: block;
  }

  .igrid-desktop-nav .igrid-hover-dd > .dropdown-menu{
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;
  }

  .igrid-user-dd.igrid-hover-dd > .dropdown-menu{
    position: absolute !important;
    inset: auto !important;
    transform: none !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 0 !important;
  }
}

/* -----------------------------
   User box (logged-in)
------------------------------ */
.igrid-user-surface{
  background: var(--igrid-bg-strong);
  border-radius: 6px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--igrid-text-inverse);
  flex: 0 0 auto;
  margin-left: auto;
  overflow: visible;
}

.igrid-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.igrid-avatar-initials{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--igrid-bg-inverse-soft);
  color: var(--igrid-text-inverse);
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--igrid-border-inverse);
}

.igrid-user-name{
  white-space: nowrap;
}

/* -----------------------------
   Mobile controls + subnav
------------------------------ */
.igrid-mobile-spacer{ flex: 1 1 auto; }

.igrid-mobile-toggle{
  border: 0;
  background: var(--igrid-color-transparent);
  padding: 8px 10px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.igrid-mobile-toggle:focus{
  box-shadow: 0 0 0 .2rem var(--igrid-state-focus);
}

.igrid-mobile-toggle .navbar-toggler-icon{
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  color: var(--igrid-text-primary);
  background-image: var(--igrid-mobile-toggle-icon);
}

.igrid-mobile-subnav{
  border-top: 1px solid var(--igrid-border-default);
  background: var(--igrid-bg-surface);
}

.igrid-mobile-subnav-inner{
  background: var(--igrid-bg-muted);
  border-top: 1px solid var(--igrid-border-muted);
}

/* Mobile user in subnav (logged-in layout) */
.igrid-mobile-user{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: var(--igrid-bg-inverse-strong);
  border: 1px solid var(--igrid-border-default);
}

.igrid-mobile-user-meta{
  flex: 1 1 auto;
  min-width: 0;
}

.igrid-mobile-user-name{
  font-weight: 950;
  line-height: 1.1;
}

.igrid-mobile-user-sub{
  color: var(--igrid-text-muted);
  font-weight: 650;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.igrid-mobile-user-btn{
  border-radius: 10px;
}

/* Reduce user in header on mobile (avatar only) */
@media (max-width: 991.98px){
  .igrid-user-surface{
    padding: 6px;
    border-radius: 999px;
  }
  .igrid-user-name{ display: none; }

  .igrid-mobile-subnav .nav-link{
    padding: 12px 12px;
    border-radius: 10px;
  }

  .igrid-mobile-subnav .dropdown-menu{
    box-shadow: none;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
  }
}

@media (max-width: 420px){
  .igrid-brand-pill{ padding: 0 14px; font-size: 0.95rem; }
}

/* -----------------------------
   Sections / layout container
------------------------------ */
.igrid-block{
  padding: var(--igrid-section-gap) 0;
  background: var(--igrid-bg-card-alt);
}

.igrid-block--alt{
  background: var(--igrid-bg-card);
  border-top: 1px solid var(--igrid-border-muted);
  border-bottom: 1px solid var(--igrid-border-muted);
}

.igrid-main .igrid-block > .container-fluid{
  max-width: var(--igrid-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------
   Titles / headings
------------------------------ */
.igrid-section-title{
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 950;
  letter-spacing: .2px;
  margin: 0;
}

.igrid-section-title--center{ text-align: center; }

/* -----------------------------
   Placeholder content area (diagonal stripes)
------------------------------ */
.igrid-content-area{
  background: var(--igrid-bg-surface);
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
}

.igrid-content-area::before{
  content: "";
  position: absolute;
  inset: -40px;
  background: repeating-linear-gradient(
    135deg,
    var(--igrid-black-06) 0,
    var(--igrid-black-06) 2px,
    var(--igrid-color-transparent) 2px,
    var(--igrid-color-transparent) 18px
  );
}

.igrid-content-label{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 950;
  color: var(--igrid-black-18);
}

/* -----------------------------
   Cards
------------------------------ */
.igrid-card{
  background: var(--igrid-bg-card);
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  box-shadow: var(--igrid-shadow-md);
}

.igrid-card--pad{ padding: 16px; }

.igrid-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.igrid-card-title{
  font-weight: 950;
  font-size: 1.05rem;
}

.igrid-card-sub{
  color: var(--igrid-text-muted-strong);
  font-weight: 650;
  font-size: .92rem;
}

/* Badges */
.igrid-badge-soft{
  border-radius: 999px;
  padding: .45rem .65rem;
  font-weight: 850;
}

/* -----------------------------
   Page head
------------------------------ */
.igrid-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.igrid-page-head--split{ align-items: center; }

.igrid-page-title{
  font-weight: 950;
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.igrid-page-sub{
  margin: 6px 0 0 0;
  color: var(--igrid-text-muted-strong);
  font-weight: 650;
  max-width: 80ch;
}

/* -----------------------------
   Account layout (sidebar + content)
------------------------------ */
.igrid-page-shell{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

.igrid-side{
  position: relative;
  z-index: 1;
}

.igrid-maincol{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.igrid-side-title{
  font-weight: 950;
  margin-bottom: 10px;
}

.igrid-side-nav .nav-link{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--igrid-color-transparent);
  color: var(--igrid-text-primary);
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 750;
  text-align: left;
}

.igrid-side-nav .nav-link:hover{
  background: var(--igrid-state-hover);
  color: var(--igrid-color-primary);
}

.igrid-side-nav .nav-link.active{
  background: var(--igrid-state-active);
  color: var(--igrid-color-primary);
}

.igrid-card--danger{
  border: 1.5px solid var(--igrid-color-danger-soft);
  background: linear-gradient(180deg, var(--igrid-color-danger-bg) 0%, var(--igrid-color-danger-bg-alt) 100%);
  box-shadow: var(--igrid-shadow-danger);
}

.igrid-side-nav--danger .nav-link{
  color: var(--igrid-color-danger-deep);
  border: 1px solid var(--igrid-color-transparent);
  font-weight: 800;
}

.igrid-side-nav--danger .nav-link:hover{
  background: var(--igrid-color-danger-muted);
  color: var(--igrid-color-danger-deep);
  border-color: var(--igrid-border-danger-soft);
}

.igrid-side-nav--danger .nav-link.active{
  background: var(--igrid-color-danger-soft);
  color: var(--igrid-color-danger-darker);
  border-color: var(--igrid-border-danger-strong);
  box-shadow: var(--igrid-shadow-danger-strong);
}

/* Info lines */
.igrid-info-line{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.igrid-info-line i{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex: 0 0 auto;
}

/* Tables */
.igrid-table thead th{
  font-weight: 900;
  color: var(--igrid-text-muted-soft);
  border-bottom: 1px solid var(--igrid-border-strong) !important;
}

.igrid-table tbody td{
  border-top: 1px solid var(--igrid-border-default) !important;
}

.igrid-table-user{
  display: flex;
  gap: 12px;
  align-items: center;
}

.igrid-mini-avatar{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Search input */
.igrid-inline-search{
  position: relative;
  min-width: 240px;
}

.igrid-inline-search i{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--igrid-text-muted-faint);
}

.igrid-inline-search input{
  padding-left: 34px;
  border-radius: 12px;
}

/* Hint */
.igrid-hint{
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--igrid-text-muted-strong);
  font-weight: 650;
  background: var(--igrid-state-soft);
  border: 1px solid var(--igrid-border-primary-soft);
  padding: 10px 12px;
  border-radius: 12px;
}

.igrid-hint i{
  color: var(--igrid-color-primary);
  font-size: 1.1rem;
}

/* -----------------------------
   Landing components (home content)
------------------------------ */

/* Dimension cards */
.igrid-dim-card{
  background: var(--igrid-bg-surface);
  border: 1px solid var(--igrid-border-default);
  border-radius: 12px;
  padding: 18px;
  min-height: 170px;
  box-shadow: var(--igrid-shadow-md);
}

.igrid-dim-icon{
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 12px auto;
}

.igrid-dim-text{
  color: var(--igrid-text-muted-deep);
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

/* Reasons (non-box list) */
.igrid-reason{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.igrid-reason-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.igrid-reason-title{
  font-weight: 950;
  margin-bottom: 4px;
}

.igrid-reason-text{
  color: var(--igrid-text-muted-dark);
  font-weight: 650;
  line-height: 1.45;
}

/* CTA banner */
.igrid-cta-banner{
  border-radius: 14px;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--igrid-text-inverse);

  background: var(--igrid-gradient-cta);
  border: 1px solid var(--igrid-border-default);
  box-shadow: var(--igrid-shadow-lg-soft);
  overflow: hidden;
}

.igrid-cta-title{
  font-size: 1.15rem;
  font-weight: 950;
  margin-bottom: 4px;
}

.igrid-cta-sub{
  opacity: .92;
  font-weight: 650;
  line-height: 1.35;
  max-width: 70ch;
}

.igrid-cta-btn{
  border-radius: 999px;
  padding: 10px 16px;
  white-space: nowrap;
}

.igrid-cta-anim{
  background-size: 200% 200%;
  animation: igridGradientMove 10s ease infinite;
}

@keyframes igridGradientMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Alternating blocks (30/70) */
.igrid-alt-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.igrid-alt-row{
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 16px;
  align-items: stretch;
}

.igrid-alt-row.igrid-alt-reverse{
  grid-template-columns: 7fr 3fr;
}

.igrid-alt-media,
.igrid-alt-text{
  background: var(--igrid-bg-surface);
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  padding: 16px;
}

.igrid-alt-title{
  font-weight: 950;
  margin-bottom: 8px;
}

.igrid-alt-text p{
  margin: 0 0 10px 0;
  color: var(--igrid-text-muted-dark);
  font-weight: 650;
  line-height: 1.45;
}

.igrid-img-placeholder{
  height: 100%;
  min-height: 180px;
  border-radius: 12px;
  border: 1px dashed var(--igrid-border-dashed);
  background: var(--igrid-state-softest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--igrid-text-muted);
  font-weight: 900;
}

.igrid-img-placeholder i{
  font-size: 1.6rem;
  color: var(--igrid-text-muted-strong);
}

/* Modal rounding (if used) */
.igrid-modal{
  border-radius: 16px;
}

/* -----------------------------
   Surveys / Umfragen page (FULL)
------------------------------ */

/* KPI cards */
.igrid-kpi{
  background: var(--igrid-bg-surface);
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--igrid-shadow-card);
  height: 100%;
}

.igrid-kpi-title{
  font-weight: 900;
  color: var(--igrid-text-muted-strong);
  font-size: .9rem;
}

.igrid-kpi-value{
  font-weight: 950;
  font-size: 1.9rem;
  line-height: 1.05;
  margin-top: 6px;
}

.igrid-kpi-sub{
  margin-top: 6px;
  font-weight: 650;
  color: var(--igrid-text-muted);
  font-size: .9rem;
}

/* Accordion wrapper */
.igrid-accordion .accordion-item{
  border: 0;
  background: var(--igrid-color-transparent);
}

.igrid-acc-item{
  margin-bottom: 12px;
}

/* Accordion button */
.igrid-accordion .accordion-button{
  border-radius: 14px !important;
  border: 1px solid var(--igrid-border-default);
  box-shadow: var(--igrid-shadow-card);
  background: var(--igrid-bg-surface);
  padding: 14px 14px;
}

.igrid-accordion .accordion-button:not(.collapsed){
  background: var(--igrid-bg-surface);
  box-shadow: var(--igrid-shadow-card-strong);
}

.igrid-accordion .accordion-button:focus{
  box-shadow: 0 0 0 .2rem var(--igrid-state-focus);
}

/* Accordion body */
.igrid-accordion .accordion-body{
  background: var(--igrid-bg-surface);
  border: 1px solid var(--igrid-border-default);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: var(--igrid-shadow-card);
}

/* Project header row inside accordion button */
.igrid-project-head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.igrid-project-name{
  font-weight: 950;
  font-size: 1.05rem;
}

.igrid-project-sub{
  font-weight: 650;
  color: var(--igrid-text-muted-subtle);
  font-size: .9rem;
  margin-top: 2px;
}

.igrid-project-metrics{
  display: flex;
  align-items: center;
  gap: 10px;
}

.igrid-metric{
  text-align: right;
  min-width: 110px;
}

.igrid-metric-label{
  font-weight: 850;
  color: var(--igrid-text-muted-faint);
  font-size: .8rem;
}

.igrid-metric-value{
  font-weight: 950;
  font-size: 1.15rem;
  margin-top: 2px;
}

/* Chips */
.igrid-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: .85rem;
  border: 1px solid var(--igrid-border-default);
}

.igrid-chip--up{
  background: var(--igrid-state-hover);
  color: var(--igrid-color-primary);
  border-color: var(--igrid-border-primary);
}

.igrid-chip--down{
  background: var(--igrid-state-danger);
  color: var(--igrid-color-danger-text);
  border-color: var(--igrid-border-danger);
}

.igrid-chip--neutral{
  background: var(--igrid-state-neutral);
  color: var(--igrid-text-muted-soft);
  border-color: var(--igrid-border-neutral);
}

.igrid-muted{
  color: var(--igrid-text-muted-60);
  font-weight: 650;
}

.igrid-project-actions-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Aggregation cards */
.igrid-agg-card{
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  padding: 14px;
  background: var(--igrid-bg-muted-subtle);
}

.igrid-agg-title{
  font-weight: 950;
  margin-bottom: 10px;
}

.igrid-agg-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.igrid-agg-dim{
  border: 1px solid var(--igrid-border-default);
  border-radius: 12px;
  background: var(--igrid-bg-surface);
  padding: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.igrid-agg-dim span{
  font-weight: 950;
  color: var(--igrid-text-muted);
}

.igrid-agg-dim b{
  font-weight: 950;
  font-size: 1.15rem;
}

.igrid-agg-split{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.igrid-agg-stat{
  border: 1px solid var(--igrid-border-default);
  border-radius: 12px;
  background: var(--igrid-bg-surface);
  padding: 10px;
}

.igrid-agg-stat-label{
  font-weight: 900;
  color: var(--igrid-text-muted-60);
  font-size: .85rem;
}

.igrid-agg-stat-value{
  font-weight: 950;
  font-size: 1.3rem;
  margin-top: 3px;
}

.igrid-agg-sub{
  margin-top: 10px;
  color: var(--igrid-text-muted-light);
  font-weight: 650;
  font-size: .9rem;
}

/* Compact table */
.igrid-table--compact td,
.igrid-table--compact th{
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* Empty state */
.igrid-empty{
  border: 1px dashed var(--igrid-border-dashed-strong);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--igrid-text-muted);
  font-weight: 850;
  background: var(--igrid-bg-surface-60);
}

/* Surveys responsive tweaks */
@media (max-width: 991.98px){
  .igrid-project-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .igrid-project-metrics{
    width: 100%;
    justify-content: flex-start;
  }
  .igrid-metric{
    text-align: left;
  }
  .igrid-agg-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------
   Auth in normal layout (centered card)
------------------------------ */

/* right header buttons for auth state */
.igrid-auth-cta{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.igrid-auth-cta-btn{
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 850;
}

/* auth card centered in content */
.igrid-auth-center{
  max-width: 720px;
  margin: 0 auto;
}

.igrid-auth-card{
  border-radius: 16px;
}

/* tabs */
.igrid-auth-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--igrid-bg-muted);
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  padding: 6px;
}

.igrid-auth-tab{
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 950;
  background: var(--igrid-color-transparent);
  color: var(--igrid-text-muted-dark);
}

.igrid-auth-tab.active{
  background: var(--igrid-bg-surface);
  box-shadow: var(--igrid-shadow-card-strong);
  color: var(--igrid-color-primary);
  border: 1px solid var(--igrid-border-primary-soft);
}

/* panels */
.igrid-auth-panelbox{
  border: 1px solid var(--igrid-border-default);
  border-radius: 14px;
  padding: 14px;
  background: var(--igrid-bg-muted-light);
}

.igrid-auth-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* links / helper */
.igrid-auth-link{
  color: var(--igrid-color-primary);
  font-weight: 850;
  text-decoration: none;
}

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

.igrid-auth-divider{
  position: relative;
  text-align: center;
  margin: 14px 0;
}

.igrid-auth-divider::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background: var(--igrid-border-strong);
}

.igrid-auth-divider span{
  position: relative;
  z-index:1;
  background: var(--igrid-bg-surface);
  padding: 0 10px;
  color: var(--igrid-text-muted-light);
  font-weight: 850;
  font-size: .9rem;
}

.igrid-auth-small{
  color: var(--igrid-text-muted-lighter);
  font-weight: 650;
  font-size: .92rem;
}

/* stepper */
.igrid-auth-stepper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
}

.igrid-auth-step{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.igrid-auth-step span{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--igrid-bg-muted-strong);
  border: 1px solid var(--igrid-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: var(--igrid-text-muted-strong);
  flex: 0 0 auto;
}

.igrid-auth-step i{
  height: 2px;
  background: var(--igrid-border-strong);
  flex: 1 1 auto;
  border-radius: 999px;
  display: block;
}

.igrid-auth-step.active span{
  background: var(--igrid-state-active);
  border-color: var(--igrid-border-primary);
  color: var(--igrid-color-primary);
}

.igrid-auth-step.active i{
  background: var(--igrid-state-active-strong);
}

/* verify header */
.igrid-auth-verify-head{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.igrid-auth-verify-ic{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.fw-black{ font-weight: 950 !important; }

.igrid-auth-email{
  font-weight: 950;
  color: var(--igrid-text-strong);
}

/* OTP */
.igrid-otp{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.igrid-otp-box{
  width: clamp(36px, 10vw, 52px);
  height: clamp(46px, 12vw, 56px);
  border-radius: 14px;
  border: 1px solid var(--igrid-border-stronger);
  background: var(--igrid-bg-surface);
  text-align: center;
  font-weight: 950;
  font-size: 1.25rem;
  outline: none;
  box-shadow: var(--igrid-shadow-card-soft);
  flex: 1 1 clamp(36px, 10vw, 52px);
}

.igrid-otp-box:focus{
  border-color: var(--igrid-border-primary-strong);
  box-shadow: 0 0 0 .2rem var(--igrid-border-primary-soft);
}

@media (min-width: 576px){
  .igrid-otp{
    flex-wrap: nowrap;
  }
}

.igrid-auth-otp-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* done */
.igrid-auth-done{
  text-align: center;
  padding: 10px 0;
}

.igrid-auth-done-ic{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--igrid-state-hover-strong);
  color: var(--igrid-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 10px auto;
}

.igrid-disabled{
  opacity: .55;
  pointer-events: none;
}

/* -----------------------------
   Global responsive helpers
------------------------------ */
@media (max-width: 991.98px){
  .igrid-page-shell{
    grid-template-columns: 1fr;
  }

  .igrid-inline-search{
    min-width: 0;
    width: 100%;
  }

  .igrid-page-head--split{
    flex-direction: column;
    align-items: flex-start;
  }

  .igrid-cta-banner{
    flex-direction: column;
    align-items: flex-start;
  }

  .igrid-alt-row,
  .igrid-alt-row.igrid-alt-reverse{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px){
  .igrid-otp{
    gap: 8px;
  }

  .igrid-otp-box{
    height: 48px;
    border-radius: 12px;
    font-size: 1.15rem;
    width: clamp(36px, 12vw, 48px);
    flex: 1 1 clamp(36px, 12vw, 48px);
  }
}

/* SweetAlert2 */
.igrid-swal-popup{
  border-radius: 16px;
}

.igrid-swal-popup .swal2-title{
  font-weight: 850;
  color: var(--igrid-text-primary);
}

.igrid-swal-popup .swal2-html-container{
  color: var(--igrid-text-muted);
  font-weight: 600;
}

.swal2-styled.swal2-confirm.btn-success{
  background-color: var(--igrid-btn-primary-bg);
  border-color: var(--igrid-btn-primary-border);
}

.swal2-styled.swal2-confirm.btn-success:hover,
.swal2-styled.swal2-confirm.btn-success:focus{
  background-color: var(--igrid-btn-primary-bg-hover);
  border-color: var(--igrid-btn-primary-bg-hover);
}

.swal2-styled.swal2-confirm.btn-success:focus-visible{
  box-shadow: var(--igrid-focus-ring-strong);
}

/* Footer */
footer{
  color: var(--igrid-black-65);
}