/*
 * Handsfriend shared modal layer
 *
 * Ownership:
 * - full-screen app overlay / backdrop
 * - stable CSS-centered dialog
 * - dialog header/body/footer sizing and body-only scroll
 * - shared app-modal stack / close affordance styling
 *
 * Important:
 * Modal geometry intentionally does NOT follow visualViewport or keyboard
 * measurements. iOS/Safari is allowed to perform its native focus/keyboard
 * pan without a second JS-driven modal position correction.
 */

:root {
  --hf-modal-z-index: var(--hf-layer-modal, 30000);
  --hf-modal-dialog-width: 440px;
  --hf-modal-dialog-wide-width: 640px;
  --hf-modal-dialog-xwide-width: 980px;
  --hf-modal-dialog-radius: 20px;
  --hf-modal-dialog-padding: 24px;
  --hf-modal-dialog-bottom-padding: 36px;
  --hf-modal-effect-gutter: 6px;
  /* Keep the shared dialog shadow inside the standard viewport edge space.
   * The previous 70px blur was visibly clipped by the viewport on every modal. */
  --hf-modal-dialog-shadow:
    0 8px 20px -8px rgba(10, 24, 35, 0.25), 0 2px 6px rgba(10, 24, 35, 0.08);
  --hf-modal-edge-space: 24px;
}

/*
 * Keep background scrolling disabled without converting the document into a
 * fixed-position coordinate system. In particular, do not use body top:-Y.
 */
html.hf-modal-open,
body.hf-modal-open {
  overflow: hidden !important;
}

.hf-modal[data-hf-modal] {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: calc(var(--hf-modal-z-index) + var(--hf-modal-stack-offset, 0));
  width: 100%;
  height: 100%;
  display: none;
  isolation: isolate;
}

.hf-modal[data-hf-modal][hidden],
.hf-modal[data-hf-modal][aria-hidden="true"] {
  pointer-events: none;
}

.hf-modal[data-hf-modal].is-open {
  display: block;
  pointer-events: auto;
}

html .hf-modal[data-hf-modal] :focus,
html .hf-modal[data-hf-modal] :focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.hf-modal-backdrop[data-hf-modal-backdrop] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--hf-modal-backdrop-color);
  border: 0;
  border-radius: 0;
  cursor: default;
  touch-action: none;
}

/*
 * Same basic geometry as the pre-renewal modal: a stable full-screen root and
 * a box centered with 50%/translate. No visualViewport top/height is involved.
 */
.hf-modal-dialog[data-hf-modal-dialog] {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(
    var(--hf-modal-dialog-width),
    calc(100% - (var(--hf-modal-edge-space) * 2))
  );
  max-height: calc(100% - (var(--hf-modal-edge-space) * 2));
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--hf-modal-dialog-padding);
  padding-bottom: var(--hf-modal-dialog-bottom-padding);
  overflow: hidden;
  color: var(--hf-color-text-strong, #27343b);
  background: var(--hf-color-surface, #ffffff);
  border: 1px solid var(--hf-color-line, #dfe7eb);
  border-radius: var(--hf-modal-dialog-radius);
  box-shadow: var(--hf-modal-dialog-shadow);
  outline: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: manipulation;
}

.hf-modal-content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.hf-modal-header {
  min-width: 0;
  flex: 0 0 auto;
}

.hf-modal-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;

  margin: calc(var(--hf-modal-effect-gutter) * -1);
  padding: var(--hf-modal-effect-gutter);

  overflow-x: hidden;
  overflow-y: auto;

  scroll-padding-block: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.hf-modal-footer {
  min-width: 0;
  flex: 0 0 auto;
}

.hf-modal-dialog.hf-modal-dialog-wide,
.hf-modal[data-hf-modal-size="wide"] .hf-modal-dialog[data-hf-modal-dialog] {
  --hf-modal-dialog-width: var(--hf-modal-dialog-wide-width);
}

.hf-modal[data-hf-modal-size="xwide"] .hf-modal-dialog[data-hf-modal-dialog] {
  --hf-modal-dialog-width: var(--hf-modal-dialog-xwide-width);
}

.hf-modal-close[data-hf-modal-close] {
  box-sizing: border-box;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--hf-color-muted, #74818a);
  background: var(--hf-color-surface-soft, #f6f8f9);
  border: 0;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.hf-modal-close[data-hf-modal-close]:hover {
  color: var(--hf-color-text-strong, #27343b);
  background: var(--hf-color-surface-hover, #eef3f5);
  outline: none;
}

.hf-modal-close[data-hf-modal-close] i {
  transform: translate(1px, -1px);
}

.hf-modal h2 {
  font-weight: 600;
}

@media (max-width: 768px) {
  :root {
    --hf-modal-edge-space: 20px;
    --hf-modal-dialog-radius: 18px;
    --hf-modal-dialog-padding: 20px 18px 0;
    --hf-modal-dialog-bottom-padding: 20px;
  }

  .hf-modal-dialog[data-hf-modal-dialog] {
    width: min(
      var(--hf-modal-dialog-width),
      calc(100% - (var(--hf-modal-edge-space) * 2))
    );
    max-width: calc(100% - (var(--hf-modal-edge-space) * 2));
    max-height: calc(100% - (var(--hf-modal-edge-space) * 2));
    min-height: 0;
    border: 1px solid var(--hf-color-line, #dfe7eb);
    border-radius: var(--hf-modal-dialog-radius);
  }

  /* Long-form variants keep the same centered model. They may use slightly
   * more layout-viewport height, while .hf-modal-body remains the scroll owner. */
  .hf-modal[data-hf-modal-mobile="full"]
    .hf-modal-dialog[data-hf-modal-dialog] {
    max-height: calc(100% - var(--hf-modal-edge-space));
  }

  .hf-modal-close[data-hf-modal-close] {
    top: 10px;
    right: 10px;
  }

  .hf-modal[data-hf-modal] textarea:focus {
    box-shadow: none !important;
  }
}