/**
 * RapidSkill Newsletter Form Styles
 * 
 * Restores the professional pill-shaped design for the newsletter subscription form.
 * Matches the reference design: White capsule container, inline blue button.
 * 
 * @version 1.0.0
 */

/* Target common newsletter form wrappers in this position */
.tutor-newsletter-form,
.widget_newsletter form,
.mc4wp-form,
.footer-widget form,
/* Fallback for generic forms in the call-to-action area */
section[class*="cta"] form,
div[class*="newsletter"] form {
    background: #ffffff !important;
    border-radius: 50px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    max-width: 550px !important;
    width: 100% !important;
    margin: 20px auto !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* CRITICAL FIX: Force the wrapper div to flex and expand */
.mc4wp-form-fields,
.tutor-newsletter-form>div,
.widget_newsletter form>div {
    display: flex !important;
    flex-grow: 1 !important;
    width: 100% !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Email Input Field */
.tutor-newsletter-form input[type="email"],
.widget_newsletter form input[type="email"],
.mc4wp-form input[type="email"],
.footer-widget form input[type="email"],
section[class*="cta"] form input[type="email"],
div[class*="newsletter"] form input[type="email"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-grow: 1 !important;
    /* Force expansion */
    flex-shrink: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    /* Take up remaining space */
    padding: 12px 24px !important;
    font-size: 16px !important;
    color: #334155 !important;
    border-radius: 50px !important;
    /* Matches container */
    outline: none !important;
    margin: 0 !important;
    height: 50px !important;
    /* Ensure good touch target */
}

/* Placeholder Text */
.tutor-newsletter-form input[type="email"]::placeholder,
.mc4wp-form input[type="email"]::placeholder {
    color: #94a3b8 !important;
}

/* Submit/Sign Up Button */
.tutor-newsletter-form button,
.tutor-newsletter-form input[type="submit"],
.widget_newsletter form button,
.widget_newsletter form input[type="submit"],
.mc4wp-form button,
.mc4wp-form input[type="submit"],
section[class*="cta"] form button,
section[class*="cta"] form input[type="submit"] {
    background: #1a56db !important;
    /* Vivid Blue */
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0 32px !important;
    height: 48px !important;
    /* Match container height */
    /* Slightly smaller than container padding */
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.3) !important;
    flex-shrink: 0 !important;
}

/* Button Hover State */
.tutor-newsletter-form button:hover,
.tutor-newsletter-form input[type="submit"]:hover,
.mc4wp-form button:hover,
.mc4wp-form input[type="submit"]:hover {
    background: #1e40af !important;
    /* Darker Blue */
    transform: translateY(-1px) !important;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {

    .tutor-newsletter-form,
    .widget_newsletter form,
    .mc4wp-form {
        max-width: 100% !important;
    }

    .tutor-newsletter-form input[type="email"],
    .mc4wp-form input[type="email"] {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    .tutor-newsletter-form button,
    .mc4wp-form button {
        padding: 0 20px !important;
        font-size: 14px !important;
    }
}