/* Dynamics 365 Event Management — form styling to match Sybit design system */

/* Dynamics injects inline color/font styles on form elements, so visual
   declarations below use !important to win against those inline styles. */

/* --color-error is not provided by the design system; defined locally */
[data-form-id] {
    --color-error: #ff6b6b;
}

/* The form follows its section-container's [data-theme] instead of hardcoding a
   background: Primary = blue + white text, Light = transparent + dark text, etc.
   Set the section theme to "Primary" in the page editor for the blue look.

   Form text can't use `color: inherit`: Dynamics injects inline dark colors on
   intermediate containers, which inheritance picks up before reaching the
   section theme (text stayed black on blue sections). Custom properties ignore
   those inline colors, so we drive the form's text color through --form-text-color
   (default set on .dynamics-form-wrapper in the Layout section below), applied
   with !important to each text element. Dark/primary themes flip it to light. */
[data-theme="dark"] .dynamics-form-wrapper,
[data-theme="primary"] .dynamics-form-wrapper {
    --form-text-color: var(--color-text-light);
    --form-button-color: var(--color-background-light);
    --form-button-text-color: var(--color-text-dark);
}

/* Links inside the form: undo Dynamics' inline display/color styling and use the
   theme's link color (accent on dark/primary, secondary on light). */
section:has(> .dynamics-form-wrapper) a {
    display: inline !important;
    vertical-align: baseline !important;
    line-height: 1.5 !important;
    color: var(--link-color, var(--color-accent)) !important;
    -webkit-text-fill-color: var(--link-color, var(--color-accent)) !important;
    text-decoration-color: var(--link-color, var(--color-accent)) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-bold) !important;
}

/* Text next to Forms — side-by-side layout (GridContainer's .layout-grid). No
   background or text colors are forced here: like the standalone form, the whole
   row follows its section-container's [data-theme] (see note at the top of the
   file). Set the section theme to "Primary" for the blue look. */

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Dynamics renders fields with padding/border, so border-box keeps width:100%
   fields inside their container instead of overflowing the section. */
.dynamics-form-wrapper,
.dynamics-form-wrapper *,
[data-form-id],
[data-form-id] * {
    box-sizing: border-box !important;
}

/* Dynamics injects inline fixed-pixel widths on the form and its column
   containers; force them fluid (with !important to beat the inline styles)
   so the form reflows with the viewport instead of breaking out of the page. */
.dynamics-form-wrapper {
    max-width: 100%;
    overflow-x: hidden;
    /* Default form text color; dark/primary themes flip it to light (see top). */
    --form-text-color: var(--color-text-dark);
    /* Submit button fill: matches the link color on light/shade (the white pill
       would vanish on a light background); dark/primary flip it to white. */
    --form-button-color: var(--link-color, var(--color-secondary));
    /* Button label: white on the colored light/shade fill, dark on the white
       primary/dark fill. */
    --form-button-text-color: var(--color-text-light);
}

/* The form sits directly after the section heading, and the design system's flow
   spacing (:where(.flow-text-elements) > * + *) would add a larger gap there.
   Override it on the element after the H3 — the form wrapper — with the same
   value as the wrapper margin above. */
section:has(> .dynamics-form-wrapper) > h3 + * {
    margin-block-start: var(--space-2xs, 0.625rem) !important;
}

[data-form-id],
[data-form-id] form,
[data-form-id] .lp-form {
    width: 100% !important;
    max-width: 100% !important;
}

[data-form-id] table,
[data-form-id] thead,
[data-form-id] tbody,
[data-form-id] tr,
[data-form-id] th,
[data-form-id] td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

[data-form-id]
    [style*="display: table"]:not([type="submit"]):not(.submitButton),
[data-form-id]
    [style*="display:table"]:not([type="submit"]):not(.submitButton) {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
}

[data-form-id] th,
[data-form-id] td,
[data-form-id] .inner,
[data-form-id] .columnContainer,
[data-form-id] .containerWrapper {
    padding: 0 !important;
}

[data-form-id] .innerSection {
    background-color: transparent !important;
}

[data-form-id] * {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

[data-form-id],
[data-form-id] > div,
[data-form-id] form,
[data-form-id] .lp-form,
[data-form-id] .lp-pom-form,
[data-form-id] .lp-pom-root,
[data-form-id] .row,
[data-form-id] [data-layout],
[data-form-id] [data-container],
[data-form-id] [data-section] {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}

/* Dynamics' field blocks ship an auto-generated `padding: 20px 30px`. The 30px
   inline-start indents fields away from the heading; the 20px top+bottom stacks
   between blocks, making the gaps wider than the old form. Drop both and use a
   single margin-bottom for consistent spacing (matches the .lp fields below). */
[data-form-id] .textFormFieldBlock,
[data-form-id] .dateTimeFormFieldBlock,
[data-form-id] .twoOptionFormFieldBlock,
[data-form-id] .optionSetFormFieldBlock,
[data-form-id] .passesBlock,
[data-form-id] .multiOptionSetFormFieldBlock,
[data-form-id] .lookupFormFieldBlock {
    padding-block: 0 !important;
    padding-inline-start: 0 !important;
    margin-bottom: var(--space-s, 1.25rem) !important;
}

[data-form-id] .lp-pom-form-field,
[data-form-id] .lp-code-field {
    margin-bottom: var(--space-s, 1.25rem);
}

/* ── Consent blocks ──────────────────────────────────────────────────────── */

/* Dynamics sets an inline dark color on the consent container; force it (and its
   text) to inherit the theme color so consent text is readable on any theme
   (white on Primary, dark on Light). Links keep their own color rule above. */
[data-form-id] .consentBlock,
[data-form-id] .consentBlock span,
[data-form-id] .consentBlock p {
    color: var(--form-text-color) !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step--1) !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

[data-form-id] .consentBlock p,
[data-form-id] label p {
    display: inline !important;
    margin: 0 !important;
}

[data-form-id] .consentBlock p + p::before,
[data-form-id] label p + p::before {
    content: " ";
}

/* ── Text content blocks (headings, lists added in the form designer) ──────── */

/* These live inside [data-form-id], so we can style them like any form element. */
[data-form-id] h1,
[data-form-id] h2,
[data-form-id] h3,
[data-form-id] h4 {
    font-family: var(--font-family-sybit) !important;
    color: var(--form-text-color) !important;
    padding-block: var(--space-s, 1.25rem) !important;
}

[data-form-id] ul,
[data-form-id] ol {
    margin-block: var(--space-xs, 0.9375rem) !important;
    padding-inline-start: var(--space-m, 1.875rem) !important;
}

[data-form-id] li {
    font-family: var(--font-family-sybit) !important;
    color: var(--form-text-color) !important;
    margin-bottom: var(--space-3xs, 0.3rem) !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */

[data-form-id] label,
[data-form-id] .lp-form-fieldLabel {
    display: block !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step-0) !important;
    font-variation-settings: var(--font-weight-bold) !important;
    color: var(--form-text-color) !important;
    margin-bottom: var(--space-3xs, 0.3rem) !important;
}

/* Dynamics' field-block / captcha labels: small top margin only (their own
   block-label spacing), overriding the generic label margin-bottom above. */
[data-form-id] .textFormFieldBlock label,
[data-form-id] .dateTimeFormFieldBlock label,
[data-form-id] .lookupFormFieldBlock label,
[data-form-id] .twoOptionFormFieldBlock label.block-label,
[data-form-id] .optionSetFormFieldBlock label.block-label,
[data-form-id] .multiOptionSetFormFieldBlock label.block-label,
[data-form-id] .passesBlock label,
[data-form-id]
    div[data-editorblocktype="Captcha"]
    label[id^="wlspispHipInstructionContainer"] {
    margin: 2px 0 0 !important;
}

/* ── Text inputs, textareas, selects ─────────────────────────────────────── */

[data-form-id]
    input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(
        [type="hidden"]
    ),
[data-form-id] textarea,
[data-form-id] select,
[data-form-id] .lp-form-fieldInput {
    display: block !important;
    width: 100% !important;
    height: var(--space-l, 2.5rem) !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step-0) !important;
    font-variation-settings: var(--font-weight-regular) !important;
    color: var(--color-text-dark, #000) !important;
    background-color: var(--color-background-light, #fff) !important;
    border: 1px solid var(--color-text-gray, #646464) !important;
    border-radius: 0 !important;
    appearance: none !important;
}

[data-form-id] textarea {
    height: auto !important;
    min-height: 8rem !important;
    resize: vertical !important;
}

/* Selection/focus ring: a thin 2px accent outline on every field (inputs,
   textareas, selects, checkboxes, radios) instead of the old heavy 5px inset. */
[data-form-id] input:focus,
[data-form-id] textarea:focus,
[data-form-id] select:focus {
    outline: 2px solid var(--color-accent, #c9ff29) !important;
    outline-offset: -1px !important;
    border-color: transparent !important;
}

/* ── Checkboxes & radios ─────────────────────────────────────────────────── */

[data-form-id] input[type="checkbox"],
[data-form-id] input[type="radio"] {
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex: 0 0 auto !important;
    margin-top: 0.25rem !important;
    margin-inline-start: 0 !important;
    accent-color: var(--color-accent, #c9ff29) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-regular) !important;
}

/* Keep the box on the FIRST line of its (often multi-line) label instead of
   vertically centred against it. Targets the consent row and any element whose
   direct child is a checkbox/radio — the per-option row — so multi-option lists
   keep one row per option. */
[data-form-id] .consentBlock,
[data-form-id] :has(> input[type="checkbox"]),
[data-form-id] :has(> input[type="radio"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    /* Dynamics indents consent rows with their own inline padding; flush them
       left so the checkbox lines up with the other fields' left edge. */
    padding-inline: 0 !important;
}

/* ── Select arrow ────────────────────────────────────────────────────────── */

[data-form-id] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
}

/* ── Submit button ───────────────────────────────────────────────────────── */

[data-form-id] input[type="submit"],
[data-form-id] button[type="submit"],
[data-form-id] .lp-form-button {
    --button-shadow-width: calc(var(--space-s) + 0.6lh);
    --button-hover-width: 3px;
    --button-default-color: var(
        --form-button-color,
        var(--color-background-light)
    );
    --button-active-color: var(--color-background-light-tint-10);
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    min-block-size: 44px !important;
    padding-block: var(--space-s) !important;
    padding-inline: var(--space-l) !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step-0) !important;
    font-variation-settings: var(--font-weight-bold) !important;
    color: var(--form-button-text-color, var(--color-text-dark)) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    appearance: none !important;
    white-space: nowrap !important;
    box-shadow:
        inset 0 var(--button-shadow-width) 0 0 var(--button-default-color),
        inset 0 calc(var(--button-shadow-width) * -1) 0 0
            var(--button-default-color) !important;
    transition:
        box-shadow 0.2s,
        color 0.15s,
        border-radius 0.15s !important;
}

[data-form-id] input[type="submit"]:hover,
[data-form-id] button[type="submit"]:hover,
[data-form-id] .lp-form-button:hover {
    color: var(--button-default-color) !important;
    box-shadow:
        inset 0 var(--button-hover-width) 0 0 var(--button-default-color),
        inset 0 calc(var(--button-hover-width) * -1) 0 0
            var(--button-default-color) !important;
    border-radius: 0 !important;
}

[data-form-id] input[type="submit"]:active,
[data-form-id] button[type="submit"]:active,
[data-form-id] .lp-form-button:active {
    color: var(--color-text-dark) !important;
    box-shadow:
        inset 0 var(--button-shadow-width) 0 0 var(--button-active-color),
        inset 0 calc(var(--button-shadow-width) * -1) 0 0
            var(--button-active-color) !important;
    border-radius: 4px !important;
}

[data-form-id] .lp-form-button-submit,
[data-form-id] .submitButtonContainer,
[data-form-id] .submitButtonWrapper {
    margin-top: var(--space-m, 1.875rem) !important;
    text-align: left !important;
}

.dynamics-form-wrapper input[type="submit"],
.dynamics-form-wrapper button[type="submit"],
.dynamics-form-wrapper .lp-form-button,
.dynamics-form-wrapper .submitButton {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: 0 auto !important;
}

/* ── Validation errors ───────────────────────────────────────────────────── */

[data-form-id] .lp-form-fieldError,
[data-form-id] .validationError {
    color: var(--color-error) !important;
    font-size: var(--font-step--2, 0.75rem) !important;
    margin-top: var(--space-3xs, 0.3rem) !important;
}

[data-form-id] .lp-form-field--error input,
[data-form-id] .lp-form-field--error select,
[data-form-id] .lp-form-field--error textarea {
    border-color: var(--color-error) !important;
}

/* ── Success message ─────────────────────────────────────────────────────── */

[data-form-id] .lp-form-successMessage,
[data-form-id] .onFormSubmitSuccessMessage {
    padding: var(--space-m, 1.875rem) !important;
    background-color: var(--color-background-almost-white, #f7f7f7) !important;
    color: var(--color-text-dark, #000) !important;
    border-left: 4px solid var(--color-accent, #c9ff29) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-regular) !important;
}

/* ── Required field marker ───────────────────────────────────────────────── */

[data-form-id] .lp-form-fieldRequired {
    color: var(--color-accent, #c9ff29) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-regular) !important;
}

/* ── Fields to hide ──────────────────────────────────────────────────────── */

[data-form-id] [id*="statuscode"],
[data-form-id] [id*="preferredlanguage"],
[data-form-id] [id*="msdynmkt_salesconfigurationindic"] {
    display: none !important;
}

/* Generic guard: never un-hide anything a script (reCAPTCHA, Dynamics, …)
   deliberately hides inline. Our generic input/textarea rules use
   display:block !important, which would otherwise override an element's inline
   display:none and reveal it as a stray box. Matches both spacing variants. */
[data-form-id] [style*="display: none"],
[data-form-id] [style*="display:none"] {
    display: none !important;
}

/* ── reCAPTCHA ───────────────────────────────────────────────────────────── */

/* Add styles for captcha widget.*/
[data-form-id] .g-recaptcha,
[data-form-id] [id*="captcha"],
[data-form-id] div:has(> iframe[src*="recaptcha"]) {
    margin-top: var(--space-xs) !important;
    margin-inline: 0 auto !important;
    width: fit-content !important;
    text-align: left !important;
}

[data-form-id] textarea.g-recaptcha-response,
[data-form-id] textarea[class*="captcha"] {
    display: none !important;
}