/*
 * Mapp 2027: HubSpot forms styled like the design (hand-written, not generated).
 *
 * The "Book your demo" dialog renders a HubSpot form (js/mapp-2027-hubspot.js, embedded with css:'' so
 * HubSpot adds no styles of its own). These rules give HubSpot's markup the look of the design's
 * .mp-dd-* fields: same values as the .dd-* rules in new/mapp-homepage-new.html.
 * Selectors are deliberately specific (and font sizes !important) to win over the legacy theme's
 * input and HubSpot rules on the older pages.
 */

/* layout: the form's fieldsets are the design's rows */
.mp-demo-dlg .mp-dd-hs .hs-form{display:flex;flex-direction:column;gap:calc(1.5*var(--mp-rem));margin:0}
.mp-demo-dlg .mp-dd-hs .hs-form fieldset{max-width:none;min-width:0;margin:0;padding:0;border:0}
.mp-demo-dlg .mp-dd-hs .hs-form fieldset.form-columns-2{display:flex;gap:calc(1*var(--mp-rem))}
.mp-demo-dlg .mp-dd-hs .hs-form fieldset .hs-form-field{display:flex;flex-direction:column;gap:calc(0.5*var(--mp-rem));flex:1 1 0;min-width:0;width:auto;float:none;margin:0;padding:0}
/* fieldsets that only hold HubSpot's hidden fields take no room */
.mp-demo-dlg .mp-dd-hs .hs-form fieldset:not(:has(.hs-input:not([type="hidden"]), .legal-consent-container)){display:none}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .input{margin:0}
.mp-demo-dlg .mp-dd-hs.mp-is-loading{min-height:calc(24*var(--mp-rem))}

/* labels = .mp-dd-label; all fields are required, so no asterisks */
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field>label{display:block;margin:0;padding:0;font-family:"Mona Sans Medium";font-weight:400;font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:calc(1.375*var(--mp-rem));color:var(--mp-navy);text-transform:none;letter-spacing:normal}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-required{display:none}

/* text inputs and the select = .mp-dd-in / .mp-dd-select */
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .hs-input:is([type="text"],[type="email"],[type="tel"],[type="number"],select,textarea){
  display:block;width:100%;max-width:none;height:calc(3.5*var(--mp-rem));margin:0;padding:0 calc(1.5*var(--mp-rem));
  border:1px solid #6e6259;border-radius:calc(62.4375*var(--mp-rem));background:var(--mp-white);box-shadow:none;color:var(--mp-navy);
  font-family:"Mona Sans";font-weight:400;font-size:max(calc(1*var(--mp-rem)),14px)!important;line-height:calc(1.625*var(--mp-rem))!important;
  letter-spacing:normal;text-transform:none;transition:border-color .2s,box-shadow .2s}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .hs-input::placeholder{color:#6e6259;opacity:1}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .hs-input:focus{outline:none;border-color:var(--mp-navy);box-shadow:0 0 0 3px rgba(141,119,247,.35)}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field select.hs-input{appearance:none;-webkit-appearance:none;padding-right:calc(3.5*var(--mp-rem));
  background:var(--mp-white) url("/siteimg/2027/dlg-a4e9a.svg") no-repeat right calc(1.5*var(--mp-rem)) center/calc(1.25*var(--mp-rem)) calc(1.25*var(--mp-rem));cursor:pointer}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field select.hs-input.is-placeholder{color:#6e6259}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field select.hs-input option{color:var(--mp-navy)}

/* validation: HubSpot marks fields .invalid.error and lists messages under them */
.mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .hs-input.invalid.error{border-color:#d0263c;box-shadow:0 0 0 3px rgba(208,38,60,.15)}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-error-msgs{margin:0;padding:0;list-style:none}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-error-msgs li{margin:0;padding:0}
.mp-demo-dlg .mp-dd-hs .hs-form .hs-error-msgs label,.mp-demo-dlg .mp-dd-hs .hs-form .hs_error_rollup label{display:block;margin:0;font-family:"Mona Sans Medium";font-size:max(calc(0.8125*var(--mp-rem)),12px);line-height:calc(1.25*var(--mp-rem));letter-spacing:.04em;color:#d0263c}
.mp-demo-dlg .mp-dd-hs .hs-form .hs_error_rollup{text-align:center}
/* the company email hint (added by js/mapp-2027-hubspot.js) turns red with an email error */
.mp-demo-dlg .mp-dd-hs .hs-email:has(.hs-error-msgs) .mp-dd-hint{color:#d0263c}

/* consent texts (from HubSpot) = .mp-dd-legal, the consent checkbox = .mp-dd-check */
.mp-demo-dlg .mp-dd-hs .legal-consent-container{display:flex;flex-direction:column;gap:calc(0.75*var(--mp-rem));font-family:"Mona Sans Medium";font-size:max(calc(0.8125*var(--mp-rem)),12px);line-height:calc(1.25*var(--mp-rem));letter-spacing:.04em;color:#6e6259}
.mp-demo-dlg .mp-dd-hs .legal-consent-container p{margin:0;font:inherit;color:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container a{color:var(--mp-navy);text-decoration:underline!important;font-weight:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container strong{font-weight:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-field{display:block}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .inputs-list{margin:0;padding:0;list-style:none}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox{margin:0;padding:0}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display{display:flex;align-items:center;gap:calc(0.75*var(--mp-rem));margin:0;cursor:pointer;
  font-family:"Mona Sans";font-size:max(calc(0.875*var(--mp-rem)),14px);line-height:calc(1.375*var(--mp-rem));letter-spacing:normal;color:var(--mp-navy)}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display>span{margin:0}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input{appearance:none;-webkit-appearance:none;flex:none;width:calc(1.25*var(--mp-rem));height:calc(1.25*var(--mp-rem));margin:0;
  border:1.5px solid #6e6259;border-radius:5px;background:var(--mp-white) no-repeat center/calc(0.75*var(--mp-rem));cursor:pointer;transition:background-color .2s,border-color .2s}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input:checked{background-color:var(--mp-navy);border-color:var(--mp-navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input:focus-visible{outline:2px solid var(--mp-p2);outline-offset:2px}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-field-desc:empty{display:none}
/* the legacy theme styles HubSpot's consent block (style-min.css / style-new.css, partly !important) */
.mp-demo-dlg .mp-dd-hs .hs-form .legal-consent-container{margin:0!important;padding:0!important}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-richtext{margin:0;font-size:inherit;color:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-richtext p{margin:0;font-size:inherit;line-height:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-dependent-field .input :is(p,span){font-family:"Mona Sans";font-size:inherit;font-weight:400;line-height:inherit;color:inherit}
.mp-demo-dlg .mp-dd-hs .legal-consent-container li.hs-form-booleancheckbox{position:static;margin:0;padding:0;line-height:inherit;list-style:none}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display input.hs-input{float:none!important;display:block!important;margin:0!important}
.mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display>span{display:block!important;margin:0!important}

/* submit: the design's "Book my demo" button (added by js/mapp-2027-hubspot.js) replaces HubSpot's input */
.mp-demo-dlg .mp-dd-hs .hs-submit .hs-field-desc:empty{display:none}
.mp-demo-dlg .mp-dd-hs .hs-submit .actions{display:flex;flex-direction:column;align-items:center;gap:calc(1*var(--mp-rem));margin:0;padding:0}
.mp-demo-dlg .mp-dd-hs .hs-submit .actions:has(.mp-dd-submit) .hs-button{display:none}

/* sent: HubSpot's thank-you text (set in HubSpot) in place of the form */
.mp-demo-dlg.mp-hs-done .mp-dd-demo{display:none}
.mp-demo-dlg .mp-dd-hs .submitted-message{padding:calc(1*var(--mp-rem)) 0;text-align:center;font-size:max(calc(1*var(--mp-rem)),14px);line-height:calc(1.625*var(--mp-rem));color:#6e6259}
.mp-demo-dlg .mp-dd-hs .submitted-message p{margin:0 0 calc(0.75*var(--mp-rem))}
.mp-demo-dlg .mp-dd-hs .submitted-message :is(h1,h2,h3,strong){font-family:"Mona Sans SemiBold";font-weight:400;color:var(--mp-navy)}
.mp-demo-dlg .mp-dd-hs .mp-dd-hs-close{display:flex;margin:calc(1*var(--mp-rem)) auto 0;max-width:calc(16*var(--mp-rem))}

/* two-column dialog (>900px): the design zooms the dialog so 1rem renders as Figma's 16px (.mp-dd-fit,
   --mp-dd-z) and drops the 14px minimum sizes; same for the HubSpot fields */
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .hs-form .hs-form-field>label,
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display{font-size:calc(0.875*var(--mp-rem));line-height:calc(1.375*var(--mp-rem))}
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .hs-form .hs-form-field .hs-input:is([type="text"],[type="email"],[type="tel"],[type="number"],select,textarea){font-size:calc(1*var(--mp-rem))!important}
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .legal-consent-container,
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .hs-form .hs-error-msgs label,
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .hs-form .hs_error_rollup label{font-size:max(calc(0.8125*var(--mp-rem)),calc(12px / var(--mp-dd-z,1)))}
.mp-demo-dlg.mp-dd-fit .mp-dd-hs .submitted-message{font-size:calc(1*var(--mp-rem))}

/* phones and small tablets (same breakpoint as the design's dialog) */
@media (max-width:900px){
  .mp-demo-dlg .mp-dd-hs .hs-form{gap:calc(1.25*var(--mp-rem))}
  .mp-demo-dlg .mp-dd-hs .hs-form fieldset.form-columns-2{flex-direction:column;gap:calc(1.25*var(--mp-rem))}
  .mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field .hs-input:is([type="text"],[type="email"],[type="tel"],[type="number"],select,textarea){height:calc(3.25*var(--mp-rem));padding:0 calc(1.25*var(--mp-rem))}
  .mp-demo-dlg .mp-dd-hs .hs-form .hs-form-field select.hs-input{padding-right:calc(3*var(--mp-rem));background-position:right calc(1.25*var(--mp-rem)) center}
  .mp-demo-dlg .mp-dd-hs .legal-consent-container .hs-form-booleancheckbox-display{align-items:flex-start}
}