/* Zinifly theme for Listmonk's PUBLIC pages (built against Listmonk v6.2.x):
   subscription form, unsubscribe and preferences, opt-in confirmation,
   archive, and the admin login / 2FA / password-reset screens.
   Paste into: Settings -> Appearance -> Public -> Custom CSS, or run
   `zinifly-lmsetup --branding`. The logo comes from Settings -> General -> Logo URL. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap");

:root {
  --zf-blue: #5859F4;
  --zf-blue-dark: #4B4CDB;
  --zf-blue-tint: #EEEEFE;
  --zf-navy: #00034D;
  --zf-text: #15151A;
  --zf-muted: #4B5568;
  --zf-faint: #7C8499;
  --zf-surface-2: #F3F5FC;
  --zf-line: #DDE3F3;
  --zf-line-strong: #C2CBE6;
  --zf-ring: 0 0 0 3px rgba(88, 89, 244, .22);
}

html, body {
  background: radial-gradient(120% 70% at 50% -10%, #E4E5FD 0%, var(--zf-surface-2) 55%) fixed;
  color: var(--zf-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--zf-blue); }
a:hover { color: var(--zf-blue-dark); }
h1, h2, h3, h4 { font-family: "Montserrat", "Inter", sans-serif; color: var(--zf-navy); letter-spacing: -0.015em; }

.container.wrap {
  background: #fff;
  border: 1px solid var(--zf-line);
  border-radius: 18px;
  box-shadow: 0 4px 6px -2px rgba(0, 3, 77, .06), 0 24px 60px -24px rgba(0, 3, 77, .22);
  margin-top: 48px;
  padding: 36px 40px;
  max-width: 640px;
}
.header { border-bottom: 1px solid var(--zf-line); margin-bottom: 24px; padding-bottom: 20px; }
.header .logo img { max-height: 44px; width: auto; }

label { color: var(--zf-navy); font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], select {
  border: 1px solid var(--zf-line-strong);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
  border-color: var(--zf-blue);
  box-shadow: var(--zf-ring);
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--zf-blue); }

.button, button.button, input.button {
  background: var(--zf-blue);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 8px 18px -10px rgba(88, 89, 244, .75);
  color: #fff;
  font-weight: 600;
  padding: 11px 22px;
  transition: background .15s, box-shadow .15s;
}
.button:hover, button.button:hover, input.button:hover { background: var(--zf-blue-dark); color: #fff; }
.button:focus-visible { box-shadow: var(--zf-ring); outline: none; }
.button.button-outline {
  background: #fff;
  border-color: var(--zf-line-strong);
  box-shadow: none;
  color: var(--zf-navy);
}
.button.button-outline:hover { background: var(--zf-blue-tint); border-color: var(--zf-blue); color: var(--zf-blue); }

.lists { padding-left: 0; }
.lists li { list-style: none; padding: 6px 0; }
.unsub-all { background: var(--zf-surface-2); border: 1px solid var(--zf-line); border-radius: 12px; padding: 14px 16px; }
.error { color: #C2410C; font-weight: 600; }
.small { color: var(--zf-faint); }

footer.container { color: var(--zf-faint); font-size: .8rem; margin-top: 18px; opacity: .8; }
footer.container a { color: var(--zf-faint); }

@media (max-width: 680px) {
  .container.wrap { border-radius: 0; margin-top: 0; padding: 24px 20px; }
}