/**
 * Sparkles Form Components
 * Reusable form elements with consistent styling and validation
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== BASE FORM ELEMENTS ========== */
.sparkles-form-group {
    margin-bottom: 1.5rem;
}

.sparkles-form-label,
.sparkles-config-label {
    display: block;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-form-label-required::after {
    content: ' *';
    
    color: var(--color-secondary);
}

/* ========== INPUT FIELDS ========== */
.sparkles-input,
.sparkles-textarea {
    width: 100%;
    background-color: var(--color-white, white);
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius, 0.5rem);
    font-size: var(--text-base, 1rem);
    color: var(--color-text, var(--gray-800));
    transition: all 0.2s ease-in-out;
    outline: none;
}

.sparkles-input {
    padding: 0.75rem 1rem;
}
.sparkles-input:hover {
    border-color: var(--color-primary-light);
}

.sparkles-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.sparkles-input:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    opacity: .6;
}

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

/* Use higher specificity instead of priority overrides for error focus states */
.sparkles-input-error.sparkles-input:focus,
.sparkles-textarea-error.sparkles-textarea:focus,
.sparkles-select-error.sparkles-select:focus {
    --tw-ring-color: rgb(239 68 68 / 0.2);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

/* Success focus styles consolidated above */

/* Form field wrapper states */
.sparkles-form-field {
    position: relative;
}

/* Legacy JS-based classes (kept for backwards compatibility) */
.sparkles-form-field.has-error .sparkles-form-label {
    --tw-text-opacity: 1;
    color: rgba(239,68,68,var(--tw-text-opacity,1));
}

.sparkles-form-field.has-success .sparkles-form-label {
    --tw-text-opacity: 1;
    color: var(--color-success);
}

/* ========== CSS-ONLY VALIDATION with :has() ========== */
/* Tailwind v4 feature: auto-detect validation state without JS */

/* Error state: label turns red when field contains error input */
.sparkles-form-field:has(.sparkles-input-error) .sparkles-form-label,
.sparkles-form-field:has(.sparkles-textarea-error) .sparkles-form-label,
.sparkles-form-field:has(.sparkles-select-error) .sparkles-form-label,
.sparkles-form-field:has(:invalid:not(:placeholder-shown)) .sparkles-form-label {
    --tw-text-opacity: 1;
    color: rgba(239,68,68,var(--tw-text-opacity,1));
}

/* Success state: label turns green when field contains success input */
.sparkles-form-field:has(.sparkles-input-success) .sparkles-form-label,
.sparkles-form-field:has(.sparkles-textarea-success) .sparkles-form-label,
.sparkles-form-field:has(.sparkles-select-success) .sparkles-form-label,
.sparkles-form-field:has(:valid:not(:placeholder-shown):not(:focus)) .sparkles-form-label {
    --tw-text-opacity: 1;
    color: var(--color-success);
}

/* Auto-show validation icons via :has() */
.sparkles-form-field:has(.sparkles-input-error) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:invalid:not(:placeholder-shown)) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(.sparkles-input-success) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:valid:not(:placeholder-shown):not(:focus)) .sparkles-input-icon-wrapper::after,
.sparkles-form-field.has-error .sparkles-input-icon-wrapper::after,
.sparkles-form-field.has-success .sparkles-input-icon-wrapper::after {
    content: '';
    position: absolute;
    right: .75rem;
    width: 1.25rem;
    height: 1.25rem;
}

.sparkles-form-field:has(.sparkles-input-error) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:invalid:not(:placeholder-shown)) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(.sparkles-input-success) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:valid:not(:placeholder-shown):not(:focus)) .sparkles-input-icon-wrapper::after {
    top: 50%;
    transform: translateY(-50%);
}

.sparkles-form-field:has(.sparkles-input-error) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:invalid:not(:placeholder-shown)) .sparkles-input-icon-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
}

.sparkles-form-field:has(.sparkles-input-success) .sparkles-input-icon-wrapper::after,
.sparkles-form-field:has(:valid:not(:placeholder-shown):not(:focus)) .sparkles-input-icon-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
}

/* Error and success form messages */
.sparkles-form-error,
.sparkles-form-success {
    animation: sparkles-fade-in 200ms;
    display: block;
    margin-top: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-form-error {
    --tw-text-opacity: 1;
    color: rgba(239,68,68,var(--tw-text-opacity,1));
}

/* Success messages */
.sparkles-form-success {
    color: var(--color-success);
}

/* Helper text */
.sparkles-form-helper {
    display: block;
}

/* ========== AUTO-SHOW ERROR MESSAGES via :has() ========== */
/* Replaces JS parent DOM traversal (Phase 1, P1 priority)
 * Shows error messages when parent container has error input
 * Supports multiple error class patterns from different components
 */

/* Newsletter component pattern (.sparkles-form-input-error → .sparkles-form-error) */
.form-field:has(input.sparkles-form-input-error) .sparkles-form-error,
.sparkles-form-field:has(input.sparkles-form-input-error) .sparkles-form-error {
    display: block;
}

/* Multi-step form pattern (.error → .validation-error) */
.form-group:has(input.error) .validation-error,
.form-group:has(select.error) .validation-error,
.form-group:has(textarea.error) .validation-error {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(239,68,68,var(--tw-text-opacity,1));
}

/* Option selector pattern (.error → .sparkles-field-error) */
.option-group:has(select.error) .sparkles-field-error,
.form-field:has(select.error) .sparkles-field-error {
    display: block;
}

/* Generic error state styling for form containers */
.form-group:has(input.error),
.form-group:has(select.error),
.form-group:has(textarea.error) {
    /* Parent container can have additional error styling if needed */
}

.sparkles-benefit-icon {
    background-color: rgb(var(--color-primary-rgb) / 0.1);
}

.sparkles-benefit-icon svg {
    fill: var(--color-primary);
}

.sparkles-form-field.has-error .sparkles-input-icon-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
}

.sparkles-form-field.has-success .sparkles-input-icon-wrapper::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
}

/* slideDown keyframe replaced with sparkles-fade-in from sparkles-utilities.css */

/* Input with Icon */
.sparkles-input-icon-wrapper {
    position: relative;
}

.sparkles-input-icon-wrapper .sparkles-icon {
    position: absolute;
    color: var(--gray-500);
    width: 1.25rem;
    height: 1.25rem;
}

.sparkles-input-icon-wrapper .sparkles-icon-left {
    left: 1rem;
}

.sparkles-input-icon-wrapper .sparkles-icon-right {
    right: 1rem;
}

/* ========== TEXTAREA ========== */
.sparkles-textarea {
    padding: 1rem;
    resize: vertical;
    min-height: 120px;
}

.sparkles-textarea:hover {
    border-color: var(--color-primary-light);
}

.sparkles-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ========== FILE UPLOAD ========== */
.sparkles-file-upload {
    position: relative;
    margin-top: 0.5rem;
}

.sparkles-file-upload .sparkles-btn {
    margin-bottom: 0.5rem;
}



/* ========== SELECT DROPDOWN ========== */
.sparkles-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 1rem center;
    width: 100%;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-width: 2px;
    border-color: var(--gray-300);
    border-radius: .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--gray-800);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-select:hover {
    border-color: var(--gray-400);
}

.sparkles-select:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, rgb(0 125 184)) 20%, transparent);
}

.sparkles-select:focus,
.sparkles-search-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* ========== CHECKBOX & RADIO ========== */
.sparkles-checkbox-wrapper,
.sparkles-radio-wrapper,
.sparkles-switch {
    cursor: pointer;
}

.sparkles-checkbox,
.sparkles-radio {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-width: 2px;
    border-color: var(--gray-400);
    position: relative;
    cursor: pointer;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-checkbox {
    border-radius: .25rem;
}

.sparkles-radio {
    border-radius: var(--radius-full);
}

.sparkles-checkbox:checked,
.sparkles-radio:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sparkles-checkbox:checked::after {
    content: '';
    top: 3px;
    left: 6px;
    border-width: 0 2px 2px 0;
    position: absolute;
    width: .25rem;
    height: .5rem;
    --tw-border-opacity: 1;
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
    --tw-rotate: 45deg;
}

.sparkles-radio:checked::after {
    content: '';
    top: 5px;
    left: 5px;
    position: absolute;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-radius: var(--radius-full);
}

.sparkles-checkbox-label,
.sparkles-radio-label {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--gray-700);
    user-select: none;
}

/* ========== SWITCH TOGGLE ========== */
.sparkles-switch-toggle {
    width: 3rem;
    height: 1.5rem;
    background-color: var(--gray-300);
    border-radius: var(--radius-full);
    position: relative;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-switch-input:checked ~ .sparkles-switch-toggle {
    background-color: var(--color-primary);
}

.sparkles-switch-toggle::after {
    content: '';
    position: absolute;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-radius: var(--radius-full);
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    width: 1.25rem;
    height: 1.25rem;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-switch-input:checked ~ .sparkles-switch-toggle::after {
    --tw-translate-x: 1.5rem;
}

.sparkles-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ========== FORM VALIDATION STATES ========== */
.sparkles-field-invalid,
.sparkles-input-error,
.sparkles-textarea-error,
.sparkles-select-error {
    --tw-bg-opacity: 0.5;
}

.sparkles-field-invalid:focus,
.sparkles-field-valid:focus,
.sparkles-input-success:focus,
.sparkles-textarea-success:focus,
.sparkles-select-success:focus {
    --tw-border-opacity: 1;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.sparkles-field-invalid:focus {
    --tw-ring-color: rgb(239 68 68 / 0.2);
    border-color: rgba(239,68,68,var(--tw-border-opacity,1));
}

.sparkles-field-valid,
.sparkles-input-success,
.sparkles-textarea-success,
.sparkles-select-success {
    --tw-border-opacity: 1;
    border-color: var(--color-success);
}

.sparkles-field-valid:focus,
.sparkles-input-success:focus,
.sparkles-textarea-success:focus,
.sparkles-select-success:focus {
    --tw-ring-color: rgb(34 197 94 / 0.2);
    border-color: var(--color-success);
}

/* Error and success messages - base layout */
.sparkles-field-error,
.sparkles-form-error-message,
.sparkles-field-success,
.sparkles-form-success-message {
    display: block;
    margin-top: .5rem;
    font-size: .875rem;
    line-height: 1.25;
}

/* Error message colors */
.sparkles-field-error,
.sparkles-form-error-message {
    --tw-text-opacity: 1;
    color: rgba(239,68,68,var(--tw-text-opacity,1));
}

.sparkles-field-error::before {
    content: '⚠ ';
    margin-right: .25rem;
}

/* Success messages */
.sparkles-field-success,
.sparkles-form-success-message {
    color: var(--color-success);
}

.sparkles-field-success::before {
    content: '✓ ';
    margin-right: .25rem;
}

/* Help text */
.sparkles-field-help {
    display: block;
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--gray-500);
    line-height: 1.25;
}

/* ========== SEARCH FORM ========== */
.sparkles-search-form {
    position: relative;
}

.sparkles-search-input {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-width: 2px;
    border-color: var(--gray-300);
    border-radius: var(--radius-full);
    font-size: 1rem;
    line-height: 1.5rem;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-search-input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, rgb(0 125 184)) 20%, transparent);
}

.sparkles-search-button {
    background-color: var(--color-primary);
    position: absolute;
    right: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    border-radius: var(--radius-full);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    border-width: 0;
    cursor: pointer;
}

/* ========== NEWSLETTER FORM ========== */
.sparkles-newsletter-form {
    display: flex;
    gap: .75rem;
    max-width: 32rem;
    container-type: inline-size;
}

.sparkles-newsletter-input {
    border-color: var(--color-primary);
    flex: 1 1 0%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    border-width: 2px;
    border-radius: var(--radius-full);
    font-size: 1rem;
    line-height: 1.5rem;
}

.sparkles-newsletter-submit {
    background: linear-gradient(to right, var(--color-primary), var(--color-warning-light));
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-to: var(--color-warning) var(--tw-gradient-to-position);
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    border-radius: var(--radius-full);
    font-weight: 600;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    border-width: 0;
    cursor: pointer;
    white-space: nowrap;
}

.sparkles-newsletter-submit:hover {
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

/* ========== QUANTITY INPUT ========== */
.sparkles-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    border-width: 2px;
    border-color: var(--gray-300);
    border-radius: .5rem;
    overflow: hidden;
}

.sparkles-quantity-button {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    border-width: 0;
    cursor: pointer;
}

.sparkles-quantity-button:hover {
    background-color: var(--color-primary);
    color: white;
}

.sparkles-quantity-input {
    width: 60px;
    height: 2.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    border-width: 0;
    background-color: initial;
}

/* ========== FLOATING LABELS ========== */
.sparkles-form-floating {
    position: relative;
    margin-top: 1.5rem;
}

.sparkles-form-floating .sparkles-input {
    padding-top: 1.5rem;
    padding-bottom: .5rem;
}

.sparkles-form-floating-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--gray-500);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

.sparkles-form-floating .sparkles-input:focus ~ .sparkles-form-floating-label {
    color: var(--color-primary);
    top: .5rem;
    font-size: .75rem;
    line-height: 1rem;
}

.sparkles-form-floating .sparkles-input:not(:placeholder-shown) ~ .sparkles-form-floating-label {
    top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-primary);
}

/* ========== RESPONSIVE DESIGN ========== */
@container (max-width: 768px) {
    .sparkles-newsletter-form {
        flex-direction: column;
    }
    
    .sparkles-newsletter-submit {
        width: 100%;
    }
}

/* ========== ACCESSIBILITY ========== */
.sparkles-input:focus-visible,
.sparkles-textarea:focus-visible,
.sparkles-select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}