/* 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;
}

section:has(.dynamics-form-wrapper) {
    background-color: var(--color-primary, #000057);
    color: var(--color-text-light, #fff);
    padding: var(--space-l, 2.5rem);
}

section:has(.dynamics-form-wrapper) a {
    color: var(--color-accent) !important;
    -webkit-text-fill-color: var(--color-accent) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-bold) !important;
}

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

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

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

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

[data-form-id] .consentBlock span,
[data-form-id] .consentBlock p {
    color: var(--color-text-light) !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step--1) !important;
}

[data-form-id] .consentBlock a {
    color: var(--color-accent) !important;
    -webkit-text-fill-color: var(--color-accent) !important;
    text-decoration-color: var(--color-accent) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-bold) !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--1, 0.9375rem) !important;
    font-variation-settings: var(--font-weight-bold) !important;
    color: var(--color-text-light, #fff) !important;
    margin-bottom: var(--space-3xs, 0.3rem) !important;
}

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

[data-form-id] input:not([type=submit]):not([type=checkbox]):not([type=radio]),
[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;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step--1, 0.9375rem) !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;
}

[data-form-id] input:focus,
[data-form-id] textarea:focus,
[data-form-id] select:focus {
    outline: 5px solid var(--color-accent, #c9ff29) !important;
    outline-offset: -2.5px !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;
    accent-color: var(--color-accent, #c9ff29) !important;
    font-family: var(--font-family-sybit) !important;
    font-variation-settings: var(--font-weight-regular) !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;
    padding-right: var(--space-l, 2.5rem) !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(1rem + .6lh);
    --button-hover-width: 3px;
    --button-default-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: 1rem !important;
    padding-inline: var(--space-s) !important;
    font-family: var(--font-family-sybit) !important;
    font-size: var(--font-step--1) !important;
    font-variation-settings: var(--font-weight-bold) !important;
    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 .2s, color .15s, border-radius .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 {
    margin-top: var(--space-m, 1.875rem) !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;
}