.nxt-newsletter-element,
.nxt-newsletter-unsubscribe-element {
    /* --min-height: 160px; */
   
    --content-max-width: 786px;

    max-width: var(--content-max-width);
    
    margin: 0 auto;;
}

.nxt-newsletter-element .hidden,
.nxt-newsletter-unsubscribe-element .hidden {
    display: none;
}

.nxt-newsletter-element .form-wrapper,
.nxt-newsletter-unsubscribe-element .form-wrapper {
    text-align: center;
}

.nxt-newsletter-element .form-wrapper .title,
.nxt-newsletter-unsubscribe-element .form-wrapper .title {
    color: var(--color-1);
    font-size: var(--h2-font-size);
    line-height: var(--h2-font-line-height);
    font-weight: 600;
    text-align: center;
}

.nxt-newsletter-element .nxt-newsletter-message.success,
.nxt-newsletter-element .nxt-newsletter-message.error,
.nxt-newsletter-element .form-wrapper .text,
.nxt-newsletter-unsubscribe-element .nxt-newsletter-message.success,
.nxt-newsletter-unsubscribe-element .nxt-newsletter-message.error,
.nxt-newsletter-unsubscribe-element .form-wrapper .text {
    margin-top: var(--h2-margin-top);
    text-align: center;
    color: var(--text-color, #E9E9E9);

    font-size: var(--typography-text-text-large-font-size, 20px);   
    font-weight: var(--text-body-body-font-weight, 400);
    line-height: var(--typography-text-text-large-line-height, 30px);
}

.nxt-newsletter-element .form-wrapper form,
.nxt-newsletter-unsubscribe-element .form-wrapper form {
    margin-top: var(--section-section-inner-spc-3x);
    display: flex;
    width: var(--page-basics-columns-col-4, 373.33px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--section-section-inner-spc-2x, 32px);
    width: var(--page-basics-columns-col-4, 373.33px);
    margin: var(--section-section-inner-spc-3x) auto 0 auto;
}

.nxt-newsletter-element .form-wrapper .form-collapse,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-collapse {
    display: flex;
    flex-direction: column;
    gap: var(--section-section-inner-spc-2x, 32px);
    width: 100%;
}

.nxt-newsletter-element .form-wrapper input[type="text"],
.nxt-newsletter-element .form-wrapper input[type="email"],
.nxt-newsletter-unsubscribe-element .form-wrapper input[type="text"],
.nxt-newsletter-unsubscribe-element .form-wrapper input[type="email"] {
    display: flex;
    height: var(--ui-base-control-height, 40px);
    padding: 0 var(--ui-base-control-px, 16px);
    align-items: center;
    align-self: stretch;
    border-radius: var(--ui-base-control-radius, 999px);
    border: 1px solid var(--ui-controls-border-color, #E9E9E9);
    background: var(--body-bg, #1C1C1C);
    color: var(--text-color, #E9E9E9);
}

.nxt-newsletter-element .form-wrapper .form-radio,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    gap: var(--ui-base-form-gap, 20px);
}

.nxt-newsletter-element .form-wrapper .radio-title,
.nxt-newsletter-unsubscribe-element .form-wrapper .radio-title {
    color: var(--text-color, #E9E9E9);
    margin-bottom: 3px;;
}

.nxt-newsletter-element .form-wrapper .checkbox-wrapper,
.nxt-newsletter-element .form-wrapper .checkbox-wrapper a,
.nxt-newsletter-unsubscribe-element .form-wrapper .checkbox-wrapper,
.nxt-newsletter-unsubscribe-element .form-wrapper .checkbox-wrapper a {
    color: var(--text-color, #E9E9E9);
}

.nxt-newsletter-element .form-wrapper .checkbox-wrapper a,
.nxt-newsletter-unsubscribe-element .form-wrapper .checkbox-wrapper a {
    text-decoration: underline;
}

/* Hide native radio */
.nxt-newsletter-element .form-wrapper .form-radio input[type="radio"],
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;

    /* Box */
    display: flex;
    width: 20px;
    height: var(--ui-base-radio-check-height, 20px);
    aspect-ratio: 1/1;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Border */
    border-radius: var(--ui-base-control-radius, 999px);
    border: 1px solid var(--ui-controls-border-color, #E9E9E9);

    cursor: pointer;
    position: relative;
}

/* Inner bubble */
.nxt-newsletter-element .form-wrapper .form-radio input[type="radio"]::after,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio input[type="radio"]::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.15s ease;
}

/* Active state - red bubble */
.nxt-newsletter-element .form-wrapper .form-radio input[type="radio"]:checked::after,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio input[type="radio"]:checked::after {
    background: var(--colors-core-red, #FF2E08);
}

.nxt-newsletter-element .form-wrapper .form-radio label,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio label {
    color: var(--ui-controls-placeholder-color, #666);
    font-size: 18px;
}

.nxt-newsletter-element .form-wrapper .form-radio input[type="radio"]:checked + label,
.nxt-newsletter-unsubscribe-element .form-wrapper .form-radio input[type="radio"]:checked + label {
    color: var(--text-color, #E9E9E9);
}

.nxt-newsletter-element .form-wrapper .radio-wrapper,
.nxt-newsletter-unsubscribe-element .form-wrapper .radio-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ui-base-radio-check-gap, 10px);
}

.nxt-newsletter-element .form-wrapper input[type="submit"],
.nxt-newsletter-unsubscribe-element .form-wrapper input[type="submit"] {
    border-radius: 999px;
    opacity: var(--buttons-button-inactive-opacity, 0.5);
    background: var(--buttons-primary-button-bg, #FF2E08);
    color: var(--buttons-primary-button-color, #FFF);
    text-align: center;
    font-size: var(--ui-base-ui-fs, 20px);
    padding: 0 var(--ui-buttons-button-small-button-small-px, 18px);
    min-height: var(--ui-buttons-button-small-button-small-min-height, 40px);
    font-weight: var(--text-body-body-font-weight-bold, 800);
    cursor: pointer;
}

.nxt-newsletter-element .form-wrapper input[type="submit"].active,
.nxt-newsletter-unsubscribe-element .form-wrapper input[type="submit"].active {
    opacity: 1;
}


@media (max-width: 1024px) {
    .nxt-newsletter-element,
    .nxt-newsletter-unsubscribe-element {}
}

@media (max-width: 768px) {
    .nxt-newsletter-element,
    .nxt-newsletter-unsubscribe-element {}
}

@media (max-width: 550px) {
    .nxt-newsletter-element,
    .nxt-newsletter-unsubscribe-element {}
}