/*
 * Form rendering fixes.
 *
 * THIS FILE IS A DELIBERATE DEVIATION FROM THE LIVE SITE. Everything else in
 * this project reproduces production exactly; these rules do not. They were
 * requested because the vendor's own form styling has real defects, each of
 * which was measured in a browser rather than eyeballed:
 *
 *   - text inputs and the textarea use box-sizing: content-box with 30px of
 *     horizontal padding, so at width:100% they render 30px wider than their
 *     column. The form ends up 1085px inside a 1065px parent, overhanging its
 *     container by 10px on each side.
 *   - the submit button computes to 280x25 on mobile and 319x35 on desktop,
 *     holding 14-17px text with zero padding. That is cramped enough to clip
 *     descenders, and 25px is well under the 44px minimum touch target.
 *   - selects have no extra right padding, so long option text ("Breast
 *     Augmentation with Lift") runs underneath the dropdown arrow.
 *
 * Loaded AFTER the vendor's compiled stylesheet so it wins on order rather
 * than by piling on !important. Everything is scoped to the form containers —
 * nothing here can affect page layout elsewhere.
 *
 * NO FIELDS ARE ADDED, REMOVED OR RENAMED. This is presentation only; the
 * markup and the field names the handler reads are untouched.
 */

.contact-form-container input[type='text'],
.contact-form-container input[type='email'],
.contact-form-container input[type='tel'],
.contact-form-container input[type='number'],
.contact-form-container select,
.contact-form-container textarea {
  /* The actual fix for the overhang: padding inside the declared width. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Vertical centring that does not depend on the browser's default. A fixed
   50px height with `line-height: normal` leaves the text sitting high and
   clips descenders on some platforms. */
.contact-form-container input[type='text'],
.contact-form-container input[type='email'],
.contact-form-container input[type='tel'],
.contact-form-container input[type='number'],
.contact-form-container select {
  line-height: 1.4;
}

/*
 * Long option labels were colliding with the dropdown arrow. 26px clears the
 * arrow Chrome reserves without eating the text room the label needs — 40px
 * was over-generous and cost 14px of every option's width, which on a narrow
 * column is the difference between "How Did You Hear of Us?*" fitting and
 * reading "How Did You Hear of U".
 */
.contact-form-container select {
  padding-right: 26px;
  text-overflow: ellipsis;
}

.contact-form-container textarea {
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

/*
 * The submit button. Height came from line-height alone, so the label sat in a
 * 25px box. Give it real padding and a floor that clears the 44px touch target.
 */
.contact-form-container button[type='submit'],
.contact-form-container .contact-form-button {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 28px;
  line-height: 1.3;
  white-space: normal;
  gap: 10px;
}

/* The arrow is decorative and must never be what forces the label to wrap. */
.contact-form-container .contact-form-button svg {
  flex: 0 0 auto;
}

/*
 * Placeholders are the only labelling these fields have — the vendor relies on
 * them instead of <label>. Stop them being clipped mid-word.
 */
.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
  text-overflow: ellipsis;
  opacity: 1; /* Firefox dims placeholders by default; these are the labels. */
}

/*
 * Visible focus. The vendor's reset removes the outline and puts nothing back,
 * which leaves keyboard users with no indication of where they are — on a
 * medical form that is both an accessibility failure and a conversion problem.
 */
.contact-form-container input:focus-visible,
.contact-form-container select:focus-visible,
.contact-form-container textarea:focus-visible,
.contact-form-container button:focus-visible {
  outline: 2px solid #0e303d;
  outline-offset: 2px;
}

/*
 * The VIP signup form squeezes its fields at every width.
 *
 * It is display:flex with flex-wrap: NOWRAP, so three inputs and a submit
 * button are forced onto one line and shrink to whatever is left — 154px each
 * at a 1024px viewport. "My email address *" needs 157px including padding, so
 * that placeholder was clipped on every screen, not just narrow ones.
 *
 * Scoped to this one form on purpose. The footer and contact forms already wrap
 * correctly and size their columns from the vendor's own percentages; applying
 * a blanket min-width to those changed how many columns packed onto a line at
 * wide viewports and made the select labels truncate — the exact bug this file
 * exists to fix. Do not widen this selector.
 */
.contact-form-container form[name='vip-form'] {
  flex-wrap: wrap;
}

.contact-form-container form[name='vip-form'] .input-wrap-is-one-third {
  min-width: 200px;
}

/*
 * Select labels were being cut off — "How Did You Hear of U", "Best Time to
 * Reach You". This is the defect in the screenshots and it is the vendor's,
 * reproducible with this stylesheet disabled.
 *
 * The cause is a column too narrow for its own label, not overflow. On the
 * homepage the footer form's container is ~600px, so its three-across columns
 * come out around 190px; "How Did You Hear of Us?*" needs 233px once padding
 * and the dropdown arrow are counted. A closed <select> cannot wrap or
 * ellipsise its label, so the browser simply clips it.
 *
 * Sized off the FORM's width, not the viewport. The same form renders in
 * containers of very different widths — ~600px in the homepage footer, 1085px
 * on /contact-us/ — at one and the same viewport, so a media query fixes one
 * and breaks the other.
 *
 * A minimum width alone was the first attempt and it stopped the clipping, but
 * left two selects on a line with a large gap where the third had been, which
 * looked broken. Below the width where three fit legibly they now go full
 * width instead: three tidy rows rather than two-and-a-gap.
 *
 * 760px is where three columns are still 250px each at the vendor's 33%,
 * comfortably over the 240px the longest label needs.
 */
.contact-form-container .form {
  container-type: inline-size;
}

@container (max-width: 760px) {
  .contact-form-container .input-wrap-is-one-third:has(select),
  .contact-form-container .input-wrap-is-half:has(select) {
    width: 100%;
  }
}

/* Narrow viewports: the three-across row is unusable at phone widths. */
@media (max-width: 640px) {
  .contact-form-container .input-wrap-is-one-third,
  .contact-form-container .input-wrap-is-half {
    width: 100%;
    min-width: 0;
  }
}