/* FactorPrint CMS 1.2.14 — CSS Snapshot 2026.
 * Accessible, responsive public forms in modal dialogs. The Form Builder schema,
 * validation, POST/CSRF and submission flow remain unchanged. Vanilla CSS only.
 * Scoped via :has(.fp-public-form) so content-only modals are unaffected.
 */

/* Dialog surface and a readable, sticky heading. */
dialog.fp-modal:has(.fp-public-form) {
  --fp-form-ink:#192e43;
  --fp-form-secondary:#718297;
  --fp-form-accent:#147dad;
  --fp-form-border:#d9e4ed;
  box-sizing:border-box;
  padding:0;
  border:1px solid rgba(230,239,245,.95);
  border-radius:22px;
  width:min(720px,calc(100vw - 40px));
  max-width:calc(100vw - 20px);
  max-height:min(850px,calc(100dvh - 44px));
  overflow:hidden;
  background:#fff;
  color:var(--fp-form-ink);
  box-shadow:0 32px 100px rgba(12,35,55,.23),0 4px 16px rgba(12,35,55,.1);
  scrollbar-gutter:stable;
}
dialog.fp-modal:has(.fp-public-form)[open] {display:flex;flex-direction:column;}
dialog.fp-modal:has(.fp-public-form)::backdrop {
  background:rgba(13,29,44,.67);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
dialog.fp-modal:has(.fp-public-form).fp-modal-size-small {width:min(480px,calc(100vw - 40px));}
dialog.fp-modal:has(.fp-public-form).fp-modal-size-large {width:min(940px,calc(100vw - 40px));}
dialog.fp-modal:has(.fp-public-form).fp-modal-size-full {width:min(1240px,calc(100vw - 24px));}
dialog.fp-modal:has(.fp-public-form).fp-modal-pos-top {margin-top:min(5vh,40px);margin-bottom:auto;}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex:0 0 auto;
  margin:0;
  padding:28px clamp(22px,4vw,40px) 23px;
  border-bottom:1px solid #e8eef4;
  background:linear-gradient(116deg,#f5faff 0%,#fff 68%);
  z-index:1;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head::before {
  content:"";
  position:absolute;
  top:0;
  left:clamp(22px,4vw,40px);
  width:64px;
  height:4px;
  background:linear-gradient(90deg,#0c79af,#71c6d9);
  border-radius:0 0 6px 6px;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head h2 {
  min-width:0;
  margin:0;
  color:#162b3e;
  font-size:clamp(23px,2.8vw,31px);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.22;
  overflow-wrap:anywhere;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head button[data-modal-close] {
  display:grid;
  flex:0 0 40px;
  place-items:center;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  font-size:26px;
  line-height:1;
  border:1px solid #e4ebf1;
  border-radius:12px;
  background:#fff;
  color:#586d7f;
  transition:background-color .17s,border-color .17s,transform .17s;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head button[data-modal-close]:hover {
  background:#e9f5fb;border-color:#bcdce9;color:#0b729d;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-head button[data-modal-close]:focus-visible {
  outline:3px solid #8bc9e4;outline-offset:3px;
}
dialog.fp-modal:has(.fp-public-form) .fp-modal-content {
  flex:1 1 auto;
  min-height:0;
  max-width:100%;
  padding:28px clamp(20px,4vw,40px) 32px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#ccdce8 transparent;
  container-type:inline-size;
}
/* Only form content receives the design; native dialogs with other content are unchanged. */
dialog.fp-modal:has(.fp-public-form) .content-block.block-form_embed {margin:0;}
dialog.fp-modal:has(.fp-public-form) .fp-public-form {
  display:grid;
  width:100%;
  max-width:none;
  min-width:0;
  gap:20px;
  margin:0;
  color:var(--fp-form-ink);
  font-size:14px;
  line-height:1.5;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-group {
  width:100%;min-width:0;
  margin:0;padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-columns {
  display:grid;
  min-width:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 16px;
  align-items:start;
  grid-auto-flow:row;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-columns-1 {grid-template-columns:minmax(0,1fr);}
/* In a compact dialog use reading order, not hard-coded column addresses.
 * This prevents solitary labels/fields and huge gaps in legacy imported layouts. */
dialog.fp-modal:has(.fp-public-form) .fp-form-columns > .fp-form-field,
dialog.fp-modal:has(.fp-public-form) .fp-form-columns > .fp-form-group {grid-column:auto;}
/* Fill the final row cleanly when a two-column group has an odd field count. */
dialog.fp-modal:has(.fp-public-form) .fp-form-columns:not(.fp-form-columns-1) > .fp-form-field:last-child:nth-child(odd) {
  grid-column:1 / -1;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field {
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  margin:0;
  padding:0;
  text-align:left;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > label:first-child {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  width:100%;
  min-height:18px;
  margin:0;
  padding:0 1px;
  color:#2d4356;
  font-size:13px;
  font-weight:650;
  line-height:1.3;
  text-align:left;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > label:first-child span[aria-hidden="true"] {
  color:#df7652;
  font-weight:800;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
dialog.fp-modal:has(.fp-public-form) .fp-form-field > select,
dialog.fp-modal:has(.fp-public-form) .fp-form-field > textarea {
  display:block;
  width:100%;max-width:100%;min-width:0;
  min-height:51px;
  margin:0;
  padding:13px 15px;
  border:1px solid var(--fp-form-border);
  border-radius:12px;
  background:#f8fafc;
  color:#1e3346;
  font:inherit;
  font-size:14px;
  line-height:1.5;
  text-align:left;
  outline:0;
  box-shadow:0 1px 2px rgba(21,48,69,.02);
  transition:border-color .18s,background-color .18s,box-shadow .18s;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > textarea {
  min-height:132px;
  resize:vertical;
  line-height:1.6;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > select {
  appearance:auto;
  padding-inline-end:14px;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > input::placeholder,
dialog.fp-modal:has(.fp-public-form) .fp-form-field > textarea::placeholder {
  color:#94a2af;opacity:1;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > input:not([type="checkbox"]):not([type="radio"]):focus,
dialog.fp-modal:has(.fp-public-form) .fp-form-field > select:focus,
dialog.fp-modal:has(.fp-public-form) .fp-form-field > textarea:focus {
  border-color:#1789bb;
  background:#fff;
  outline:0;
  box-shadow:0 0 0 4px rgba(22,133,187,.13),0 1px 4px rgba(25,70,99,.05);
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > small {
  margin:0;
  color:var(--fp-form-secondary);
  font-size:12px;
  line-height:1.45;
  opacity:1;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field.fp-form-has-error > label:first-child {color:#a52c3b;}
dialog.fp-modal:has(.fp-public-form) .fp-form-field.fp-form-has-error > :is(input,textarea,select),
dialog.fp-modal:has(.fp-public-form) .fp-form-field > [aria-invalid="true"] {
  border-color:#d94a5e;
  background:#fffafa;
  box-shadow:0 0 0 3px rgba(202,55,76,.1);
}
dialog.fp-modal:has(.fp-public-form) .fp-form-validation-error {
  color:#aa283c;
  font-size:12px;
  font-weight:600;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-choices {display:flex;gap:12px 20px;flex-wrap:wrap;}
dialog.fp-modal:has(.fp-public-form) :is(.fp-form-choices label,.fp-form-choice) {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:35px;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:#40576b;
}
dialog.fp-modal:has(.fp-public-form) :is(input[type="checkbox"],input[type="radio"]) {
  width:18px;height:18px;margin:0;
  accent-color:#1381b3;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field:has(>.fp-form-choice)>label:first-child {display:none;}
dialog.fp-modal:has(.fp-public-form) input[type="file"] {padding:12px;}
dialog.fp-modal:has(.fp-public-form) input[type="file"]::file-selector-button {
  border:1px solid #c6deed;border-radius:8px;padding:8px 12px;margin-right:12px;
  background:#eaf5fa;color:#125d82;cursor:pointer;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-details {
  padding:14px 18px;border:1px solid #e4ecf2;border-radius:12px;
  background:#fbfdfe;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-details > summary {
  color:#234258;cursor:pointer;font-weight:700;font-size:14px;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-details .fp-form-columns {margin-top:16px;}
dialog.fp-modal:has(.fp-public-form) .fp-form-tab-list {
  display:flex;gap:6px;padding:4px;margin-bottom:18px;border:0;border-radius:11px;background:#eff5f9;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-tab-list button {
  flex:1;min-height:40px;margin:0;padding:8px 12px;border:0;border-radius:8px;
  background:transparent;color:#60758a;font-size:13px;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-tab-list button[aria-selected="true"] {
  background:#fff;box-shadow:0 2px 7px rgba(35,70,98,.1);color:#076e9d;
}
dialog.fp-modal:has(.fp-public-form) .fp-repeat-item+.fp-repeat-item {
  margin-top:16px;padding-top:16px;border-top:1px dashed #d6e3ed;
}
dialog.fp-modal:has(.fp-public-form) .fp-repeat-add {margin-top:14px;}
dialog.fp-modal:has(.fp-public-form) .fp-form-feedback {
  margin:0;padding:14px 16px;border:1px solid #f1bac1;border-radius:11px;
  background:#fff6f7;color:#912c3a;font-size:13px;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  justify-self:stretch;
  width:100%;min-height:54px;
  margin:3px 0 0;
  padding:14px 24px;
  border:1px solid #117cb0;
  border-radius:12px;
  background:linear-gradient(110deg,#127eb1,#116a9b);
  color:#fff;
  font-size:15px;font-weight:750;
  line-height:1.3;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(18,111,164,.2);
  transition:transform .16s,background .16s,box-shadow .16s;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-submit::after {content:"→";font-size:20px;line-height:1;}
dialog.fp-modal:has(.fp-public-form) .fp-form-submit:hover {
  transform:translateY(-1px);background:linear-gradient(110deg,#0e6fa3,#105783);
  box-shadow:0 10px 24px rgba(18,111,164,.26);
}
dialog.fp-modal:has(.fp-public-form) .fp-form-submit:focus-visible {outline:3px solid #75caec;outline-offset:3px;}
dialog.fp-modal:has(.fp-public-form) .fp-form-submit:disabled {opacity:.72;cursor:wait;transform:none;}

/* Success confirmation uses the same visual language in modal and inline forms. */
dialog.fp-form-success-dialog {
  width:min(440px,calc(100vw - 28px));
  max-height:calc(100dvh - 32px);
  padding:30px clamp(22px,4vw,36px);
  border:1px solid #dceaf1;
  border-radius:19px;
  background:linear-gradient(150deg,#f6fbff,#fff 52%);
  color:#17374a;
  text-align:center;
  box-shadow:0 26px 80px rgba(15,40,59,.23);
}
dialog.fp-form-success-dialog::before {
  content:"✓";
  display:grid;
  place-items:center;
  width:54px;height:54px;
  margin:0 auto 18px;
  border:1px solid #b8e1d4;
  border-radius:50%;
  background:#e8f7ef;
  color:#14795b;
  font-size:25px;
  font-weight:800;
}
dialog.fp-form-success-dialog::backdrop {background:rgba(13,29,44,.62);backdrop-filter:blur(4px);}
dialog.fp-form-success-dialog p {margin:0 0 22px;font-size:16px;line-height:1.55;}
dialog.fp-form-success-dialog [data-fp-dialog-close] {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;min-height:46px;
  border-radius:10px;
  background:#137fad;
  color:#fff;
  font-weight:700;
}
dialog.fp-form-success-dialog [data-fp-dialog-close]:focus-visible {outline:3px solid #80c7e6;outline-offset:3px;}

/* Container queries respond to the usable dialog width, not only the viewport. */
@container (max-width:590px) {
  dialog.fp-modal:has(.fp-public-form) .fp-form-columns {grid-template-columns:minmax(0,1fr);}
}
/* Narrow viewports also collapse form columns in browsers without container queries. */
@media (max-width:700px) {
  dialog.fp-modal:has(.fp-public-form) .fp-form-columns {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:520px) {
  dialog.fp-modal:has(.fp-public-form) {
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    margin:auto;
    border-radius:18px;
  }
  dialog.fp-modal:has(.fp-public-form) .fp-modal-head {padding:24px 19px 18px;gap:12px;}
  dialog.fp-modal:has(.fp-public-form) .fp-modal-head::before {left:19px;width:47px;}
  dialog.fp-modal:has(.fp-public-form) .fp-modal-head h2 {font-size:clamp(21px,6vw,26px);}
  dialog.fp-modal:has(.fp-public-form) .fp-modal-head button[data-modal-close] {
    flex-basis:38px;width:38px;height:38px;min-height:38px;
  }
  dialog.fp-modal:has(.fp-public-form) .fp-modal-content {padding:22px 18px 25px;}
  dialog.fp-modal:has(.fp-public-form) .fp-form-columns {gap:16px;}
  dialog.fp-modal:has(.fp-public-form) .fp-public-form {gap:17px;}
}
@media (max-height:540px) {
  dialog.fp-modal:has(.fp-public-form) {max-height:calc(100dvh - 12px);}
  dialog.fp-modal:has(.fp-public-form) .fp-modal-head {padding-block:13px;}
  dialog.fp-modal:has(.fp-public-form) .fp-modal-content {padding-block:16px;}
}
@media (prefers-reduced-motion:reduce) {
  dialog.fp-modal:has(.fp-public-form) *,
  dialog.fp-modal:has(.fp-public-form) {transition:none!important;scroll-behavior:auto!important;}
}


/* FactorPrint CMS 1.2.13 — align and color mandatory labels inside public form dialogs. */
dialog.fp-modal:has(.fp-public-form) .fp-form-field > label.fp-form-field-label {
  display:inline-flex;
  align-items:baseline;
  flex-flow:row wrap;
  justify-content:flex-start;
  column-gap:.28em;
  row-gap:0;
  width:fit-content;
  max-width:100%;
  padding:0;
  margin:0;
}
dialog.fp-modal:has(.fp-public-form) .fp-form-field > label.fp-form-field-label > span.fp-form-required[aria-hidden="true"] {
  color:#d82336;
  font-weight:800;
  display:inline;
}

/* 1.2.14: after an AJAX success, hide form controls and replace with a readable status. */
dialog.fp-modal .fp-public-form[hidden]{display:none!important}
dialog.fp-modal .fp-form-modal-status:empty{display:none}
dialog.fp-modal .fp-form-modal-status{box-sizing:border-box;max-width:100%;margin:0;border-radius:16px;padding:19px 22px;line-height:1.65;font-size:1rem;overflow-wrap:anywhere;white-space:pre-line}
dialog.fp-modal .fp-form-modal-status.is-success{background:#f0f9f4;border:1px solid #b9ddca;color:#1a6240;box-shadow:0 8px 25px rgba(34,109,68,.07)}
dialog.fp-modal .fp-form-modal-status.is-error{background:#fff3f3;border:1px solid #f0c3c5;color:#932d35}
dialog.fp-modal .fp-form-modal-status:focus{outline:3px solid rgba(20,118,200,.2);outline-offset:3px}
@media(prefers-reduced-motion:reduce){dialog.fp-modal .fp-form-modal-status{transition:none}}