/**
 * Sparkles Newsletter Component Styles
 * Comprehensive styling for newsletter subscription forms with MailChimp integration, interest groups, and validation states
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* =============================================================================
   Newsletter Form Container
   ============================================================================= */

.sparkles-newsletter {
    width: 100%;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.sparkles-newsletter-inline {
    gap: .75rem;
}

.sparkles-newsletter-minimal {
    background-color: initial;
    border-width: 0;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

.sparkles-newsletter-bordered {
    padding: 1.5rem;
}

.sparkles-newsletter-luxury {
    border-color: var(--color-primary);
    background: linear-gradient(to bottom right, white, var(--color-accent, var(--off-white)));
    box-shadow: var(--shadow-luxury, 0 20px 40px rgba(0, 0, 0, 0.12));
    border-width: 1px;
    border-radius: .75rem;
    padding: 2rem;
}

/* =============================================================================
   Newsletter Header
   ============================================================================= */

.sparkles-newsletter-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.sparkles-newsletter-title {
    color: var(--color-secondary);
    font-size: 1.5rem;
    line-height: 2rem;
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: .5rem;
}

.sparkles-newsletter-description {
    color: var(--gray-600);
    line-height: 1.625;
}

.sparkles-newsletter-luxury .sparkles-newsletter-title {
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    -webkit-background-clip: text;
    background-clip: text;
    color: #0000;
}

/* =============================================================================
   Form Fields
   ============================================================================= */

.sparkles-newsletter-field {
    margin-bottom: 1rem;
}

.sparkles-newsletter-honeypot {
    position: absolute;
    left: -9999px;
}

.sparkles-newsletter-field-group {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sparkles-newsletter-label,
.sparkles-newsletter-interest-label {
    color: var(--color-secondary);
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--sparkles-newsletter-label-margin, .5rem);
}

.sparkles-newsletter-label-required::after {
    content: '*'; /* Keep raw for pseudo-element content */ --tw-text-opacity: 1; color: rgba(239,68,68,var(--tw-text-opacity,1)); margin-left: .25rem;
}

.sparkles-newsletter-input {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-width: 1px;
    border-color: var(--gray-300);
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-dropdown-open .sparkles-dropdown-trigger,
.sparkles-newsletter-input:focus,
.sparkles-newsletter-interest-select:focus {
    border-color: var(--color-primary);
    --tw-ring-color: var(--color-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}

.sparkles-newsletter-input:focus,
.sparkles-newsletter-interest-select:focus {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.sparkles-dropdown-open .sparkles-dropdown-trigger {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

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

.sparkles-newsletter-input-error,
.sparkles-confirmation-danger,
.sparkles-upload-area.error,
.sparkles-status-card.error,
.sparkles-batch-item.error,
.sparkles-confirmation-error {
    --tw-bg-opacity: 1;
    background-color: rgba(254,242,242,var(--tw-bg-opacity,1));
}

.sparkles-newsletter-input-error,
.sparkles-confirmation-danger,
.sparkles-upload-area.error,
.sparkles-status-card.error {
    --tw-border-opacity: 1;
    border-color: rgba(239,68,68,var(--tw-border-opacity,1));
}

.sparkles-newsletter-input-error:focus {
    --tw-border-opacity: 1;
    border-color: rgba(239,68,68,var(--tw-border-opacity,1));
}

.sparkles-newsletter-input-success,
.sparkles-file-upload.has-files,
.sparkles-batch-item.success {
    --tw-bg-opacity: 1;
    background-color: rgba(236,253,245,var(--tw-bg-opacity,1));
}

.sparkles-newsletter-input-success,
.sparkles-file-upload.has-files {
    border-color: var(--color-success);
}

.sparkles-newsletter-input-success:focus {
    border-color: var(--color-success);
}

/* Luxury variant inputs */
.sparkles-newsletter-luxury .sparkles-newsletter-input {
    border-color: var(--color-primary);
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    --tw-backdrop-blur: blur(4px);
}

.sparkles-newsletter-luxury .sparkles-newsletter-input:focus {
    border-color: var(--color-primary);
    --tw-ring-color: var(--color-primary);
    --tw-ring-opacity: 0.3;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
}

/* =============================================================================
   Interest Groups
   ============================================================================= */

.sparkles-newsletter-interests {
    margin-bottom: 1.5rem;
}

.sparkles-newsletter-interests-title {
    color: var(--color-secondary);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.sparkles-newsletter-interest-group {
    margin-bottom: 1rem;
}

.sparkles-newsletter-interest-group:last-child {
    margin-bottom: 0;
}

.sparkles-newsletter-interest-label {
    --sparkles-newsletter-label-margin: .75rem;
}

.sparkles-batch-status,
.sparkles-error-list,
.sparkles-checkbox-group,
.sparkles-control-panel-content,
.sparkles-newsletter-interest-options {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
}

.sparkles-newsletter-interest-option {
    display: flex;
    align-items: center;
}

.sparkles-newsletter-interest-input {
    color: var(--color-primary);
    margin-right: .75rem;
    height: 1rem;
    width: 1rem;
    border-color: var(--gray-300);
    border-radius: .25rem;
}

.sparkles-newsletter-interest-input:focus {
    --tw-ring-color: var(--color-primary);
    --tw-ring-opacity: 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);
}

.sparkles-newsletter-interest-text {
    cursor: pointer;
}

/* Checkbox and Radio specific styles */
.sparkles-newsletter-interest-input[type="checkbox"] {
    border-radius: .25rem;
}

.sparkles-newsletter-interest-input[type="radio"] {
    border-radius: var(--radius-full);
}

/* Interest group dropdown */
.sparkles-newsletter-interest-select {
    color: var(--color-secondary);
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-width: 1px;
    border-color: var(--gray-300);
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
}

.sparkles-newsletter-interest-select:focus {
    --tw-ring-opacity: 0.2;
}

/* =============================================================================
   Submit Button
   ============================================================================= */

.sparkles-newsletter-submit {
    background-color: var(--color-primary);
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    font-weight: 500;
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-newsletter-submit:focus {
    --tw-ring-opacity: 0.2;
}

.sparkles-newsletter-submit:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sparkles-newsletter-submit:disabled:hover {
    transform: none;
    box-shadow: none;
}

.sparkles-newsletter-submit:active {
    transform: translateY(0);
}

.sparkles-newsletter-submit:disabled:active {
    transform: none;
}

/* Loading state */
.sparkles-newsletter-submit.is-loading {
    position: relative;
    overflow: hidden;
}

.sparkles-newsletter-submit.is-loading::after {
    content: ''; /* Keep raw for pseudo-element content */
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; --tw-bg-opacity: 1; background-color: rgba(255,255,255,var(--tw-bg-opacity,1)); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Inline form submit button */
.sparkles-newsletter-inline .sparkles-newsletter-submit {
    width: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    white-space: nowrap;
}

/* Luxury variant button */
.sparkles-newsletter-luxury .sparkles-newsletter-submit {
    box-shadow: var(--shadow-luxury, 0 20px 40px rgba(0, 0, 0, 0.12));
    border-color: var(--color-primary);
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    border-width: 1px;
}

.sparkles-newsletter-luxury .sparkles-newsletter-submit:hover {
    box-shadow: var(--shadow-2xl);
}

/* =============================================================================
   Messages and Feedback
   ============================================================================= */

.sparkles-newsletter-message {
    padding: 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --sparkles-message-accent: var(--color-success-darkest);
    background-color: color-mix(in srgb, var(--sparkles-message-accent) 10%, var(--color-white));
    color: var(--sparkles-message-accent);
    border: 1px solid color-mix(in srgb, var(--sparkles-message-accent) 30%, var(--color-white));
}

.sparkles-newsletter-message-success {
    --sparkles-message-accent: var(--color-success-darkest);
}

.sparkles-newsletter-message-error {
    --sparkles-message-accent: var(--color-error-dark);
}

.sparkles-newsletter-message-info {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary-dark);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* =============================================================================
   Shared Status Surfaces (Bundle Ordering)
   ============================================================================= */

.sparkles-author-follow-btn--following {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.sparkles-author-follow-btn--following:hover,
.sparkles-field-invalid,
.sparkles-input-error,
.sparkles-textarea-error,
.sparkles-select-error {
    --tw-bg-opacity: 1;
    background-color: rgba(239,68,68,var(--tw-bg-opacity,1));
    --tw-border-opacity: 1;
    border-color: rgba(239,68,68,var(--tw-border-opacity,1));
}

.sparkles-import-container.dark {
    --tw-bg-opacity: 1;
    background-color: rgba(31,41,55,var(--tw-bg-opacity,1));
    --tw-border-opacity: 1;
    border-color: rgba(55,65,81,var(--tw-border-opacity,1));
}

/* NOTE: .sparkles-upload-area.error and .sparkles-status-card.error border styles
 * are consolidated into the error block above (lines 152-156) */

.sparkles-batch-item.dark {
    --tw-bg-opacity: 1;
    background-color: rgba(55,65,81,var(--tw-bg-opacity,1));
    --tw-border-opacity: 1;
    border-color: rgba(75,85,99,var(--tw-border-opacity,1));
}

.sparkles-batch-item.success {
    --tw-border-opacity: 1;
    border-color: rgba(167,243,208,var(--tw-border-opacity,1));
}

.sparkles-batch-item.error {
    --tw-border-opacity: 1;
    border-color: rgba(254,202,202,var(--tw-border-opacity,1));
}

.sparkles-rule-list .rule-item.rule-expired {
    --tw-border-opacity: 1;
    border-color: rgba(254,215,170,var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgba(255,247,237,var(--tw-bg-opacity,1));
}

.sparkles-status-card.warning {
    --tw-bg-opacity: 1;
    background-color: rgba(255,251,235,var(--tw-bg-opacity,1));
    --tw-border-opacity: 1;
    border-color: rgba(251,191,36,var(--tw-border-opacity,1));
}

.sparkles-confirmation-warning {
    --tw-bg-opacity: 1;
    background-color: rgba(254, 252, 232, var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgba(234, 179, 8, var(--tw-border-opacity, 1));
}

.sparkles-confirmation-info {
    --tw-bg-opacity: 1;
    background-color: rgba(239, 246, 255, var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgba(59, 130, 246, var(--tw-border-opacity, 1));
}

.sparkles-confirmation-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
}

.sparkles-confirmation-error {
    --tw-border-opacity: 1;
    border-color: rgba(220, 38, 38, var(--tw-border-opacity, 1));
}

/* NOTE: .sparkles-form-error base styles are defined in forms.css (lines 143-155)
 * Only the sibling selector pattern is kept here for newsletter-specific behavior */

.sparkles-form-input-error + .sparkles-form-error {
    display: block;
}

/* Success state message */
.sparkles-newsletter-success,
.sparkles-no-addresses {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sparkles-newsletter-success-title {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.sparkles-newsletter-success-description {
    color: var(--gray-600);
}

/* =============================================================================
   Loading States
   ============================================================================= */

.sparkles-newsletter-loading {
    opacity: .5;
    pointer-events: none;
}

.sparkles-newsletter-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
    border-top-color: #0000;
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (min-width: 640px) {
    .sparkles-newsletter-inline {
        flex-direction: row;
    }

    .sparkles-newsletter-inline .sparkles-newsletter-input {
        flex: 1 1 0%;
    }

    .sparkles-newsletter-field-group {
        flex-direction: row;
    }

    .sparkles-newsletter-field-group .sparkles-newsletter-field {
        flex: 1 1 0%;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .sparkles-newsletter-luxury {
        padding: 2.5rem;
    }

    .sparkles-newsletter-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* =============================================================================
   Accessibility
   ============================================================================= */

.sparkles-newsletter-input:focus-visible,
.sparkles-newsletter-submit:focus-visible,
.sparkles-newsletter-interest-input:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sparkles-newsletter-submit {
        border-color: var(--color-primary);
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sparkles-newsletter-submit,
    .sparkles-newsletter-input {
        transition-property: none;
    }
    
    .sparkles-newsletter-spinner {
        animation: none;
    }
}

/* =============================================================================
   Dark Mode Support
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    .sparkles-newsletter-bordered {
        --tw-bg-opacity: 1;
        background-color: rgba(31,41,55,var(--tw-bg-opacity,1));
        --tw-border-opacity: 1;
        border-color: rgba(55,65,81,var(--tw-border-opacity,1));
    }
    
    .sparkles-newsletter-title,
    .sparkles-newsletter-label,
    .sparkles-newsletter-interest-label {
        --tw-text-opacity: 1;
        color: rgba(243,244,246,var(--tw-text-opacity,1));
    }
    
    .sparkles-newsletter-description,
    .sparkles-newsletter-interest-text {
        color: var(--gray-300);
    }
    
    .sparkles-newsletter-input {
        background-color: rgba(55,65,81,var(--tw-bg-opacity,1));
        border-color: rgba(75,85,99,var(--tw-border-opacity,1));
        color: rgba(243,244,246,var(--tw-text-opacity,1));
    }
    
    .sparkles-newsletter-input:focus {
        --tw-bg-opacity: 1;
        background-color: rgba(75,85,99,var(--tw-bg-opacity,1));
    }
}