/* 
 * Form Component Styles
 * Atelier Flint & Associates Architects Website
 * 
 * Comprehensive form styles with validation states, 
 * anti-bot protection, and accessibility features.
 */

/* ==========================================================================
   BASE FORM STYLES
   ========================================================================== */

.form {
    width: 100%;
    max-width: 600px;
}

.form__group {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.form__label {
    display: block;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--form-label-margin-bottom);
    font-size: var(--font-size-sm);
}

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

/* ==========================================================================
   INPUT STYLES
   ========================================================================== */

.form__input,
.form__textarea,
.form__select {
    width: 100%;
    min-height: var(--form-input-height);
    padding: var(--form-input-padding);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--color-text-muted);
}

/* Textarea specific styles */
.form__textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--line-height-relaxed);
}

/* Select specific styles */
.form__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

/* ==========================================================================
   INPUT GROUPS
   ========================================================================== */

.form__input-group {
    position: relative;
    display: flex;
}

.form__input-group .form__input {
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.form__input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    background-color: var(--color-quaternary);
    border: 2px solid var(--color-border);
    border-left: none;
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   FORM VALIDATION STATES
   ========================================================================== */

/* Success state */
.form__group--success .form__input,
.form__group--success .form__textarea,
.form__group--success .form__select {
    border-color: var(--color-success);
}

.form__group--success .form__input:focus,
.form__group--success .form__textarea:focus,
.form__group--success .form__select:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

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

.form__group--error .form__input:focus,
.form__group--error .form__textarea:focus,
.form__group--error .form__select:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Warning state */
.form__group--warning .form__input,
.form__group--warning .form__textarea,
.form__group--warning .form__select {
    border-color: var(--color-warning);
}

.form__group--warning .form__input:focus,
.form__group--warning .form__textarea:focus,
.form__group--warning .form__select:focus {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

/* ==========================================================================
   VALIDATION MESSAGES
   ========================================================================== */

.form__message {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.form__message--success {
    color: var(--color-success);
}

.form__message--error {
    color: var(--color-error);
}

.form__message--warning {
    color: var(--color-warning);
}

.form__message--info {
    color: var(--color-info);
}

/* ==========================================================================
   CHECKBOX AND RADIO STYLES
   ========================================================================== */

.form__checkbox,
.form__radio {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    margin-bottom: var(--spacing-md);
}

.form__checkbox-input,
.form__radio-input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    background-color: var(--color-background);
    cursor: pointer;
    position: relative;
    margin-top: 2px; /* Align with text */
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.form__checkbox-input {
    border-radius: var(--border-radius-sm);
}

.form__radio-input {
    border-radius: var(--border-radius-full);
}

.form__checkbox-input:checked,
.form__radio-input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.form__checkbox-input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
}

.form__radio-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-full);
}

.form__checkbox-input:focus,
.form__radio-input:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.form__checkbox-label,
.form__radio-label {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    cursor: pointer;
}

/* ==========================================================================
   FILE INPUT STYLES
   ========================================================================== */

.form__file-input {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.form__file-input input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form__file-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--form-input-padding);
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-md);
    background-color: var(--color-quaternary);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    text-align: center;
    justify-content: center;
    min-height: var(--form-input-height);
}

.form__file-input:hover .form__file-label,
.form__file-input:focus-within .form__file-label {
    border-color: var(--color-secondary);
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--color-primary);
}

/* ==========================================================================
   FORM ACTIONS
   ========================================================================== */

.form__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.form__actions--center {
    justify-content: center;
}

.form__actions--start {
    justify-content: flex-start;
}

.form__actions--between {
    justify-content: space-between;
}

@media (max-width: 767px) {
    .form__actions {
        flex-direction: column;
    }
    
    .form__actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   HONEYPOT (Anti-bot protection)
   ========================================================================== */

.form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   FORM LOADING STATE
   ========================================================================== */

.form--loading {
    position: relative;
    pointer-events: none;
}

.form--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.form--loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top: 4px solid var(--color-secondary);
    border-radius: var(--border-radius-full);
    animation: formSpin 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 1;
}

@keyframes formSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   FORM SUCCESS/ERROR STATES
   ========================================================================== */

.form__status {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form__status--success {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.form__status--error {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.form__status--warning {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
}

/* ==========================================================================
   FLOATING LABELS
   ========================================================================== */

.form__group--floating {
    position: relative;
}

.form__group--floating .form__input,
.form__group--floating .form__textarea {
    padding-top: 24px;
    padding-bottom: 8px;
}

.form__group--floating .form__label--floating {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    transition: all var(--transition-fast);
    pointer-events: none;
    background-color: var(--color-background);
    padding: 0 4px;
    margin-bottom: 0;
}

.form__group--floating .form__input:focus + .form__label--floating,
.form__group--floating .form__input:not(:placeholder-shown) + .form__label--floating,
.form__group--floating .form__textarea:focus + .form__label--floating,
.form__group--floating .form__textarea:not(:placeholder-shown) + .form__label--floating {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 767px) {
    .form {
        max-width: 100%;
    }
    
    .form__input-group {
        flex-direction: column;
    }
    
    .form__input-group .form__input {
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }
    
    .form__input-addon {
        border-left: 2px solid var(--color-border);
        border-top: none;
        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .form__input,
    .form__textarea,
    .form__select {
        border-width: 3px;
    }
    
    .form__checkbox-input,
    .form__radio-input {
        border-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .form__input,
    .form__textarea,
    .form__select,
    .form__checkbox-input,
    .form__radio-input,
    .form__file-label {
        transition: none;
    }
    
    .form--loading::before {
        animation: none;
    }
}