/* ----------------------------------------------------------------------------*/
/* Elementor Newsletter Widget Styles */
.elementor-widget-newsletter-widget {
    width: 100%; /* Default to full width */
}

.elementor-newsletter--auto-width {
    width: fit-content; /* Standard way to fit content */
    /* Fallback for older browsers that don't support fit-content */
    width: -moz-fit-content;
}

.elementor-widget-newsletter-widget .newsletter-form {
    margin-left: auto;
    margin-right: auto;
}

.elementor-widget-newsletter-widget .newsletter-form .form-group {
    display: flex;
    align-items: center;
    max-width: 100%;
    /*border-bottom: 4px solid var(--e-global-color-accent); /* Continuous bottom border */
}

.elementor-newsletter--inline .newsletter-form .form-group {
    flex-direction: row;
    justify-content: space-between;
}

.elementor-newsletter--stacked .newsletter-form .form-group {
    flex-direction: column;
    align-items: stretch; /* Make input and button full width in stacked layout */
}

.elementor-newsletter--stacked .newsletter-form .form-group > * {
    margin-bottom: 10px; /* Add some space between stacked items */
}

.elementor-newsletter--stacked .newsletter-form .form-group > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from the last item */
}

.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"] {
    min-width: 220px;
    padding: 0 10px; /* Add some padding */
    font-size: 16px;
    color: var(--e-global-color-gray-60); /* Set input text color */
    border: none;
    background-color: transparent;
    outline: none;
    height: 64px;
    width: 100%; /* Take remaining width in inline layout */
}

.elementor-newsletter--stacked .newsletter-form .form-group input[type="email"] {
    height: 64px;
    width: 100%;
    /*border-bottom: 4px solid var(--e-global-color-accent); */
}

.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]::placeholder {
    height: 100%;
    color: var(--e-global-color-gray-60); /* Set placeholder text color to dark gray */
    font-size: 16px;
}

.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="submit"] {
    width: auto; /* Adjust width based on content in inline */
    height: 64px;
    padding: 0 20px; /* Add some padding */
    font-size: 24px;
    font-weight: bold;
    text-transform: capitalize; /* Capitalize button text */
    color: #fff;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: color 0s ease-in 0.3s ease-out, background-color 0s ease; /* Smooth transition */
}

.elementor-newsletter--stacked .newsletter-form .form-group input[type="submit"] {
    width: 100%; /* Full width in stacked layout */
}

.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="submit"]:hover {
    color: var(--e-global-color-accent); /* Change text color on hover */
    background-color: transparent; /* Ensure background remains transparent */
}

@media (max-width: 767px) {

    .elementor-widget-newsletter-widget {
        width: 100%;
    }

    .elementor-widget-newsletter-widget .newsletter-form {
        width: 100%;
        margin-right: auto;
        max-width: 600px;
    }

    .elementor-widget-newsletter-widget .newsletter-form .form-group {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
    }

    .elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"] {
        /*border-bottom: 4px solid var(--e-global-color-accent); /* Continuous bottom border */
        height: 64px;
        width: 100%; /* Make input full width on mobile */
        margin-bottom: 0; /* Add some space below the input */
        align-items: stretch;
    }

    .elementor-widget-newsletter-widget .newsletter-form .form-group input[type="submit"] {
        width: 100%; /* Ensure button stretches full width on mobile */
        height: 64px;
        padding: 0 20px; /* Maintain padding */
    }
}

/* ----------------------------------------------------------------------------*/
/* Autofill & Focus Overrides for Newsletter Input */
.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]:-webkit-autofill,
.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]:-webkit-autofill:hover,
.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--e-global-color-white) !important;
  color: var(--e-global-color-white) !important;
  font-size: 16px !important;
  font-family: inherit !important;

  background-color: transparent !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out, color 9999s ease-out !important;
}

.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]:-moz-autofill {
  background-color: transparent !important;
  color: var(--e-global-color-white) !important;
  font-size: 16px !important;
}

/* Also ensure no white flash on focus */
.elementor-widget-newsletter-widget .newsletter-form .form-group input[type="email"]:focus {
  background-color: transparent !important;
  box-shadow: none !important;
}

/*----------------------------------------------------------------------------*/