// 4-space tabs; comments in English for clean-code guidelines
// ========================================
// Variables
// ========================================
$color-dark-blue: var(--staple-colors--dark-blue-scale--main);
$color-accent: #DDF9AC;
$color-text: #263A4A;
$color-muted: #A4A9AA;
$color-border: #D1D5DB;
$color-error: #E83301;

$select-width: 394px;        // desktop target width for Choices
$textarea-height: 189px;


// ========================================
// Layout & overflow safeguards
// ========================================
.div-form {
    display: flex;
    flex-direction: column;
    min-width: 0;            // allow shrink inside flex parents
}

form,
.div-block-14 {
    max-width: 100%;
    display: flex;
}


// ========================================
// Inputs / Textareas (base, focus, validity)
// ========================================
.w-form .w-input,
.w-form .w-select,
.text-field,
.phone-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.text-field.w-input {
    // Focus states
    &:focus,
    &:focus-visible {
        border: 1px solid $color-text;  // dark focus border
        outline: none;
    }

    // Optional: live invalid (modern browsers). Prefer the .w-submitted block below for broad support.
    &:user-invalid {
        border-color: $color-error;
    }
}

// Textarea height + invalid
textarea.w-input,
textarea.w-select {
    height: $textarea-height;
}

.textarea.w-input:user-invalid {
    border-color: $color-error;
}

// Trigger errors only after a submit attempt (Webflow adds .w-submitted on the form)
.w-form.w-submitted {
    .text-field.w-input:invalid,
    .textarea.w-input:invalid,
    select.w-select:invalid {
        border-color: $color-error;
    }

    // Label next to an invalid field turns red
    .div-form:has(.text-field.w-input:invalid) .text-213,
    .div-form:has(.textarea.w-input:invalid) .text-213,
    .div-form:has(select.w-select:invalid) .text-213 {
        color: $color-error;
    }
}


// ========================================
// Checkbox (custom checkmark)
// ========================================
.w-checkbox-input--inputType-custom.w--redirected-checked {
    background-color: $color-dark-blue;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='%23DDF9AC' d='M5.3 10.3 2.7 7.7 1.3 9.1 5.3 13.1 13 5.4 11.6 4z'/></svg>");
    background-size: 12px 12px;         // slightly smaller for visual balance
    background-repeat: no-repeat;
    background-position: center center; // strict centering
}

// Checkbox label links
.checkbox-label.w-form-label a {
    color: #05142D;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}


// ========================================
// intl-tel-input (phone field)
// ========================================
.iti {
    width: 100% !important;            // override inline quirks
}

.iti .phone-input {
    width: 100% !important;
    color: $color-muted;

    &::placeholder {
        color: $color-muted;
        opacity: 1;                    // consistent intensity
    }
}

// Selected flag + arrow
.iti .iti__selected-flag {
    display: flex;
    flex-direction: row-reverse;       // arrow before flag
    align-items: center;
    gap: 6px;

    .iti__arrow {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #A2A1A0; // caret color
        margin: 0;

        &.iti__arrow--up {
            border-top: 0;
            border-bottom: 6px solid #A2A1A0; // flip arrow
        }
    }
}

.iti .iti__country-list {
    max-width: $select-width;
    font-family: "Suisse Int'l", sans-serif;
    font-size: 16px;

    .iti__country-name,
    .iti__dial-code {
        color: $color-muted;
    }
}


// ========================================
// Choices.js (select enhancement)
// Mobile-first: fluid width; lock to $select-width on larger screens
// ========================================

// Container sizing (fluid by default to avoid overflow on small screens)
.choices,
.choices[data-type="select-one"],
.choices__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

// Closed field (visual)
.choices .choices__inner {
    font-family: "Suisse Int'l", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: $color-text;

    border: 1px solid $color-border;
    border-radius: 8px;
    padding: 10px 36px 10px 12px;
    background-color: #fff;
    box-shadow: none;
}

// Placeholder
.choices__item--placeholder {
    color: $color-muted;
}

// Dropdown panel + items
.choices__list--dropdown,
.choices__list[aria-expanded] {
    border: 1px solid $color-border;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    font-family: "Suisse Int'l", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: $color-text;
}

// Hover/keyboard highlight
.choices {
    .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background-color: $color-text;
        color: #fff;
    }
}

// Remove native IE arrow (legacy fallback)
select.w-select {
    &::-ms-expand {
        display: none;
    }
}

// Lock select width on comfortable viewports only
@media (min-width: 400px) {
    .choices {
        width: $select-width !important;
        min-width: $select-width !important;
        max-width: $select-width !important;
    }

    .choices__list--dropdown,
    .choices__list[aria-expanded] {
        width: $select-width !important;
        min-width: $select-width !important;
        max-width: $select-width !important;
    }
}


// ========================================
// Section spacing (as in your original rule)
// ========================================
@media (max-width: 1230px) and (min-width: 992px) {
    .section-contact {
        padding: 80px 40px;
    }
}
@media (max-width: 640px) {
    .submit-button {
        padding: 12px 10px;
    }
}