Newsletter

body {
font-family: var(–font-ui);
color: var(–text);
background: transparent;
}

.nl-wrapper {
max-width: 520px;
margin: 0 auto;
padding: 2rem 1rem;
}

.nl-header {
text-align: center;
margin-bottom: 2rem;
}

.nl-icon {
width: 52px;
height: 52px;
background: var(–primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}

.nl-icon svg {
width: 24px;
height: 24px;
fill: var(–primary-dark);
}

.nl-header h2 {
font-family: var(–font);
font-size: 1.6rem;
font-weight: normal;
color: var(–text);
margin-bottom: 0.4rem;
letter-spacing: -0.02em;
}

.nl-header p {
font-size: 0.9rem;
color: var(–text-muted);
line-height: 1.6;
}

.nl-tabs {
display: flex;
background: var(–bg-soft);
border-radius: var(–radius);
padding: 4px;
margin-bottom: 1.75rem;
gap: 4px;
}

.nl-tab {
flex: 1;
padding: 0.55rem 1rem;
border: none;
background: transparent;
border-radius: 7px;
font-size: 0.875rem;
font-family: var(–font-ui);
cursor: pointer;
color: var(–text-muted);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
font-weight: 500;
}

.nl-tab.active-subscribe {
background: var(–primary);
color: #fff;
box-shadow: 0 2px 8px rgba(15,110,86,0.18);
}

.nl-tab.active-unsubscribe {
background: var(–danger);
color: #fff;
box-shadow: 0 2px 8px rgba(216,90,48,0.18);
}

.nl-card {
background: var(–bg);
border: 1px solid var(–border);
border-radius: var(–radius);
padding: 1.75rem;
}

.nl-panel { display: none; }
.nl-panel.active { display: block; }

.nl-field {
margin-bottom: 1.1rem;
}

.nl-field label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(–text-muted);
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.nl-field input[type=“text“],
.nl-field input[type=“email“] {
width: 100%;
padding: 0.65rem 0.85rem;
border: 1px solid var(–border);
border-radius: 7px;
font-size: 0.95rem;
font-family: var(–font-ui);
color: var(–text);
background: var(–bg);
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}

.nl-field input:focus {
border-color: var(–primary);
box-shadow: 0 0 0 3px rgba(29,158,117,0.12);
}

#panel-unsubscribe .nl-field input:focus {
border-color: var(–danger);
box-shadow: 0 0 0 3px rgba(216,90,48,0.12);
}

.nl-privacy {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.82rem;
color: var(–text-muted);
line-height: 1.5;
margin-bottom: 1.25rem;
}

.nl-privacy input[type=“checkbox“] {
margin-top: 2px;
accent-color: var(–primary);
flex-shrink: 0;
width: 15px;
height: 15px;
}

.nl-privacy a {
color: var(–primary-dark);
text-decoration: underline;
}

.nl-btn {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 7px;
font-size: 0.95rem;
font-family: var(–font-ui);
font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
letter-spacing: 0.01em;
}

.nl-btn:active { transform: scale(0.99); }

.nl-btn-subscribe {
background: var(–primary);
color: #fff;
}

.nl-btn-subscribe:hover { background: var(–primary-dark); }

.nl-btn-unsubscribe {
background: var(–danger);
color: #fff;
}

.nl-btn-unsubscribe:hover { background: var(–danger-dark); }

.nl-note {
margin-top: 1.25rem;
font-size: 0.8rem;
color: var(–text-muted);
line-height: 1.55;
text-align: center;
}

.nl-message {
display: none;
border-radius: 7px;
padding: 0.9rem 1rem;
font-size: 0.88rem;
line-height: 1.55;
margin-bottom: 1.1rem;
}

.nl-message.success {
display: block;
background: var(–primary-light);
color: var(–primary-dark);
border: 1px solid #9FE1CB;
}

.nl-message.error {
display: block;
background: var(–danger-light);
color: var(–danger-dark);
border: 1px solid #F5C4B3;
}

.nl-divider {
height: 1px;
background: var(–border);
margin: 1.25rem 0;
}