.slc-newsletter-form,
.slc-newsletter-verify-form,
.slc-newsletter-resend-form {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.slc-newsletter-form__row {
  display: flex;
  gap: 8px;
}

.slc-newsletter-form input[type="email"],
.slc-newsletter-verify-form input,
.slc-newsletter-resend-form input {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: inherit;
}

.slc-newsletter-form button,
.slc-newsletter-verify-form button,
.slc-newsletter-resend-form button,
.slc-newsletter-modal button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.slc-newsletter-form__company {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.slc-newsletter-form__status,
.slc-newsletter-modal__status {
  min-height: 1.4em;
}

.slc-newsletter-modal[hidden] {
  display: none;
}

.slc-newsletter-modal,
.slc-newsletter-modal *,
.slc-newsletter-modal *::before,
.slc-newsletter-modal *::after {
  box-sizing: border-box;
}

.slc-newsletter-modal {
  --slc-newsletter-modal-background: var(--slc-color-background, #050505);
  --slc-newsletter-modal-surface: var(--slc-color-surface-raised, #121212);
  --slc-newsletter-modal-surface-muted: var(--slc-color-surface, #0b0b0b);
  --slc-newsletter-modal-text: var(--slc-color-text, #f8f7f2);
  --slc-newsletter-modal-muted: var(--slc-color-muted, #9e9588);
  --slc-newsletter-modal-border: var(--rrc-component-border, var(--slc-color-border, #302a26));
  --slc-newsletter-modal-primary: var(--slc-color-primary, #a91f19);
  --slc-newsletter-modal-primary-hover: var(--slc-color-primary-hover, #c32a21);
  --slc-newsletter-modal-secondary: var(--slc-color-secondary, #e2d4bc);
  --slc-newsletter-modal-accent: var(--slc-color-accent, #a88a5a);
  --slc-newsletter-modal-success: var(--slc-forms-success, var(--slc-color-green, #708f2d));
  --slc-newsletter-modal-danger: var(--slc-forms-error, var(--slc-color-primary-hover, #c32a21));
  --slc-newsletter-modal-radius: var(--slc-cards-radius, var(--rrc-radius-none, 0));
  --slc-newsletter-modal-control-radius: var(--slc-forms-radius, var(--rrc-radius-none, 0));
  --slc-newsletter-modal-font-body: var(--slc-font-body, var(--rrc-font-body, inherit));
  --slc-newsletter-modal-font-heading: var(--wp--preset--font-family--heading, var(--rrc-font-subheadline-cta, var(--slc-font-display, inherit)));
  --slc-newsletter-modal-font-utility: var(--slc-font-utility, var(--rrc-font-navigation, inherit));
}

.slc-newsletter-modal.is-open {
  position: fixed;
  inset: 0;
  z-index: var(--rrc-z-modal, 100000);
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, var(--slc-newsletter-modal-background) 82%, transparent);
  backdrop-filter: blur(5px) saturate(0.86);
}

.slc-newsletter-modal__panel {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(100%, 456px);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  padding: 28px;
  border-radius: var(--slc-newsletter-modal-radius);
  border: 1px solid var(--slc-newsletter-modal-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--slc-newsletter-modal-primary) 14%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--slc-newsletter-modal-text) 4%, transparent), transparent 5rem),
    var(--slc-newsletter-modal-surface);
  color: var(--slc-newsletter-modal-text);
  font-family: var(--slc-newsletter-modal-font-body);
  box-shadow: var(--rrc-shadow-hard, 0.5rem 0.5rem 0 rgba(5, 5, 5, 0.72));
}

.slc-newsletter-modal__panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--slc-newsletter-modal-primary), var(--slc-newsletter-modal-accent) 58%, var(--slc-newsletter-modal-success));
}

.slc-newsletter-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--rrc-hit-target, 44px);
  min-height: var(--rrc-hit-target, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: transparent;
  color: var(--slc-newsletter-modal-text);
  font-family: var(--slc-newsletter-modal-font-utility);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.82;
}

.slc-newsletter-modal__close:hover,
.slc-newsletter-modal__close:focus-visible {
  border: 0;
  background: color-mix(in srgb, var(--slc-newsletter-modal-text) 8%, transparent);
  color: var(--slc-newsletter-modal-secondary);
  opacity: 1;
}

.slc-newsletter-modal__panel h2 {
  margin: 0;
  padding-right: 42px;
  color: var(--slc-newsletter-modal-text);
  font-family: var(--slc-newsletter-modal-font-heading);
  font-size: clamp(1.62rem, 6vw, 2.25rem);
  font-style: normal;
  font-weight: 400;
  line-height: 0.98;
  opacity: 1;
  text-shadow: none;
  text-transform: uppercase;
}

.slc-newsletter-modal__eyebrow {
  margin: 0;
  color: var(--slc-newsletter-modal-secondary);
  font-family: var(--slc-newsletter-modal-font-utility);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.slc-newsletter-modal__state {
  justify-self: start;
  margin: -6px 0 0;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--slc-newsletter-modal-accent) 58%, transparent);
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: color-mix(in srgb, var(--slc-newsletter-modal-accent) 14%, transparent);
  color: var(--slc-newsletter-modal-secondary);
  font-family: var(--slc-newsletter-modal-font-utility);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.slc-newsletter-modal__description {
  color: var(--slc-newsletter-modal-secondary);
  line-height: 1.55;
}

.slc-newsletter-modal__panel p {
  margin: 0;
}

.slc-newsletter-modal__panel form {
  display: grid;
  gap: 10px;
}

.slc-newsletter-modal__panel label {
  display: grid;
  gap: 5px;
  color: var(--slc-newsletter-modal-text);
  font-weight: 700;
}

.slc-newsletter-modal__panel label small {
  color: var(--slc-newsletter-modal-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.slc-newsletter-modal__panel input[name="code"] {
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--rrc-form-border, var(--slc-newsletter-modal-border));
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: var(--rrc-form-background-filled, var(--slc-newsletter-modal-surface-muted));
  color: var(--rrc-form-text, var(--slc-newsletter-modal-text));
  font: inherit;
  font-size: 1.32rem;
  letter-spacing: 0.2em;
  text-align: center;
  box-shadow: var(--rrc-form-control-shadow, none);
}

.slc-newsletter-modal__panel input[name="code"]:focus-visible,
.slc-newsletter-modal__panel button:focus-visible,
.slc-newsletter-form input[type="email"]:focus-visible,
.slc-newsletter-form button:focus-visible {
  outline: var(--rrc-focus-size, 3px) solid color-mix(in srgb, var(--slc-newsletter-modal-success) 54%, transparent);
  outline-offset: 2px;
}

.slc-newsletter-modal__panel button[type="submit"] {
  min-height: 46px;
  border-color: var(--rrc-primary-button-border, var(--slc-newsletter-modal-primary));
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: var(--rrc-primary-button-background, var(--slc-newsletter-modal-primary));
  color: var(--rrc-primary-button-text, var(--slc-newsletter-modal-text));
  font-family: var(--slc-newsletter-modal-font-utility);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

.slc-newsletter-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slc-newsletter-modal__resend {
  border-color: var(--rrc-secondary-button-border, color-mix(in srgb, var(--slc-newsletter-modal-secondary) 72%, transparent));
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: var(--rrc-secondary-button-background, transparent);
  color: var(--rrc-secondary-button-text, var(--slc-newsletter-modal-text));
  font-family: var(--slc-newsletter-modal-font-utility);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slc-newsletter-modal__status {
  min-height: 1.5em;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--slc-newsletter-modal-text) 18%, transparent);
  border-radius: var(--slc-newsletter-modal-control-radius);
  background: color-mix(in srgb, var(--slc-newsletter-modal-text) 5%, transparent);
  color: var(--slc-newsletter-modal-secondary);
  line-height: 1.45;
}

.slc-newsletter-modal.is-success .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="verified"] .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="already_verified"] .slc-newsletter-modal__state {
  border-color: color-mix(in srgb, var(--slc-newsletter-modal-success) 62%, transparent);
  background: color-mix(in srgb, var(--slc-newsletter-modal-success) 16%, transparent);
  color: var(--slc-newsletter-modal-text);
}

.slc-newsletter-modal.is-error .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="expired"] .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="invalid"] .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="locked"] .slc-newsletter-modal__state,
.slc-newsletter-modal[data-slc-newsletter-state="unavailable"] .slc-newsletter-modal__state {
  border-color: color-mix(in srgb, var(--slc-newsletter-modal-danger) 62%, transparent);
  background: color-mix(in srgb, var(--slc-newsletter-modal-danger) 16%, transparent);
  color: var(--slc-newsletter-modal-text);
}

.slc-newsletter-modal.is-success .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="verified"] .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="already_verified"] .slc-newsletter-modal__status {
  border-color: color-mix(in srgb, var(--slc-newsletter-modal-success) 48%, transparent);
  background: color-mix(in srgb, var(--slc-newsletter-modal-success) 12%, transparent);
  color: var(--slc-newsletter-modal-text);
}

.slc-newsletter-modal.is-error .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="expired"] .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="invalid"] .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="locked"] .slc-newsletter-modal__status,
.slc-newsletter-modal[data-slc-newsletter-state="unavailable"] .slc-newsletter-modal__status {
  border-color: color-mix(in srgb, var(--slc-newsletter-modal-danger) 48%, transparent);
  background: color-mix(in srgb, var(--slc-newsletter-modal-danger) 12%, transparent);
  color: var(--slc-newsletter-modal-text);
}

.slc-newsletter-modal [hidden] {
  display: none;
}

@media (max-width: 460px) {
  .slc-newsletter-form__row {
    display: grid;
  }

  .slc-newsletter-modal.is-open {
    align-items: end;
    padding: 12px;
  }

  .slc-newsletter-modal__panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    padding: 20px;
  }

  .slc-newsletter-modal__panel h2 {
    font-size: 1.25rem;
  }

  .slc-newsletter-modal__actions,
  .slc-newsletter-modal__panel button {
    display: grid;
    width: 100%;
  }
}