/**
 * @file
 * Public-facing download request form — modal and standalone page.
 *
 * Typography and colours follow the site: din-condensed for headings and
 * buttons, gothambook/gothammedium for copy and labels, #557da1 → #4497d0 for
 * the primary action, exactly like the "Download PDF" button it comes from.
 */

.pcns-gated-form {
  --pcns-navy: #00155e;
  --pcns-blue: #557da1;
  --pcns-blue-hover: #4497d0;
  --pcns-border: #d5dde6;
  --pcns-ink: #333;
  max-width: 34em;
  margin: 2em auto;
  padding: 1.75em;
  border: 1px solid var(--pcns-border);
  border-radius: 4px;
  background: #fff;
  font-family: "gothambook", Arial, sans-serif;
  color: var(--pcns-ink);
}

/* Inside the dialog the card frame is the dialog itself. */
.ui-dialog-content .pcns-gated-form {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* -------------------------------------------------------------------------- */
/* Intro                                                                       */
/* -------------------------------------------------------------------------- */

.pcns-gated-intro {
  margin-bottom: 1.5em;
}

.pcns-gated-form .pcns-gated-intro h2 {
  margin: 0 0 0.4em;
  padding: 0;
  font-family: "din-condensed", "gothambold", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #000;
}

.pcns-gated-form .pcns-gated-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5a6570;
}

/* -------------------------------------------------------------------------- */
/* Fields                                                                      */
/* -------------------------------------------------------------------------- */

.pcns-gated-form .form-item {
  margin: 0 0 1.1em;
}

.pcns-gated-form .form-item label {
  display: block;
  margin-bottom: 0.4em;
  font-family: "gothammedium", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--pcns-navy);
}

.pcns-gated-form .form-item label .form-required::after {
  color: #c1272d;
}

/* The theme styles every input on the site (padding 15px 20px, grey fill,
   colour forced with !important) and jQuery UI adds its own rules inside the
   dialog. Rather than fight that cascade property by property, the field is
   rebuilt from scratch here.
   Height comes from the padding, never from a fixed height: a value box whose
   height is set independently of its line box is exactly what pushes the text
   — and the caret with it — against the top edge. Equal padding above and
   below can only ever centre the text. */
.pcns-gated-form .form-item input[type="text"],
.pcns-gated-form .form-item input[type="email"],
.pcns-gated-form .form-item input.form-text,
.pcns-gated-form .form-item input.form-email {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--pcns-border) !important;
  border-radius: 3px !important;
  background: #fff !important;
  font-family: "gothambook", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #333 !important;
  caret-color: #00155e !important;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pcns-gated-form .form-item input[type="text"]::placeholder,
.pcns-gated-form .form-item input[type="email"]::placeholder {
  color: #9aa4b0;
  opacity: 1;
}

.pcns-gated-form .form-item input[type="text"]:hover,
.pcns-gated-form .form-item input[type="email"]:hover {
  border-color: #b8c4d2 !important;
}

/* Focus has to be unmistakable: the ring is drawn outside the box so it can
   never be mistaken for the field's own border. */
.pcns-gated-form .form-item input[type="text"]:focus,
.pcns-gated-form .form-item input[type="email"]:focus,
.pcns-gated-form .form-item input.form-text:focus,
.pcns-gated-form .form-item input.form-email:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--pcns-blue-hover) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(68, 151, 208, 0.28) !important;
}

.pcns-gated-form .form-item input.error {
  border-color: #c1272d !important;
}

.pcns-gated-form .form-item--error-message {
  margin-top: 0.35em;
  font-size: 13px;
  color: #c1272d;
}

/* Two names side by side: the pair reads as one identity, not two questions.
   Flex rather than two 50% blocks — those never fit on one line once the
   whitespace between them is counted. */
.pcns-gated-form .pcns-gated-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.pcns-gated-form .pcns-gated-row > .form-item {
  flex: 1 1 180px;
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Actions                                                                     */
/* -------------------------------------------------------------------------- */

.pcns-gated-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 1.6em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid #eceff3;
}

/* One rule for both controls — a submit input and an anchor only line up if
   they are given the same box. */
.pcns-gated-form .form-actions .pcns-gated-submit,
.pcns-gated-form .form-actions .pcns-gated-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 46px;
  /* The theme pins every .js-form-submit to 100px wide, which chops the
     label in half. */
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  margin: 0;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: "din-condensed", "gothambold", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pcns-gated-form .form-actions .pcns-gated-submit {
  background: var(--pcns-blue);
  color: #fff;
}

.pcns-gated-form .form-actions .pcns-gated-submit:hover,
.pcns-gated-form .form-actions .pcns-gated-submit:focus {
  background: var(--pcns-blue-hover);
  color: #fff;
}

.pcns-gated-form .form-actions .pcns-gated-cancel {
  background: #fff;
  border-color: var(--pcns-border);
  color: var(--pcns-navy);
}

.pcns-gated-form .form-actions .pcns-gated-cancel:hover,
.pcns-gated-form .form-actions .pcns-gated-cancel:focus {
  background: #f2f6f8;
  color: var(--pcns-navy);
}

/* -------------------------------------------------------------------------- */
/* Loader                                                                      */
/* -------------------------------------------------------------------------- */

/* Core's animated GIF is replaced by a ring in the site's blue: same markup,
   same behaviour, no 1990s throbber. */
.pcns-gated-form .ajax-progress,
.pcns-gated-form .ajax-progress-throbber {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  font-family: "gothambook", Arial, sans-serif;
  font-size: 13px;
  color: #5a6570;
}

.pcns-gated-form .ajax-progress .throbber,
.pcns-gated-form .ajax-progress-throbber .throbber {
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(85, 125, 161, 0.25);
  border-top-color: var(--pcns-blue);
  border-radius: 50%;
  background: none;
  animation: pcns-gated-spin 0.7s linear infinite;
}

.pcns-gated-form .ajax-progress .message,
.pcns-gated-form .ajax-progress-throbber .message {
  padding: 0;
  font-size: 13px;
  color: #5a6570;
}

@keyframes pcns-gated-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Honeypot: hidden from people, still submitted by naive bots. Kept out of the
   accessibility tree too, so screen readers never announce it. */
.pcns-gated-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Dialog shell                                                                */
/* -------------------------------------------------------------------------- */

/* The Botpress chat bubble (loaded in page.html.twig) parks itself at the top
   of the stacking order. jQuery UI's own .ui-front is worth 100, so the modal
   would open underneath it — 2147483647 is the highest z-index there is, and
   the overlay sits one step below so it still covers the chat button. */
.ui-dialog.pcns-gated-dialog {
  z-index: 2147483647 !important;
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 12, 40, 0.32);
  max-width: calc(100vw - 24px);
  background: #fff;
}

.ui-widget-overlay,
.ui-widget-overlay.ui-front {
  z-index: 2147483646 !important;
}

.ui-dialog.pcns-gated-dialog .ui-dialog-titlebar {
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: #00155e;
  color: #fff;
}

.ui-dialog.pcns-gated-dialog .ui-dialog-title {
  float: none;
  margin: 0;
  font-family: "din-condensed", "gothambold", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #fff;
}

.ui-dialog.pcns-gated-dialog .ui-dialog-titlebar-close {
  top: 50%;
  right: 14px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  opacity: 0.85;
}

.ui-dialog.pcns-gated-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.ui-dialog.pcns-gated-dialog .ui-dialog-content {
  padding: 22px 24px 24px;
  background: #fff;
}

/* -------------------------------------------------------------------------- */
/* Download confirmation                                                       */
/* -------------------------------------------------------------------------- */

.pcns-gated-toast {
  position: fixed;
  z-index: 2147483645;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  min-width: 300px;
  max-width: 380px;
  padding: 16px 42px 16px 16px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #00155e 0%, #17427c 100%);
  box-shadow: 0 18px 44px rgba(0, 12, 40, 0.35);
  color: #fff;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pcns-gated-toast.is-visible {
  opacity: 1;
  transform: none;
}

.pcns-gated-toast.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.pcns-gated-toast__icon {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #8ecbf4;
  animation: pcns-gated-drop 1.6s ease-in-out 0.2s 2;
}

.pcns-gated-toast__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

.pcns-gated-toast__body strong {
  font-family: "din-condensed", "gothambold", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #fff;
}

.pcns-gated-toast__body span {
  font-family: "gothambook", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.pcns-gated-toast__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.pcns-gated-toast__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Shows how long the pill has left, so it never disappears out of nowhere. */
.pcns-gated-toast__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4497d0, #8ecbf4);
  transform-origin: left center;
  animation: pcns-gated-countdown 6s linear forwards;
}

@keyframes pcns-gated-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes pcns-gated-drop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (max-width: 480px) {
  .pcns-gated-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcns-gated-toast,
  .pcns-gated-toast__icon,
  .pcns-gated-toast__bar,
  .pcns-gated-form .ajax-progress .throbber,
  .pcns-gated-form .ajax-progress-throbber .throbber {
    animation: none;
    transition: none;
  }
}