.form_button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: fit-content;
}

.form_input,
.form_textarea,
.form_select {
    border-radius: 8px;
    padding: 0.2rem;
    padding-left: 1.1rem;
}

.form_input:focus-visible,
.form_textarea:focus-visible,
.form_select:focus-visible {
    outline: 2px solid var(--C-b-2);
}


/* Input */

.form_input_2 {
    height: 40px;
    border: var(--border-1);
    border-radius: var(--border-r-1);
    font-size: 15px;
    outline: none;
    padding-left: 10px;
}

/* Field-level error border — Google-style red ring around the input.
 * The .error_border class is added by <InputField> when an error prop is
 * passed. Uses the semantic danger token so light/dark themes + future
 * brand swaps stay coherent. */
.error_border{
    border: 1px solid var(--color-danger, var(--C-c-r)) !important;
    outline-color: var(--color-danger, var(--C-c-r)) !important;
}

.form_input_err_msg {
    color: var(--color-danger, var(--C-c-r));
    font-size: 12.5px;
    line-height: 1.35;
    padding: 4px 4px 0 6px;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.form_input_err_msg::before {
    content: 'error';
    font-family: 'Material Symbols Rounded';
    font-size: 14px;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 1px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

/* ── Custom checkbox (forms/index.tsx Checkbox component) ───────────
 * Native input is visually hidden but still receives keyboard focus
 * + carries the form value; the visible square is the .ff_checkbox_box
 * span styled below. Tick color is forced via SVG `currentColor` so we
 * dodge the browser's `accent-color`-driven tick contrast guesswork
 * (which renders black on orange in some browsers, breaking on light). */
.ff_checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.ff_checkbox_center { align-items: center; }
.ff_checkbox_disabled { opacity: 0.55; cursor: not-allowed; }

.ff_checkbox_native {
    /* Visually hidden, accessibility-preserved. Native widget still
       receives keyboard focus, submits in <form> data, announces to
       screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ff_checkbox_box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;     /* aligns to first line of multi-line label */
    border: 1.5px solid var(--C-b-2);
    border-radius: 4px;
    background: transparent;
    color: transparent;  /* tick is invisible until checked */
    transition: background 120ms ease, border-color 120ms ease, color 60ms ease;
}
.ff_checkbox_center .ff_checkbox_box { margin-top: 0; }

.ff_checkbox_native:checked + .ff_checkbox_box {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #ffffff;
}
.ff_checkbox_native:focus-visible + .ff_checkbox_box {
    outline: 2px solid var(--brand-300);
    outline-offset: 2px;
}
.ff_checkbox:hover .ff_checkbox_box {
    border-color: var(--brand-400);
}
.ff_checkbox_native:checked:hover + .ff_checkbox_box {
    background: var(--brand-600);
    border-color: var(--brand-600);
}
.ff_checkbox_native:disabled + .ff_checkbox_box {
    background: var(--C-bg-3);
    border-color: var(--C-b-1);
}

.ff_checkbox_label {
    color: var(--C-c-1);
    font-size: inherit;
}
.ff_checkbox_disabled .ff_checkbox_label { color: var(--C-c-3); }

/* Reusable spinner rotation. Pair with the material-symbols
 * `progress_activity` glyph, or wrap around any element you want to
 * spin. GPU-composited transform: cheap; runs at 60fps. */
@keyframes ff-spin {
    to { transform: rotate(360deg); }
}
.ff-spin {
    display: inline-flex;
    animation: ff-spin 900ms linear infinite;
    transform-origin: center;
}

/* Auth alert dialog — small pop-in so the modal doesn't feel jarring. */
@keyframes auth-alert-pop {
    0%   { transform: scale(0.96) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Auth-toast slide + progress-bar countdown. The progress bar uses
   `transform: scaleX(...)` so it's GPU-composited (smooth). */
@keyframes auth-toast-in {
    0%   { transform: translateX(110%); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}
@keyframes auth-toast-out {
    0%   { transform: translateX(0);    opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
}
@keyframes auth-toast-progress {
    0%   { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}






















.select-component {
    position: relative;
}

.select {
    display: flex;
    padding: 8px 16px;
    border: 1px solid #000;
    width: 280px;
    cursor: pointer;
    justify-content: space-between;
}

.select span {
    font-size: 14px;
}

.options {
    position: absolute;
    width: 280px;
}

.options .option {
    background: #fff;
    padding: 8px 16px;
    border: 1px solid #000;
    width: 100%;
    border-bottom: none;
    font-size: 14px;
    cursor: pointer;
}

.options .option:last-child {
    border-bottom: 1px solid #000;
}

.options .option:first-child {
    border-top: none;
}

.tab_focussed{
    outline: 2px solid var(--C-b-2);
    border-radius: 8px;
}

.form-group > div:not(:last-child) {
    margin-right: 16px;
}





.buttons-group > div:not(:last-child) {
    margin-right: 12px;
}





















.form_input {
    height: 36px;
}








.form_textarea {
    min-height: 80px;
    resize: vertical;
}

.form_select {
    height: 36px;
}

.form_checkbox,
.form_radio {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 8px;
}