/**
 * VolteVas shared dialog surface.
 *
 * Existing dialogs keep their own semantic markup and interaction scripts;
 * this component supplies the common visual contract used by public and app
 * screens: backdrop, panel, header/footer, close control and focus state.
 */

:root {
  --vv-dialog-backdrop: rgba(10, 20, 34, .68);
  --vv-dialog-backdrop-blur: blur(6px);
  --vv-dialog-surface: #fff;
  --vv-dialog-header: var(--vv-color-head);
  --vv-dialog-body: #fff;
  --vv-dialog-footer: var(--vv-color-page);
  --vv-dialog-title: var(--vv-color-ink);
  --vv-dialog-muted: var(--vv-color-steel);
  --vv-dialog-line: #d7e4ea;
  --vv-dialog-line-soft: #e1eaee;
  --vv-dialog-radius: 20px;
  --vv-dialog-shadow: 0 30px 80px rgba(8, 22, 38, .3);
  --vv-dialog-action: linear-gradient(90deg, var(--vv-color-slate) 0%, var(--vv-color-steel) 100%);
  --vv-dialog-action-hover: linear-gradient(90deg, #2e465e 0%, var(--vv-color-slate) 100%);
  --vv-dialog-button-height: 42px;
  --vv-dialog-button-padding: 10px 18px;
  --vv-dialog-button-radius: 10px;
  --vv-dialog-button-font-size: 12px;
  --vv-dialog-button-line-height: 18px;
  --vv-dialog-button-weight: 650;
  --vv-dialog-icon-size: 36px;
  --vv-dialog-header-height: 64px;
  --vv-dialog-title-size: 18px;
  --vv-dialog-title-line-height: 24px;
  --vv-dialog-title-weight: 700;
  --vv-dialog-close-glyph-size: 16px;
}

.vv-dialog-surface,
.vv-legal-modal__dialog,
.vv-app-dialog__panel {
  color: var(--vv-dialog-title);
  font-family: var(--vv-font-ui);
}

.vv-dialog-close,
.vv-legal-modal__close {
  display: grid;
  place-items: center;
  flex: 0 0 var(--vv-dialog-icon-size);
  width: var(--vv-dialog-icon-size);
  height: var(--vv-dialog-icon-size);
  padding: 0;
  border: 1px solid var(--vv-dialog-line);
  border-radius: var(--vv-radius-md);
  background: var(--vv-color-page);
  color: var(--vv-color-slate);
  cursor: pointer;
  font-family: var(--vv-font-ui);
  font-size: var(--vv-dialog-close-glyph-size);
  font-weight: 400;
  line-height: 1;
}

.vv-dialog-action-primary,
.vv-dialog-action-secondary {
  min-height: var(--vv-dialog-button-height);
  padding: var(--vv-dialog-button-padding);
  border-radius: var(--vv-dialog-button-radius);
  font-family: var(--vv-font-ui);
  font-size: var(--vv-dialog-button-font-size);
  font-weight: var(--vv-dialog-button-weight);
  line-height: var(--vv-dialog-button-line-height);
}

.vv-dialog-action-primary {
  border-color: transparent;
  background: var(--vv-dialog-action);
  color: #fff;
}

.vv-dialog-action-secondary {
  border-color: #cbdce5;
  background: #fff;
  color: var(--vv-dialog-title);
}

.vv-dialog-close:hover,
.vv-legal-modal__close:hover {
  border-color: #b9ced8;
  background: #eef5f7;
  color: var(--vv-color-ink);
}

/* Reusable native image dialog: the component owns its surface and controls. */
.vv-dialog--image {
  width: calc(100vw - 48px);
  max-width: 1800px;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--vv-dialog-line);
  border-radius: var(--vv-dialog-radius);
  background: var(--vv-dialog-surface);
  box-shadow: var(--vv-dialog-shadow);
}
.vv-dialog--image::backdrop {
  background: var(--vv-dialog-backdrop);
  backdrop-filter: var(--vv-dialog-backdrop-blur);
}
.vv-dialog--image .vv-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--vv-dialog-header-height);
  padding: 14px 24px;
  border-bottom: 1px solid var(--vv-dialog-line-soft);
  background: var(--vv-dialog-header);
}
.vv-dialog--image .vv-dialog__title {
  margin: 0;
  font-size: var(--vv-dialog-title-size);
  line-height: var(--vv-dialog-title-line-height);
  font-weight: var(--vv-dialog-title-weight);
}
.vv-dialog--image .vv-dialog__body {
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--vv-dialog-body);
}
@media (max-width: 640px) {
  .vv-dialog--image {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .vv-dialog--image .vv-dialog__header { padding: 12px 16px; }
  .vv-dialog--image .vv-dialog__body { padding: 12px; }
}

.vv-dialog-surface :focus-visible,
.vv-legal-modal :focus-visible,
.vv-app-dialog :focus-visible {
  outline: var(--vv-focus-outline);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .vv-dialog-surface,
  .vv-legal-modal,
  .vv-app-dialog { scroll-behavior: auto; }
}