/*
 * The contact form in four steps (2026-10-19). Figma "◰ Blog + Quiz" > "Contact form · steps that fit the screen"
 * (162561:11248). One question per screen, each fitting the screen without scrolling: Services, Budget, Project
 * (optional), Contact; after a good send the Send button turns green in place and Close appears beside it.
 * The popup's frame, fades and Safari rules stay the theme's (.popup--wpcf7, 1.1.120); everything here is scoped to
 * .popup--steps. One weight, the theme's sizes (--fs--large, --fs--normal follow its breakpoints); phones up to
 * 781px, tablets 782 to 1112px (one column), desktop from 1113px (question left, answers right).
 */

.popup--steps {
  --cs-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0.110 12.000L8.037 4.073L9.492 5.529L4.051 10.971L23.890 10.971L23.890 13.029L4.051 13.029L9.492 18.471L8.037 19.927Z'/%3E%3C/svg%3E");
  --cs-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5 4.5 8.5 12 1' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  --cs-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.2315 12.0002L0.113281 1.88203L1.88105 0.114258L11.9993 10.2325L22.1175 0.114258L23.8852 1.88203L13.767 12.0002L23.8841 22.1173L22.1163 23.8851L11.9993 13.768L1.88219 23.8851L0.114426 22.1173L10.2315 12.0002Z'/%3E%3C/svg%3E");
  --cs-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5H13M13 5L8.9375 9.5M13 5L8.9375 0.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  --cs-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'/%3E%3C/svg%3E");
  --cs-i-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z'/%3E%3C/svg%3E");
  --cs-i-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4H15V8H19V20H5V4ZM3.9985 2C3.44749 2 3 2.44405 3 2.9918V21.0082C3 21.5447 3.44476 22 3.9934 22H20.0066C20.5551 22 21 21.5489 21 20.9925L20.9997 7L16 2H3.9985ZM10.4999 7.5C10.4999 9.07749 10.0442 10.9373 9.27493 12.6534C8.50287 14.3757 7.46143 15.8502 6.37524 16.7191L7.55464 18.3321C10.4821 16.3804 13.7233 15.0421 16.8585 15.49L17.3162 13.5513C14.6435 12.6604 12.4999 9.98994 12.4999 7.5H10.4999ZM11.0999 13.4716C11.3673 12.8752 11.6042 12.2563 11.8037 11.6285C12.2753 12.3531 12.8553 13.0182 13.5101 13.5953C12.5283 13.7711 11.5665 14.0596 10.6352 14.4276C10.7999 14.1143 10.9551 13.7948 11.0999 13.4716Z'/%3E%3C/svg%3E");
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-gap: 120px;
  --cs-ring: 0 0 0 2px #000, 0 0 0 4px #0967F4;
}

.popup--steps .popup__form.cs {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 30px;
  overflow: hidden;
}

.popup--steps .cs-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- the bar: Back, progress, Close ---------- */

.popup--steps .cs__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.popup--steps .cs__round,
.popup--steps .cs__bar .popup__close {
  position: relative;
  inset: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background-color: #111;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.popup--steps .cs__round svg {
  width: 24px;
  height: 24px;
}

/* Back's arrow looks the X's size: as long as the X's lines reach, with the X's line (2.5px at 24px, 1.46px at
   14px), so its box is 29px beside the 24px X and 17px beside the phone's 14px X */
.popup--steps .cs__back::before {
  content: "";
  width: 29px;
  height: 29px;
  background-color: currentColor;
  -webkit-mask: var(--cs-i-back) center / contain no-repeat;
  mask: var(--cs-i-back) center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .popup--steps .cs__round:hover {
    background-color: #333;
  }
}

.popup--steps .cs__round:active {
  background-color: #333;
  transform: scale(0.97);
}

.popup--steps .cs__round:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--cs-ring);
}

.popup--steps .cs__back {
  margin-right: 30px;
  overflow: hidden;
  transition: width 0.28s var(--cs-ease), margin-right 0.28s var(--cs-ease), opacity 0.2s ease 0.08s, background-color 0.2s ease, transform 0.1s ease;
}

/* step 1 (and after sending): no Back, the progress runs from the edge; from step 2 Back opens up and the progress
   makes room for it in the same motion */
.popup--steps .cs__back[aria-hidden="true"] {
  width: 0 !important;
  margin-right: 0;
  opacity: 0;
  visibility: hidden;
  transition: width 0.28s var(--cs-ease), margin-right 0.28s var(--cs-ease), opacity 0.12s ease, visibility 0s linear 0.28s;
}

.popup--steps .cs.is-instant .cs__back,
.popup--steps .cs.is-instant .cs__progress i {
  transition: none;
}

.popup--steps .cs__progress {
  flex: 1;
  display: flex;
  gap: 8px;
  height: 2px;
  margin-right: 30px;
}

.popup--steps .cs__progress i {
  flex: 1;
  border-radius: 1px;
  background-color: #666;
  transition: background-color 0.25s ease;
}

.popup--steps .cs__progress i.is-on {
  background-color: #fff;
}

.popup--steps .cs.is-single .cs__progress,
.popup--steps .cs.is-sent .cs__back {
  visibility: hidden;
}

/* ---------- the form fills what is left ---------- */

.popup--steps .wpcf7,
.popup--steps .wpcf7-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.popup--steps .wpcf7-form > .hidden-fields-container,
.popup--steps .wpcf7-response-output,
.popup--steps .wpcf7-form > input[type="hidden"] {
  display: none !important;
}

.popup--steps .cs-steps {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 40px;
}

/* every step sits in the same place; only the current one shows, so nothing around it moves */
.popup--steps .cs-step {
  position: absolute;
  inset: -4px;
  padding: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--cs-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(16px, 0, 0);
  transition: opacity 0.12s ease-in, transform 0.12s ease-in, visibility 0s linear 0.12s;
}

.popup--steps .cs-step.is-past {
  transform: translate3d(-16px, 0, 0);
}

.popup--steps .cs-step.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s var(--cs-ease) 0.12s, transform 0.22s var(--cs-ease) 0.12s, visibility 0s;
}

.popup--steps .cs.is-instant .cs-step {
  transition: none;
}

.popup--steps .cs-step__q {
  align-self: start;
}

.popup--steps .cs-step__title {
  margin: 0;
  font-size: var(--fs--large);
  line-height: var(--lh--large);
  letter-spacing: var(--ls--large);
  font-weight: 400;
  color: #fff;
  text-wrap: balance;
}

.popup--steps .cs-step__title:focus {
  outline: none;
}

.popup--steps .cs-step__sub {
  margin: 20px 0 0;
  font-size: var(--fs--normal);
  line-height: var(--lh--normal);
  letter-spacing: var(--ls--normal);
  color: #808080;
  overflow-wrap: anywhere;
}

.popup--steps .cs-step__sub b {
  font-weight: 400;
  color: #fff;
}

.popup--steps .cs-step__a {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  padding-top: 12px;
}

/* ---------- pills (steps 1 and 2) ---------- */

.popup--steps .cs-pills,
.popup--steps .cs-pills .input--radio {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
}

.popup--steps .cs-pills .wpcf7-form-control-wrap,
.popup--steps .cs-pills > label {
  display: contents;
}

.popup--steps .cs-pills > label {
  margin: 0;
}

.popup--steps .cs-pills .wpcf7-list-item {
  position: relative;
  display: inline-flex;
  margin: 0;
}

/* the inputs stay in the page (the theme hid them: no keyboard); the pill shows their state */
.popup--steps .cs-pills .wpcf7-list-item input {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.popup--steps .cs-pills .wpcf7-list-item-label {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.popup--steps .cs-pills .wpcf7-list-item input:active + .wpcf7-list-item-label {
  transform: scale(0.97);
}

.popup--steps .cs-pills .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
  box-shadow: var(--cs-ring);
}

/* ---------- message and file (step 3) ---------- */

.popup--steps .cs-field {
  display: block;
  margin: 0;
}

.popup--steps .cs-field .wpcf7-form-control-wrap {
  display: block;
}

.popup--steps .cs-step__a--message {
  max-height: 100%;
}

.popup--steps .cs-field--message {
  flex: 0 1 300px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.popup--steps .cs-field--message .wpcf7-form-control-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.popup--steps .cs-field--message textarea {
  flex: 1;
  min-height: 0;
  height: auto;
  margin: 0;
  overscroll-behavior: contain;
}

.popup--steps input[type="text"],
.popup--steps input[type="email"],
.popup--steps textarea {
  margin: 0;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.popup--steps input[readonly] {
  cursor: default;
}

/* fields: a step lighter than the pills so the box shows on black, as the calculator's dock fields (#262626);
   the placeholder lightened to keep 5:1 on it (Daniel, 2026-10-19: "barely visible") */
.popup--steps .popup__form.dark input[type="text"],
.popup--steps .popup__form.dark input[type="email"],
.popup--steps .popup__form.dark textarea {
  background-color: #262626;
}

.popup--steps input::placeholder,
.popup--steps textarea::placeholder {
  color: #9A9A9A;
  opacity: 1;
}

/* steps 1 and 2: what is missing, in the description's place when Next is pressed (so nothing grows) */
.popup--steps .cs-step.has-err .cs-step__sub {
  display: none;
}

.popup--steps .cs-err {
  margin: 20px 0 0;
  color: #ED7B28;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.popup--steps .cs-err:empty {
  display: none;
}

/* step 4: the terms box (the calculator's wording and check) */
.popup--steps .cs-consent {
  margin-top: 5px;
}

.popup--steps .cs-consent .wpcf7-form-control-wrap,
.popup--steps .cs-consent .wpcf7-acceptance,
.popup--steps .cs-consent .wpcf7-list-item {
  display: block;
  position: relative;
  margin: 0;
}

.popup--steps .cs-consent label {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.popup--steps .cs-consent label::before {
  content: "";
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid #808080;
  border-radius: 6px;
  background: transparent center / 13px 10px no-repeat;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.popup--steps .cs-consent label:has(input:checked)::before {
  border-color: #fff;
  background-color: #fff;
  background-image: var(--cs-i-tick);
}

.popup--steps .cs-consent label:has(input:focus-visible)::before {
  box-shadow: var(--cs-ring);
}

.popup--steps .cs-consent:has(.wpcf7-not-valid) label::before,
.popup--steps .cs-consent.is-invalid label::before {
  border-color: #ED7B28;
}

.popup--steps .cs-consent input {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.popup--steps .cs-consent .wpcf7-list-item-label {
  display: block;
  padding: 0 !important;
  border-radius: 0;
  background: none !important;
  color: #808080 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  letter-spacing: -0.4px !important;
}

.popup--steps .cs-consent .wpcf7-list-item-label::before {
  content: none;
}

.popup--steps .cs-consent a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.popup--steps .cs-consent .wpcf7-not-valid-tip {
  margin-top: 8px;
}

.popup--steps .cs-attach {
  flex: none;
}

.popup--steps .cs-attach .file-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.popup--steps .cs-attach .file-btn,
.popup--steps .cs-attach .js-file-text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 15px 20px;
  border-radius: 100px;
  background-color: #111;
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.popup--steps .cs-attach .file-btn::before,
.popup--steps .cs-attach .js-file-text::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--cs-i-clip) center / contain no-repeat;
  mask: var(--cs-i-clip) center / contain no-repeat;
}

.popup--steps .cs-attach .js-file-text::before {
  -webkit-mask-image: var(--cs-i-pdf);
  mask-image: var(--cs-i-pdf);
}

@media (hover: hover) and (pointer: fine) {
  .popup--steps .cs-attach .file-btn:hover,
  .popup--steps .cs-attach .js-file-remove:hover {
    background-color: #333;
  }
}

.popup--steps .cs-attach .file-btn:focus-visible,
.popup--steps .cs-attach .js-file-remove:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--cs-ring);
}

.popup--steps .cs-attach input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.popup--steps .cs-attach .js-file-container {
  position: relative;
  display: block;
}

.popup--steps .cs-attach .file-notice {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
  color: #808080;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.8px;
}

.popup--steps .cs-attach .file-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.popup--steps .cs-attach .file-text.hidden {
  display: none;
}

.popup--steps .cs-attach .file-wrapper:has(.file-text:not(.hidden)) .file-btn,
.popup--steps .cs-attach .file-wrapper:has(.file-text:not(.hidden)) .file-notice {
  display: none;
}

/* the theme's .text (a column) and .has-small-font-size (15px !important) are on the file name too */
.popup--steps .cs-attach .js-file-text {
  order: 1;
  flex-direction: row;
  font-size: 20px !important;
  line-height: 30px !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup--steps .cs-attach .cs-file-size {
  margin-left: 2px;
  color: #808080;
}

.popup--steps .cs-attach .js-file-remove {
  order: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  background-color: #111;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.popup--steps .cs-attach .js-file-remove svg {
  display: none;
}

.popup--steps .cs-attach .js-file-remove::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--cs-i-x) center / contain no-repeat;
  mask: var(--cs-i-x) center / contain no-repeat;
}

/* ---------- step 4 and errors ---------- */

.popup--steps .cs-terms {
  margin: 0;
  color: #808080;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.popup--steps .cs-terms a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.popup--steps .cs.is-sent .cs-terms {
  display: none;
}

.popup--steps .wpcf7-not-valid,
.popup--steps .wpcf7-form .wpcf7-not-valid {
  border-color: #ED7B28 !important;
}

.popup--steps .wpcf7-not-valid-tip {
  display: block !important;
  margin-top: 8px;
  color: #ED7B28;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

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

.popup--steps .cs-actions {
  flex: none;
  width: calc((100% - var(--cs-gap)) / 2);
  margin: 40px 0 0 auto;
}

.popup--steps .cs-fail {
  margin: 0 0 8px;
  color: #ED7B28;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.popup--steps .cs-fail:empty {
  display: none;
}

.popup--steps .cs-actions__row {
  display: flex;
  align-items: stretch;
}

.popup--steps .cs-btn,
.popup--steps .wpcf7-form .cs-send__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  margin: 0;
  padding: 15px 20px;
  border: 0;
  border-radius: 100px !important;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.8px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.popup--steps .cs-next,
.popup--steps .wpcf7-form .cs-send__btn {
  flex: 1;
  width: 100%;
  background-color: #fff !important;
  color: #000 !important;
}

.popup--steps .cs-next::after {
  content: "";
  width: 15px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: var(--cs-i-arrow) center / contain no-repeat;
  mask: var(--cs-i-arrow) center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .popup--steps .cs-next:hover,
  .popup--steps .wpcf7-form .cs-send__btn:hover {
    background-color: #dedede !important;
  }

  .popup--steps .cs-done:hover {
    background-color: #333;
  }
}

.popup--steps .cs-next:active,
.popup--steps .wpcf7-form .cs-send__btn:active {
  background-color: #dedede !important;
  transform: scale(0.98);
}

.popup--steps .cs-btn:focus-visible,
.popup--steps .wpcf7-form .cs-send__btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--cs-ring);
}

.popup--steps .cs-send {
  position: relative;
  flex: 1;
  display: none;
}

.popup--steps .cs[data-step="4"] .cs-send {
  display: flex;
}

.popup--steps .cs[data-step="4"] .cs-next,
.popup--steps .cs.is-sent .cs-send,
.popup--steps .cs-sent,
.popup--steps .cs-done {
  display: none;
}

/* sending: the button stays white and a black spinner takes the label's place */
.popup--steps .wpcf7-form.submitting .cs-send__btn {
  color: transparent !important;
  background-color: #fff !important;
}

.popup--steps .cs-send .wpcf7-spinner {
  margin: -22px 0 0 -22px;
}

.popup--steps .cs-send .wpcf7-spinner::before {
  border-color: rgba(0, 0, 0, 0.2);
}

.popup--steps .cs-send .wpcf7-spinner::after {
  border-color: #000;
  border-right-color: transparent;
}

/* sent: the same place turns green with a check, and Close opens up beside it */
.popup--steps .cs.is-sent .cs-sent {
  display: inline-flex;
  flex: 1;
  min-width: 0;
  background-color: #0AA342;
  color: #000;
  cursor: default;
  white-space: nowrap;
  animation: cs-sent 0.2s ease-out;
}

.popup--steps .cs-sent::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--cs-i-check) center / contain no-repeat;
  mask: var(--cs-i-check) center / contain no-repeat;
}

.popup--steps .cs.is-sent .cs-done {
  display: inline-flex;
  flex: none;
  margin-left: 15px;
  padding: 15px 40px;
  background-color: #111;
  color: #fff;
  overflow: hidden;
  animation: cs-done 0.25s var(--cs-ease);
}

@keyframes cs-sent {
  from {
    background-color: #fff;
    color: transparent;
  }
}

@keyframes cs-done {
  from {
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
  }

  to {
    max-width: 240px;
  }
}

/* ---------- tablets: one column, the desktop's sizes ---------- */

@media (min-width: 782px) and (max-width: 1112px) {
  .popup--steps .cs-step {
    grid-template-columns: minmax(0, 630px);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 32px;
  }

  .popup--steps .cs-step__a {
    padding-top: 0;
  }

  .popup--steps .cs-actions {
    width: 100%;
    max-width: 630px;
    margin-left: 0;
  }
}

/* ---------- phones ---------- */

@media (max-width: 781px) {
  .popup--steps .popup__form.cs {
    padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  }

  .popup--steps .cs__back,
  .popup--steps .cs__progress {
    margin-right: 16px;
  }

  .popup--steps .cs__back[aria-hidden="true"] {
    margin-right: 0;
  }

  /* the theme's close on phones, where the menu's X is: 38px, a 14px X, 8px from the top and 16px from the right */
  .popup--steps .cs__round,
  .popup--steps .cs__bar .popup__close {
    width: 38px;
    height: 38px;
  }

  .popup--steps .cs__round svg,
  .popup--steps .cs__bar .popup__close svg {
    width: 14px;
    height: 14px;
  }

  .popup--steps .cs__back::before {
    width: 17px;
    height: 17px;
  }

  .popup--steps .cs-steps {
    margin-top: 28px;
  }

  .popup--steps .cs-step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 24px;
  }

  .popup--steps .cs-step__sub,
  .popup--steps .cs-err {
    margin-top: 12px;
  }

  .popup--steps .cs-step__a {
    gap: 12px;
    padding-top: 0;
  }

  .popup--steps .cs-pills,
  .popup--steps .cs-pills .input--radio {
    gap: 10px;
  }

  /* phones: every pill 50px like the site's buttons, the icons at the theme's own sizes (30px; AI automation 32 x 20) */
  .popup--steps .service-options .wpcf7-list-item-label {
    padding: 10px 16px;
  }

  .popup--steps .service-options .wpcf7-form-control.integration .wpcf7-list-item-label {
    padding: 14px 16px;
  }

  .popup--steps .cs-field--message {
    flex: 1 1 auto;
  }

  .popup--steps .cs-attach .file-wrapper {
    gap: 12px;
  }

  .popup--steps .cs-attach .file-btn,
  .popup--steps .cs-attach .js-file-text {
    min-height: 50px;
    padding: 15px 16px;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.6px;
  }

  .popup--steps .cs-attach .file-btn::before,
  .popup--steps .cs-attach .js-file-text::before {
    width: 20px;
    height: 20px;
  }

  .popup--steps .cs-attach .js-file-text {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .popup--steps .cs-consent label {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .popup--steps .cs-consent label::before,
  .popup--steps .cs-consent input {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .popup--steps .cs-consent label::before {
    margin-top: 1px;
  }

  .popup--steps .cs-attach .file-notice {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.6px;
  }

  .popup--steps .cs-attach .js-file-remove {
    width: 50px;
    height: 50px;
  }

  .popup--steps .cs-attach .js-file-remove::before {
    width: 16px;
    height: 16px;
  }

  .popup--steps .cs-actions {
    width: auto;
    margin: 16px 0 0;
  }

  .popup--steps .cs-btn,
  .popup--steps .wpcf7-form .cs-send__btn {
    height: 50px;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.6px;
  }

  .popup--steps .cs-sent::before {
    width: 18px;
    height: 18px;
  }

  .popup--steps .cs.is-sent .cs-done {
    margin-left: 10px;
    padding: 15px 28px;
  }
}

/* short phones (an iPhone SE in Safari): smaller questions so every step still fits */
@media (max-width: 781px) and (max-height: 600px) {
  .popup--steps .cs-step__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -1px;
  }

  .popup--steps .cs-steps {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup--steps .cs-step,
  .popup--steps .cs-step.is-past,
  .popup--steps .cs-step.is-current {
    transform: none;
    transition: opacity 0.12s linear, visibility 0s linear 0.12s;
  }

  .popup--steps .cs-step.is-current {
    transition: opacity 0.12s linear, visibility 0s;
  }

  .popup--steps .cs.is-sent .cs-sent,
  .popup--steps .cs.is-sent .cs-done {
    animation: none;
  }
}