.newsletter-form-wrapper {
    width: 450px!important;
}
.newsletter-email-form {
    width: 450px!important;
    border-radius: 16px;
}

@media (max-width: 500px) {
    .newsletter-form-wrapper {
         width: 100% !important;
    }
    .newsletter-email-form {
        width: 100% !important;
    }
}

/* Collapse to column layout on small screens */
@media (max-width: 768px) {
    .newsletter-input-row {
        flex-direction: column;
    }
}



.newsletter-input-row {
    display: flex;
    gap: 8px;
    margin: 8px 0px;
}

.newsletter-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
    border-radius: 8px;
    padding: 0px;
    height: 48px;
}

.newsletter-firstname-input,
.newsletter-lastname-input,
.newsletter-email-input {
    all: unset !important;
    background-color: #FFFFFF !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-grow: 1 !important;
    height: 100% !important;
    /* Ensures input takes up remaining space in the wrapper */
}

.newsletter-email-input {
    width: 100% !important;
}

.newsletter-firstname-input,
.newsletter-lastname-input {
    width: 50% !important;
}

.newsletter-email-submit {
    all: unset !important;
    background-color: #FF6E4B !important;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    padding: 12px 18px!important;
    cursor: pointer !important;
    margin: 0px 3px!important;
    /* Adds space between input and button */
}

.newsletter-email-submit span {
    color: #ffffff !important;
}

.newsletter-email-submit:hover {
    background-color: #000000 !important;
}

.newsletter-email-submit svg {
    display: block;
    margin: 0 auto;
}

.form-response {
    color: #D8DFE7;
    padding: 8px 0px;
}

.newsletter-unsubscribe-info {
    font-size: 12px;
    color: #8390A4;
    text-align: left;
}

.newsletter-privacy-agreement-wrapper {
    padding-top: 8px;
}


.privacy-agreement-label {
    font-size: 14px;
    text-align: left;
    color: #D8DFE7;
    cursor: pointer;
}

/* Use opacity and positioning to hide it without removing focusability */
.newsletter-hidden-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* Style the custom label to act as the checkbox */
.privacy-agreement-label {
    display: inline-flex;
    align-items: center;
    padding-left: 30px;
    /* Space for the custom checkbox */
    position: relative;
    cursor: pointer;
    font-size: 14px;
}

/* Custom checkbox square */
.privacy-agreement-label::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: #ccc;
    /* Border color */
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Show a white checkmark when checkbox is checked */
.newsletter-hidden-checkbox:checked+.privacy-agreement-label::before {
    background-color: #FF6E4B;
    /* Background color when checked */
    border-color: #FF6E4B;
    /* Border color when checked */
}

/* Create the white checkmark */
.newsletter-hidden-checkbox:checked+.privacy-agreement-label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
}