/**
 * Newsletter Form Styles
 * Terra Health E-commerce Theme
 */

/* ========================================
   Newsletter Section
   ======================================== */

.newsletter-section {
    background-color: var(--green-800);
    color: var(--green-100);
    padding: var(--spacing-8) var(--spacing-5);
    text-align: center;
}

.newsletter-section__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    margin-bottom: var(--spacing-4);
}

.newsletter-section__description {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    margin-bottom: var(--spacing-5);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

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

.newsletter-form {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form__email {
    flex: 1;
    padding: var(--spacing-4);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--green-800);
    background-color: var(--base-white);
    border: none;
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-form__email:focus {
    outline: 2px solid var(--green-600);
    outline-offset: 2px;
    border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(69, 102, 60, 0.2);
}

.newsletter-form__email::placeholder {
    color: var(--gray-300);
}

.newsletter-form__submit {
    padding: var(--spacing-4) var(--spacing-6);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--green-100);
    background-color: var(--green-800);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.newsletter-form__submit:hover {
    background-color: var(--green-700);
    transform: translateY(-2px);
}

.newsletter-form__submit:focus {
    outline: 2px solid var(--green-600);
    outline-offset: 2px;
}

.newsletter-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
   Newsletter Links
   ======================================== */

.newsletter-section__links {
    margin-top: var(--spacing-5);
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
}

.newsletter-section__link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--green-100);
    text-decoration: underline;
    text-decoration-color: var(--green-200);
    transition: text-decoration-color 0.2s ease;
}

.newsletter-section__link:hover {
    text-decoration-color: var(--green-100);
}

.newsletter-section__link:focus {
    outline: 2px solid var(--green-100);
    outline-offset: 2px;
}

/* ========================================
   Notification
   ======================================== */

.notification {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-5);
    background-color: var(--green-800);
    color: var(--green-100);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification--visible {
    opacity: 1;
    transform: translateY(0);
}

.notification--success {
    background-color: var(--green-700);
}

.notification--error {
    background-color: var(--base-error);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 767px) {
    .newsletter-section__title {
        font-size: 32px;
    }
    
    .newsletter-section__description {
        font-size: 14px;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .notification {
        left: var(--spacing-4);
        right: var(--spacing-4);
        bottom: var(--spacing-4);
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 14px;
    }
}