/* ==========================================================
   form.css — Contact form
   Labels, inputs, textarea, select, checkbox,
   error and success messages.
   ========================================================== */

/* --------------------------------------------------------
   Form wrapper
   -------------------------------------------------------- */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* --------------------------------------------------------
   Field group (label + input + error message)
   -------------------------------------------------------- */
.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* --------------------------------------------------------
   Labels
   -------------------------------------------------------- */
.form__label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.form__label--required::after {
    content: ' *';
    color: var(--color-error);
}

/* --------------------------------------------------------
   Inputs, Textarea, Select
   -------------------------------------------------------- */
.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: var(--input-padding);
    font-size: var(--font-size-body);
    background-color: var(--color-white);
    border: var(--input-border-width) solid var(--color-border);
    border-radius: var(--input-radius);
    transition: border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: 2px solid transparent; /* Visible in Windows High Contrast Mode */
}

.form__textarea {
    min-height: 8rem;
}

.form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* --------------------------------------------------------
   Error state
   -------------------------------------------------------- */
.form__input--error,
.form__textarea--error,
.form__select--error {
    border-color: var(--color-error);
}

.form__input--error:focus,
.form__textarea--error:focus,
.form__select--error:focus {
    box-shadow: 0 0 0 3px var(--color-error-light);
}

.form__error {
    font-size: var(--font-size-small);
    color: var(--color-error);
}

/* --------------------------------------------------------
   Checkbox group (privacy consent)
   -------------------------------------------------------- */
.form__checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.form__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form__checkbox-label {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.form__checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------
   Character counter
   -------------------------------------------------------- */
.form__char-count {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    text-align: right;
}

.form__char-count--limit {
    color: var(--color-error);
}

/* --------------------------------------------------------
   Success message
   -------------------------------------------------------- */
.form__success {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-success-light);
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--card-radius);
    text-align: center;
}

/* --------------------------------------------------------
   Global error message (server error)
   -------------------------------------------------------- */
.form__global-error {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-error-light);
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--card-radius);
    text-align: center;
}

/* --------------------------------------------------------
   Honeypot — visually hidden, visible to bots
   -------------------------------------------------------- */
.form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}