/* eSIM op reis look for Listmonk's public pages (unsubscribe, preferences, opt-in
   confirmation, data export). Stored as setting appearance.public.custom_css by
   tools/listmonk-templates.py. Colours and fonts as on esimopreis.nl (globals.css). */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@600;700&display=swap");

body {
  background: #F7F9FB;
  font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
  color: #0F1419;
}
h1, h2, h3, h4 {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}
a { color: #007BFF; text-decoration-color: #9ECBFF; }
a:hover { color: #0069D9; }

.wrap {
  border: 1px solid #DEE4EA;
  border-radius: 18px;
  box-shadow: none;
}
.header { border-bottom: 1px solid #DEE4EA; }

/* The logo is the site's text wordmark: eSIM (dark) opreis (blue) .nl (dark). */
.header .logo img { display: none; }
/* Flex, so the whitespace around the hidden <img> doesn't show as spaces in the word. */
.header .logo {
  display: flex;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.header .logo a { display: flex; text-decoration: none; color: #007BFF; }
.header .logo a::before { content: "eSIM"; color: #0F1419; }
.header .logo a::after { content: "opreis"; }
.header .logo::after { content: ".nl"; color: #0F1419; }
/* public.js sets <html lang> to the visitor's language: that brand's wordmark. */
html:lang(de) .header .logo a::after { content: "aufreisen"; }
html:lang(de) .header .logo::after { content: ".de"; }
html:lang(en) .header .logo a::after { content: "fortravel"; }
html:lang(en) .header .logo::after { content: ".eu"; }

input[type="text"], input[type="email"], input[type="password"], select {
  border: 1px solid #D5DCE3;
  border-radius: 12px;
  box-shadow: none;
}
input:focus { border-color: #007BFF; }

.button {
  background: #007BFF;
  border-radius: 100px;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-weight: 600;
}
.button:hover { background: #0069D9; }
.button.button-outline { border-color: #007BFF; color: #007BFF; }
.button.button-outline:hover { background: #0069D9; border-color: #0069D9; color: #fff; }

/* No "powered by" line; the company line is in the mails. */
footer.container { visibility: hidden; }