/* ============== RESET & BASICS ============== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  /* Vrolijk blauw/turquoise – géén wit in BG */
  --bg:#0f2735;           /* basis donkerblauw */
  --card:#123b4a;         /* kaart */
  --text:#e8f9ff;         /* lichte tekst */
  --muted:#b2d2e0;        /* gedempt blauwgrijs */
  --border:#1c4d63;       /* rand */
  --accent1:#12b5e5;      /* azuur */
  --accent2:#2ec4b6;      /* turquoise */
  --focus:#ffd166;        /* focus */
}

html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg); color:var(--text);
  position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ============== BACKGROUND ============== */
.bg-layer{
  position:fixed; inset:0; z-index:-2; transition:opacity .9s ease-in-out;
  background-size: cover, 36px 36px; background-position:center, 0 0; background-repeat:no-repeat, repeat;
}
.bg-layer.dim{ opacity:0; }
.bg-overlay{ position:fixed; inset:0; z-index:-1; background:rgba(15,39,53,.85); pointer-events:none; }

.pattern {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%2327a0c9' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='M5 8h10v8H5z m0 0l5 4 5-4'/%3E%3Cpath d='M21 6h9v6h-9z m0 0l4.5 3 4.5-3'/%3E%3Crect x='4' y='22' width='8' height='6' rx='1.5'/%3E%3Cpath d='M4 25h8M13 23l3 3-3 3'/%3E%3Cpath d='M20 22h8l1 2-1 2h-8l-1-2z'/%3E%3Ccircle cx='29' cy='28' r='2'/%3E%3Ccircle cx='23' cy='29' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* gradients (geen wit) */
.theme-1 { background-image: linear-gradient(135deg, #0f2735 0%, #13536e 60%, var(--accent1) 100%), var(--svg); }
.theme-2 { background-image: linear-gradient(135deg, #0f2735 0%, #104b53 60%, var(--accent2) 100%), var(--svg); }
.theme-3 { background-image: linear-gradient(135deg, #0f2735 0%, #123b4a 60%, #1da1f2 100%), var(--svg); }
.theme-4 { background-image: linear-gradient(135deg, #0f2735 0%, #115166 60%, #00b2ff 100%), var(--svg); }
.theme-5 { background-image: linear-gradient(135deg, #0f2735 0%, #134552 60%, #00c2d1 100%), var(--svg); }
.theme-6 { background-image: linear-gradient(135deg, #0f2735 0%, #104f63 60%, #5ad1e8 100%), var(--svg); }
.theme-7 { background-image: linear-gradient(135deg, #0f2735 0%, #133e4f 60%, #0ea5e9 100%), var(--svg); }
.theme-8 { background-image: linear-gradient(135deg, #0f2735 0%, #124857 60%, #06b6d4 100%), var(--svg); }
.theme-9 { background-image: linear-gradient(135deg, #0f2735 0%, #13536e 60%, #14b8a6 100%), var(--svg); }
.theme-10{ background-image: linear-gradient(135deg, #0f2735 0%, #144257 60%, #38bdf8 100%), var(--svg); }

/* ============== LAYOUT CONTAINERS ============== */
.wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.card {
  max-width:900px; width:100%; background:var(--card);
  border-radius:18px; padding:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  border:1px solid var(--border);
}

/* ============== BRAND / LANGUAGE ROW ============== */
.brand {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:12px;
}
.brand-left{ display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.brand img { height:36px; width:auto; object-fit:contain; }
.brand-name { font-weight:700; font-size:18px; color:#aef3ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lang { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang label { font-size:13px; color:#8bcadf; }
.lang select{
  padding:10px 12px; min-width:140px;
  border:1px solid var(--border); border-radius:10px;
  background:#104857; color:var(--text);
  line-height:1.2; height:40px; appearance:none;
}

/* ============== TYPOGRAPHY ============== */
h1 { font-size:26px; margin:8px 0 6px; color:#aef3ff; line-height:1.25; }
.subtitle { color:var(--muted); margin:0 0 16px; }

/* ============== INFO BLOCK ============== */
.about{
  background:linear-gradient(180deg,#134b61, #115166);
  border:1px solid var(--border);
  border-radius:12px; padding:16px; color:#d0f4ff; margin-bottom:20px;
}
.about p{ margin:8px 0; }

/* ============== TABS / OPTIONS ============== */
.options{ display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 22px; }
.btn{
  flex:1 1 240px; min-height:44px;
  padding:12px 16px; border:none; border-radius:12px; cursor:pointer; font-weight:700;
  background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#002438;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 16px rgba(18,181,229,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.btn:hover{ transform:translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 24px rgba(18,181,229,.28); filter:saturate(1.05); }
.btn[aria-selected="true"]{ outline:3px solid var(--focus); outline-offset:2px; }

/* ============== FORMS ============== */
.row{ display:grid; grid-template-columns: 1fr 2fr; gap:12px; align-items:start; }
@media (max-width:720px){ .row{ grid-template-columns:1fr; } }

label{ display:block; font-size:14px; color:#d0f4ff; }
input[type="tel"], input[type="email"], select{
  width:100%; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px;
  background:#0f2c3b; color:var(--text);
  line-height:1.25; height:44px;
}
select{ height:44px; background:#0f2c3b; color:var(--text); }
input::placeholder{ color:#7eb3c7; }

.alert{
  color:#d0f4ff; font-size:14px; margin:12px 0 0;
  background:linear-gradient(180deg,#134b61,#115166);
  border:1px solid var(--border);
  padding:12px; border-radius:8px;
}
.hidden{ display:none; }

/* Donkere achtergrond voor formulieren */
#form-phone,
#form-email {
  background:#102a38;                 /* zelfde als .row */
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  margin-top:12px;
  color:var(--text);
  box-shadow:0 4px 12px rgba(0,0,0,.3) inset;
}

a{ color:#5ad1e8; text-underline-offset:2px; }

/* ============== FOOTER ============== */
.footer{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#8bcadf;
}
.links{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.links a{ white-space:nowrap; }
.shield{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.shield svg{ width:18px; height:18px; color:#12b5e5; }

/* ============== MISC ============== */
.recap-wrap{ display:none; } /* v3 onzichtbaar */

/* Kleine optische tweaks */
.card { backdrop-filter:saturate(1.1); }
input:focus, select:focus { outline:2px solid var(--focus); outline-offset:2px; }