@charset "UTF-8";

/**
 * Global Form Components
 * 
 * Purpose: Consistent form styling across the entire site
 * Features:
 * - Unified input and textarea styles
 * - White background for all form fields
 * - Consistent focus states
 * - Professional appearance
 * 
 * @version 1.0.0
 * @date 2026-01-25
 */

/* ============================================================
   GLOBAL TEXTAREA STYLES
   ============================================================ */

/* Ensure all textareas have white background and match input styles */
textarea,
textarea.form-control,
textarea.nx-form-textarea,
.nx-form-textarea {
    background: #ffffff !important;
    color: #1d1d1f;
    border: 2px solid #e8e8ed !important;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    /* Remove min-height to allow rows attribute to work */
    min-height: auto;
    height: auto;
}

textarea:focus,
textarea.form-control:focus,
textarea.nx-form-textarea:focus,
.nx-form-textarea:focus {
    background: #ffffff !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1) !important;
    outline: none !important; /* Remove outline to prevent double border */
}

textarea:hover,
textarea.form-control:hover,
textarea.nx-form-textarea:hover,
.nx-form-textarea:hover {
    background: #ffffff !important;
    border-color: #d1d1d6;
}

textarea::placeholder,
textarea.form-control::placeholder,
textarea.nx-form-textarea::placeholder,
.nx-form-textarea::placeholder {
    color: #c7c7cc;
}

/* Error states */
textarea.is-invalid,
textarea.form-control.is-invalid,
textarea.nx-form-textarea.is-invalid,
.nx-form-textarea.is-invalid {
    background: #ffffff !important;
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

/* Success states */
textarea.is-valid,
textarea.form-control.is-valid,
textarea.nx-form-textarea.is-valid,
.nx-form-textarea.is-valid {
    background: #ffffff !important;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

/* Disabled states */
textarea:disabled,
textarea.form-control:disabled,
textarea.nx-form-textarea:disabled,
.nx-form-textarea:disabled {
    background: #f5f5f7 !important;
    color: #8e8e93;
    cursor: not-allowed;
    opacity: 0.6;
}

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

@media (max-width: 576px) {
    textarea,
    textarea.form-control,
    textarea.nx-form-textarea,
    .nx-form-textarea {
        padding: 0.875rem;
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: 10px;
        /* Remove min-height to allow rows attribute to work */
        min-height: auto;
        height: auto;
    }
}

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

textarea:focus-visible,
textarea.form-control:focus-visible,
textarea.nx-form-textarea:focus-visible,
.nx-form-textarea:focus-visible {
    border-color: var(--bs-primary, #0d6efd) !important;
    border-width: 2px !important;
    outline: none !important; /* Remove outline to prevent double border */
}