/*
 * Pool Vision Contact Form — visual layer.
 * Typography, colours, buttons, inputs, background video and spacing are inherited
 * from the Pool Vision Smart Project Forms stylesheet
 * (pool-vision-smart-project-forms/assets/css/frontend.css), which is enqueued first.
 * Only contact-form specific behaviour lives here.
 */

.pv-qf-shell [hidden] { display: none !important; }

.pvcf-step { display: none; }
.pvcf-step.is-active { display: block; animation: pvStepIn .48s cubic-bezier(.2, .9, .2, 1) both; }

.pv-qf-shell .pvcf-form { margin: 0; }
.pv-qf-shell .pvcf-form[hidden] { display: none !important; }

/* Vertically centred like the project form, with enough top room to clear the fixed site header. */
.pvcf-shell .pv-qf-main {
  align-items: center;
  padding-top: clamp(110px, 15vh, 190px) !important;
  padding-bottom: clamp(48px, 7vh, 86px) !important;
}

.pvcf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Paired fields: two per row on desktop, stacked on mobile. */
.pvcf-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .pvcf-row-2 { grid-template-columns: 1fr; }
  .pvcf-shell .pv-qf-main { padding-top: clamp(96px, 14vh, 150px) !important; }
}

/* Service options: same choice rows as the project form, with a muted sub-line. */
.pv-qf-shell .pv-choice small {
  display: block;
  margin-top: 4px;
  color: var(--pv-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Native select dropdown items need a dark background to stay readable. */
.pv-qf-shell select option { color: #fff; background: #0a1628; }

/* Browser autofill must not paint a pale box over the transparent fields. */
.pv-qf-shell input:-webkit-autofill,
.pv-qf-shell input:-webkit-autofill:hover,
.pv-qf-shell input:-webkit-autofill:focus,
.pv-qf-shell textarea:-webkit-autofill,
.pv-qf-shell select:-webkit-autofill {
  -webkit-text-fill-color: #dffcff !important;
  caret-color: #dffcff;
  background-color: transparent !important;
  background-image: none !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

.pv-qf-shell input:autofill,
.pv-qf-shell textarea:autofill {
  background-color: transparent !important;
  color: #dffcff !important;
}

.pv-qf-shell .pv-review-table { margin-bottom: 26px; }

.pvcf-consent-field { margin-bottom: 0 !important; }
.pvcf-consent-field .pv-choice b { font-weight: 400; }

.pv-qf-shell .pv-qf-thankyou h1 { margin-bottom: 20px; }

/* The required asterisk inside a choice label must not inherit the checkbox box styling. */
.pv-qf-shell .pv-choice b .pv-required {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 0 3px !important;
  background: none !important;
  box-shadow: none !important;
}