/* ---------- RP Insurance Forms ([rpi_form] shortcode) ----------
 * Every color is a variable. Values chosen under Form Entries > Form Colors
 * are printed after this file and override the defaults below.
 */
.rpi-form-wrap {
  --rpif-box-bg: transparent;
  --rpif-box-border: transparent;
  --rpif-box-pad: 0;
  --rpif-text: inherit;
  --rpif-label: inherit;
  --rpif-field-bg: var(--wp--preset--color--white, #ffffff);
  --rpif-field-border: #7d8fa9;
  --rpif-field-text: inherit;
  --rpif-focus: var(--wp--preset--color--brand, #245fab);
  --rpif-btn-bg: var(--wp--preset--color--brand, #245fab);
  --rpif-btn-text: var(--wp--preset--color--white, #ffffff);
  --rpif-btn-hover: var(--wp--preset--color--navy, #12305a);
  --rpif-req: #b42318;
  --rpif-note: var(--wp--preset--color--slate, #55657a);
  --rpif-ok-bg: #e7f4ec;
  --rpif-ok-border: #1f7a44;
  --rpif-ok-text: inherit;
  --rpif-err-bg: #fdecea;
  --rpif-err-border: #b42318;
  --rpif-err-text: inherit;

  max-width: 640px;
  box-sizing: content-box;
  background: var(--rpif-box-bg);
  border: 1.5px solid var(--rpif-box-border);
  border-radius: 8px;
  padding: var(--rpif-box-pad);
  color: var(--rpif-text);
}
.rpi-form { display: grid; gap: 1rem; max-width: 640px; }
.rpi-form .rpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rpi-form label, .rpi-form legend { color: var(--rpif-label); }
.rpi-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.rpi-form input[type=text], .rpi-form input[type=email], .rpi-form input[type=tel], .rpi-form select, .rpi-form textarea {
  width: 100%; box-sizing: border-box; padding: .75rem .85rem; font: inherit; color: var(--rpif-field-text);
  border: 1.5px solid var(--rpif-field-border); border-radius: 4px; background: var(--rpif-field-bg);
}
.rpi-form textarea { min-height: 150px; resize: vertical; }
.rpi-form input:focus, .rpi-form select:focus, .rpi-form textarea:focus { outline: 3px solid var(--rpif-focus); outline-offset: 1px; border-color: var(--rpif-focus); }
.rpi-form fieldset { border: 1.5px solid var(--rpif-field-border); border-radius: 4px; padding: 1rem 1.25rem; margin: 0; }
.rpi-form legend { font-weight: 600; padding: 0 .4rem; }
.rpi-form .rpi-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .4rem 0; color: var(--rpif-text); }
.rpi-form .rpi-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--rpif-focus); }
.rpi-form .rpi-hp { position: absolute !important; left: -9999px !important; }
.rpi-form button { justify-self: start; cursor: pointer; border: 0; padding: .9rem 1.8rem; font: inherit; font-weight: 600; border-radius: 4px; background: var(--rpif-btn-bg); color: var(--rpif-btn-text); }
.rpi-form button:hover, .rpi-form button:focus-visible { background: var(--rpif-btn-hover); }
.rpi-form button:focus-visible { outline: 3px solid var(--rpif-btn-hover); outline-offset: 3px; }
.rpi-form-wrap .rpi-req { color: var(--rpif-req); }
.rpi-form-wrap .rpi-note { font-size: .875em; color: var(--rpif-note); margin: 0; }
.rpi-alert { padding: 1rem 1.25rem; border-radius: 4px; margin-bottom: 1rem; max-width: 640px; box-sizing: border-box; }
.rpi-alert--ok { background: var(--rpif-ok-bg); border-left: 4px solid var(--rpif-ok-border); color: var(--rpif-ok-text); }
.rpi-alert--err { background: var(--rpif-err-bg); border-left: 4px solid var(--rpif-err-border); color: var(--rpif-err-text); }

/* Keep the form's own look even when the theme, a site builder or the host adds
   stronger styles for all inputs and buttons (for example "border: none" or a
   transparent background, which makes the boxes invisible until clicked).
   :is(#rpi-form, ...) gives these rules ID-level priority while still matching every form. */
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form input[type=text], .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form input[type=email], .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form input[type=tel],
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form select, .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form textarea {
  display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important;
  padding: .75rem .85rem !important; margin: 0 !important; min-height: 3rem;
  font: inherit !important; color: var(--rpif-field-text) !important;
  background: var(--rpif-field-bg) !important; opacity: 1 !important; visibility: visible !important;
  border: 1.5px solid var(--rpif-field-border) !important; border-radius: 4px !important; box-shadow: none !important;
}
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form textarea { min-height: 150px !important; }
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form select { -webkit-appearance: menulist !important; appearance: auto !important; }
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form input:focus, .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form select:focus, .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form textarea:focus {
  outline: 3px solid var(--rpif-focus) !important; outline-offset: 1px !important; border-color: var(--rpif-focus) !important;
}
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form fieldset { border: 1.5px solid var(--rpif-field-border) !important; border-radius: 4px !important; }
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form .rpi-check input[type=checkbox] {
  -webkit-appearance: checkbox !important; appearance: auto !important; display: inline-block !important;
  opacity: 1 !important; visibility: visible !important; position: static !important;
  width: 1.1rem !important; height: 1.1rem !important; margin: .3rem 0 0 !important; accent-color: var(--rpif-focus);
}
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form button {
  background: var(--rpif-btn-bg) !important; color: var(--rpif-btn-text) !important; border: 0 !important;
  padding: .9rem 1.8rem !important; border-radius: 4px !important; opacity: 1 !important;
}
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form button:hover, .rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-form button:focus-visible { background: var(--rpif-btn-hover) !important; }
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-alert--ok { background: var(--rpif-ok-bg) !important; border-left: 4px solid var(--rpif-ok-border) !important; }
.rpi-form-wrap:is(#rpi-form,.rpi-form-wrap) .rpi-alert--err { background: var(--rpif-err-bg) !important; border-left: 4px solid var(--rpif-err-border) !important; }

@media (max-width: 781px) {
  .rpi-form .rpi-row { grid-template-columns: 1fr; }
  .rpi-form-wrap { padding: min(var(--rpif-box-pad), 1.25rem); }
}