/* Forms /form/<code> (Contexts/Pages/Forms.xml, skin Page1) in the style of the new site.
   The form is a live platform form (fields, roadmap widget, captcha, validation), so it keeps the theme
   and platform stylesheets; this file restyles it on top of them. Everything is scoped to .om-form
   (the DetailsPane group) and to the popups the form opens. Light and dark theme: html[data-theme].
   Illustrations: monochrome copies from tools/build-form-illustrations.js in /media/omnitep/forms/. */

.om-form,
body:has(.om-form) .lookup-popup,
body:has(.om-form) .validation-popup {
  --of-accent:#6745f5; --of-press:#4525ed; --of-ring:#c9c1fe;
  --of-ink:#1d1d1f; --of-ink-2:#6e6e73; --of-ink-3:#8e8e93;
  --of-line:#e8e8ed; --of-field:#ffffff; --of-field-line:#d9d3f0; --of-field-hover:#b9a8fa;
  --of-soft:#f7f5ff; --of-lav:#efebfe; --of-card:#ffffff; --of-error:#d6363e; --of-error-soft:rgba(214,54,62,.08);
  --of-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --of-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"] .om-form,
html[data-theme="dark"] body:has(.om-form) .lookup-popup,
html[data-theme="dark"] body:has(.om-form) .validation-popup {
  --of-ring:#322859;
  --of-ink:#eeeef1; --of-ink-2:#a3a3ab; --of-ink-3:#8a8a92;
  --of-line:#34314a; --of-field:#1b1a29; --of-field-line:#3a3555; --of-field-hover:#6745f5;
  --of-soft:#211f30; --of-lav:#2b2740; --of-card:#211f30; --of-error:#ff7a80; --of-error-soft:rgba(255,122,128,.1);
}

/* the theme sets Rubik / Poppins with long selectors on every level */
.om-form *,
body:has(.om-form) .lookup-popup *,
body:has(.om-form) .validation-popup * { font-family:var(--of-sans) !important; }
.om-form { color:var(--of-ink); -webkit-font-smoothing:antialiased; }

/* ---------- layout: first line where the new pages put their hero ---------- */
/* (the group has an inline padding-top:0 from padding-top="0" in Forms.xml, so the gap is a margin) */
.workspace-b.form-a.om-form { margin-top:0; padding-bottom:96px; }
.workspace-b.form-a.om-form > div.content { margin-top:136px; }
@media (max-width:480px) {
  .workspace-b.form-a.om-form { padding-bottom:64px; }
  .workspace-b.form-a.om-form > div.content { margin-top:0; }
}

/* ---------- titles ---------- */
.om-form .field.title-f0 .field-value .value-box,
.om-form .field.title-f1 .field-value .value-box,
.om-form .field.title-f2 .field-value .value-box,
.om-form .field.title-f3 .field-value .value-box,
.om-form .field.title-f .field-value .value-box {
  font-size:clamp(38px,4.2vw,60px); line-height:1.04; letter-spacing:-.04em; font-weight:600; color:var(--of-ink);
}
.om-form .field.title-f .field-value .value-box { font-size:clamp(34px,3.4vw,48px); }
/* one colour for the whole title (the theme paints title-f1 / title-f3 in the accent) */
.om-form .field.title-f2,
.om-form .field.title-f3 { margin-bottom:28px; }
.om-form .field.title-f { margin-bottom:24px; }
@media (max-width:480px) {
  .om-form .field.title-f0 .field-value .value-box, .om-form .field.title-f1 .field-value .value-box,
  .om-form .field.title-f2 .field-value .value-box, .om-form .field.title-f3 .field-value .value-box {
    font-size:36px; line-height:1.06;
  }
}

.om-form .field.subtitle-f { margin-bottom:40px; }
.om-form .field.subtitle-f .field-value .value-box {
  font-size:18px; line-height:1.55; letter-spacing:-.01em; color:var(--of-ink-2); max-width:540px;
}
.om-form .field.subtitle-g .field-value .value-box {
  font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-.02em; color:var(--of-ink);
}

/* ---------- steps (roadmap widget) ---------- */
.om-form .widget-roadmap.roadmap-b .stage-container { margin-bottom:40px; }
.om-form .field.widget-roadmap.roadmap-b .stage-container .stage-icon {
  width:40px; height:40px; border:1.5px solid var(--of-field-line); background-color:var(--of-card); box-sizing:border-box;
}
.om-form .widget-roadmap.roadmap-b .stage-container .stage-number {
  width:40px; height:40px; line-height:40px; font-family:var(--of-mono) !important; font-size:13px; font-weight:600; color:var(--of-ink-3);
}
.om-form .widget-roadmap.roadmap-b .stage-container .stage-name {
  margin-top:12px; font-family:var(--of-mono) !important; font-size:11px !important; font-weight:600; line-height:1.3;
  letter-spacing:.08em; text-transform:uppercase; color:var(--of-ink-3);
}
.om-form .widget-roadmap.roadmap-b .stage-container:before {
  top:19px; left:48px; right:8px; width:auto; height:1.5px; background-color:var(--of-line);
}
@media (max-width:480px) {
  .om-form .widget-roadmap.roadmap-b.width-compact .stage-container { padding-right:12px; }
  .om-form .field.widget-roadmap.roadmap-b .stage-container .stage-name { font-size:10px !important; letter-spacing:.03em; line-height:1.3; }
  /* margin-bottom="50" in Forms.xml comes as an inline style */
  .om-form .static-field.field-i3.mobile-width100 { margin-bottom:24px !important; }
}
/* current */
.om-form .field.widget-roadmap.roadmap-b .stage-container.status-1 .stage-icon {
  border-color:var(--of-accent); background-color:var(--of-accent); box-shadow:0 0 0 5px var(--of-lav);
}
.om-form .widget-roadmap.roadmap-b .stage-container.status-1 .stage-number { color:#fff; }
.om-form .widget-roadmap.roadmap-b .stage-container.status-1 .stage-name { color:var(--of-accent); }
html[data-theme="dark"] .om-form .widget-roadmap.roadmap-b .stage-container.status-1 .stage-name { color:#a593fb; }
.om-form .widget-roadmap.roadmap-b .stage-container.status-1:before { background-color:var(--of-line); }
/* done */
.om-form .field.widget-roadmap.roadmap-b .stage-container.status-2 .stage-icon { border-color:var(--of-accent); background-color:var(--of-lav); }
.om-form .widget-roadmap.roadmap-b .stage-container.status-2 .stage-number { color:var(--of-accent); }
html[data-theme="dark"] .om-form .widget-roadmap.roadmap-b .stage-container.status-2 .stage-number { color:#a593fb; }
.om-form .widget-roadmap.roadmap-b .stage-container.status-2 .stage-name { color:var(--of-ink); }
.om-form .widget-roadmap.roadmap-b .stage-container.status-2:before { background-color:var(--of-accent); }

/* ---------- fields ---------- */
.om-form .field.edit { margin-bottom:18px; }
.om-form .field.edit .field-label,
.om-form .field.edit .field-label span {
  font-size:14px; font-weight:500; line-height:1.4; letter-spacing:-.005em; color:var(--of-ink);
}
.om-form .field.edit .field-label { margin-bottom:8px; }
.om-form .field.edit .field-label .mark-required { color:var(--of-accent); margin-left:2px; }
html[data-theme="dark"] .om-form .field.edit .field-label .mark-required { color:#a593fb; }

/* the box: text, choice, captcha, text area */
/* every box is 1px border + 48px inside, the text sits 13px from the border and in the middle */
.om-form .field.edit .value-box {
  border:1px solid var(--of-field-line); border-radius:12px; background-color:var(--of-field);
  font-size:16px; line-height:24px; color:var(--of-ink); box-sizing:border-box; height:auto; min-height:50px;
  padding:0; transition:border-color .18s ease;
}
.om-form .field.edit .value-box:hover { border-color:var(--of-field-hover); }
/* focus: the border only (a ring would be cut square by the parent and show beside the captcha) */
.om-form .field.edit .value-box:focus-within { border-color:var(--of-accent); box-shadow:none; }
.om-form .field.edit .value-box *:focus,
.om-form .field.edit .value-box:focus { outline:none; box-shadow:none; }
.om-form .field.edit input.edit,
.om-form .field.edit .value-text,
.om-form .fields-view-default .field.edit .value-box input,
.om-form .fields-view-default .field.edit .value-box .value-text {
  display:block; box-sizing:border-box; height:48px; padding:0 13px; margin:0; border:0;
  font-size:16px; line-height:48px; color:var(--of-ink); background:transparent; caret-color:var(--of-accent);
}
.om-form .field.edit textarea.edit,
.om-form .fields-view-default .field.edit .value-box textarea {
  box-sizing:border-box; padding:12px 13px; margin:0; border:0;
  font-size:16px; line-height:24px; color:var(--of-ink); background:transparent; caret-color:var(--of-accent);
}
/* the arrow of the choice fields */
.om-form .field.edit.singlechoice .value-text { padding-right:44px; }
/* chosen values of "Solution types": plain text like the other fields, room for the arrow */
.om-form .field.edit.multichoicecompact .value-box { padding:12px 44px 12px 13px; }
.om-form .field.edit.multichoicecompact .value-item,
.om-form .field.edit.multichoicecompact .value-item .text,
.om-form .field.edit.multichoicecompact .sep { font-size:16px; line-height:24px; color:var(--of-ink); }
.om-form .field.edit input.edit::placeholder,
.om-form .field.edit textarea.edit::placeholder { color:var(--of-ink-3); }
.om-form .field.edit .value-text { color:var(--of-ink); }
.om-form .field.edit.singlechoice .value-box { cursor:pointer; }
html[data-theme="dark"] .om-form .field.edit .cmd-lookup .icon { filter:invert(1) brightness(1.4); opacity:.7; }
/* choice lists drawn inside the field (radio / check lists) */
.om-form .field.edit .item,
.om-form .field.edit .item * { font-size:15px; color:var(--of-ink); }

/* captcha: picture outside on the left, short input in the box */
.om-form .field.captcha .value-box { max-width:260px; height:50px; }
.om-form .field.captcha img.captcha-image { border-radius:8px; }
html[data-theme="dark"] .om-form .field.captcha img.captcha-image { filter:invert(.92) hue-rotate(180deg); }

/* errors */
.om-form .field.mark-invalid .value-box { border-color:var(--of-error); background-color:var(--of-error-soft); }
.om-form .field.mark-invalid .field-label,
.om-form .field.mark-invalid .field-label span { color:var(--of-error); }

/* ---------- buttons: .btn / .btn.secondary of the new site ---------- */
.om-form a.button {
  height:auto; min-width:0; padding:12px 28px; border-radius:980px;
  background:var(--of-accent); background-image:none; box-shadow:none;
  transition:background-color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.om-form a.button:after,
.om-form a.button:before { display:none; }
.om-form a.button .text { font-size:17px; font-weight:500; line-height:24px; letter-spacing:-.01em; color:#fff; }
.om-form a.button:hover { background:var(--of-press); }
.om-form a.button:active { transform:scale(.98); }
.om-form a.button:focus-visible { outline:3px solid var(--of-ring); outline-offset:2px; }
.om-form a.button.secondary { background:transparent; box-shadow:inset 0 0 0 1px var(--of-accent); }
.om-form a.button.secondary .text { color:var(--of-accent); }
.om-form a.button.secondary:hover { background:rgba(103,69,245,.08); }
html[data-theme="dark"] .om-form a.button.secondary { box-shadow:inset 0 0 0 1px #a593fb; }
html[data-theme="dark"] .om-form a.button.secondary .text { color:#cfc4ff; }

/* ---------- thank-you screen ---------- */
.om-form .box-d { background:var(--of-card); border-radius:24px; box-shadow:0 0 0 1px var(--of-line), 0 30px 60px -36px rgba(52,32,140,.35); }

/* ---------- illustrations: monochrome copies ---------- */
.om-form .image-forms_signup_for_community_1 { background-image:url(/media/omnitep/forms/forms_signup_for_community_1.svg); }
.om-form .image-forms_platform_demo { background-image:url(/media/omnitep/forms/forms_platform_demo.svg); }
.om-form .image-forms_get_started_1 { background-image:url(/media/omnitep/forms/forms_get_started_1.svg); }
.om-form .image-forms_start_your_free_trial_1 { background-image:url(/media/omnitep/forms/forms_start_your_free_trial_1.svg); }
.om-form .image-fill_form_01_3 { background-image:url(/media/omnitep/forms/fill_form_01_3.svg); }
.om-form .image-forms_partner_inquiry_1 { background-image:url(/media/omnitep/forms/forms_partner_inquiry_1.svg); }
.om-form .image-thank_you_2 { background-image:url(/media/omnitep/forms/thank_you_2.svg); }
html[data-theme="dark"] .om-form .image-forms_signup_for_community_1 { background-image:url(/media/omnitep/forms/forms_signup_for_community_1-dark.svg); }
html[data-theme="dark"] .om-form .image-forms_platform_demo { background-image:url(/media/omnitep/forms/forms_platform_demo-dark.svg); }
html[data-theme="dark"] .om-form .image-forms_get_started_1 { background-image:url(/media/omnitep/forms/forms_get_started_1-dark.svg); }
html[data-theme="dark"] .om-form .image-forms_start_your_free_trial_1 { background-image:url(/media/omnitep/forms/forms_start_your_free_trial_1-dark.svg); }
html[data-theme="dark"] .om-form .image-fill_form_01_3 { background-image:url(/media/omnitep/forms/fill_form_01_3-dark.svg); }
html[data-theme="dark"] .om-form .image-forms_partner_inquiry_1 { background-image:url(/media/omnitep/forms/forms_partner_inquiry_1-dark.svg); }
html[data-theme="dark"] .om-form .image-thank_you_2 { background-image:url(/media/omnitep/forms/thank_you_2-dark.svg); }

/* ---------- popups the form opens ---------- */
/* country list: above the fixed site header */
body:has(.om-form) .lookup-popup {
  z-index:80 !important; border:0; border-radius:14px; overflow:hidden; background:var(--of-card);
  box-shadow:0 0 0 1px var(--of-line), 0 30px 60px -24px rgba(52,32,140,.35);
}
body:has(.om-form) .lookup-popup .item { border-bottom:1px solid var(--of-line); background:var(--of-card); }
body:has(.om-form) .lookup-popup .item .text { font-size:15px; color:var(--of-ink); }
body:has(.om-form) .lookup-popup .item:hover,
body:has(.om-form) .lookup-popup .item.active { background:var(--of-soft); }
body:has(.om-form) .lookup-popup .item.active .text { color:var(--of-accent); }
body:has(.om-form) .lookup-popup .top-shadow,
body:has(.om-form) .lookup-popup .bottom-shadow { display:none; }

/* "Solution types" list (multichoicecompact): check list with apply / cancel */
body:has(.om-form) .edit-tab.multichoicecompact {
  --of-ink:#1d1d1f; --of-line:#e8e8ed; --of-card:#ffffff; --of-soft:#f7f5ff;
  z-index:80; border:0; border-radius:14px; background:var(--of-card);
  box-shadow:0 0 0 1px var(--of-line), 0 30px 60px -24px rgba(52,32,140,.35);
}
html[data-theme="dark"] body:has(.om-form) .edit-tab.multichoicecompact {
  --of-ink:#eeeef1; --of-line:#34314a; --of-card:#211f30; --of-soft:#2b2740;
}
body:has(.om-form) .edit-tab.multichoicecompact * { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important; }
body:has(.om-form) .edit-tab.multichoicecompact .items { background:transparent; }
body:has(.om-form) .edit-tab.multichoicecompact .item { border-bottom:1px solid var(--of-line); background:transparent; }
body:has(.om-form) .edit-tab.multichoicecompact .item:hover { background:var(--of-soft); }
body:has(.om-form) .edit-tab.multichoicecompact .item .name,
body:has(.om-form) .edit-tab.multichoicecompact .item .text { font-size:15px; line-height:22px; color:var(--of-ink); }

/* "This form has incomplete or missing information" */
body:has(.om-form) .validation-popup {
  border-radius:22px; background:var(--of-card); color:var(--of-ink); overflow:hidden;
  box-shadow:0 0 0 1px #e2dcf5, 0 30px 60px -18px rgba(74,43,224,.35), 0 12px 28px -12px rgba(29,29,31,.28);
}
html[data-theme="dark"] body:has(.om-form) .validation-popup { box-shadow:0 0 0 1px rgba(185,168,255,.32), 0 34px 70px -20px rgba(0,0,0,.8); }
body:has(.om-form) .validation-popup .popup-head { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--of-ink); }
body:has(.om-form) .validation-popup .popup-content,
body:has(.om-form) .validation-popup .popup-content p { font-size:15px; line-height:1.5; color:var(--of-ink-2); background:transparent; }
body:has(.om-form) .validation-popup .popup-buttons a.button {
  height:auto; padding:10px 24px; border-radius:980px; background:var(--of-accent); background-image:none;
}
body:has(.om-form) .validation-popup .popup-buttons a.button:after,
body:has(.om-form) .validation-popup .popup-buttons a.button:before { display:none; }
body:has(.om-form) .validation-popup .popup-buttons a.button .text { font-size:15px; font-weight:500; line-height:22px; color:#fff; }
body:has(.om-form) .validation-popup .popup-buttons a.button:hover { background:var(--of-press); }
html[data-theme="dark"] body:has(.om-form) .validation-popup .cmd-close { filter:invert(1); }