/* scope: .msi-page--catalog-request */
/* Catalog Request Form (wire catalog-request: 741:3080 / 741:8262 / 741:5498). Owner: agent catalog-request. Every
   selector must start with the scope above; _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules
   live here too.
   The form is the store's ContactForm widget, embedded in the CMS body and absent from this export. Nothing here
   rebuilds it: the rules style the markup the platform emits (a label div + a control div per field, each label
   carrying data-input-type) and never key on a widget or field id. The body wraps it in the hero, intro and panel. */

/* ---- hero: gradient + circles behind the title, running under the band's rounded top corners ---------------- */
.msi-page--catalog-request .msi-catalog-request__hero {
  margin: 0 calc(-1 * var(--msi-gutter)) -80px;
  padding: 135px var(--msi-gutter) 144px;
  background: url("../images/catalog-request/hero-1440.svg") center top / 1440px 415px no-repeat;
  text-align: center;
}
/* wider than the 1440 wire the art scales with the band instead of stopping at 1440 */
@media (min-width: 1441px) {
  .msi-page--catalog-request .msi-catalog-request__hero { background-size: cover; }
}
.msi-page--catalog-request .msi-catalog-request__title {
  /* the wire's box is 703; Inter runs wider than the wire's Inter Display, so 730 keeps its two lines */
  max-width: 730px;
  margin: 0 auto;
  font-size: 64px;
  /* 1.06 as Figma lays it out: each line rounded to whole pixels (64 -> 68, 40 -> 42) */
  line-height: 68px;
}

/* ---- white band: r80 top corners, reaches the footer ---------------------------------------------------------- */
.msi-page--catalog-request .msi-catalog-request__band {
  position: relative;
  margin: 0 calc(-1 * var(--msi-gutter));
  /* 120 to the footer plate in the wire; the footer's own margin-top is 80 */
  padding: 72px 0 40px;
  background: var(--msi-white);
  border-radius: 80px 80px 0 0;
}
.msi-page--catalog-request .msi-catalog-request__block {
  max-width: 842px;
  margin: 0 auto;
}
.msi-page--catalog-request .msi-catalog-request__intro {
  max-width: 683px;
  margin: 0 auto 64px;
  text-align: center;
}

/* ---- panel ------------------------------------------------------------------------------------------------- */
.msi-page--catalog-request .msi-catalog-request__panel {
  padding: 48px;
  background: var(--msi-surface);
  border-radius: 40px;
}
/* the admin's pasted <strong> wraps the whole form; the wire draws nothing bold but the phone numbers */
.msi-page--catalog-request .msi-catalog-request__panel > strong { font-weight: inherit; }
/* section heading + 1px rule 24 under it: "Your Information" (body copy) and the catalog field's own label */
.msi-page--catalog-request .msi-catalog-request__heading {
  margin: 0 0 24px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  font-family: var(--msi-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: normal;
  color: #000;
}

/* ---- the form: one grid, two columns, auto-placed densely so each label sits over its own control ------------ */
.msi-page--catalog-request .Control.ContactForm {
  --crf-gap: 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  column-gap: 32px;
  font-weight: 400;
}
.msi-page--catalog-request .Control.ContactForm > * { grid-column: 1 / -1; }
/* The widget's own heading and intro. The wire draws them as the hero title and the intro above the panel, which
   the body carries; these stay in the DOM. */
.msi-page--catalog-request .Control.ContactForm > h3,
.msi-page--catalog-request .Control.ContactForm > p:has(~ div) { display: none; }

/* text and e-mail fields pair up: odd ones left, even ones right (counted by type, so an added field still pairs) */
.msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"]),
.msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"]) + div {
  grid-column: 1;
}
.msi-page--catalog-request .Control.ContactForm > div:nth-child(even of :has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"])),
.msi-page--catalog-request .Control.ContactForm > div:nth-child(even of :has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"])) + div {
  grid-column: 2;
}

/* label over control, 12 apart; fields 24 apart */
.msi-page--catalog-request .Control.ContactForm > div:has(> label.contact-form-question) { margin-bottom: 12px; }
.msi-page--catalog-request .Control.ContactForm > div:has(> label.contact-form-question) + div { margin-bottom: var(--crf-gap); }
.msi-page--catalog-request .Control.ContactForm label.contact-form-question {
  display: block;
  max-width: none;
  margin: 0;
  font-family: var(--msi-font);
  font-size: 18px;
  font-weight: 500;
  /* 1.38 as Figma lays it out, rounded to whole pixels (18 -> 25, 24 -> 33): ten 440 rows drift 1.6 on 24.84 */
  line-height: 25px;
  color: #000;
}
/* the wire draws the star in the label's own colour and size */
.msi-page--catalog-request .Control.ContactForm .RequiredField {
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.msi-page--catalog-request .Control.ContactForm input[type="text"],
.msi-page--catalog-request .Control.ContactForm input[type="email"],
.msi-page--catalog-request .Control.ContactForm select,
.msi-page--catalog-request .Control.ContactForm textarea {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 16px 24px;
  background-color: var(--msi-white);
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--msi-ink-2);
}
/* border colour and shadow only when not focused: the text-field focus rule (msi-refresh.css) draws focus */
.msi-page--catalog-request .Control.ContactForm input[type="text"]:not(:focus),
.msi-page--catalog-request .Control.ContactForm input[type="email"]:not(:focus),
.msi-page--catalog-request .Control.ContactForm select:not(:focus),
.msi-page--catalog-request .Control.ContactForm textarea:not(:focus) { border-color: rgba(38, 45, 49, .2); }
.msi-page--catalog-request .Control.ContactForm select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 56px;
  background: var(--msi-white) url("../images/catalog-request/select-chevron.svg") right 24px center / 16px 16px no-repeat;
}
.msi-page--catalog-request .Control.ContactForm textarea {
  height: 150px;
  border-radius: 28px;
  resize: vertical;
}
.msi-page--catalog-request .Control.ContactForm textarea::placeholder { color: #262d31; opacity: 1; }
/* the first option ("Select") is the wire's placeholder */
.msi-page--catalog-request .Control.ContactForm select:has(option:first-child:checked) { color: #788893; }
/* validation messages: undrawn in the wire, kept and shown by the platform's script */
.msi-page--catalog-request .Control.ContactForm .text-danger.small {
  margin-top: 8px;
  padding: 0 24px;
  font-family: var(--msi-font);
  font-size: 14px;
  line-height: 1.4;
}

/* ---- catalog checklist: the field's label is the section heading, its list a tile grid ------------------------ */
.msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="CheckBoxList"]) {
  margin-top: calc(40px - var(--crf-gap));
  margin-bottom: 40px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.msi-page--catalog-request .Control.ContactForm label[data-input-type="CheckBoxList"] {
  font-size: 24px;
  line-height: 33px;
}
/* the wire draws this heading without the required star */
.msi-page--catalog-request .Control.ContactForm label[data-input-type="CheckBoxList"] .RequiredField { display: none; }
.msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="CheckBoxList"]) + div { margin-bottom: 0; }
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  background: var(--msi-white);
  border: 1px solid rgba(38, 45, 49, .2);
  border-radius: 12px;
}
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--msi-white) center / 12px 12px no-repeat;
  border: 1px solid #e4e7e9;
  border-radius: 4px;
  cursor: pointer;
}
/* checked, focus and hover are not drawn in the wire: brand blue box with a white check, blue focus ring */
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > input[type="checkbox"]:checked {
  background-color: var(--msi-blue);
  background-image: url("../images/catalog-request/check.svg");
  border-color: var(--msi-blue);
}
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > input[type="checkbox"]:focus { box-shadow: none; }
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--msi-blue);
  outline-offset: 2px;
}
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li:has(> input:checked) { border-color: var(--msi-blue); }
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--msi-ink-2);
  cursor: pointer;
}
/* the whole tile toggles its box */
.msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > label::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---- support note and submit -------------------------------------------------------------------------------- */
.msi-page--catalog-request .Control.ContactForm > p { margin-top: 40px; }
/* 700 wide so the first line ends at "representative at" as drawn and the local number is not split */
@media (min-width: 992px) {
  .msi-page--catalog-request .Control.ContactForm > p { max-width: 700px; }
}
.msi-page--catalog-request .Control.ContactForm > input[type="submit"] {
  display: block;
  width: 100%;
  height: 70px;
  margin: 40px 0 0;
  padding: 0 28px 0 0;
  background: var(--msi-orange);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--msi-ink);
  cursor: pointer;
}
.msi-page--catalog-request .Control.ContactForm > input[type="submit"]:hover { background: var(--msi-orange-dark); }
/* An <input> holds no pseudo, so the 20px chevron sits on the form: 8 after the centred label, which padding-right
   shifts 14 left of centre. js/msi-menu.js measures the admin's label into --msi-submit-w; 54px is "Submit". */
.msi-page--catalog-request .Control.ContactForm:has(> input[type="submit"])::after {
  content: "";
  position: absolute;
  bottom: 25px;
  left: calc(50% - 14px + var(--msi-submit-w, 54px) / 2 + 8px);
  width: 20px;
  height: 20px;
  background: url("../images/catalog-request/submit-chevron.svg") center / 20px 20px no-repeat;
  pointer-events: none;
}

/* ---- tablet: 834 wire ---------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page--catalog-request .msi-catalog-request__hero {
    padding: 65px var(--msi-gutter) 136px;
    background-image: url("../images/catalog-request/hero-834.svg");
    background-size: 834px 337px;
  }
  /* wire box 665; 690 holds "Catalog Request Form" in Inter and still breaks after "Instrument" */
  .msi-page--catalog-request .msi-catalog-request__title { max-width: 690px; }
  .msi-page--catalog-request .msi-catalog-request__band { padding-top: 56px; }
  /* the wire's form block sits at x 28, 763 wide (43 on the right) */
  .msi-page--catalog-request .msi-catalog-request__block {
    max-width: none;
    margin: 0 43px 0 28px;
  }
}

/* ---- mobile: 440 wire ---------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .msi-page--catalog-request .msi-catalog-request__hero {
    margin-bottom: -56px;
    padding: 56px var(--msi-gutter) 112px;
    background-image: url("../images/catalog-request/hero-440.svg");
    background-size: 440px 294px;
  }
  .msi-page--catalog-request .msi-catalog-request__title {
    max-width: none;
    font-size: 40px;
    line-height: 42px;
  }
  .msi-page--catalog-request .msi-catalog-request__band {
    padding: 74px 0 8px;
    border-radius: 56px 56px 0 0;
  }
  .msi-page--catalog-request .msi-catalog-request__block { margin: 0 24px; }
  .msi-page--catalog-request .msi-catalog-request__intro {
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 22px;
  }
  .msi-page--catalog-request .msi-catalog-request__panel { padding: 32px 24px; }
  .msi-page--catalog-request .Control.ContactForm {
    --crf-gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }
  .msi-page--catalog-request .Control.ContactForm > *,
  .msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"]),
  .msi-page--catalog-request .Control.ContactForm > div:has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"]) + div,
  .msi-page--catalog-request .Control.ContactForm > div:nth-child(even of :has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"])),
  .msi-page--catalog-request .Control.ContactForm > div:nth-child(even of :has(> label[data-input-type="TextBox"], > label[data-input-type="EmailAddress"])) + div {
    grid-column: 1;
  }
  .msi-page--catalog-request .Control.ContactForm ul.list-unstyled { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msi-page--catalog-request .Control.ContactForm ul.list-unstyled > li > label {
    font-size: 14px;
    line-height: 20px;
  }
  .msi-page--catalog-request .Control.ContactForm > p {
    font-size: 14px;
    line-height: 22px;
    /* balanced lines break where the 440 wire does: "...representative at" / "(610) 935-8181 ..." */
    text-wrap: balance;
  }
}