/* =============================================================================
   Ecorobotix Contact Forms — design system stylesheet
   --------------------------------------------------------------------------
   This file is a from-scratch rewrite that maps the ARA (.contact-form) and
   ALBA (.alba-form) contact forms onto the Figma component library at
   https://www.figma.com/design/oRn3w5d2lsQrz6Lxba3eZv/?node-id=5044-201001

   It supersedes 18 months of incrementally patched rules that lived in
   contact_pages.legacy.css.bak. The legacy file is kept as a backup; this
   one is the single source of truth from now on.

   Layout
     1. Design tokens (CSS custom properties)
     2. Font face import (Roobert)
     3. Form root (.contact-form / .alba-form)
     4. Field wrapper layout (.form-group, .input-group, .select-group,
        .textarea-group, .checkbox-group)
     5. Label + asterisk + helper text
     6. Text inputs / textareas
     7. Native <select> wrapper + custom dropdown widget (.cuw-dd*)
     8. Checkbox + radio
     9. Phone country-code picker (.erx-phone-field*)
    10. Crops grid (.cuw-crops-block)
    11. ALBA step navigation
    12. Submit button + disclaimer
    13. Responsive overrides
    14. Editor-mode safeguards
   ============================================================================= */


/* 1. Design tokens ------------------------------------------------------------ */

.contact-form,
.alba-form {
    /* colours */
    --cuw-c-text:           #0D0D0D;
    --cuw-c-text-muted:     #6E6E6E;
    --cuw-c-text-placeholder: #9E9E9E;
    --cuw-c-border:         #DBDBDB;
    --cuw-c-border-subtle:  #E7E7E7;
    --cuw-c-bg:             #FFFFFF;
    --cuw-c-bg-soft:        #e7e7e7;     /* focus + disabled fill */
    --cuw-c-blue:           #0D2743;

    --cuw-c-primary:        #4DC270;     /* brand green */
    --cuw-c-primary-15:     #E4F6EA;     /* hover border */
    --cuw-c-primary-10:     #EDF9F1;     /* hover fill */

    --cuw-c-error-text:     #BB241A;
    --cuw-c-error-border:   #F04438;
    --cuw-c-error-bg:       #FEE4E2;
    --cuw-c-required:       #E51521;

    /* typography */
    --cuw-ff: 'Roobert', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --cuw-fs-helper: 12px;
    --cuw-lh-helper: 1.4;
    --cuw-fs-label:  16px;
    --cuw-lh-label:  19px;
    --cuw-fs-input:  18px;
    --cuw-lh-input:  22px;

    --cuw-fw-regular:  400;
    --cuw-fw-medium:   500;
    --cuw-fw-semibold: 600;

    /* spacing */
    --cuw-sp-xxs: 4px;
    --cuw-sp-xs:  8px;
    --cuw-sp-sm:  12px;
    --cuw-sp-md:  16px;
    --cuw-sp-lg:  24px;
    --cuw-sp-xl:  32px;

    /* borders + radii */
    --cuw-bw:        1px;
    --cuw-bw-focus:  1px;
    --cuw-radius:    0;       /* Figma uses square fields */

    /* geometry */
    --cuw-field-h:        56px;
    --cuw-field-pad-x:    16px;
    --cuw-field-pad-y:    16px;
    --cuw-textarea-h:    140px;
    --cuw-textarea-h-lg: 220px;

    /* layout rhythm */
    --cuw-gap-stack: 20px;
    --cuw-gap-label-field: 8px;
    --cuw-gap-field-helper: 8px;
}


/* 2. Font face -------------------------------------------------------------- */

@import url('/contact_us_widget/static/src/contact_pages/fonts/stylesheet.css');


/* 3. Form root -------------------------------------------------------------- */

.contact-form,
.alba-form {
    font-family: var(--cuw-ff);
    font-weight: var(--cuw-fw-regular);
    color: var(--cuw-c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cuw-ecorobotix-page,
.cuw-alba-page {
    /* 40px margin all around the form (incl. under the Submit button) so it
       isn't tight against the footer. The page background shows in this gutter. */
    padding: 40px;
}
@media (max-width: 575.98px) {
    .cuw-ecorobotix-page,
    .cuw-alba-page {
        padding: 24px;
    }
}

/* ARA contact form background. The form section is a custom full-page form
   that the website builder can't reliably colour (the section isn't a
   savable/editable region), so the background is set here. Change the shade
   by editing --cuw-ara-bg only. Fields stay white on top. */
.cuw-ecorobotix-page {
    --cuw-ara-bg: #ffffff;   /* client-specified beige (override in the builder per page) */
    background-color: var(--cuw-ara-bg);
}

/* Classic Bootstrap row used by both forms. Per-field width is controlled
   by the col-12 / col-lg-* classes the editor writes (Field Width row in
   the right sidebar), not by Odoo's o_grid_mode. */
.contact-form .s_website_form_rows,
.alba-form .s_website_form_rows {
    --bs-gutter-x: 0;
    margin: 0;
}


/* 4. Field wrapper layout --------------------------------------------------- */

/* Every field is a block stacked vertically with consistent rhythm.
   We target the stock-shape `.s_website_form_field` first; the legacy
   wrapper classes (.form-group / .input-group / .select-group /
   .textarea-group / .checkbox-group / .cuw-crops-block) are kept so any
   live form whose arch still has them stays styled — they're harmless
   when both are present on the same wrapper. */
.contact-form .s_website_form_field,
.alba-form .s_website_form_field,
.contact-form .checkbox-group,
.alba-form .checkbox-group,
.contact-form .cuw-crops-block,
.alba-form .cuw-crops-block,
.contact-form .form-group,
.alba-form .form-group,
.contact-form .input-group,
.contact-form .select-group,
.contact-form .textarea-group,
.alba-form .input-group,
.alba-form .select-group,
.alba-form .textarea-group {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 var(--cuw-gap-stack) 0;
    padding: 0;
}

/* First-field-of-form gets no top margin so the form sits flush. */
.contact-form .s_website_form_rows > *:first-child,
.alba-form .s_website_form_rows > *:first-child {
    margin-top: 0;
}

/* .checkbox-group wraps a single .s_website_form_field (newsletter/consent
   blocks) and both are matched by the shared field-spacing rule above, so
   without this override their bottom margins stack - the outer wrapper's
   own margin is redundant on top of the inner field's, and doubles the gap
   before the next block. Zero it here so field-to-field spacing stays a
   single --cuw-gap-stack, not two. The wrapper also carries Bootstrap's
   .mb-3 (margin-bottom: 1rem !important), which beats plain specificity,
   so this needs !important too. */
.contact-form .checkbox-group,
.alba-form .checkbox-group {
    margin-bottom: 0 !important;
}

/* Hidden conditional fields (data-cuw-condition driven) collapse cleanly. */
.contact-form [style*="display: none"],
.contact-form [style*="display:none"],
.alba-form [style*="display: none"],
.alba-form [style*="display:none"] {
    display: none !important;
}

/* FOUC guard: conditional fields (data-cuw-condition / data-cuw-visibility-rules)
   start HIDDEN at first paint — before contact_pages.js runs — so the page
   never flashes every field on load. The runtime adds `.cuw-cond-shown` to a
   field when its condition is satisfied, which overrides this. In the website
   editor (body.editor_enable) we never hide, so admins can see/select all
   fields. */
body:not(.editor_enable) .contact-form [data-cuw-condition]:not(.cuw-cond-shown),
body:not(.editor_enable) .contact-form [data-cuw-visibility-rules]:not(.cuw-cond-shown),
body:not(.editor_enable) .alba-form [data-cuw-condition]:not(.cuw-cond-shown),
body:not(.editor_enable) .alba-form [data-cuw-visibility-rules]:not(.cuw-cond-shown) {
    display: none !important;
}


/* 5. Label, asterisk, helper text ------------------------------------------- */

.contact-form .s_website_form_label,
.alba-form .s_website_form_label,
.contact-form > .form-group > label,
.alba-form > .form-group > label,
.contact-form .cp-eco-label,
.alba-form .label-text {
    display: block;
    margin: 0 0 var(--cuw-gap-label-field) 0;
    padding: 0;
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-label);
    line-height: var(--cuw-lh-label);
    font-weight: var(--cuw-fw-medium);
    color: var(--cuw-c-text-muted);
}

.contact-form .s_website_form_label_content,
.alba-form .s_website_form_label_content {
    display: inline;
}

.contact-form .required,
.contact-form .s_website_form_mark,
.alba-form .required,
.alba-form .s_website_form_mark {
    color: var(--cuw-c-required);
    margin-left: 2px;
    font-weight: var(--cuw-fw-medium);
    /* Match the label text size. Without this, Odoo's stock .s_website_form_mark
       (used on editor-added required fields) renders at ~0.85em, so the custom
       field's star looked smaller than the hand-coded .required stars. */
    font-size: 1em !important;
}

/* Helper text below the field (info / error feedback). */
.contact-form .s_website_form_field_description,
.contact-form .cuw-helper-text,
.alba-form .s_website_form_field_description,
.alba-form .cuw-helper-text {
    display: flex;
    align-items: center;
    gap: var(--cuw-sp-xs);
    margin: var(--cuw-gap-field-helper) 0 0 0;
    padding: 0 0 0 var(--cuw-sp-sm);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    font-weight: var(--cuw-fw-semibold);
    color: var(--cuw-c-text-muted);
}


/* 6. Text inputs & textareas ------------------------------------------------ */

/* Shared base: matches Figma text-field default state. */
.contact-form .s_website_form_input:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="date"],
    textarea
),
.alba-form .s_website_form_input:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    input[type="date"],
    textarea
) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cuw-field-h);
    padding: var(--cuw-field-pad-y) var(--cuw-field-pad-x);
    border: var(--cuw-bw) solid var(--cuw-c-border);
    border-radius: var(--cuw-radius);
    background: var(--cuw-c-bg);
    color: var(--cuw-c-text);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-input);
    line-height: var(--cuw-lh-input);
    font-weight: var(--cuw-fw-regular);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.contact-form .s_website_form_input::placeholder,
.alba-form .s_website_form_input::placeholder {
    color: var(--cuw-c-text-placeholder);
    opacity: 1;
}

/* Hover state — subtle green tint. */
.contact-form .s_website_form_input:hover:not(:focus):not([disabled]),
.alba-form .s_website_form_input:hover:not(:focus):not([disabled]) {
    background: var(--cuw-c-primary-10);
    border-color: var(--cuw-c-primary-15);
}

/* Focus state — grey fill + thin green border (accessibility concession over
   Figma which had no border; keeps the field discoverable for keyboard users). */
.contact-form .s_website_form_input:focus,
.contact-form .s_website_form_input:focus-visible,
.alba-form .s_website_form_input:focus,
.alba-form .s_website_form_input:focus-visible {
    background: var(--cuw-c-bg-soft);
    border-color: var(--cuw-c-primary);
    outline: none;
}
.alba-form .s_website_form_input:focus,
.alba-form .s_website_form_input:focus-visible {
    background: #F4F4F4;
    border-color: var(--alba-primaryca);
    outline: none;
}

/* Error state — red border + light red fill + red helper text.
   The runtime JS sets `.cuw-invalid` directly on the field element (input /
   select / textarea), AND mirrors a `.cuw-error` class onto the closest
   field wrapper. We match both: the wrapper-keyed rules also light up the
   visible custom-dropdown trigger and the phone-field wrapper. */
.contact-form .s_website_form_input.cuw-invalid,
.alba-form .s_website_form_input.cuw-invalid,
.contact-form .cuw-error .s_website_form_input,
.alba-form .cuw-error .s_website_form_input,
.contact-form .erx-field-error .s_website_form_input,
.alba-form .erx-field-error .s_website_form_input {
    background: var(--cuw-c-error-bg);
    border-color: var(--cuw-c-error-border);
}
/* Phone-field wrapper in error. */
.contact-form .cuw-error .erx-phone-field,
.alba-form .cuw-error .erx-phone-field {
    background: var(--cuw-c-error-bg);
    border-color: var(--cuw-c-error-border);
}

/* Group-required wrapper (crops checkbox grid) in error state.
   Highlight the label + draw a red outline around the grid so the user
   sees that the whole group needs attention. */
.contact-form .cuw-error.cuw-crops-block .cp-eco-label,
.alba-form .cuw-error.cuw-crops-block .cp-eco-label {
    color: var(--cuw-c-error-text);
}
.contact-form .cuw-error.cuw-crops-block .cuw-checkbox-list,
.alba-form .cuw-error.cuw-crops-block .cuw-checkbox-list {
    padding: var(--cuw-sp-sm);
    background: var(--cuw-c-error-bg);
    border: var(--cuw-bw) solid var(--cuw-c-error-border);
}
/* Checkbox boxes themselves take the error border so empty rows are visibly
   in the error state. */
.contact-form .cuw-error.cuw-crops-block .checkmark,
.alba-form .cuw-error.cuw-crops-block .checkmark {
    border-color: var(--cuw-c-error-border);
}

/* Error helper text (.cuw-field-error is the runtime span; .cuw-helper-text /
   s_website_form_field_description are the templated helper rows). */
.contact-form .cuw-field-error,
.alba-form .cuw-field-error {
    display: block;
    margin: var(--cuw-gap-field-helper) 0 0 0;
    padding: 0 0 0 var(--cuw-sp-sm);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    font-weight: var(--cuw-fw-semibold);
    color: var(--cuw-c-error-text);
}
.contact-form .cuw-field-success,
.alba-form .cuw-field-success {
    display: block;
    margin: var(--cuw-gap-field-helper) 0 0 0;
    padding: 0 0 0 var(--cuw-sp-sm);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    font-weight: var(--cuw-fw-semibold);
    color: #057747;
}
.contact-form .cuw-field-warning,
.alba-form .cuw-field-warning {
    display: block;
    margin: var(--cuw-gap-field-helper) 0 0 0;
    padding: 0 0 0 var(--cuw-sp-sm);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    font-weight: var(--cuw-fw-semibold);
    color: #BB4E02;
}
.contact-form .cuw-field-info,
.alba-form .cuw-field-info {
    display: block;
    margin: var(--cuw-gap-field-helper) 0 0 0;
    padding: 0 0 0 var(--cuw-sp-sm);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    font-weight: var(--cuw-fw-semibold);
    color: color-mix(in srgb, var(--black) 60%, transparent);
}
.contact-form .cuw-field-error:empty,
.alba-form .cuw-field-error:empty {
    display: none;
}
.contact-form .cuw-error .cuw-helper-text,
.contact-form .cuw-error .s_website_form_field_description,
.alba-form .cuw-error .cuw-helper-text,
.alba-form .cuw-error .s_website_form_field_description {
    color: var(--cuw-c-error-text);
}

/* Disabled state. */
.contact-form .s_website_form_input[disabled],
.alba-form .s_website_form_input[disabled] {
    background: var(--cuw-c-bg-soft);
    border-color: var(--cuw-c-border-subtle);
    color: var(--cuw-c-text-placeholder);
    cursor: not-allowed;
}

/* Textareas — keep the same look but resize-y, taller min-height. */
.contact-form .s_website_form_input:where(textarea),
.alba-form .s_website_form_input:where(textarea) {
    min-height: var(--cuw-textarea-h);
    resize: vertical;
}

/* Character counter below the textarea. */
.contact-form .char-counter,
.alba-form .char-counter {
    margin-top: var(--cuw-sp-xs);
    text-align: right;
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    color: var(--cuw-c-text-muted);
}


/* 7. Native <select> + custom dropdown widget (.cuw-dd*) -------------------- */

/* Native <select> — kept for fallback; styled to match the field look.
   The .cuw-dd widget hides this at runtime in favour of a custom panel. */
.contact-form .s_website_form_input:where(select),
.alba-form .s_website_form_input:where(select) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cuw-field-h);
    padding: var(--cuw-field-pad-y) calc(var(--cuw-field-pad-x) + 28px) var(--cuw-field-pad-y) var(--cuw-field-pad-x);
    border: var(--cuw-bw) solid var(--cuw-c-border);
    border-radius: var(--cuw-radius);
    background-color: var(--cuw-c-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1.5 1.5L6 6L10.5 1.5' stroke='%236E6E6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--cuw-field-pad-x) center;
    color: var(--cuw-c-text);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-input);
    line-height: var(--cuw-lh-input);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

/* Selected option = full opacity; placeholder option (value="") = muted. */
.contact-form .s_website_form_input:where(select):invalid,
.alba-form .s_website_form_input:where(select):invalid {
    color: var(--cuw-c-text-placeholder);
}

/* Hide the legacy ::after arrow span — the SVG bg-image renders the chevron. */
.contact-form .select-arrow,
.alba-form .select-arrow {
    display: none !important;
}

/* Wrapper that aligns the native select + arrow inside .select-group. */
.contact-form .select-wrapper,
.alba-form .select-wrapper {
    position: relative;
    display: block;
}

/* Custom dropdown widget (built at runtime by contact_pages.js). */
.contact-form .cuw-dd,
.alba-form .cuw-dd {
    position: relative;
    width: 100%;
}

.contact-form .cuw-dd__trigger,
.alba-form .cuw-dd__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cuw-field-h);
    padding: var(--cuw-field-pad-y) var(--cuw-field-pad-x);
    border: var(--cuw-bw) solid var(--cuw-c-border);
    border-radius: var(--cuw-radius);
    background: var(--cuw-c-bg);
    color: var(--cuw-c-text);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-input);
    line-height: var(--cuw-lh-input);
    font-weight: var(--cuw-fw-regular);
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.contact-form .cuw-dd__trigger-text,
.alba-form .cuw-dd__trigger-text {
    flex: 1;
    min-width: 0;
    min-height: var(--cuw-lh-input);
    line-height: var(--cuw-lh-input);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Empty value shows the muted placeholder colour. */
.contact-form .cuw-dd__trigger--placeholder .cuw-dd__trigger-text,
.alba-form .cuw-dd__trigger--placeholder .cuw-dd__trigger-text {
    color: var(--cuw-c-text-placeholder);
}
/* Reserve a line of height when the text node is empty. */
.contact-form .cuw-dd__trigger-text:empty::before,
.alba-form .cuw-dd__trigger-text:empty::before {
    content: "\00a0";
    visibility: hidden;
}

.contact-form .cuw-dd__caret,
.alba-form .cuw-dd__caret {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    margin-left: var(--cuw-sp-xs);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5' fill='none'%3E%3Cpath d='M8.79297 0.5L5 4.29297L1.20703 0.5H8.79297Z' fill='%230D0D0D' stroke='%230D0D0D'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
    transition: transform 160ms ease;
}
.contact-form .cuw-dd--open .cuw-dd__caret,
.alba-form .cuw-dd--open .cuw-dd__caret {
    transform: rotate(180deg);
}

.contact-form .cuw-dd__trigger:hover:not([disabled]),
.alba-form .cuw-dd__trigger:hover:not([disabled]) {
    border-color: #e5f6ea;
    background: #edf8f0;
}
.alba-form .cuw-dd__trigger:hover:not([disabled]) {
    background-color: #efefef !important;
}
.contact-form .cuw-dd--open .cuw-dd__trigger,
.contact-form .cuw-dd__trigger:focus,
.alba-form .cuw-dd--open .cuw-dd__trigger,
.alba-form .cuw-dd__trigger:focus {
    border-color: var(--primary) !important;
    background: #e5f6ea !important;
    outline: none;
}
.alba-form .cuw-dd--open .cuw-dd__trigger,
.alba-form .cuw-dd__trigger:focus {
    border-color: var(--alba-primaryca) !important;
    background: #F4F4F4 !important;
    outline: none;
}
/* Invalid dropdown trigger. The runtime can put the `cuw-dd--invalid`
   marker on either the parent `.cuw-dd` wrapper OR directly on the trigger
   element itself (the MutationObserver inside buildCustomDropdown toggles
   the class on `triggerEl`). Match both. */
.contact-form .cuw-dd--invalid .cuw-dd__trigger,
.alba-form .cuw-dd--invalid .cuw-dd__trigger,
.contact-form .cuw-dd__trigger.cuw-dd--invalid,
.alba-form .cuw-dd__trigger.cuw-dd--invalid,
.contact-form .cuw-error .cuw-dd__trigger,
.alba-form .cuw-error .cuw-dd__trigger,
/* If the underlying <select> has .cuw-invalid (set by setFieldError),
   target its adjacent .cuw-dd wrapper's trigger too. */
.contact-form select.cuw-invalid + .cuw-dd .cuw-dd__trigger,
.alba-form select.cuw-invalid + .cuw-dd .cuw-dd__trigger {
    border-color: #F04438 !important;
    background: #FEE4E2 !important;
}

/* The dropdown panel that opens below. */
.contact-form .cuw-dd__panel,
.alba-form .cuw-dd__panel {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
    background: var(--cuw-c-bg);
    border: var(--cuw-bw) solid var(--cuw-c-border);
    border-radius: var(--cuw-radius);
    box-shadow: 0 8px 24px rgba(13, 13, 13, 0.08);
}
.contact-form .cuw-dd__panel {
    background-color: #EDF9F1;
}
.alba-form .cuw-dd__panel {
    background-color: #F4F4F4;
}
.contact-form .cuw-dd--open .cuw-dd__panel,
.alba-form .cuw-dd--open .cuw-dd__panel {
    display: flex;
}
.contact-form .cuw-dd__panel--up,
.alba-form .cuw-dd__panel--up {
    top: auto;
    bottom: calc(100% - 1px);
}

.contact-form .cuw-dd__search,
.alba-form .cuw-dd__search {
    padding: var(--cuw-sp-sm) var(--cuw-field-pad-x);
    border: none;
    border-bottom: var(--cuw-bw) solid var(--cuw-c-border);
    background: var(--cuw-c-bg);
    color: var(--cuw-c-text);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    outline: none;
    flex-shrink: 0;
}
.contact-form .cuw-dd__search:focus,
.alba-form .cuw-dd__search:focus {
    background: var(--cuw-c-bg-soft);
}

.contact-form .cuw-dd__list,
.alba-form .cuw-dd__list {
    list-style: none;
    margin: 0;
    padding: var(--cuw-sp-xxs) 0;
    overflow-y: auto;
    flex: 1;
}

.contact-form .cuw-dd__list::-webkit-scrollbar,
.alba-form .cuw-dd__list::-webkit-scrollbar {
    width: 6px;
}
.contact-form .cuw-dd__list::-webkit-scrollbar-track,
.alba-form .cuw-dd__list::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 20px;
}
.contact-form .cuw-dd__list::-webkit-scrollbar-thumb,
.alba-form .cuw-dd__list::-webkit-scrollbar-thumb {
    background: #DBDBDB;
    border-radius: 20px;
    border: 2px solid #DBDBDB;
}

.contact-form .cuw-dd__option,
.alba-form .cuw-dd__option {
    padding: var(--cuw-sp-sm) var(--cuw-field-pad-x);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-input);
    line-height: var(--cuw-lh-input);
    color: var(--cuw-c-text);
    cursor: pointer;
    transition: background-color 100ms ease;
}
.contact-form .cuw-dd__option:hover,
.contact-form .cuw-dd__option:focus,
.alba-form .cuw-dd__option:hover,
.alba-form .cuw-dd__option:focus {
    background: var(--cuw-c-primary-10);
    outline: none;
}
.contact-form .cuw-dd__option:hover {
    background: var(--cuw-c-primary-15);
}
.contact-form .cuw-dd__option--selected,
.alba-form .cuw-dd__option--selected {
    background: var(--cuw-c-primary-15);
    font-weight: var(--cuw-fw-medium);
}


/* 8. Checkbox + radio ------------------------------------------------------- */

/* Generic .checkbox-container / .custom-checkbox (used in consent rows + crops). */
.contact-form .checkbox-container,
.contact-form .custom-checkbox,
.alba-form .checkbox-container,
.alba-form .custom-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--cuw-sp-sm);
    margin: 0;
    padding: 0;
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-label);
    line-height: var(--cuw-lh-label);
    color: var(--cuw-c-text);
    cursor: pointer;
    user-select: none;
}

/* Hide the native input — visible custom box is the adjacent .checkmark span. */
.contact-form .checkbox-container > input,
.contact-form .custom-checkbox > input,
.alba-form .checkbox-container > input,
.alba-form .custom-checkbox > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Box. */
.contact-form .checkbox-container .checkmark,
.contact-form .custom-checkbox .checkmark,
.alba-form .checkbox-container .checkmark,
.alba-form .custom-checkbox .checkmark {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    margin-top: 1px;       /* aligns visual centre with the first text line */
    border: 1.5px solid var(--cuw-c-border);
    background: var(--cuw-c-bg) !important;
    transition: background-color 120ms ease, border-color 120ms ease;
    z-index: 0;
}
.contact-form .checkbox-container:hover .checkmark,
.contact-form .custom-checkbox:hover .checkmark,
.alba-form .checkbox-container:hover .checkmark,
.alba-form .custom-checkbox:hover .checkmark {
    border-color: var(--cuw-c-primary);
}

.contact-form .checkbox-container .checkmark::before, .alba-form .custom-checkbox .checkmark::before {
    content: "";
    position: absolute;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}
.alba-form .custom-checkbox .checkmark {
    z-index: unset;
}
.alba-form .custom-checkbox .checkmark::before {
    background-color: color-mix(in srgb, #e7e7e7 60%, transparent);
}
.contact-form .checkbox-container:hover .checkmark::before, .alba-form .custom-checkbox:hover .checkmark::before {
    opacity: 1;
}

/* Checked. */
.contact-form .checkbox-container > input:checked ~ .checkmark,
.contact-form .custom-checkbox > input:checked ~ .checkmark,
.alba-form .checkbox-container > input:checked ~ .checkmark,
.alba-form .custom-checkbox > input:checked ~ .checkmark {
    background: var(--cuw-c-primary) !important;
    border-color: var(--cuw-c-primary);
}
.contact-form .checkbox-container .checkmark::after,
.contact-form .custom-checkbox .checkmark::after,
.alba-form .checkbox-container .checkmark::after,
.alba-form .custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 100ms ease;
}
.contact-form .checkbox-container > input:checked ~ .checkmark::after,
.contact-form .custom-checkbox > input:checked ~ .checkmark::after,
.alba-form .checkbox-container > input:checked ~ .checkmark::after,
.alba-form .custom-checkbox > input:checked ~ .checkmark::after {
    opacity: 1;
}

/* Focus outline (keyboard accessibility — the input is visually hidden so the
   ring lives on the .checkmark sibling). */
.contact-form .checkbox-container > input:focus-visible ~ .checkmark,
.contact-form .custom-checkbox > input:focus-visible ~ .checkmark,
.alba-form .checkbox-container > input:focus-visible ~ .checkmark,
.alba-form .custom-checkbox > input:focus-visible ~ .checkmark {
    box-shadow: 0 0 0 3px var(--cuw-c-primary-15);
}

.contact-form .checkbox-text,
.contact-form .label-text,
.alba-form .checkbox-text,
.alba-form .label-text {
    flex: 1;
    color: var(--cuw-c-text);
}


/* 9. Phone country-code picker (.erx-phone-field*) -------------------------- */

/* Exact match to theme_erx careers-apply phone field design. */
.contact-form .erx-phone-field,
.alba-form .erx-phone-field {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Match the height / look of the other inputs so the field is consistent. */
    min-height: var(--cuw-field-h);
    border: var(--cuw-bw) solid var(--cuw-c-border);
    border-radius: var(--cuw-radius);
    background: var(--cuw-c-bg);
    padding: 0 12px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.contact-form .erx-phone-field:focus-within,
.alba-form .erx-phone-field:focus-within {
    background-color: #F2F2F2;
    border-color: #F2F2F2;
}
.contact-form .erx-phone-field__trigger,
.alba-form .erx-phone-field__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F2F2F2;
    border: none;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.contact-form .erx-phone-field__trigger:focus,
.alba-form .erx-phone-field__trigger:focus {
    outline: none;
    box-shadow: none;
}
.contact-form .erx-phone-field__trigger:hover,
.alba-form .erx-phone-field__trigger:hover {
    background: #c5c5c5;
}
.contact-form .erx-phone-field__trigger:has(~ input:focus),
.alba-form .erx-phone-field__trigger:has(~ input:focus) {
    background-color: #E8E8E8;
}
.contact-form .erx-phone-field__flag-img,
.alba-form .erx-phone-field__flag-img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.contact-form .erx-phone-field__caret,
.alba-form .erx-phone-field__caret {
    flex-shrink: 0;
}
.contact-form .erx-phone-field__dial,
.alba-form .erx-phone-field__dial {
    font-size: 14px;
    font-weight: 600;
    color: #6E6E6E;
    flex-shrink: 0;
    white-space: nowrap;
}
.contact-form .erx-phone-field__input,
.alba-form .erx-phone-field__input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    /* The input also carries .s_website_form_input, which sets min-height:
       var(--cuw-field-h). Inside the flex row that would force the whole phone
       field taller than the other inputs, so neutralise it here. */
    min-height: 0 !important;
    height: auto !important;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    outline: none;
}
.contact-form .erx-phone-field__input::placeholder,
.alba-form .erx-phone-field__input::placeholder {
    color: #6E6E6E;
}
.contact-form .erx-phone-field__input:focus,
.alba-form .erx-phone-field__input:focus {
    outline: none;
    box-shadow: none !important;
}

/* Country-code dropdown panel (exact theme_erx). */
.contact-form .erx-phone-dropdown,
.alba-form .erx-phone-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 28px;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dbdbdb;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    width: 100%;
    max-width: 280px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.contact-form .erx-phone-dropdown.d-none,
.alba-form .erx-phone-dropdown.d-none {
    display: none !important;
}
.contact-form .erx-phone-dropdown__search,
.alba-form .erx-phone-dropdown__search {
    border: none !important;
    border-bottom: 1px solid #dbdbdb !important;
    border-radius: 0 !important;
    font-size: 14px;
    padding: 10px 14px;
    flex-shrink: 0;
    box-shadow: none !important;
}
.contact-form .erx-phone-dropdown__search:focus,
.alba-form .erx-phone-dropdown__search:focus {
    outline: none;
}
.contact-form .erx-phone-dropdown__list,
.alba-form .erx-phone-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}
.contact-form .erx-phone-dropdown__item,
.alba-form .erx-phone-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
}
.contact-form .erx-phone-dropdown__item:hover,
.alba-form .erx-phone-dropdown__item:hover {
    background: #F5F5F5;
}
.contact-form .erx-phone-dropdown__flag,
.alba-form .erx-phone-dropdown__flag {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}
.contact-form .erx-phone-dropdown__name,
.alba-form .erx-phone-dropdown__name {
    flex: 1;
    font-size: 14px;
    color: #333;
}
.contact-form .erx-phone-dropdown__code,
.alba-form .erx-phone-dropdown__code {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}


/* 10. Crops grid (ARA) ------------------------------------------------------ */

.contact-form .cuw-crops-block {
    margin: var(--cuw-gap-stack) 0;
}
.contact-form .cuw-crops-block .cp-eco-label {
    margin-bottom: var(--cuw-sp-sm);
}
/* Column count is driven by column-width, not a fixed count, so the list
   fills as many columns as actually fit. A fixed `columns: N` collapsed to
   a single column inside the narrow embedded widget; with column-width the
   widget still gets 2+ columns at its real width.

   The `display: block` / `max-height: none` override is required: this list
   also carries .checklist-column-arrangement (shared with the dealer pages),
   whose `display: flex` + fixed max-height would otherwise win and disable
   CSS multi-column layout entirely. Scoped to .contact-form so the dealer
   pages keep their own flex-wrap arrangement. */
.contact-form .cuw-checkbox-list,
.contact-form .cuw-checkbox-list.checklist-column-arrangement {
    display: block;
    max-height: none;
    column-width: 180px;
    column-gap: var(--cuw-sp-md);
    margin: 0;
    padding: 0;
}
/* display:flex (block-level), not inline-flex: each crop must occupy a full
   column row so the list fills each column cleanly top-to-bottom and stays
   alphabetical down the column, as requested. */
.contact-form .cuw-checkbox-list .checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--cuw-sp-xs);
    padding: 1px 0;
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    break-inside: avoid;
}
.contact-form .cuw-checkbox-list .checkbox-text {
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
}
.contact-form .cuw-checkbox-list .checkmark {
    margin-top: 0;
    flex-shrink: 0;
}


/* 11. ALBA step navigation -------------------------------------------------- */

.alba-form .cuw-alba-step--hidden {
    display: none !important;
}
.alba-form .cuw-alba-step-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--cuw-sp-md);
    margin-top: var(--cuw-sp-xl);
}


/* 12. Submit button + disclaimer -------------------------------------------- */

.contact-form .form-submit,
.contact-form .s_website_form_submit,
.contact-form .form-actions,
.alba-form .form-submit,
.alba-form .s_website_form_submit,
.alba-form .form-actions {
    margin-top: var(--cuw-sp-xl);
    display: flex;
    justify-content: flex-end;
}

.contact-form button[type="submit"],
.contact-form .btn-submit,
.contact-form a.s_website_form_send,
.contact-form .s_website_form_send,
.alba-form button[type="submit"],
.alba-form .btn-submit,
.alba-form a.s_website_form_send,
.alba-form .s_website_form_send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cuw-field-h);
    padding: 0 var(--cuw-sp-lg);
    border: none;
    border-radius: var(--cuw-radius);
    background: var(--cuw-c-blue);
    color: var(--cuw-c-bg);
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-input);
    line-height: var(--cuw-lh-input);
    font-weight: var(--cuw-fw-semibold);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 140ms ease;
    text-decoration: none;
}
.contact-form button[type="submit"]:hover,
.contact-form .btn-submit:hover,
.contact-form a.s_website_form_send:hover,
.contact-form .s_website_form_send:hover,
.alba-form button[type="submit"]:hover,
.alba-form .btn-submit:hover,
.alba-form a.s_website_form_send:hover,
.alba-form .s_website_form_send:hover {
    background: var(--cuw-c-primary);
    color: var(--cuw-c-bg);
}
.contact-form button[type="submit"]:focus-visible,
.contact-form a.s_website_form_send:focus-visible,
.alba-form button[type="submit"]:focus-visible,
.alba-form a.s_website_form_send:focus-visible {
    outline: 2px solid var(--cuw-c-primary);
    outline-offset: 2px;
}

.contact-form .disclaimer,
.contact-form .cuw-consent-intro,
.contact-form .cuw-consent-note,
.alba-form .disclaimer,
.alba-form .cuw-consent-intro,
.alba-form .cuw-consent-note {
    margin: var(--cuw-sp-sm) 0;
    font-family: var(--cuw-ff);
    font-size: var(--cuw-fs-helper);
    line-height: var(--cuw-lh-helper);
    color: var(--cuw-c-text-muted);
}


/* 13. Responsive ------------------------------------------------------------ */

@media (max-width: 768px) {
    .contact-form,
    .alba-form {
        --cuw-field-h: 52px;
        --cuw-field-pad-y: 14px;
        --cuw-fs-input: 16px;
        --cuw-lh-input: 20px;
    }
}

@media (max-width: 480px) {
    /* Only drop to a single column when even two 130px columns can't fit. */
    .contact-form .cuw-checkbox-list,
    .contact-form .cuw-checkbox-list.checklist-column-arrangement {
        column-width: 130px;
    }
    .contact-form .form-actions,
    .alba-form .form-actions {
        flex-direction: column;
    }
    .contact-form .form-actions > *,
    .alba-form .form-actions > * {
        width: 100%;
    }
}


/* 14. Editor-mode safeguards ----------------------------------------------- */

/* When the website builder is open, force conditional fields to show so admins
   can edit them. The runtime show/hide logic is skipped in editor mode by JS
   but we belt-and-braces here too. */
body.editor_enable .contact-form [data-cuw-condition],
body.editor_enable .contact-form [data-cuw-visibility-rules],
body.editor_enable .contact-form .cuw-alba-step--hidden,
body.editor_enable .alba-form [data-cuw-condition],
body.editor_enable .alba-form [data-cuw-visibility-rules],
body.editor_enable .alba-form .cuw-alba-step--hidden {
    display: block !important;
}



/* ------------ global form element ------------- */

/* radio */
.form-check-radio {
    padding: 10px 10px 10px 36px;
    position: relative;
    overflow: hidden;
}
.form-check-radio input {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}
.form-check-radio label {
    position: relative;
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
}
.form-check-radio label::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--black) 40%, transparent);
    background-color: color-mix(in srgb, var(--black) 5%, transparent);
    top: 50%;
    left: -26px;
    transform: translateY(-50%);
    z-index: 0;
}
.form-check-radio label::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    top: 50%;
    left: -21px;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
}
.form-check-radio input:checked + label::after {
    border-color: var(--primary);
    background: var(--primary);
}
.form-check-radio input:checked + label::before {
    opacity: 1;
}
.form-check-radio:hover label::after {
    border-color: var(--primary);
    outline: 8px solid #edf8f0;
}
.form-check-radio input:active + label::after, .form-check-radio input.active + label::after {
    border-color: var(--primary);
}
.form-check-radio:focus-within {
    outline: 2px solid var(--primary);
    border-radius: 4px;
}
.form-check-radio:has(input:focus-visible):hover label::after {
    outline-color: #e5f6ea;
}
.form-check-radio:has(input:disabled) {
    pointer-events: none;
}
.form-check-radio:has(input:disabled) label::after {
    border: 1px solid color-mix(in srgb, var(--black) 40%, transparent);
    background-color: color-mix(in srgb, var(--black) 10%, transparent);
}
.form-check-radio:has(input:disabled) input:checked + label::before {
    background: color-mix(in srgb, var(--black) 60%, transparent);
}

/* input */
.form-control:hover {
    border-color: #e5f6ea !important;
    background-color: #edf8f0 !important;
}
.form-control:focus {
    border-color: var(--primary) !important;
    background-color: #e5f6ea !important;
}
.form-control.is-invalid, .form-control.is-invalid:hover {
    border-color: #F04438 !important;
    background-color: #FEE4E2 !important;
}
.form-control:disabled {
    pointer-events: none;
    color: color-mix(in srgb, var(--black) 60%, transparent) !important;
    border-color: color-mix(in srgb, var(--black) 15%, transparent) !important;
    background-color: color-mix(in srgb, var(--black) 5%, transparent) !important;
}

/* checkbox */
.form-check-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding: 10px;
    overflow: hidden;
}
.form-check-checkbox label {
    position: relative;
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
}
.form-check-checkbox input {
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--black) 40%, transparent);
    background-color: color-mix(in srgb, var(--black) 5%, transparent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
}
.form-check-checkbox input::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #edf8f0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.form-check-checkbox:hover input {
    border-color: var(--primary);
    background-color: var(--white);
}
.form-check-checkbox:hover input::before {
    opacity: 1;
}
.form-check-radio input:active, .form-check-radio input.active {
    border-color: var(--primary);
}
.form-check-checkbox:focus-within {
    border-radius: 4px;
    outline: 2px solid var(--primary);
}
.form-check-checkbox input:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.form-check-checkbox input:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M0.5 3.875L3.125 6.5L9.125 0.5' stroke='%230D2743' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-checkbox:has(input:disabled) {
    pointer-events: none;
}
.form-check-checkbox:has(input:disabled) input {
    border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
    background-color: color-mix(in srgb, var(--black) 5%, transparent);
}
.form-check-checkbox:has(input:disabled) input::after {
    opacity: 0.3;
}

/* ─────────────────────────────────────────────────────────────────────────
   Apply the designer's radio / checkbox visual design to fields ADDED VIA
   THE WEBSITE EDITOR. Odoo's editor generates radio/checkbox fields with its
   own markup:
       <div class="radio|checkbox col-12">
         <div class="form-check">
           <input type="radio|checkbox" class="s_website_form_input form-check-input"/>
           <label class="form-check-label s_website_form_check_label">…</label>
         </div>
       </div>
   The rules below restyle that native .form-check-input to match the
   designer's .form-check-radio / .form-check-checkbox look, scoped to our
   two contact forms so we never touch unrelated website forms.
   ───────────────────────────────────────────────────────────────────────── */
.contact-form .s_website_form_field .form-check,
.alba-form .s_website_form_field .form-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 4px;
    min-height: auto;
    margin: 0;
}
.contact-form .s_website_form_field .form-check .form-check-label,
.alba-form .s_website_form_field .form-check .form-check-label {
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}
/* Shared input box reset (radio + checkbox) */
.contact-form .s_website_form_field .form-check-input,
.alba-form .s_website_form_field .form-check-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, var(--black) 40%, transparent);
    background-color: color-mix(in srgb, var(--black) 5%, transparent);
    cursor: pointer;
    float: none;
}
.contact-form .s_website_form_field .form-check-input:hover,
.alba-form .s_website_form_field .form-check-input:hover {
    border-color: var(--primary);
    background-color: var(--white);
}
.contact-form .s_website_form_field .form-check-input:focus,
.alba-form .s_website_form_field .form-check-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    box-shadow: none;
}
/* Radio variant */
.contact-form .s_website_form_field .form-check-input[type="radio"],
.alba-form .s_website_form_field .form-check-input[type="radio"] {
    border-radius: 50%;
}
.contact-form .s_website_form_field .form-check-input[type="radio"]:checked,
.alba-form .s_website_form_field .form-check-input[type="radio"]:checked {
    border-color: var(--primary);
    background: var(--primary);
}
.contact-form .s_website_form_field .form-check-input[type="radio"]:checked::after,
.alba-form .s_website_form_field .form-check-input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Checkbox variant */
.contact-form .s_website_form_field .form-check-input[type="checkbox"],
.alba-form .s_website_form_field .form-check-input[type="checkbox"] {
    border-radius: 4px;
}
.contact-form .s_website_form_field .form-check-input[type="checkbox"]:checked,
.alba-form .s_website_form_field .form-check-input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.contact-form .s_website_form_field .form-check-input[type="checkbox"]:checked::after,
.alba-form .s_website_form_field .form-check-input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M0.5 3.875L3.125 6.5L9.125 0.5' stroke='%230D2743' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-form .s_website_form_field:has(.form-check-input:disabled),
.alba-form .s_website_form_field:has(.form-check-input:disabled) {
    pointer-events: none;
}

/* contact form buttons / alba & ecr */
:root {
    --ecr-primary4d: #4dc270;
    --ecr-secondary21: #212529;
    --ecr-hover0d: #0D2743;
    --alba-primaryca: #caf700;
    --alba-secondary0d: #0d0d0d;
    --alba-hovere7: #e7e7e7;
}

.contact-form .s_website_form_submit > .btn,
.alba-form .s_website_form_submit > .btn {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 200rem !important;
    white-space: nowrap;
    transition: all 0.3s ease;
} 
.contact-form .btn.btn-lg,
.alba-form .btn.btn-lg {
    padding-block: 1.2rem !important;
    padding-inline: 2rem !important;
    font-size: 1.25rem !important;
}
.contact-form .btn.btn-sm,
.alba-form .btn.btn-sm {
    padding-block: 0.75rem !important;
    padding-inline: 1.5rem !important;
    font-size: 0.875rem !important;
}

.ecr-btn-primary {
    border-color: var(--ecr-primary4d) !important;
    background: var(--ecr-primary4d) !important;
    color: var(--ecr-secondary21) !important;
}
.ecr-btn-primary:hover {
    border-color: var(--ecr-hover0d) !important;
    background: var(--ecr-hover0d) !important;
    color: var(--ecr-primary4d) !important;
}

.alba-btn-primary {
    border-color: var(--alba-secondary0d) !important;
    background: var(--alba-secondary0d) !important;
    color: var(--alba-primaryca) !important;
}
.alba-btn-primary:hover {
    border-color: #333333 !important;
    background: #333333 !important;   /* a bit lighter black */
    color: var(--alba-primaryca) !important;
}

@media (max-width: 991px) {
    .contact-form .s_website_form_submit > .btn, .alba-form .s_website_form_submit > .btn {
        font-size: 16px !important;
        line-height: 20px !important;
    }
}
@media (max-width: 575px) {
    .contact-form .s_website_form_submit > .btn, .alba-form .s_website_form_submit > .btn {
        font-size: 14px !important;
        line-height: 18px !important;
        white-space: wrap;
        padding: 12px 18px !important;
    }
    .contact-form .btn.btn-lg, .alba-form .btn.btn-lg {
        padding: 14px 20px !important;
    }
    .contact-form .btn.btn-sm, .alba-form .btn.btn-sm {
        padding: 10px 16px !important;
    }
}

.contact-form .cuw-consent-note > .btn-link,
.alba-form .cuw-cond-shown .btn-link {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit !important;
}
.contact-form .cuw-consent-note > .btn-link:hover,
.alba-form .cuw-cond-shown .btn-link:hover {
    color: black !important;
}
.contact-form .cuw-consent-note > .btn-link::after,
.alba-form .cuw-cond-shown .btn-link::after {
    display: none;
}
.alba-form .cuw-cond-shown .btn-link::before {
    background: var(--alba-primaryca);
}

.alba-form .custom-checkbox:hover .checkmark {
    border-color: var(--black) !important;
}
.alba-form .custom-checkbox input:checked + .checkmark {
    border-color: var(--black) !important;
    background: var(--black) !important;
}
.alba-form .custom-checkbox .checkmark::after {
    border-color: var(--alba-primaryca) !important;
}
/* Editor-added text fields use Odoo's .form-control class, which the global
   designer rules tint GREEN on hover/focus. Inside our contact forms every
   field must share the SAME neutral (gray) hover/focus as the hand-built
   fields, so override the green here with the theme tokens. Scoped to the two
   contact forms + marked !important to beat the global `.form-control:focus`
   !important rule above. */
.contact-form .s_website_form_field .form-control:hover,
.alba-form .s_website_form_field .form-control:hover,
.contact-form .s_website_form_field .form-control:focus,
.contact-form .s_website_form_field .form-control:focus-visible,
.alba-form .s_website_form_field .form-control:focus,
.alba-form .s_website_form_field .form-control:focus-visible {
    background: var(--cuw-c-bg-soft) !important;
    border-color: var(--cuw-c-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Edit-mode only: give the form section a clickable padded band + dashed
   outline so the admin can select the whole section and use the Form
   Background colour option (see cuw_form_bg_option.js). Published/embedded
   view is untouched (full-bleed). */
body.editor_enable .cuw-ecorobotix-page,
body.editor_enable .cuw-alba-page {
    padding: 24px !important;
    outline: 1px dashed color-mix(in srgb, var(--black) 25%, transparent);
    outline-offset: -12px;
}

/* FOUC guard: until contact_pages.js has upgraded the native <select>s into
   the custom .cuw-dd dropdowns (it adds `cuw-ready` to <html>), keep the
   identically-styled native selects NON-interactive. With the script now loaded
   directly in the embedded frame's <head> (standalone, not via the heavy
   web.assets_frontend bundle), `cuw-ready` is set within ~100ms, so this only
   covers a brief window and prevents the native option list from popping before
   the custom panel exists. */
html:not(.cuw-ready) .contact-form .select-wrapper select.s_website_form_input,
html:not(.cuw-ready) .alba-form .select-wrapper select.s_website_form_input {
    pointer-events: none;
}

/* ── ALBA palette: lime / black / gray only — no green ───────────────────────
   Client: fields hover gray (no green); checkbox black on hover, then black
   fill with a lime tick. (Colours from --alba-* tokens above; fine-tune vs
   Figma / the turf-site menu hover if needed.) */
.alba-form .s_website_form_input:hover:not(:focus):not([disabled]),
.alba-form .cuw-dd__trigger:hover:not([disabled]) {
    background: var(--cuw-c-bg-soft) !important;
    border-color: var(--cuw-c-border);            /* gray, not green */
}
.alba-form .erx-phone-field__trigger:hover {
    background: var(--alba-hovere7);
}
/* Checkbox: black on hover, fill black with a lime tick when checked. */
.alba-form .checkbox-container:hover .checkmark,
.alba-form .custom-checkbox:hover .checkmark {
    border-color: var(--alba-secondary0d);
}
.alba-form .checkbox-container > input:checked ~ .checkmark,
.alba-form .custom-checkbox > input:checked ~ .checkmark {
    background: var(--alba-secondary0d);
    border-color: var(--alba-secondary0d);
}
.alba-form .checkbox-container .checkmark::after,
.alba-form .custom-checkbox .checkmark::after {
    border-color: var(--alba-primaryca);   /* lime tick */
}
.alba-form .erx-phone-field:hover {
    background: var(--cuw-c-bg-soft) !important;
    border-color: var(--cuw-c-border) !important;
}
.alba-form .erx-phone-field:focus-within {
    background-color: #F4F4F4 !important;
    border-color: var(--alba-primaryca) !important;
}
.alba-form .erx-phone-field:focus-within .erx-phone-field__trigger {
    background-color: #d4d4d4 !important;
}
.alba-form .cuw-dd__option:hover, .alba-form .cuw-dd__option--selected {
    background: var(--cuw-c-bg-soft);
    border-color: var(--cuw-c-border);
}
.alba-form .erx-phone-field .erx-phone-field__input:hover, .alba-form .erx-phone-field .erx-phone-field__input {
    background: transparent !important;
}
.alba-form .erx-phone-field .s_website_form_input:hover:not(:focus):not([disabled]), .alba-form .erx-phone-field .cuw-dd__trigger:hover:not([disabled]) {
    background: transparent !important;
}

.checklist-column-arrangement {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 150px;
}
.cuw-error .checklist-column-arrangement {
    max-height: 172px;
}
@media (max-width: 767px) {
    .checklist-column-arrangement {
        max-height: 210px;
    }
    .cuw-error .checklist-column-arrangement {
        max-height: 232px;
    }
}
@media (max-width: 575px) {
    .checklist-column-arrangement {
        max-height: 100%;
    }
}

.alba-page .disclaimer .btn-link {
     position: relative;
     z-index: 0;
     background-color: transparent !important;
}
.alba-page .disclaimer .btn-link::after {
     content: "" !important;
     position: absolute;
     width: 100%;
     height: 100%;
     transform: scaleY(0);
     background-color: #caf700;
     z-index: -1;
     transition: all 0.3s ease;
     display: block !important;
     transform-origin: bottom;
     bottom: 0;
}
.alba-page .disclaimer .btn-link:hover::after {
     transform: scaleY(1);
}