/* ==========================================================================
   SG Popups. One modal, RTL-native, readable at 390.

   Colours come from the theme's --sg-* contract where it exists and fall back
   to values that clear WCAG AA on their own, so the popup never depends on a
   theme being present to be legible.
   ========================================================================== */

.sg-popup {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: grid;
  place-items: center;
  padding: 16px;
}

.sg-popup[hidden] { display: none; }

/* The page behind must not scroll under an open modal. */
.sg-popup-locked,
.sg-popup-locked body { overflow: hidden; }

/* 0.3.1: the accessibility button (sg-a11y) steps aside while a popup is open.
   At 390 it sat on the popup's submit button. The dialog traps focus and the
   button returns the moment the popup closes. */
html.sg-popup-open #sg-a11y { visibility: hidden; pointer-events: none; }

.sg-popup__backdrop {
  position: absolute;
  inset: 0;
  /* Item 5: the site's shared overlay tokens where a theme provides them, the
     plugin's own values where it does not. Timing, easing and backdrop then
     match the drawer, the search overlay and the filter sheet exactly. */
  background: var(--sg-ov-backdrop, rgba(16, 24, 40, 0.58));
  opacity: 0;
  transition: opacity var(--sg-ov-dur, 0.22s) var(--sg-ov-ease, ease);
}

.sg-popup.is-open .sg-popup__backdrop { opacity: 1; }

.sg-popup__panel {
  position: relative;
  inline-size: min(100%, 440px);
  max-block-size: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  opacity: 0;
  transform: translateY(var(--sg-ov-rise, 10px)) scale(0.99);
  transition:
    opacity   var(--sg-ov-dur, 0.22s) var(--sg-ov-ease, ease),
    transform var(--sg-ov-dur, 0.22s) var(--sg-ov-ease, ease);
}

.sg-popup.is-open .sg-popup__panel {
  opacity: 1;
  transform: none;
}

.sg-popup__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sg-muted, #667085);
  cursor: pointer;
}

.sg-popup__close:hover { background: #f2f4f7; color: var(--sg-ink, #1e2127); }
.sg-popup__close:focus-visible { outline: 3px solid var(--sg-accent, #33cccc); outline-offset: 2px; }

.sg-popup__title {
  margin: 0 0 10px;
  /* Room for the close button so a long title never runs under it. */
  padding-inline-end: 34px;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--sg-ink, #1e2127);
}

.sg-popup__body p {
  margin: 0 0 14px;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #3b424d;
}

.sg-popup__label {
  display: block;
  margin-block-end: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sg-ink, #1e2127);
}

.sg-popup__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sg-popup__input {
  flex: 1 1 190px;
  min-inline-size: 0;
  padding: 12px 14px;
  border: 1px solid var(--sg-line, #d8dce3);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--sg-ink, #1e2127);
  background: #fff;
}

.sg-popup__input:focus-visible {
  outline: 3px solid var(--sg-accent, #33cccc);
  outline-offset: 1px;
  border-color: var(--sg-accent, #33cccc);
}

.sg-popup__input[aria-invalid="true"] { border-color: #b42318; }

.sg-popup__submit {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  /* 5.0:1 against white, so the label is readable rather than merely branded. */
  background: #15803d;
  color: #fff;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  cursor: pointer;
}

.sg-popup__submit:hover { background: #116430; }
.sg-popup__submit:focus-visible { outline: 3px solid #15803d; outline-offset: 2px; }
.sg-popup__submit[disabled] { opacity: 0.65; cursor: default; }

.sg-popup__err {
  margin: 8px 0 0;
  min-block-size: 0;
  font-size: 0.85rem;
  color: #b42318;
}

.sg-popup__err:not(.is-shown) {
  /* Empty but still in the accessibility tree, so the live region can speak. */
  margin: 0;
}

.sg-popup__fine {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #8a94a6;
}

/* ---- the success state ---- */

.sg-popup__done[hidden] { display: none; }

.sg-popup__done-msg {
  margin: 4px 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #15803d;
}

.sg-popup__code:not(:empty) {
  margin: 0;
  padding: 14px;
  border: 2px dashed #15803d;
  border-radius: 12px;
  background: #f3fbf5;
  text-align: center;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #15803d;
}

/* ---- phone ---- */

@media (max-width: 420px) {
  .sg-popup { padding: 12px; }
  .sg-popup__panel { padding: 24px 18px 20px; border-radius: 16px; }
  .sg-popup__title { font-size: 1.25rem; }
  .sg-popup__submit { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-popup__backdrop,
  .sg-popup__panel {
    transition: none;
    transform: none;
  }
}