.eb-overlay-shell {
  position: fixed;
  inset: 0;
  z-index: var(--eb-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--eb-space-6);
  pointer-events: none;
}

.eb-overlay-shell.is-open {
  pointer-events: auto;
}

.eb-overlay-shell__backdrop {
  position: absolute;
  inset: 0;
  background: var(--eb-overlay-backdrop);
  z-index: 0;
}

.eb-overlay-shell__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 40rem);
  max-height: calc(100vh - (var(--eb-space-4) * 2));
  overflow: hidden;
  background: var(--eb-bg-card);
  color: var(--eb-text-primary);
  border: 1px solid var(--eb-border-default);
  border-radius: var(--eb-radius-0);
  box-shadow: var(--eb-shadow-soft-modal);
  padding: var(--eb-space-4);
}

.eb-overlay-shell__panel--sm {
  width: min(100%, 28rem);
}

.eb-overlay-shell__panel--md {
  width: min(100%, 40rem);
}

.eb-overlay-shell__panel--lg {
  width: min(100%, 52rem);
}

.eb-overlay-shell__panel--xl {
  width: min(100%, 68rem);
}

.eb-overlay-shell__header {
  display: flex;
  align-items: flex-start;
  gap: var(--eb-space-4);
  padding: var(--eb-space-4);
  border-bottom: 1px solid var(--eb-border-default);
}

.eb-overlay-shell__heading {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--eb-space-2);
}

.eb-overlay-shell__title {
  margin: 0;
  font-size: var(--eb-type-h4-size);
  line-height: var(--eb-type-h4-line-height);
  font-weight: var(--eb-type-h4-weight);
  letter-spacing: var(--eb-type-h4-tracking);
}

.eb-overlay-shell__subtitle {
  margin: 0;
  color: var(--eb-text-secondary);
  font-size: var(--eb-type-meta-size);
  line-height: var(--eb-type-meta-line-height);
  font-weight: var(--eb-type-meta-weight);
}

.eb-overlay-shell__header-actions {
  display: flex;
  align-items: center;
  gap: var(--eb-space-2);
}

.eb-overlay-shell__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--eb-border-default);
  border-radius: var(--eb-radius-0);
  background: var(--eb-bg-card);
  color: var(--eb-text-secondary);
  cursor: pointer;
  transition:
    background-color var(--eb-duration-base) var(--eb-ease-standard),
    border-color var(--eb-duration-base) var(--eb-ease-standard),
    color var(--eb-duration-base) var(--eb-ease-standard),
    box-shadow var(--eb-duration-base) var(--eb-ease-standard);
}

.eb-overlay-shell__close:hover,
.eb-overlay-shell__close:focus-visible {
  border-color: var(--eb-border-focus);
  color: var(--eb-text-primary);
  box-shadow: 0 0 0 3px var(--eb-primary-500-08);
}

.eb-overlay-shell__body {
  display: grid;
  gap: var(--eb-space-4);
  padding: var(--eb-space-4);
  overflow: auto;
}

.eb-overlay-shell__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--eb-space-3);
  padding: var(--eb-space-4);
  border-top: 1px solid var(--eb-border-default);
}

.eb-overlay-shell--drawer {
  align-items: stretch;
}

.eb-overlay-shell--drawer-start {
  justify-content: flex-start;
}

.eb-overlay-shell--drawer-end {
  justify-content: flex-end;
}

.eb-overlay-shell__panel--drawer {
  width: min(100%, 26rem);
  height: calc(100vh - (var(--eb-space-6) * 2));
}

.eb-overlay-shell__panel--drawer-sm {
  width: min(100%, 22rem);
}

.eb-overlay-shell__panel--drawer-md {
  width: min(100%, 26rem);
}

.eb-overlay-shell__panel--drawer-lg {
  width: min(100%, 32rem);
}

.eb-overlay-shell__panel--drawer-xl {
  width: min(100%, 40rem);
}

.eb-overlay-shell.is-embedded {
  position: relative;
  inset: auto;
  padding: 0;
  min-height: 0;
  pointer-events: auto;
}

.eb-overlay-shell.is-embedded .eb-overlay-shell__backdrop {
  display: none;
}

.eb-overlay-shell.is-embedded .eb-overlay-shell__panel {
  width: 100%;
  max-height: none;
  height: auto;
}

@media (max-width: 767px) {
  .eb-overlay-shell {
    padding: var(--eb-space-4);
  }

  .eb-overlay-shell__header,
  .eb-overlay-shell__body,
  .eb-overlay-shell__footer {
    padding: var(--eb-space-4);
  }

  .eb-overlay-shell__footer {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .eb-overlay-shell__footer > * {
    flex: 1 1 auto;
  }

  .eb-overlay-shell__panel--drawer {
    width: min(100%, 100%);
    height: calc(100vh - (var(--eb-space-4) * 2));
  }
}

/* Interactive modal shell: Bootstrap owns focus, Escape, backdrop and scroll lock. */
.eb-modal-shell .eb-modal-shell__panel {
  border: 0;
  border-radius: var(--eb-radius-0);
  background: var(--eb-bg-card);
}
.eb-modal-shell .modal-header { gap: var(--eb-space-3); }
.eb-modal-shell .modal-header button { min-width: 44px; min-height: 44px; }
@media (max-width: 767.98px) {
  .eb-modal-shell .modal-dialog {
    align-items: flex-end;
    margin: 0;
    max-width: none;
    height: 100%;
    min-height: 100%;
  }
  .eb-modal-shell .eb-modal-shell__panel {
    max-height: 90dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Confirm dialog (x-ui.confirm-dialog): the question, one line, then the safe button on the left
   and the action on the right. On phones the action sits on top and the safe button under it. */
.eb-confirm .modal-body { padding-block: var(--eb-space-4); }
.eb-confirm__line { margin: 0; color: var(--eb-gray-700); line-height: 1.5; }
.eb-confirm__line[hidden], .eb-confirm__type[hidden] { display: none; }
.eb-confirm__type { margin-top: var(--eb-space-4); }
.eb-confirm__type-label { display: block; margin-bottom: var(--eb-space-2); font-weight: 700; }
.eb-confirm__actions { display: flex; flex-flow: row; justify-content: flex-end; gap: var(--eb-space-3); width: 100%; }
.eb-confirm__actions .eb-btn { min-height: 44px; }
@media (max-width: 767.98px) {
  .eb-confirm__actions { flex-direction: column-reverse; }
  .eb-confirm__actions .eb-btn { width: 100%; }
}

/* Interactive drawers (data-eb-drawer): hidden until opened, pinned footer, grouped record fields. */
.eb-overlay-shell[data-eb-drawer]:not(.is-open):not(.is-embedded) { display: none; }
body.eb-drawer-lock { overflow: hidden; }
.eb-user-drawer .eb-overlay-shell__body { align-content: start; gap: var(--eb-space-6); }
.eb-user-drawer__form { display: grid; gap: var(--eb-space-6); }
.eb-user-drawer__group { display: grid; gap: var(--eb-space-4); }
.eb-user-drawer__heading { margin: 0; font-size: 15px; font-weight: 800; color: var(--eb-gray-900); }
.eb-user-drawer__nested { display: grid; gap: var(--eb-space-4); }
.eb-user-drawer .eb-overlay-shell__footer { position: sticky; bottom: 0; background: var(--eb-bg-card); }
.eb-user-drawer .eb-overlay-shell__footer .eb-btn { min-height: 44px; }

/* Staff photo viewer (admin listing review, expert review). */
.eb-staff-viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; background: var(--eb-gray-100); }
.eb-staff-viewer__stage img { max-width: 100%; max-height: 62vh; object-fit: contain; }
.eb-staff-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--eb-white); color: var(--eb-gray-900); box-shadow: var(--eb-shadow-soft-modal); }
.eb-staff-viewer__nav--prev { left: 12px; }
.eb-staff-viewer__nav--next { right: 12px; }
.eb-staff-viewer__thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--eb-space-3); }
.eb-staff-viewer__thumb { padding: 0; border: 2px solid transparent; background: var(--eb-gray-100); width: 60px; height: 60px; }
.eb-staff-viewer__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eb-staff-viewer__thumb.is-current { border-color: var(--eb-primary-700); }
@media (max-width: 767.98px) { .eb-staff-viewer__stage { min-height: 240px; } }

.eb-modal-shell .modal-header .eb-overlay-shell__title { flex: 1 1 auto; min-width: 0; }

.eb-overlay-shell--drawer .eb-overlay-shell__body { flex: 1 1 auto; }