/* ========================================
   LUXURY NEWSLETTER COMPONENTS - COMPREHENSIVE STYLING
   ======================================== */

/* Import luxury fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* CSS Variables for luxury theme */
:root {
    --luxury-burgundy: #7C0A02;
    --luxury-cream: #F2E3C6;
    --luxury-gold: #d4af37;
    --luxury-black: #2C2C2C;
    --luxury-white: #FFFFFF;
    --luxury-gray: #8B8B8B;
}

/* ========================================
   FOOTER NEWSLETTER LUXURY STYLING
   ======================================== */

/* Footer Newsletter Section */
.newsletter-section h6 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--main-gold) !important;
    margin-bottom: 1rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.newsletter-section p {
    font-family: 'Libre Baskerville', serif !important;
    font-style: italic !important;
    line-height: 1.6 !important;
}

/* Footer Newsletter Form */
.newsletter-section .newsletter-form {
    display: flex !important;
    margin-bottom: 1rem !important;
    border: 2px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2) !important;
    background: var(--luxury-white) !important;
}

.newsletter-section .newsletter-form input[type="email"] {
    flex: 1 !important;
    padding: 12px 18px !important;
    border: none !important;
    border-right: 2px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 0 !important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: 14px !important;
    background: var(--luxury-white) !important;
    color: var(--luxury-black) !important;
    transition: all 0.3s ease !important;
}

.newsletter-section .newsletter-form input[type="email"]::placeholder {
    color: var(--luxury-gray) !important;
    font-style: italic !important;
}

.newsletter-section .newsletter-form input[type="email"]:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(212, 175, 55, 0.3) !important;
    background: var(--luxury-white) !important;
}

.newsletter-section .newsletter-form button {
    padding: 12px 20px !important;
    background: transparent !important;
    border: none !important;
    border-left: 2px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--luxury-burgundy) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 100px !important;
}

.newsletter-section .newsletter-form button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--luxury-burgundy) !important;
    transition: left 0.3s ease !important;
    z-index: -1 !important;
}

.newsletter-section .newsletter-form button:hover::before {
    left: 0 !important;
}

.newsletter-section .newsletter-form button:hover {
    color: var(--luxury-white) !important;
    transform: translateX(2px) !important;
}

.newsletter-section .newsletter-form button:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.newsletter-section .newsletter-form button:disabled::before {
    left: -100% !important;
}

/* Footer Newsletter Error and Success Messages */
.newsletter-section .error-message {
    font-family: 'Libre Baskerville', serif !important;
    color: var(--luxury-burgundy) !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    min-height: 18px !important;
}

.newsletter-section .newsletter-success-message {
    font-family: 'Libre Baskerville', serif !important;
    color: var(--main-gold) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

/* ========================================
   RESPONSIVE DESIGN FOR FOOTER NEWSLETTER
   ======================================== */

@media (max-width: 768px) {
    .newsletter-section .newsletter-form {
        flex-direction: column !important;
    }
    
    .newsletter-section .newsletter-form input[type="email"] {
        border-right: none !important;
        border-bottom: 2px solid rgba(212, 175, 55, 0.3) !important;
    }
    
    .newsletter-section .newsletter-form button {
        border-left: none !important;
        border-top: 2px solid rgba(212, 175, 55, 0.3) !important;
        min-width: 100% !important;
    }
}

/* ========================================
   GENERAL NEWSLETTER FORM ENHANCEMENTS
   ======================================== */

/* Enhanced Newsletter Form Transitions */
.newsletter-form,
.checkout-newsletter-form,
#homepage-newsletter-form,
#newsletter-popup-form,
#footer-newsletter-form {
    transition: all 0.3s ease !important;
}

/* Enhanced Input Focus States */
.newsletter-form input[type="email"]:focus,
.checkout-newsletter-form input[type="email"]:focus {
    transform: translateY(-1px) !important;
}

/* Enhanced Button Hover Effects */
.newsletter-form button:hover,
.checkout-newsletter-form button:hover {
    box-shadow: 0 6px 20px rgba(124, 10, 2, 0.2) !important;
}

/* Consistent Error Message Styling */
.error-message {
    font-family: 'Libre Baskerville', serif !important;
    color: var(--luxury-burgundy) !important;
    font-weight: 400 !important;
}

/* Consistent Success Message Styling */
.newsletter-success-message,
.newsletter-success {
    font-family: 'Libre Baskerville', serif !important;
}

/* ========================================
   LUXURY TYPOGRAPHY OVERRIDES
   ======================================== */

/* Ensure all newsletter headings use Playfair Display */
.newsletter-popup-header h3,
.offer-details h4,
.form-header h3,
.newsletter-content h2,
.newsletter-success h4 {
    font-family: 'Playfair Display', serif !important;
}

/* Ensure all newsletter body text uses Libre Baskerville */
.newsletter-popup-header p,
.offer-details p,
.newsletter-content p,
.newsletter-success p,
.form-footer,
.newsletter-footer,
.form-check-label {
    font-family: 'Libre Baskerville', serif !important;
}

/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Smooth transitions for all newsletter elements */
.newsletter-popup-content,
.checkout-newsletter-content,
.newsletter-container {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Enhanced hover animations */
.benefit-item:hover {
    transform: translateX(8px) !important;
}

.benefit-icon:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
}

/* Close button enhancements */
.close-btn:hover {
    transform: scale(1.05) rotate(180deg) !important;
}

/* ========================================
   LUXURY COLOR PALETTE ENFORCEMENT
   ======================================== */

/* Ensure consistent luxury colors across all newsletter components */
.newsletter-popup,
.checkout-newsletter-popup,
.homepage-newsletter {
    --primary-color: var(--luxury-burgundy) !important;
    --secondary-color: var(--luxury-gold) !important;
    --accent-color: var(--luxury-cream) !important;
    --text-color: var(--luxury-gray) !important;
    --background-color: var(--luxury-white) !important;
}

/* Override any conflicting color schemes */
.newsletter-form .btn,
.subscribe-btn,
.checkout-newsletter-form .btn {
    color: var(--luxury-burgundy) !important;
    border-color: var(--luxury-burgundy) !important;
}

.newsletter-form .btn:hover,
.subscribe-btn:hover,
.checkout-newsletter-form .btn:hover {
    color: var(--luxury-white) !important;
    background-color: var(--luxury-burgundy) !important;
}

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

/* Improved focus indicators */
.newsletter-form input:focus,
.newsletter-form button:focus,
.checkout-newsletter-form input:focus,
.checkout-newsletter-form button:focus {
    outline: 2px solid var(--luxury-gold) !important;
    outline-offset: 2px !important;
}

/* Enhanced contrast for better readability */
.newsletter-form ::placeholder,
.checkout-newsletter-form ::placeholder {
    opacity: 0.8 !important;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 576px) {
    /* Improved mobile spacing */
    .newsletter-popup-content,
    .checkout-newsletter-content {
        padding: 25px 20px !important;
    }
    
    /* Better mobile typography */
    .newsletter-popup-header h3,
    .offer-details h4 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    /* Optimized mobile form elements */
    .newsletter-form input,
    .checkout-newsletter-form input {
        padding: 16px 20px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .newsletter-form button,
    .checkout-newsletter-form button {
        padding: 16px 24px !important;
        font-size: 14px !important;
    }
}