/* Movement To Work — form controls.
   Shared base styles consumed by MtwInput / MtwTextarea / MtwSelect / MtwCheckbox / MtwRadio.
   Loaded globally; component scoped CSS layers structural tweaks on top. */

/* Field wrapper — label + control + helper/error */
.mtw-field {
    display: block;
    margin-bottom: 24px;
}

.mtw-field__label {
    display: block;
    font-family: var(--mtw-font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--mtw-ink);
    margin-bottom: 8px;
}

.mtw-field__required {
    color: var(--mtw-magenta);
    margin-left: 2px;
}

.mtw-field__helper {
    margin-top: 8px;
    font-family: var(--mtw-font-display);
    font-size: 14px;
    color: #777;
}

.mtw-field__error {
    margin-top: 8px;
    font-family: var(--mtw-font-display);
    font-weight: 500;
    font-size: 14px;
    color: var(--mtw-magenta);
}

/* Shared input base — text-style controls (input, textarea, select) */
.mtw-input-base {
    display: block;
    width: 100%;
    padding: 14px 18px;
    font-family: var(--mtw-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--mtw-ink);
    background: var(--mtw-white);
    border: 2px solid #D4D4D4;
    border-radius: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    outline: none;
}

.mtw-input-base::placeholder {
    color: #999;
}

.mtw-input-base:hover {
    border-color: #B0B0B0;
}

.mtw-input-base:focus,
.mtw-input-base:focus-visible {
    border-color: var(--mtw-ink);
    box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.08);
}

.mtw-input-base:disabled {
    background: var(--mtw-grey-light);
    color: #999;
    cursor: not-allowed;
}

/* Error state — applied via .mtw-field--error wrapper */
.mtw-field--error .mtw-input-base {
    border-color: var(--mtw-magenta);
}
.mtw-field--error .mtw-input-base:focus {
    box-shadow: 0 0 0 3px rgba(227, 16, 139, 0.15);
}

/* Textarea-specific */
.mtw-input-base--textarea {
    min-height: 120px;
    resize: vertical;
    border-radius: 16px;
}

/* Select-specific — custom dropdown chevron */
.mtw-input-base--select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px;
    padding-right: 48px;
    cursor: pointer;
}

/* Checkbox + Radio shared — custom-styled boxes */
.mtw-tick {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-family: var(--mtw-font-display);
    font-size: 16px;
    color: var(--mtw-ink);
    line-height: 1.5;
}

.mtw-tick input {
    /* hide native control but keep it accessible */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mtw-tick__box {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 2px solid #D4D4D4;
    background: var(--mtw-white);
    transition: border-color 0.2s ease, background 0.2s ease;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtw-tick--checkbox .mtw-tick__box {
    border-radius: 6px;
}

.mtw-tick--radio .mtw-tick__box {
    border-radius: 50%;
}

.mtw-tick:hover .mtw-tick__box {
    border-color: var(--mtw-ink);
}

.mtw-tick input:focus-visible + .mtw-tick__box {
    box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.15);
}

/* Checked states */
.mtw-tick--checkbox input:checked + .mtw-tick__box {
    background: var(--mtw-ink);
    border-color: var(--mtw-ink);
}

.mtw-tick--checkbox input:checked + .mtw-tick__box::after {
    content: "";
    width: 8px;
    height: 14px;
    border-right: 3px solid var(--mtw-white);
    border-bottom: 3px solid var(--mtw-white);
    transform: rotate(45deg) translate(-1px, -1px);
}

.mtw-tick--radio input:checked + .mtw-tick__box::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mtw-ink);
}

.mtw-tick input:disabled + .mtw-tick__box {
    background: var(--mtw-grey-light);
    cursor: not-allowed;
}