/**
 * Simple Form — Frontend Styles
 *
 * All values use CSS custom properties (design tokens) set per-form.
 * Never hardcode colors, sizes, or spacing here.
 */

/* Container */
.sf-form-wrap {
    container-type: inline-size;
    container-name: sf-form;
    max-width: var(--sf-layout-max-width, 640px);
    padding: var(--sf-spacing-form-padding, 0);
    font-family: var(--sf-typography-font-family, inherit);
    font-size: var(--sf-typography-font-size, 16px);
    line-height: var(--sf-typography-line-height, 1.5);
    color: var(--sf-colors-text, #333);
}

/* Title & description */
.sf-form__title {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.25em;
    color: var(--sf-colors-text, #333);
}

.sf-form__description {
    color: var(--sf-colors-text-light, #666);
    margin-bottom: 1.5em;
}

/* Field grid */
.sf-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sf-spacing-field-gap, 20px) var(--sf-layout-column-gap, 16px);
}

@container sf-form (min-width: 500px) {
    .sf-form__fields {
        grid-template-columns: repeat(var(--sf-layout-columns, 2), 1fr);
    }
}

.sf-field--width-full  { grid-column: 1 / -1; }
.sf-field--width-half  { grid-column: span 1; }
.sf-field--width-third { grid-column: span 1; }

@container sf-form (max-width: 499px) {
    .sf-field--width-half,
    .sf-field--width-third {
        grid-column: 1 / -1;
    }
}

/* Labels */
.sf-field__label {
    display: block;
    font-size: var(--sf-typography-font-size-label, 14px);
    font-weight: var(--sf-typography-font-weight-label, 600);
    color: var(--sf-colors-text, #333);
    margin-bottom: var(--sf-spacing-label-gap, 6px);
}

.sf-field__required {
    color: var(--sf-colors-error, #dc3545);
}

/* Inputs */
.sf-field__input {
    display: block;
    width: 100%;
    border: var(--sf-borders-field-width, 1px) var(--sf-borders-field-style, solid) var(--sf-colors-border, #ccc);
    border-radius: var(--sf-borders-field-radius, 4px);
    padding: var(--sf-spacing-field-padding-y, 10px) var(--sf-spacing-field-padding-x, 12px);
    font-size: var(--sf-typography-font-size, 16px);
    font-family: inherit;
    color: var(--sf-colors-text, #333);
    background: var(--sf-colors-background-field, #fff);
    transition: border-color var(--sf-effects-transition, 0.2s ease), box-shadow var(--sf-effects-transition, 0.2s ease);
    box-sizing: border-box;
}

.sf-field__input::placeholder {
    color: var(--sf-colors-placeholder, #999);
}

.sf-field__input:focus {
    outline: none;
    border-color: var(--sf-colors-border-focus, #0066cc);
    box-shadow: var(--sf-effects-focus-shadow, 0 0 0 3px rgba(0, 102, 204, 0.25));
}

.sf-field__input:user-invalid {
    border-color: var(--sf-colors-error, #dc3545);
}

/* Textarea */
.sf-field__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Select */
.sf-field__select {
    appearance: auto;
}

/* Help text */
.sf-field__help {
    font-size: var(--sf-typography-font-size-help, 13px);
    color: var(--sf-colors-text-light, #666);
    margin-top: 4px;
    margin-bottom: 0;
}

/* Error messages */
.sf-field__error {
    font-size: var(--sf-typography-font-size-error, 13px);
    color: var(--sf-colors-error, #dc3545);
    margin-top: 4px;
    min-height: 0;
}

.sf-field__error:empty {
    display: none;
}

/* Options (checkbox/radio groups) */
.sf-field__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-field__option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--sf-typography-font-size, 16px);
}

.sf-field__option input[type="checkbox"],
.sf-field__option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
}

/* Consent checkbox */
.sf-field__consent {
    font-size: var(--sf-typography-font-size, 16px);
}

/* File input */
.sf-field__file {
    padding: var(--sf-spacing-field-padding-y, 10px);
}

/* Honeypot — hidden from real users */
.sf-hp {
    position: absolute;
    clip-path: inset(50%);
    overflow: hidden;
    width: 1px;
    height: 1px;
}

/* Submit area */
.sf-form__submit {
    margin-top: var(--sf-spacing-field-gap, 20px);
    text-align: var(--sf-button-alignment, left);
}

/* Button */
.sf-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sf-button-background, #0066cc);
    color: var(--sf-button-text-color, #fff);
    border: none;
    border-radius: var(--sf-borders-button-radius, 4px);
    padding: var(--sf-button-padding-y, 12px) var(--sf-button-padding-x, 24px);
    font-size: var(--sf-button-font-size, 16px);
    font-weight: var(--sf-button-font-weight, 600);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--sf-effects-transition, 0.2s ease);
    min-height: 44px;
}

.sf-button:hover {
    background: var(--sf-button-background-hover, #0052a3);
    color: var(--sf-button-text-color-hover, #fff);
}

.sf-button:focus-visible {
    outline: 2px solid var(--sf-colors-border-focus, #0066cc);
    outline-offset: 2px;
}

.sf-form-wrap[data-button-width="full"] .sf-button {
    width: 100%;
    justify-content: center;
}

/* Loading state */
.sf-button__loading {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: sf-spin 0.6s linear infinite;
}

.sf-form--loading .sf-button__loading {
    display: inline-block;
}

.sf-form--loading .sf-button__text {
    opacity: 0.7;
}

.sf-form--loading .sf-button {
    pointer-events: none;
}

@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

/* Success/error message */
.sf-form__message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--sf-borders-field-radius, 4px);
    display: none;
}

.sf-form__message--success {
    display: block;
    background: color-mix(in srgb, var(--sf-colors-success, #28a745) 10%, transparent);
    border: 1px solid var(--sf-colors-success, #28a745);
    color: var(--sf-colors-success, #28a745);
}

.sf-form__message--error {
    display: block;
    background: color-mix(in srgb, var(--sf-colors-error, #dc3545) 10%, transparent);
    border: 1px solid var(--sf-colors-error, #dc3545);
    color: var(--sf-colors-error, #dc3545);
}

/* Fieldset reset for checkbox/radio groups */
.sf-field fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.sf-field fieldset legend {
    padding: 0;
    margin-bottom: var(--sf-spacing-label-gap, 6px);
}

/* HTML element */
.sf-field__html {
    color: var(--sf-colors-text, #333);
}