/* ==========================================================================
   Assets Bridge Holdings - Modal notifications
   --------------------------------------------------------------------------
   Replaces native window.alert() / window.confirm() with themed dialogs.

   Self-contained: works on the public site, the auth pages and the member
   dashboard. Uses the public theme tokens when present and falls back to the
   dark palette otherwise (the member area has no theme tokens).
   ========================================================================== */

.gh-modal {
  position: fixed;
  z-index: 1000000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 280ms;
}

.gh-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.gh-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 7, 0.74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.gh-modal__dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 34px 32px 30px;
  border: 1px solid var(--theme-border, #30343d);
  border-radius: var(--ui-radius-lg, 24px);
  outline: none;
  background: var(--theme-surface-raised, #1b1f27);
  color: var(--theme-text, #ffffff);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--theme-gold-soft, rgba(212, 175, 55, 0.14));
  text-align: center;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-modal.is-open .gh-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gold hairline, matching the site's cards. */
.gh-modal__dialog::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  border-radius: var(--ui-radius-lg, 24px) var(--ui-radius-lg, 24px) 0 0;
  background: linear-gradient(
    90deg,
    var(--theme-gold, #d4af37),
    var(--ui-accent, #2fbf8f)
  );
}

.gh-modal__icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--theme-gold, #d4af37) 40%, transparent);
  background: var(--theme-gold-soft, rgba(212, 175, 55, 0.14));
  color: var(--theme-gold-bright, #f1d675);
}

.gh-modal__icon svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Variants ---------------------------------------------------------------- */

.gh-modal--info .gh-modal__icon {
  border-color: color-mix(in srgb, var(--ui-accent, #2fbf8f) 42%, transparent);
  background: color-mix(in srgb, var(--ui-accent, #2fbf8f) 14%, transparent);
  color: var(--ui-accent, #2fbf8f);
}

.gh-modal--success .gh-modal__icon {
  border-color: color-mix(in srgb, var(--ui-positive, #34d399) 42%, transparent);
  background: color-mix(in srgb, var(--ui-positive, #34d399) 14%, transparent);
  color: var(--ui-positive, #34d399);
}

.gh-modal--error .gh-modal__icon,
.gh-modal--warning .gh-modal__icon {
  border-color: color-mix(in srgb, var(--ui-negative, #f87171) 42%, transparent);
  background: color-mix(in srgb, var(--ui-negative, #f87171) 14%, transparent);
  color: var(--ui-negative, #f87171);
}

.gh-modal__title {
  margin: 0 0 10px;
  font-family: "Chivo", "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--theme-text, #ffffff);
}

.gh-modal__message {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--theme-text-muted, #b6bac4);
  overflow-wrap: anywhere;
}

.gh-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.gh-modal__btn {
  min-width: 140px;
  padding: 13px 26px;
  border: 1px solid var(--theme-gold, #d4af37);
  border-radius: var(--ui-radius-sm, 10px);
  background: linear-gradient(
    135deg,
    var(--theme-gold-bright, #f1d675),
    var(--theme-gold, #d4af37) 55%
  );
  color: #14120b;
  font: 700 15px/1 "Chivo", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.gh-modal__btn:hover,
.gh-modal__btn:focus-visible {
  outline: none;
  background: var(--theme-gold-bright, #f1d675);
  transform: translateY(-2px);
}

.gh-modal__btn--ghost {
  border-color: var(--theme-border, #30343d);
  background: transparent;
  color: var(--theme-text-muted, #b6bac4);
}

.gh-modal__btn--ghost:hover,
.gh-modal__btn--ghost:focus-visible {
  border-color: var(--theme-gold, #d4af37);
  background: var(--theme-gold-soft, rgba(212, 175, 55, 0.14));
  color: var(--theme-gold-bright, #f1d675);
  transform: translateY(-2px);
}

body.gh-modal-open {
  overflow: hidden;
}

@media (max-width: 575px) {
  .gh-modal {
    padding: 12px;
  }

  .gh-modal__dialog {
    padding: 26px 20px 22px;
    border-radius: 18px;
  }

  .gh-modal__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
  }

  .gh-modal__title {
    font-size: 19px;
  }

  .gh-modal__message {
    font-size: 14.5px;
  }

  .gh-modal__actions {
    flex-direction: column-reverse;
    margin-top: 22px;
  }

  .gh-modal__btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-modal,
  .gh-modal__dialog {
    transition-duration: 0.01ms;
  }
}