/* .ap-modal — used by the coupon-code reveal modal and the age gate. Built on <dialog> semantics. */

.ap-modal {
  /* The global reset's `* { margin: 0; }` (02-reset.css) wipes out the
     browser's own <dialog> UA-stylesheet default of `margin: auto`, which is
     what normally centers a modal dialog in the viewport — without an
     explicit re-declaration here it collapses to its `inset`/`left`/`top`
     default and sticks to a corner instead (same root cause .ap-age-gate's
     own comment documents; this component just needs the fixed+transform
     variant since, unlike the age gate, it stays a single shrink-to-fit
     card rather than a full-viewport flex wrapper). */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: none;
  border-radius: var(--ap-radius-lg);
  padding: 0;
  background: var(--ap-surface);
  color: var(--ap-text);
  box-shadow: var(--ap-shadow-md);
  max-width: min(90vw, 480px);
  max-height: 90vh;
  overflow-y: auto;
}

.ap-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.ap-modal__body {
  padding: var(--ap-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-md);
  text-align: center;
}

/* Deliberately a <p>, not a heading — this is a coupon's name inside a
   reveal-code dialog, not page content. A real <h2>/<h3> here would add one
   more heading to the document outline per coupon (a store page can have
   dozens), all with no real relationship to the page's actual sections. See
   .ap-age-gate__title for the same reasoning applied to the age gate. */
.ap-modal__title {
  font-family: var(--ap-font-heading);
  font-size: var(--ap-fs-h2);
  font-weight: 700;
  line-height: var(--ap-lh-tight);
  color: var(--ap-text);
}

.ap-modal__close {
  position: absolute;
  top: var(--ap-space-sm);
  left: var(--ap-space-sm);
  font-size: var(--ap-fs-h3);
  line-height: 1;
  color: var(--ap-text-muted);
}

.ap-modal__close:hover { color: var(--ap-text); }
.ap-modal__close:focus-visible { box-shadow: var(--ap-focus-ring); outline: none; border-radius: var(--ap-radius-sm); }

.ap-modal__code-box {
  display: flex;
  align-items: stretch;
  border: 1px dashed var(--ap-primary);
  border-radius: var(--ap-radius-md);
  overflow: hidden;
}

.ap-modal__code-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: var(--ap-surface-alt);
  color: var(--ap-text);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--ap-space-sm);
}

.ap-modal__code-box input:focus-visible {
  outline: none;
  box-shadow: inset var(--ap-focus-ring);
}

.ap-modal__code-box .ap-btn {
  border-radius: 0;
}