/*
 * Newsletter modal style stub.
 * Keep final visual styling here instead of css/main.css or css/main.scss.
 */

.kidsint-newsletter-modal {
    width: min(100% - 32px, 640px);
    padding: 0;
    border: 0;
    background-color: transparent;
}

.kidsint-newsletter-modal::backdrop {
    background: rgb(0 0 0 / 45%);
}

.kidsint-newsletter-modal__inner {
    position: relative;
}

.kidsint-newsletter-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: transparent;
    font-size: 24px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.kidsint-newsletter-modal__content {
    padding: 48px 32px 32px;
    border-radius: 30px;
    overflow: hidden;
    background-color: white;
}

.kidsint-newsletter-modal__title {
    margin: 0 0 24px;
    font-family: Montserrat, Helvetica, Arial, sans-serif
}

.kidsint-newsletter-modal .nf-form-cont {
    width: 100%;
}

.kidsint-newsletter-modal .nf-before-form-content {
    margin: 0 0 16px;
}

.kidsint-newsletter-modal .nf-form-content {
    display: grid;
    gap: 8px;
    grid-template-columns: 8fr 4fr;
    grid-template-areas:
            "email button"
            "privacy privacy";
}

.kidsint-newsletter-modal .nf-field-container {
    margin: 0;
}

nf-fields-wrap,
nf-field {
    display: contents;
}
.kidsint-newsletter-modal .field-wrap {

}

.kidsint-newsletter-modal .nf-field-container.submit-container {
    grid-area: button;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}



.kidsint-newsletter-modal .nf-field-container.submit-container input {
    width: 100%;
    flex: 1 0 100%;
    background-image: linear-gradient(90deg, #e7205d 0%, #e84634 100%) !important;
    cursor: pointer;
    border-radius: 8px;
}

.kidsint-newsletter-modal .nf-field-container.submit-container input:hover {
    color: white !important;
}


.kidsint-newsletter-modal .nf-field-container.email-container {
    grid-area: email
}

.kidsint-newsletter-modal .nf-field-container.email-container input {
    background-color: white;
    border-radius: 8px;
}



.kidsint-newsletter-modal .nf-field-container.checkbox-container {
    grid-area: privacy
}

.kidsint-newsletter-modal .nf-field-label {
    margin: 0;
}

.kidsint-newsletter-modal .nf-field-label label {
    display: block;
}

.kidsint-newsletter-modal .nf-field-element {
    width: 100%;
}

.kidsint-newsletter-modal .nf-field-element input,
.kidsint-newsletter-modal .nf-field-element textarea,
.kidsint-newsletter-modal .nf-field-element select {
    width: 100%;
}

.kidsint-newsletter-modal .nf-field-element input[type="email"],
.kidsint-newsletter-modal .nf-field-element input[type="text"],
.kidsint-newsletter-modal .nf-field-element input[type="tel"],
.kidsint-newsletter-modal .nf-field-element input[type="url"] {
    display: block;
}

.kidsint-newsletter-modal .checkbox-container .field-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.kidsint-newsletter-modal .checkbox-container .nf-field-element {
    flex: 0 0 auto;
    width: auto;
}

.kidsint-newsletter-modal .checkbox-container .nf-field-element input[type="checkbox"] {
    width: auto;
}

.kidsint-newsletter-modal .checkbox-container .nf-field-label {
    flex: 1 1 auto;
}

.kidsint-newsletter-modal .submit-container {
    margin-top: 8px;
}

.kidsint-newsletter-modal .submit-container .nf-field-element {
    display: flex;
}

.kidsint-newsletter-modal .submit-container input[type="button"],
.kidsint-newsletter-modal .submit-container input[type="submit"],
.kidsint-newsletter-modal .submit-container button {
    width: auto;
}

.kidsint-newsletter-modal .nf-error-msg,
.kidsint-newsletter-modal .nf-response-msg {
    margin: 8px 0 0;
}