/* Sticky Subscription Bar Styles */
#sticky-subscription-bar {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Close button styles */
#close-sticky-bar {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#close-sticky-bar:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#sticky-subscription-bar .subscription-form input[type="email"] {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#sticky-subscription-bar .subscription-form input[type="email"]:focus {
    border-color: #ee4036;
    box-shadow: 0 0 0 3px rgba(238, 64, 54, 0.1);
}

#sticky-subscription-bar .subscription-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(238, 64, 54, 0.3);
}

/* Animation for smooth show/hide */
#sticky-subscription-bar.translate-y-full {
    transform: translateY(100%);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #sticky-subscription-bar {
        padding: 8px 12px;
    }
    
    #sticky-subscription-bar .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    #sticky-subscription-bar h3 {
        font-size: 0.875rem;
        margin-bottom: 0;
    }
    
    #sticky-subscription-bar .flex.flex-col.sm\\:flex-row {
        gap: 8px;
    }
    
    /* Make form more compact on mobile */
    #sticky-subscription-bar .subscription-form input[type="email"] {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    #sticky-subscription-bar .subscription-form button {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* Ensure content doesn't get hidden behind sticky bar */
body {
    padding-bottom: 0;
}

@media (max-width: 640px) {
    body {
        padding-bottom: 140px;
    }
}