/* Aston Pierpoint - Direct Debit sign-up.
   A thin house layer over Bootstrap 5.2. Colours match the staff forms so the
   two sections of the site feel like one.

   Written phone-first: every rule here is the small-screen rule, and the two
   media queries at the bottom only add what a wider screen can afford. */

:root {
  --dd-navy:      #17395c;
  --dd-navy-soft: #33475b;
  --dd-teal:      #129c96;
  --dd-teal-dark: #0e7d78;
  --dd-page:      #eef2f6;
  --dd-line:      #dde5ed;
  --dd-muted:     #6b7c8d;
  --dd-danger:    #c0392b;
  --dd-radius:    14px;
  --dd-shadow:    0 1px 3px rgba(23, 57, 92, .10), 0 8px 24px rgba(23, 57, 92, .06);
}

html { -webkit-text-size-adjust: 100%; }

.dd-body {
  background: var(--dd-page);
  color: var(--dd-navy-soft);
  font-size: 1rem;
  line-height: 1.55;
  /* The safe-area insets keep the page clear of the notch and the home bar on
     an iPhone; they are 0 everywhere else. */
  padding: 0 env(safe-area-inset-right) calc(32px + env(safe-area-inset-bottom))
             env(safe-area-inset-left);
  overflow-x: hidden;   /* nothing here may ever scroll sideways */
}

/* ------------------------------------------------------------- masthead */

.dd-masthead {
  padding: 26px 16px 18px;
  text-align: center;
}

.dd-masthead__logo {
  /* content-box so the padding sits outside the image rather than shrinking it */
  box-sizing: content-box;
  padding: 8px;
  background: #fff;
  border-radius: 13px;
  box-shadow: var(--dd-shadow);
}

.dd-masthead__title {
  margin: 14px 0 3px;
  color: var(--dd-navy);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.dd-masthead__sub {
  margin: 0;
  color: var(--dd-muted);
  font-size: .85rem;
}

.dd-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 14px;
}

/* -------------------------------------------------------------- stepper */

.dd-steps {
  display: flex;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.dd-steps__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;              /* so a long label can shrink rather than overflow */
  text-align: center;
  padding-top: 32px;
  font-size: .72rem;
  color: var(--dd-muted);
}

/* The connecting rail, drawn behind the dots. */
.dd-steps__item::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--dd-line);
}

.dd-steps__item:first-child::before { display: none; }

.dd-steps__item--done::before,
.dd-steps__item--now::before { background: var(--dd-teal); }

.dd-steps__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--dd-line);
  color: var(--dd-muted);
  font-size: .76rem;
  font-weight: 700;
  line-height: 22px;
}

.dd-steps__item--done .dd-steps__dot {
  background: var(--dd-teal);
  border-color: var(--dd-teal);
  color: #fff;
}

.dd-steps__item--now .dd-steps__dot {
  border-color: var(--dd-teal);
  color: var(--dd-teal-dark);
  box-shadow: 0 0 0 4px rgba(18, 156, 150, .16);
}

.dd-steps__item--now .dd-steps__label {
  color: var(--dd-navy);
  font-weight: 600;
}

.dd-steps__label {
  display: block;
  padding: 0 2px;
}

/* ----------------------------------------------------------------- card */

.dd-card {
  border: 0;
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow);
}

.dd-card .card-body { padding: 20px 17px; }

.dd-card__title {
  margin: 0 0 6px;
  color: var(--dd-navy);
  font-size: 1.2rem;
  font-weight: 700;
}

.dd-card__intro {
  margin: 0 0 20px;
  color: var(--dd-muted);
  font-size: .94rem;
}

.dd-section-title {
  margin: 26px 0 6px;
  padding-top: 22px;
  border-top: 1px solid var(--dd-line);
  color: var(--dd-navy);
  font-size: 1.02rem;
  font-weight: 700;
}

.dd-alert {
  border-radius: 10px;
  font-size: .93rem;
}

.dd-alert ul { padding-left: 1.15rem; }

/* --------------------------------------------------------------- fields */

.dd-body .form-label {
  color: var(--dd-navy);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .3rem;
}

/* 16px is the smallest size iOS will render without zooming the whole page in
   when the field is focused, which then leaves the layout scrolled sideways. */
.dd-body .form-control,
.dd-body .form-select {
  font-size: 1rem;
  border-color: #cfdae5;
  border-radius: 10px;
  padding: .62rem .8rem;
}

.dd-body .form-control:focus,
.dd-body .form-select:focus {
  border-color: var(--dd-teal);
  box-shadow: 0 0 0 .2rem rgba(18, 156, 150, .18);
}

.dd-body .form-text {
  color: var(--dd-muted);
  font-size: .82rem;
}

.dd-req { color: var(--dd-danger); font-style: normal; }

/* Account numbers and sort codes read back best figure by figure. */
.dd-input--figures {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

/* -------------------------------------------------------- yes/no answers */

.dd-question {
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 12px;
  background: #fbfdfe;
  overflow: hidden;   /* contains the floated legend */
}

.dd-question__text {
  /* A bare <legend> straddles the fieldset's border instead of sitting inside
     it. Floating it full width - the same trick Bootstrap's reboot uses - puts
     it back in the normal flow, inside the box. */
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: var(--dd-navy);
  font-size: .95rem;
  font-weight: 500;
}

.dd-choices {
  display: flex;
  gap: 10px;
}

/* A tap target the size of a button, rather than a 13px radio dot. */
.dd-choice {
  position: relative;
  flex: 1 1 0;
  max-width: 160px;
}

.dd-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.dd-choice span {
  display: block;
  padding: .6rem 1rem;
  border: 2px solid var(--dd-line);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-weight: 600;
  color: var(--dd-navy-soft);
  transition: border-color .12s, background .12s, color .12s;
}

.dd-choice input:checked + span {
  border-color: var(--dd-teal);
  background: rgba(18, 156, 150, .1);
  color: var(--dd-teal-dark);
}

.dd-choice input:focus-visible + span {
  box-shadow: 0 0 0 .2rem rgba(18, 156, 150, .25);
}

/* ------------------------------------------------------ the mandate panel */

.dd-mandate {
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: #f7fafc;
  padding: 16px;
  margin-bottom: 22px;
}

.dd-mandate__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.dd-mandate__logo { border-radius: 8px; }

.dd-mandate__who {
  flex: 1 1 150px;
  color: var(--dd-navy);
  font-size: .8rem;
  line-height: 1.45;
}

.dd-mandate__mark {
  /* Never wider than the panel, whatever the panel does. */
  max-width: 100%;
  height: auto;
}

.dd-mandate__title {
  margin: 14px 0 0;
  color: var(--dd-navy);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
}

.dd-mandate__sun {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed #c8d5e1;
}

.dd-mandate__sun-label {
  color: var(--dd-navy);
  font-size: .82rem;
  font-weight: 600;
}

.dd-sun {
  padding: .28rem .7rem;
  border: 1px solid #c8d5e1;
  border-radius: 8px;
  background: #fff;
  color: var(--dd-navy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .2em;
}

/* The wording the mandate is legally required to carry. */
.dd-legal {
  margin: 22px 0 0;
  padding: 15px 16px;
  border-left: 3px solid var(--dd-line);
  color: var(--dd-muted);
  font-size: .84rem;
  line-height: 1.55;
}

.dd-legal p { margin-bottom: .7rem; }
.dd-legal a { color: var(--dd-teal-dark); font-weight: 600; }

.dd-smallprint {
  color: var(--dd-muted);
  font-size: .84rem;
  line-height: 1.5;
}

/* The final tickbox is the signature - it gets its own weight. */
.dd-confirm {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 15px 16px;
  border: 2px solid var(--dd-line);
  border-radius: 12px;
  background: #fbfdfe;
}

.dd-confirm .form-check-input {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  border-color: #b6c6d6;
}

.dd-confirm .form-check-input:checked {
  background-color: var(--dd-teal);
  border-color: var(--dd-teal);
}

.dd-confirm .form-check-input:focus {
  border-color: var(--dd-teal);
  box-shadow: 0 0 0 .2rem rgba(18, 156, 150, .2);
}

.dd-confirm .form-check-label {
  color: var(--dd-navy);
  font-size: .94rem;
  font-weight: 500;
}

.dd-captcha {
  margin-top: 22px;
  /* The reCAPTCHA iframe is a fixed 304px wide; below about 340px of usable
     width it would push the page sideways, so it is scaled down instead. */
  transform-origin: 0 0;
}

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

.dd-done { text-align: center; }

.dd-done__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(18, 156, 150, .12);
  color: var(--dd-teal-dark);
}

.dd-done__lead {
  color: var(--dd-navy);
  font-size: 1.05rem;
  font-weight: 600;
}

.dd-summary {
  margin: 20px 0;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  overflow: hidden;
}

.dd-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dd-line);
  background: #fbfdfe;
}

.dd-summary > div:last-child { border-bottom: 0; }

.dd-summary dt {
  color: var(--dd-muted);
  font-size: .84rem;
  font-weight: 500;
}

.dd-summary dd {
  margin: 0;
  color: var(--dd-navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ actions */

.dd-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dd-line);
}

/* Every button is a full-width, thumb-sized target on a phone. */
.dd-actions .btn {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
}

.dd-body .btn-dd {
  background: var(--dd-teal);
  border-color: var(--dd-teal);
  color: #fff;
}

.dd-body .btn-dd:hover,
.dd-body .btn-dd:focus,
.dd-body .btn-dd:active {
  background: var(--dd-teal-dark);
  border-color: var(--dd-teal-dark);
  color: #fff;
}

.dd-body .btn-dd-quiet {
  color: var(--dd-muted);
  border-color: transparent;
  background: transparent;
}

.dd-body .btn-dd-quiet:hover,
.dd-body .btn-dd-quiet:focus {
  color: var(--dd-navy);
  background: #eef2f6;
}

.dd-body .btn-dd-danger {
  background: var(--dd-danger);
  border-color: var(--dd-danger);
  color: #fff;
}

.dd-body .btn-dd-danger:hover,
.dd-body .btn-dd-danger:focus {
  background: #a33224;
  border-color: #a33224;
  color: #fff;
}

/* -------------------------------------------------------------- modals */

.dd-modal {
  border: 0;
  border-radius: var(--dd-radius);
}

.dd-modal .modal-title {
  color: var(--dd-navy);
  font-weight: 700;
  font-size: 1.05rem;
}

.dd-modal .modal-footer .btn {
  min-height: 46px;
  border-radius: 10px;
  font-weight: 600;
}

.dd-guarantee__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: .92rem;
}

.dd-guarantee__list li { margin-bottom: 10px; }
.dd-guarantee__list li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- reassurance */

.dd-secure {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  justify-content: center;
  max-width: 44ch;
  margin: 16px auto 0;
  color: var(--dd-muted);
  font-size: .78rem;
  line-height: 1.45;
  text-align: left;
}

.dd-secure svg { flex: 0 0 auto; margin-top: 3px; }

/* ------------------------------------------------------------- footer */

.dd-footer {
  max-width: 780px;
  margin: 22px auto 0;
  padding: 0 14px;
  text-align: center;
  color: var(--dd-muted);
  font-size: .82rem;
}

.dd-footer a {
  color: var(--dd-teal-dark);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------ overlay */

.dd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 57, 92, .85);
}

.dd-overlay[data-open="true"] { display: flex; }

.dd-overlay__box { text-align: center; color: #fff; }

.dd-overlay__title {
  margin: 16px 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
}

.dd-overlay__note { color: rgba(255, 255, 255, .75); font-size: .86rem; }

/* --------------------------------------------------------- wider screens */

@media (min-width: 576px) {
  .dd-masthead        { padding: 36px 16px 20px; }
  .dd-masthead__title { font-size: 1.9rem; }
  .dd-masthead__sub   { font-size: .95rem; }
  .dd-wrap            { padding: 0 16px; }
  .dd-steps           { margin-bottom: 18px; }
  .dd-steps__item     { font-size: .78rem; }
  .dd-card .card-body { padding: 30px; }
  .dd-card__title     { font-size: 1.35rem; }
  .dd-card__intro     { font-size: 1rem; }
  .dd-mandate         { padding: 20px; }
  .dd-question        { padding: 16px 18px; }
  .dd-choice          { flex: 0 0 auto; min-width: 116px; }

  /* Room for the buttons to sit side by side, with the one that moves the
     form forward on the right where it is expected. */
  .dd-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 12px;
  }

  .dd-actions .btn { width: auto; }
}

@media (min-width: 768px) {
  .dd-mandate__head { flex-wrap: nowrap; }
  .dd-mandate__mark { margin-left: auto; }
}

/* The reCAPTCHA iframe is a fixed 304px wide and cannot be told otherwise.
   Below a 375px viewport the card has less than that to give it, so it is
   scaled down to fit instead of being clipped or widening the page.
   (At 320px the card's content box is ~258px: 304 x .82 = 249px.) */
@media (max-width: 374.98px) {
  .dd-captcha { transform: scale(.82); height: 66px; }
}

/* --------------------------------------------------------------- print */

@media print {
  .dd-steps,
  .dd-actions,
  .dd-footer,
  .dd-secure,
  .dd-overlay,
  .dd-captcha { display: none !important; }

  .dd-body { background: #fff; }
  .dd-card { box-shadow: none; border: 1px solid #ccc; }
}

/* Someone who has asked their device to keep still gets no transitions. */
@media (prefers-reduced-motion: reduce) {
  .dd-choice span { transition: none; }
}