/* [ssr_registration_gate] — the account gate on listing detail pages.

   A native <dialog> opened with showModal(), so the backdrop, the focus containment and the
   inert-ing of the page behind it are the browser's job rather than ours. There is deliberately
   no close button: dismissing takes Escape or a backdrop click, and the next listing view asks
   again. Sizing follows the page's own mobile switch at 767px.

   Tokens are aliased locally with literal fallbacks, like every other section, so the gate
   survives edits to the global token block. */

.ssr-gate {
  --g-surface:   var(--surface-light, #fff);
  --g-ink:       var(--text-on-light, #2f2e30);
  --g-muted:     var(--text-on-light-muted, #6b6a70);
  --g-line:      var(--border-on-light, #d6d5d8);
  --g-green:     var(--green-500, #d2e82e);
  --g-coral:     var(--accent-cta, #ff5a5f);
  --g-display:   var(--font-display, Outfit, system-ui, sans-serif);
  --g-body:      var(--font-body, 'Public Sans', system-ui, sans-serif);
  --g-radius:    var(--radius-lg, 14px);
  --g-focus:     var(--state-focus-ring, #ff5a5f);
  --g-scrim:     rgba(26, 26, 27, .72);   /* charcoal-950 at the weight the features sheet uses */
  --g-width:     520px;
  --g-pad:       36px;

  display: contents;   /* the wrapper is a carrier for the config attribute, not a box */
}

/* wpautop injects bare paragraphs around inline runs; the section's own paragraphs all carry a
   class, so neutralising only the classless ones leaves their rules intact. */
.ssr-gate p:not([class]) { display: contents; }

.ssr-gate .ssr-gate__dialog {
  width: min(var(--g-width), calc(100vw - 32px));
  max-width: min(var(--g-width), calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--g-radius);
  background: var(--g-surface);
  color: var(--g-ink);
  font-family: var(--g-body);
  overflow: auto;
  overscroll-behavior: contain;
}

.ssr-gate .ssr-gate__dialog::backdrop {
  background: var(--g-scrim);
}

.ssr-gate .ssr-gate__inner {
  padding: var(--g-pad);
}

.ssr-gate .ssr-gate__eyebrow {
  display: block;
  margin: 0 0 10px;
  font-family: var(--g-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.ssr-gate .ssr-gate__title {
  display: block;
  margin: 0 0 12px;
  font-family: var(--g-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--g-ink);
}

.ssr-gate .ssr-gate__text {
  display: block;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--g-muted);
}

.ssr-gate .ssr-gate__form {
  margin: 0 0 18px;
}

.ssr-gate .ssr-gate__note,
.ssr-gate .ssr-gate__login {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-muted);
}

.ssr-gate .ssr-gate__note {
  margin-bottom: 14px;
}

.ssr-gate .ssr-gate__login {
  padding-top: 14px;
  border-top: 1px solid var(--g-line);
}

.ssr-gate .ssr-gate__loginlink {
  color: var(--g-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ssr-gate .ssr-gate__loginlink:hover { color: var(--g-coral); }

.ssr-gate .ssr-gate__dialog :focus-visible {
  outline: 2px solid var(--g-focus);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .ssr-gate {
    --g-pad: 24px;
  }

  .ssr-gate .ssr-gate__dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .ssr-gate .ssr-gate__title { font-size: 22px; }
  .ssr-gate .ssr-gate__text  { font-size: 14px; margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ssr-gate .ssr-gate__dialog { animation: none; }
}