/*
 * Demo-request dialog for the Hopi Ads landing page.
 *
 * Scope: loaded only by public/landing/index.html and namespaced `hpa-df-*`, so it cannot collide
 * with the landing's own `hpa-*` components, with the consent layer's `hpa-consent-*`, or with the
 * panel's Tailwind layer.
 *
 * Design source: the landing page's own tokens in css/hopiads.css — Open Sans, the pill button
 * geometry (`height: 48px; border-radius: 999px`), the brand gradient for the primary action,
 * `--hpa-border` hairlines and `--hpa-muted` secondary text. Nothing new is invented: a form that
 * looks like a different product's form reads as a phishing overlay.
 *
 * Layout contract: the panel is a column that scrolls INSIDE itself (`max-height: 86vh`), so the
 * page behind never scrolls while the dialog is open and the action row stays reachable on a short
 * viewport. At 375px every control is full width and at least 44px tall.
 */

.hpa-df-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above the cookie-consent layer (1000/1001): a dialog on top must stay on top */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 45%);
  font-family: 'Open Sans', Arial, sans-serif;
}

.hpa-df-overlay[hidden] {
  display: none;
}

.hpa-df-panel {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 86vh;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.hpa-df-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--hpa-border, #e3e3e8);
}

.hpa-df-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.hpa-df-head p {
  margin: 0;
  color: var(--hpa-muted, #6b6b70);
  font-size: 14px;
  line-height: 1.5;
}

.hpa-df-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--hpa-light-btn, #f2f3f7);
  color: #000;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.hpa-df-close:hover {
  filter: brightness(.95);
}

/* ── Scrolling body ─────────────────────────────────────────────────────── */

.hpa-df-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 28px;
  /* Room for the home-indicator on iOS when the dialog fills the screen. */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.hpa-df-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hpa-df-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A field that needs the full row: company name, message, the checkbox groups. */
.hpa-df-field--wide {
  grid-column: 1 / -1;
}

.hpa-df-field label,
.hpa-df-legend {
  color: #000;
  font-size: 13px;
  font-weight: 600;
}

/* The required marker is decorative: the input carries `required` + aria-required for the
   accessibility tree, so the asterisk must not be the only signal. */
.hpa-df-required {
  color: #ef2980;
}

.hpa-df-field input[type='text'],
.hpa-df-field input[type='email'],
.hpa-df-field input[type='tel'],
.hpa-df-field select,
.hpa-df-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--hpa-border, #e3e3e8);
  border-radius: 10px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 15px;
}

.hpa-df-field textarea {
  min-height: 96px;
  resize: vertical;
}

.hpa-df-field input:focus-visible,
.hpa-df-field select:focus-visible,
.hpa-df-field textarea:focus-visible {
  outline: 3px solid #007a91;
  outline-offset: 2px;
}

/* Invalid state is border + text, never colour alone. */
.hpa-df-field.is-invalid input,
.hpa-df-field.is-invalid select,
.hpa-df-field.is-invalid textarea {
  border-color: #c81e4f;
}

.hpa-df-error {
  min-height: 16px;
  color: #c81e4f;
  font-size: 12px;
  line-height: 1.4;
}

.hpa-df-counter {
  color: var(--hpa-muted, #6b6b70);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * The phone format hint. Its own class rather than a second user of `.hpa-df-counter`: sharing the
 * class made `document.querySelector('.hpa-df-counter')` return the hint instead of the message
 * counter (measured by the browser audit, 2026-10-15). Left-aligned, because it reads under its
 * field rather than tallying a budget.
 */
.hpa-df-hint {
  color: var(--hpa-muted, #6b6b70);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Multi-select chips ─────────────────────────────────────────────────── */

.hpa-df-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hpa-df-chip {
  position: relative;
  display: inline-flex;
}

.hpa-df-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hpa-df-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hpa-border, #e3e3e8);
  border-radius: 999px;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}

.hpa-df-chip input:checked + span {
  border-color: #00b0d2;
  background: #e8f8fc;
  font-weight: 600;
}

.hpa-df-chip input:focus-visible + span {
  outline: 3px solid #007a91;
  outline-offset: 2px;
}

/* ── Consent block ──────────────────────────────────────────────────────── */

.hpa-df-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.hpa-df-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #00b0d2;
  cursor: pointer;
}

.hpa-df-consent label {
  color: #4a4a52;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.hpa-df-consent a {
  color: #00b0d2;
  text-decoration: underline;
}

/* The honeypot: present in the DOM, never visible, never reachable by keyboard or screen reader.
   `display: none` alone is skipped by some naive bots, so it is also moved off-screen and made
   inert — a bot that reads layout still finds nothing to fill. */
.hpa-df-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Footer actions ─────────────────────────────────────────────────────── */

.hpa-df-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 28px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hpa-border, #e3e3e8);
}

/*
 *
 * THE ROOT CAUSE, MEASURED, NOT GUESSED: `showAccepted()` in
 * which browsers implement through the USER-AGENT rule `[hidden] { display: none }`. The rule
 * `.hpa-df-submit` immediately below declares `display: inline-flex`, and an author stylesheet's
 * CLASS selector outranks a UA-origin attribute rule in the cascade. So the attribute was being set
 * correctly on every success and the button kept rendering anyway: the JavaScript was right and the
 * stylesheet silently overruled it.
 *
 * THIS IS THE GENERAL FIX, NOT A PATCH ON ONE BUTTON. Every element this dialog hides with the
 * `hidden` attribute is covered, so the same class of defect cannot reappear the next time
 * something here is hidden — which is exactly how this one was born.
 *
 * `!important` IS THE CORRECT TOOL IN THIS ONE PLACE: the whole purpose of the declaration is to
 * beat any `display` value declared later in this file. Without it, the specificity race would have
 * to be re-won by hand against every new rule, and losing it silently is what produced the screen
 * that was photographed for the reference.
 */
[hidden] {
  display: none !important;
}

/*
   04:20, option A). Google draws a 304x78 iframe inside the slot; the label tells the visitor what
   is being asked of them. Hidden by the [hidden] rule above until challengeV2() reveals it. */
.hpa-df-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.hpa-df-captcha-label {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.hpa-df-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--hpa-brand-gradient, linear-gradient(150deg, #fa0 0%, #ef2980 33%, #00b0d2 67%, #00e839 100%));
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s ease;
}

.hpa-df-submit:hover:not(:disabled) {
  filter: brightness(.96);
}

.hpa-df-submit:disabled {
  cursor: progress;
  filter: grayscale(.4) brightness(1.1);
}

.hpa-df-status {
  flex: 1 1 200px;
  color: var(--hpa-muted, #6b6b70);
  font-size: 13px;
  line-height: 1.5;
}

.hpa-df-status.is-error {
  color: #c81e4f;
}

/* ── Success panel, shown in place of the form ──────────────────────────── */

.hpa-df-done {
  padding: 40px 28px;
  text-align: center;
}

.hpa-df-done h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}

.hpa-df-done p {
  margin: 0 auto;
  max-width: 420px;
  color: #4a4a52;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hpa-df-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .hpa-df-panel {
    width: 100%;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
  }

  .hpa-df-head,
  .hpa-df-body,
  .hpa-df-foot {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* One column: two 160px-wide fields side by side are unusable at 375px. */
  .hpa-df-grid {
    grid-template-columns: 1fr;
  }

  .hpa-df-submit {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hpa-df-submit,
  .hpa-df-chip span {
    transition: none;
  }
}

@media print {
  .hpa-df-overlay {
    display: none !important;
  }
}