/* === ARP Supplemental Stylesheet (IFRAME CSS ONLY) ===
   Goal: Keep your 2-col look, but make vertical size scale with viewport width.
   We do this by tying gaps, padding, and font sizes to clamp() + vw so the inner
   content stays within whatever height the host iframe uses (no scripts).
*/

/* 0) Global safety: never create our own scrollbars inside the iframe */
html, body {
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Tunable scale variables for compactness --- */
:root {
  /* Base text size inside the form scales with width, but stays readable */
  --form-font: clamp(14px, 0.9vw + 10px, 17px);

  /* Vertical rhythm scales down as the viewport narrows */
  --gap: clamp(12px, 1.2vw + 6px, 22px);
  --col-gap: clamp(14px, 1.6vw + 6px, 28px);

  /* Input padding trims vertical space on small screens */
  --pad-y: clamp(10px, 0.7vw + 6px, 14px);
  --pad-x: clamp(12px, 0.7vw + 8px, 16px);

  /* Label size if they gave us big text */
  --label-size: clamp(14px, 0.9vw + 10px, 18px);

  /* Textarea height stays sane without exploding the layout */
  --ta-min: clamp(80px, 10vw, 140px);
  --ta-max: clamp(140px, 18vw, 220px);
}

/* 0) Reset legacy floats/widths ONLY inside this form */
form.form p label {
  float: none !important;
  width: auto !important;
  text-align: left !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 0 calc(var(--gap) * 0.5) !important;
  font-size: var(--label-size) !important;
  line-height: 1.3 !important;
}
form.form span.value,
form.form p span.description {
  margin: 0 !important;
  font-size: var(--form-font) !important;
  line-height: 1.4 !important;
}
form.form input.text {
  width: 100% !important;            /* kill fixed widths */
  box-sizing: border-box;
}

/* 1) Layout — two-column grid; container width is owned by parent page */
form.form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;    /* two equal columns */
  column-gap: var(--col-gap);
  row-gap: var(--gap);
  margin: 0;                         /* outer spacing handled by host page */
  padding: 0;
  font-size: var(--form-font);
}

/* Treat each field wrapper as a grid item */
form.form p { margin: 0; padding: 0; }

/* Company spans both columns (top row) */
form.form p.company { grid-column: 1 / -1; }

/* First/Last row */
form.form p.first_name { grid-column: 1; }
form.form p.last_name  { grid-column: 2; }

/* Email/Phone row */
form.form p.email { grid-column: 1; }
form.form p.phone { grid-column: 2; }

/* 2) Inputs — rounded, comfy padding, subtle border, compact on narrow widths */
form.form input[type="text"],
form.form input[type="email"],
form.form input[type="tel"],
form.form textarea {
  padding: var(--pad-y) var(--pad-x) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 7px !important;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-size: var(--form-font);
  line-height: 1.1;
  width: 100%;
  box-sizing: border-box;
}

/* Keep textarea from blowing out height; allow growth but cap it by width */
form.form textarea {
  min-height: var(--ta-min);
  max-height: var(--ta-max);
  resize: vertical;
}

form.form input[type="text"]::placeholder,
form.form input[type="email"]::placeholder,
form.form input[type="tel"]::placeholder { color: #9ca3af; }

form.form input[type="text"]:focus,
form.form input[type="email"]:focus,
form.form input[type="tel"]::focus,
form.form textarea:focus {
  border-color: #80B641;
  box-shadow: 0 0 0 3px rgba(128,182,65,.25);
}

/* Remove house CSS's far-right background star */
form.form p.required label {
  background: none !important;
  position: relative;
}

/* Add a new star immediately after the label text */
form.form p.required label::after {
  content: "*";
  color: #ffffff;   
  font-weight: 700;
  margin-left: 2px;
  font-size:22px;
  /*text-shadow: 0 0 4px rgba(255,255,255,0.6);*/
  position: relative;
  top: 5px; /* pushes it down */
}

/* 3) Submit button — left column under Email, compact spacing */
form.form p.submit {
  grid-column: 1;                    /* left column only */
  margin: calc(var(--gap) * 0.9) 0 0 0;
  text-align: left;
}
  form.form p.submit input[type="submit"] {
  border: none;
  padding: var(--pad-y) calc(var(--pad-x) + 6px);
  border-radius: 7px;
  background: rgb(223, 101, 34); /* #DF6522 */
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .02s;
  display: inline-block;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  font-size: clamp(14px, 1vw + 10px, 18px);
}
form.form p.submit input[type="submit"]:hover  { background: #DF6522; Opacity: 0.7;}
form.form p.submit input[type="submit"]:active { transform: translateY(1px); }


/* 4) Mobile — stack cleanly and get even more compact */
@media (max-width: 768px){
  /* Go single-column a bit earlier to reduce height churn */
  form.form { grid-template-columns: 1fr; }

  form.form p.company,
  form.form p.first_name,
  form.form p.last_name,
  form.form p.email,
  form.form p.phone,
  form.form p.submit { grid-column: 1; }

  /* Tighten rhythm a hair on small screens */
  :root {
    --gap: clamp(10px, 1.2vw + 4px, 18px);
    --col-gap: clamp(12px, 1.2vw + 6px, 20px);
    --pad-y: clamp(8px, 0.6vw + 6px, 12px);
    --pad-x: clamp(10px, 0.6vw + 8px, 14px);
  }
}

/* Their label override */
label.field-label {
  font-size: 1.3em; /*var(--label-size) !important;*/
   letter-spacing: 0.5px;
  color: #FFFFFF !important;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    
}

.thank-you p {
  font-size: 2.5em !important;   /* large text */
  color: #FFFFFF !important;
  position: absolute;            /* take it out of normal flow */
  top: 40%;                      /* move to middle */
  left: 50%;
  transform: translate(-50%, -50%); /* center perfectly */
  text-align: center;
}
/*---------------N E W -------------------*/

form.form p.submit input[type="submit"] {
  margin-top:10px;
  border: 0;
  padding: 12px 22px;
  border-radius: 7px;
  background: rgb(223, 101, 34);   /* ASPB orange */
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .02s, box-shadow .2s;
  display: inline-block;

  /* Raised effect */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Hover: a little higher + darker */
form.form p.submit input[type="submit"]:hover {
  background: #c6541c; /* slightly darker orange */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Active: “press down” */
form.form p.submit input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
}