/**
 * Advanced Newsletter Manager - Frontend Styles
 * 
 * PURPOSE: Newsletter form styling that integrates with tourism theme design system
 * 
 * STRUCTURE:
 * - Tourism design system integration
 * - Newsletter section with yellow background
 * - Form styling with tourism buttons
 * - Responsive design
 * 
 * UPDATE PROCEDURES:
 * - MEDIUM IMPACT: Changes affect newsletter display
 * - Test form functionality and styling
 * 
 * DEPENDENCIES:
 * - Requires: Tourism theme variables and tourism button classes
 * - Used by: Newsletter shortcode
 * 
 * @package AdvancedNewsletterManager
 * @version 1.0.0
 */

/* ==========================================================================
   Tourism Design System Integration
   ========================================================================== */

/* Newsletter Section - Full width yellow background */
.anm-newsletter-section-wrapper {
    background: var(--tourism-section-newsletter);
    padding: var(--tourism-space-24) 0;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    /* Ensure floating icon doesn't overflow */
}

/* Floating Background Email Icon */
.anm-newsletter-section-wrapper::before {
    content: "\f0e0";
    /* Font Awesome envelope icon (outlined version) */
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    position: absolute;
    top: -10%;
    left: 10%;
    font-size: 20rem;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    animation: tourism-float 6s ease-in-out infinite;
    color: var(--tourism-btn-dark);
}

/* Remove the secondary floating icon */
.anm-newsletter-section-wrapper::after {
    display: none;
}

/* Container within the section */
.anm-newsletter-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--tourism-space-4);
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Newsletter Form - Tourism Style
   ========================================================================== */

.anm-newsletter-form,
.snm-newsletter-form {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.anm-newsletter-form::before,
.snm-newsletter-form::before {
    display: none;
}

/* Section Header */
.anm-form-header,
.snm-form-header {
    text-align: center;
    margin-bottom: var(--tourism-space-8);
}

.anm-form-title,
.snm-form-header h3 {
    font-size: var(--tourism-text-4xl);
    font-weight: var(--tourism-font-bold);
    color: var(--tourism-btn-dark);
    margin: 0 0 var(--tourism-space-4) 0;
    line-height: var(--tourism-leading-tight);
}

.anm-form-description,
.snm-form-header p {
    font-size: var(--tourism-text-lg);
    color: var(--tourism-btn-dark);
    margin: 0;
    line-height: var(--tourism-leading-relaxed);
    opacity: 0.8;
    display: none;
    /* Hide description/subtitle */
}

/* Form Layout - Ensure proper row structure */
.anm-form-body,
.snm-form {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.anm-form-row,
.snm-input-group {
    display: flex !important;
    gap: var(--tourism-space-4);
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100% !important;
}

.anm-form-group {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

/* Form Input */
.anm-form-input,
.snm-email-input {
    width: 100%;
    padding: var(--tourism-space-4);
    border: none;
    border-radius: var(--tourism-border-radius-xl);
    font-size: var(--tourism-text-lg);
    color: var(--tourism-gray-800);
    background: var(--tourism-white);
    transition: all var(--tourism-transition-normal);
    box-shadow: var(--tourism-shadow-sm);
    flex: 1;
    min-width: 300px;
}

.anm-form-input:focus,
.snm-email-input:focus,
.snm-input-group.focused .snm-email-input {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 59, 135, 0.1);
    transform: translateY(-2px);
}

.anm-form-input::placeholder,
.snm-email-input::placeholder {
    color: var(--tourism-gray-500);
    font-style: normal;
}

.anm-form-input.anm-error,
.snm-email-input.error {
    border-color: var(--tourism-danger);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Submit Button - Tourism Button with Shadow Animation */
.anm-form-submit,
.snm-submit-btn {
    /* Use tourism button styling with shadow animation */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tourism-btn-dark);
    color: var(--tourism-white);
    border: 2px solid var(--tourism-btn-dark);
    border-radius: var(--tourism-border-radius-xl);
    padding: var(--tourism-space-4) var(--tourism-space-6);
    font-size: var(--tourism-text-lg);
    font-weight: var(--tourism-font-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
    flex-shrink: 0;
    overflow: visible;
    z-index: 1;
    box-shadow: 4px 4px 0 0 var(--tourism-primary-dark);
    text-decoration: none;
    text-transform: none;
}

.anm-form-submit:hover,
.snm-submit-btn:hover {
    box-shadow: 0 0 0 0 var(--tourism-primary-dark);
    transform: translate(4px, 4px);
    text-decoration: none;
}

.anm-form-submit:disabled,
.snm-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.anm-form-submit:disabled:hover,
.snm-submit-btn:disabled:hover {
    box-shadow: 4px 4px 0 0 var(--tourism-primary-dark);
    transform: none;
}

/* GDPR Checkbox - Force separate row */
.anm-gdpr-checkbox,
.snm-gdpr {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-top: var(--tourism-space-6) !important;
    margin-bottom: var(--tourism-space-4) !important;
    text-align: center;
    float: none !important;
    position: relative !important;
}

.anm-gdpr-label,
.snm-gdpr label {
    font-size: var(--tourism-text-sm);
    color: var(--tourism-btn-dark);
    display: flex;
    align-items: center;
    gap: var(--tourism-space-2);
    line-height: 1.4;
}

/* Left-align the span text within GDPR label */
.anm-gdpr-label span,
.snm-gdpr label span {
    text-align: left;
    line-height: 1.1;
}

.anm-gdpr-checkbox input[type="checkbox"],
.snm-gdpr input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--tourism-btn-dark);
}

.anm-gdpr-label a,
.snm-gdpr label a {
    color: var(--tourism-btn-dark);
    text-decoration: underline;
    font-weight: var(--tourism-font-medium);
}

.anm-gdpr-label a:hover,
.snm-gdpr label a:hover {
    color: var(--tourism-primary);
}

/* Messages */
.anm-message,
.snm-message {
    padding: var(--tourism-space-4);
    border-radius: var(--tourism-border-radius-lg);
    margin-top: var(--tourism-space-4);
    text-align: center;
    font-weight: var(--tourism-font-medium);
}

.anm-message-success,
.snm-message.success {
    background: rgba(39, 174, 96, 0.1);
    color: var(--tourism-success);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.anm-message-error,
.snm-message.error {
    background: rgba(231, 76, 60, 0.1);
    color: var(--tourism-danger);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

/* Loading States */
.anm-loading,
.snm-form.loading .snm-submit-btn {
    position: relative;
    color: transparent;
}

.anm-loading::after,
.snm-form.loading .snm-submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tourism-spin 1s linear infinite;
}

@keyframes tourism-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

@media (max-width: 768px) {
    .anm-newsletter-section-wrapper {
        padding: var(--tourism-space-12) 0;
    }

    .anm-newsletter-container {
        padding: 0 var(--tourism-space-3);
    }

    /* Adjust floating icons for tablet */
    .anm-newsletter-section-wrapper::before {
        display: none;
    }

    .anm-form-title,
    .snm-form-header h3 {
        font-size: var(--tourism-text-3xl);
    }

    .anm-form-description,
    .snm-form-header p {
        font-size: var(--tourism-text-base);
        display: none;
        /* Hide description/subtitle on mobile too */
    }

    .anm-form-row,
    .snm-input-group {
        flex-direction: column !important;
        gap: var(--tourism-space-3);
        align-items: stretch;
        margin-bottom: var(--tourism-space-4) !important;
    }

    .anm-form-input,
    .snm-email-input {
        min-width: auto;
        font-size: var(--tourism-text-base);
        padding: var(--tourism-space-3);
    }

    .anm-form-submit,
    .snm-submit-btn {
        width: 100%;
        font-size: var(--tourism-text-base);
        padding: var(--tourism-space-4);
    }

    .anm-gdpr-label,
    .snm-gdpr label {
        font-size: var(--tourism-text-sm);
        flex-direction: row;
        gap: var(--tourism-space-4);
        align-items: center;
    }

    .anm-gdpr-checkbox,
    .snm-gdpr {
        margin-top: var(--tourism-space-3) !important;
        margin-bottom: var(--tourism-space-2) !important;
        display: block !important;
        width: 100% !important;
    }

    .anm-gdpr-label,
    .snm-gdpr label {
        flex-direction: row;
        gap: var(--tourism-space-2);
        align-items: center;
    }
}

@media (max-width: 480px) {
    .anm-newsletter-section-wrapper {
        padding: var(--tourism-space-10) 0;
    }

    .anm-newsletter-container {
        padding: 0 var(--tourism-space-3);
    }

    /* Hide floating icons for mobile */
    .anm-newsletter-section-wrapper::before {
        display: none;
    }

    .anm-form-title,
    .snm-form-header h3 {
        font-size: var(--tourism-text-2xl);
    }

    .anm-form-description,
    .snm-form-header p {
        font-size: var(--tourism-text-sm);
        display: none;
        /* Hide description/subtitle on small mobile too */
    }

    .anm-gdpr-checkbox,
    .snm-gdpr {
        margin-top: var(--tourism-space-3);
        margin-bottom: var(--tourism-space-2);
    }

    .anm-gdpr-label,
    .snm-gdpr label {
        flex-direction: row;
        gap: var(--tourism-space-2);
        align-items: center;
        font-size: var(--tourism-text-sm);
    }
}

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

/* Focus indicators */
.anm-form-input:focus-visible,
.anm-form-submit:focus-visible,
.snm-email-input:focus-visible,
.snm-submit-btn:focus-visible {
    outline: 2px solid var(--tourism-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .anm-form-input,
    .anm-form-submit,
    .snm-email-input,
    .snm-submit-btn {
        transition: none;
    }

    .anm-form-submit:hover,
    .snm-submit-btn:hover {
        transform: none;
    }

    .anm-loading::after,
    .snm-form.loading .snm-submit-btn::after {
        animation: none;
    }

    /* Disable floating animations for users who prefer reduced motion */
    .anm-newsletter-section-wrapper::before,
    .anm-newsletter-section-wrapper::after {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .anm-form-input,
    .anm-form-submit,
    .snm-email-input,
    .snm-submit-btn {
        border: 2px solid currentColor;
    }
}

/* ==========================================================================
   Legacy Support - Keep existing selectors working
   ========================================================================== */

/* Legacy ANM classes still work */
.anm-newsletter-form.anm-style-minimal,
.anm-newsletter-form.anm-style-inline,
.anm-newsletter-form.anm-style-floating {
    /* Apply tourism styling to all variants */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Remove old gradients and colors */
.anm-newsletter-form.anm-style-minimal::before,
.anm-newsletter-form.anm-style-inline::before,
.anm-newsletter-form.anm-style-floating::before {
    display: none;
}

/* Apply tourism styling to floating variant */
.anm-newsletter-form.anm-style-floating {
    background: var(--tourism-section-newsletter);
    border-radius: var(--tourism-border-radius-2xl);
    padding: var(--tourism-space-8);
    box-shadow: var(--tourism-shadow-xl);
}

/* Screen reader support */
.anm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}