:root {
--kgv-abo-primary: #5F8D4E;
--kgv-abo-primary-dark: #234236;
--kgv-abo-primary-light: #7AA96B;
--kgv-abo-background: #F7F3EA;
--kgv-abo-surface: #FFFFFF;
--kgv-abo-accent-soft: #E8DCC6;
--kgv-abo-border: #E8E0D4;
--kgv-abo-success-bg: #E8F5EA;
--kgv-abo-text: #3E3E3E;
--kgv-abo-text-light: #777777;
}
.kgv-page-subscribe {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
width: 100%;
max-width: 1200px;
}
.kgv-page-subscribe-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
}
.kgv-page-subscribe-button,
.kgv-page-subscribe-remove {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.kgv-page-subscribe-button {
border: 1px solid var(--kgv-abo-primary);
background: var(--kgv-abo-primary);
color: #fff;
box-shadow: 0 10px 22px rgba(35, 66, 54, 0.12);
}
.kgv-page-subscribe-button:hover,
.kgv-page-subscribe-button:focus {
border-color: var(--kgv-abo-primary-dark);
background: var(--kgv-abo-primary-dark);
color: #fff;
transform: translateY(-1px);
}
.kgv-page-subscribe-button.is-subscribed {
border-color: var(--kgv-abo-primary);
background: var(--kgv-abo-success-bg);
color: var(--kgv-abo-primary-dark);
box-shadow: none;
}
.kgv-page-subscribe-button.is-subscribed:hover,
.kgv-page-subscribe-button.is-subscribed:focus {
border-color: var(--kgv-abo-primary-dark);
background: var(--kgv-abo-primary-dark);
color: #fff;
transform: translateY(-1px);
}
.kgv-page-subscribe-remove {
border: 1px solid var(--kgv-abo-border);
background: var(--kgv-abo-surface);
color: var(--kgv-abo-primary-dark);
box-shadow: none;
}
.kgv-page-subscribe-remove:hover,
.kgv-page-subscribe-remove:focus {
border-color: var(--kgv-abo-primary-dark);
background: var(--kgv-abo-accent-soft);
color: var(--kgv-abo-primary-dark);
}
.kgv-page-subscribe-feedback,
.kgv-page-subscribe-message {
text-align: right;
color: var(--kgv-abo-text-light);
font-size: 14px;
line-height: 1.45;
}
.kgv-page-subscribe-feedback.is-error {
color: #8a2424;
}
.kgv-page-subscribe-message {
display: inline-block;
padding: 12px 16px;
border: 1px solid var(--kgv-abo-border);
border-radius: 12px;
background: var(--kgv-abo-background);
color: var(--kgv-abo-primary-dark);
}
@media (max-width: 520px) {
.kgv-page-subscribe,
.kgv-page-subscribe-form,
.kgv-page-subscribe-button {
width: 100%;
}
}