/**
 * DriveX — Post Your Ad verification modal.
 * Presentation only; the panels inside are the page's existing ones, moved in.
 */

.dx-pvm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(4, 12, 26, .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dx-pvm-overlay.is-open { display: block; }

/* Keep the page behind from scrolling under the dialog, and hide the stepper's
   fixed action bar so its label can never contradict the task on screen. */
html.dx-pvm-open { overflow: hidden; }
html.dx-pvm-open .dx-mwf-nav { display: none !important; }

.dx-pvm-dialog {
  max-width: 440px;
  margin: 7vh auto 24px;
  background: var(--bg2, #fff);
  border: 1px solid var(--border, #E3EAF3);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(7, 54, 122, .22);
  overflow: hidden;
  animation: dxPvmIn .16s ease-out;
}
@keyframes dxPvmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dx-pvm-dialog { animation: none; } }

.dx-pvm-head { padding: 20px 22px 14px; position: relative; }
.dx-pvm-stage {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent, #F96501); margin-bottom: 6px; min-height: 13px;
}
.dx-pvm-title {
  font-family: var(--font-head, system-ui), sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.25;
  color: var(--text, #0D1B2E); padding-right: 28px;
}
.dx-pvm-sub {
  margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text3, #5B6B82);
}
.dx-pvm-ok { color: #22c55e; font-weight: 700; }
.dx-pvm-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border: none; background: none;
  color: var(--text3, #5B6B82); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.dx-pvm-x:hover { background: rgba(7, 54, 122, .07); }

.dx-pvm-body { padding: 0 22px 4px; }
/* The adopted panel already carries its own card styling on the page; flatten it
   so it does not read as a box inside a box.
   NOTE: deliberately no `display` override here. The stage machine decides which
   panel is current by reading each panel's computed display, so forcing one here
   would make an already-finished panel look permanently active and the modal
   would never close. */
.dx-pvm-body .dx-pvm-panel {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.dx-pvm-body .dx-pvm-panel > div:first-child { margin-top: 0; }

.dx-pvm-foot { padding: 6px 22px 20px; text-align: center; }
.dx-pvm-link {
  background: none; border: none; padding: 6px 4px;
  color: var(--accent, #F96501); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dx-pvm-link:hover { text-decoration: underline; }

/* Completion summary stamped onto the contact step */
.dx-pvm-done { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dx-pvm-done-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #22c55e;
}

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  .dx-pvm-overlay { padding: 0; }
  .dx-pvm-dialog {
    max-width: none;
    margin: 0;
    min-height: 100%;
    border-radius: 0;
    border: none;
  }
  .dx-pvm-head { padding: 18px 16px 12px; }
  .dx-pvm-body { padding: 0 16px 4px; }
  .dx-pvm-foot { padding: 6px 16px 24px; }
  .dx-pvm-title { font-size: 17px; }
  /* Room for the on-screen keyboard so the primary control stays reachable. */
  .dx-pvm-dialog { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Comfortable tap targets for the OTP entry and the primary actions. */
  .dx-pvm-body input[type="text"],
  .dx-pvm-body input[type="password"],
  .dx-pvm-body input[type="tel"] { font-size: 16px !important; min-height: 46px; }
  .dx-pvm-body button { min-height: 46px; }
}

/* Sign-in-by-SMS mode: the dialog header already explains that a code was sent
   and to which number, so hide the button that requested it and the panel's own
   duplicate heading. Scoped to the dialog, so it reverts automatically when the
   panel is moved back into the form. */
.dx-pvm-otp-mode #alOtpLoginBtn { display: none !important; }
.dx-pvm-otp-mode #alSigninPrompt > div:first-child { display: none !important; }
.dx-pvm-otp-mode #alWaOtpPanel > div:first-child { display: none !important; }