/* WIDGETS */
/* input[type="search"] skips the inputs Choices.js owns — it builds its search box as
   input[type="search"].choices__input, which must stay borderless inside .choices__inner
   (see choices-override.css). The guard is wrapped in :where() so it contributes zero
   specificity: the whole :is() list stays at (0,1,1) and the .tt-valid/.tt-invalid rules
   further down still win on source order. Mirrored in form-widgets.css for input groups. */
.tt-form :is(input[type="text"], input[type="tel"], input[type="email"],
             input[type="number"], input[type="date"], input[type="time"],
             input[type="password"], input[type="file"],
             input[type="search"]:where(:not(.choices__input)), select),
.tt-form-input {
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    max-width: 100%;
    width: 100%;
    padding: var(--form-input-padding);
    color: inherit;
    line-height: normal;
    height: var(--form-input-height);
    box-sizing: border-box;
    font-size: var(--form-input-font-size);
}

.tt-form textarea {
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    max-width: 100%;
    width: 100%;
    padding: var(--form-input-padding);
    color: inherit;
    line-height: normal;
    box-sizing: border-box;
    font-size: var(--form-input-font-size);
    resize: vertical;
}

/* Standalone .tt-form-input outside a scoping class needs an explicit color
   since form controls opt out of color inheritance by default */
.tt-form-input {
    color: var(--paragraph-color);
}

/* PLACEHOLDER */
.tt-form input::placeholder,
.tt-form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* AUTOFILL — browsers override font-size via :-webkit-autofill; restore it explicitly */
.tt-form :is(input[type="text"], input[type="email"], input[type="password"],
             input[type="tel"], input[type="number"]):-webkit-autofill,
.tt-form-input:-webkit-autofill {
    font-size: var(--form-input-font-size);
}

/* RADIO WIDGET */
.radio-group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    align-items: center;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

/* FILE WIDGET */
.tt-form input[type="file"] {
    cursor: pointer;
}

/* Hide the default file upload button (optional) */
.tt-form input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

/* Firefox */
.tt-form input[type="file"]::file-selector-button {
    visibility: hidden;
}

.tt-form input[type="checkbox"],
.tt-form-input-checkbox {
    appearance: none;
    position: relative;
    width: var(--step-0);
    height: var(--step-0);
    color: inherit;
    border: var(--border-thin) solid currentColor;
    line-height: 1;
    background: var(--bg-color);
    margin-right: var(--space-3xs);
}

.tt-form input, .tt-form select, .tt-form textarea {
    border-radius: var(--input-border-radius);
}

.tt-form input[type="checkbox"]::before,
.tt-form-input-checkbox::before {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    white-space: pre;
    content: " ";
}

.tt-form input[type="checkbox"]:checked::before,
.tt-form-input-checkbox:checked::before {
    content: "\2713";
    color: var(--primary-color);
    padding-top: 2px;
}

.tt-form input[type="checkbox"]:indeterminate::before,
.tt-form-input-checkbox:indeterminate::before {
    content: "–";
    color: var(--primary-color);
    padding-top: 2px;
}

/* FOCUS */
.tt-form input:focus, .tt-form-input:focus,
.tt-form select:focus, .tt-form-select:focus, .tt-form .tt-form-row select:focus,
.tt-form textarea:focus,
.tt-form-input-checkbox:focus {
    border-color: var(--primary-color);
}

/* Focus ring for the text-entry controls. Without one they fall back to the UA ring,
   outline-style: auto — a fixed browser blue that is off-brand in light theme and
   clashes with the orange primary in dark. (auto also can't follow border-radius,
   which is what makes it read as wrong inside an input group — see the FOCUS note in
   form-widgets.css.)

   Geometry: a negative outline-offset paints the band from (offset - width) to
   (offset), measured inward from the border edge — so the offset magnitude must be at
   least the width or the ring spills outside the control and onto its neighbour.
   Keeping them equal pins the ring to the outermost 2px of the box, growing inward.

   Checkboxes, radios and buttons deliberately stay on the UA ring: an inset edge is
   wrong for all three, and choosing their treatment is a design decision rather than
   a port of this one. */
.tt-form :is(input[type="text"], input[type="tel"], input[type="email"],
             input[type="number"], input[type="date"], input[type="time"],
             input[type="password"], select, textarea,
             input[type="search"]:where(:not(.choices__input))):focus,
.tt-form-input:focus,
.tt-form-select:focus {
    outline: var(--border-md) solid var(--primary-color);
    outline-offset: calc(var(--border-md) * -1);
}

/* DISABLED */
.tt-form input:disabled,
.tt-form select:disabled {
    border: var(--border-thin) solid var(--text-muted);
    appearance: none;
    background-color: var(--bg-muted);
    color: var(--text-color);
}

/* VALIDATION */
.tt-form input.tt-invalid,
.tt-form select.tt-invalid {
    border: var(--border-thin) solid var(--danger-color);
}

.tt-form input.tt-valid,
.tt-form select.tt-valid {
    border: var(--border-thin) solid var(--success-color);
}

.tt-form .tt-required span {
    color: var(--danger-color);
}

/* Standalone required-indicator star, for fields whose "required" state toggles live
   (e.g. with the personalia form's "invoicing only" checkbox) rather than being baked
   into label_attr at render time. It renders as a sibling after form_label()'s <label>
   rather than inside it, so without this wrapper it would drop to its own line — labels
   are width:100% by default (see LABEL rules above). */
.tt-form .tt-label-with-star {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
}

.tt-form .tt-label-with-star label,
.tt-form .tt-label-with-star .tt-label {
    width: auto;
}

.tt-form .tt-label-header label,
.tt-form .tt-label-header .tt-label,
.tt-label.tt-label-header {
    font-weight: bold;
}

.tt-form .tt-required-star {
    color: var(--danger-color);
}

/* BUTTONS */
.tt-form .tt-btn-primary {
    width: 100%;
}

/* FORM ERRORS */
.tt-form-error-list {
    list-style: none;
    margin: 0 0 0 var(--space-3xs);
    padding: 0;
    font-size: 0.875rem; /* slightly smaller text */
    color: var(--danger-color);
}

.tt-form-error {
    margin: 0;
    padding: 0;
}

/* FORM HELPER TEXT — same formatting as .tt-form-error-list, without the danger color */
.tt-form-helper {
    margin: 0 0 0 var(--space-3xs);
    padding: 0;
    font-size: 0.875rem; /* slightly smaller text */
    color: var(--text-muted);
}