:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0b0f19;
  --muted:#4a5568;
  --accent:#2b6cb0;
  --line:rgba(0,0,0,.12);
  --danger:#b00020;
  --ok:#1b5e20;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.5;
}

body.home{
  font-family: "Gill Sans", "Trebuchet MS", "Candara", sans-serif;
  background: linear-gradient(180deg, #f5f1ea 0%, #f9f7f2 52%, #f6f7fb 100%);
}

body.home::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(248, 230, 200, .35), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(200, 220, 240, .35), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 1px, transparent 1px 12px);
  pointer-events:none;
  z-index:-1;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

header{
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 18px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.site-header{
  max-width: 1100px;
  padding: 40px 20px 10px;
}

h1{ margin:0 0 6px; font-size: clamp(26px, 4vw, 40px); }
.subtitle{ color:var(--muted); max-width:65ch; }

main{
  max-width:980px;
  margin:0 auto;
  padding:18px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

@media (max-width:860px){
  main{ grid-template-columns:1fr; }
}

body.home h1,
body.home h2{
  font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
  letter-spacing: .01em;
}

.hero{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}

.hero-text{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
}

.meta-label{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.08em;
}

.meta-value{
  font-size:16px;
  font-weight:700;
}

.hero-card{
  background: #fdfaf5;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display:grid;
  gap:14px;
}

.hero-card .boekCover{
  width:100%;
  aspect-ratio:auto;
  object-fit:contain;
}

.hero-card-body{
  display:grid;
  gap:10px;
}

.fact-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px dashed var(--line);
  padding-bottom:8px;
}

.fact-row:last-of-type{
  border-bottom:none;
  padding-bottom:0;
}

.fact-label{
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.fact-value{
  font-weight:700;
  text-align:right;
}

.home-main{
  max-width:1100px;
  margin:0 auto;
  padding:18px 20px 28px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.info-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 16px;
}

.points-card{
  grid-column:1 / -1;
}

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .home-main{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  .home-main{ grid-template-columns:1fr; }
  .info-grid{ grid-template-columns:1fr; }
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
}

body.home .card{
  box-shadow:0 12px 24px rgba(17, 24, 39, .05);
}

.boekLayout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px;
}

@media (max-width:520px){
  .boekLayout{ grid-template-columns:1fr; }
}

.boekCover{
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  background:#ddd;
  aspect-ratio:2/3;
  object-fit:cover;
}

.pill{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  margin-top:10px;
  background:rgba(0,0,0,.03);
}

.label{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.08em;
}

.value{
  font-size:16px;
  font-weight:700;
}

.btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border:none;
  cursor:pointer;
}

.btn.secondary{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--line);
}

.btn.danger{
  background:var(--danger);
}

form .row{ margin-bottom:12px; }
label{ display:block; font-weight:600; margin-bottom:4px; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
}
textarea{ min-height:100px; }

.small{ font-size:13px; color:var(--muted); }
.error{ color:var(--danger); font-size:13px; }
.notice{ background:#eef5ff; border:1px solid var(--line); padding:10px 12px; border-radius:12px; }
.success{ color:var(--ok); font-weight:600; }

.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td{ border-bottom:1px solid var(--line); padding:8px; text-align:left; }
.table th{ font-size:12px; text-transform:uppercase; color:var(--muted); letter-spacing:.05em; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:700px){ .grid-2{ grid-template-columns:1fr; } }

footer{
  max-width:980px;
  margin:0 auto;
  padding:32px 18px 48px;
  font-size:14px;
  color:var(--muted);
}

.admin-wrap{ max-width:980px; margin:0 auto; padding:18px; }
.admin-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:640px){ .admin-tiles{ grid-template-columns:1fr; } }

body.admin{
  background: #eef2f6;
}

body.admin .card{
  background: #ffffff;
  border: 1px solid #d7dee8;
}

body.admin .notice{
  background:#fff7df;
  border:1px solid #e8d9a8;
}

body.admin input[type="text"],
body.admin input[type="email"],
body.admin input[type="number"],
body.admin input[type="password"],
body.admin textarea,
body.admin select{
  background:#f8fafc;
  border:1px solid #c9d4e0;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}

body.admin textarea{
  min-height:120px;
}

body.admin .help{
  font-size:13px;
  color:#425466;
  margin-top:6px;
}

body.admin .admin-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 16px;
}

body.admin .admin-nav.sticky{
  position:sticky;
  top:0;
  z-index:20;
  padding:10px 0;
  background: #eef2f6;
  border-bottom:1px solid #d7dee8;
}

.tile{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  font-weight:700;
  text-align:center;
}

body.admin .tile{
  background:#f7fbff;
  border:1px solid #c9d4e0;
  text-align:left;
  transition:transform .12s ease, box-shadow .12s ease;
}

body.admin .tile:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(17, 24, 39, .08);
}

body.admin .tile-title{
  font-weight:700;
  font-size:18px;
  color:#0b0f19;
}

body.admin .tile-help{
  margin-top:6px;
  font-weight:400;
  color:#425466;
  font-size:13px;
}

.badge{ display:inline-block; padding:4px 8px; border-radius:8px; font-size:12px; border:1px solid var(--line); }

/* Grote status hero bovenaan order pagina */
.status-hero{
  text-align:center;
  padding:24px 30px;
  border-radius:16px;
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
}

/* Status badges met kleuren */
.status-big{
  display:inline-block;
  padding:14px 22px;
  border-radius:14px;
  font-size:20px;
  font-weight:700;
  margin:10px 0;
}

/* Grote actie knop */
.status-action-btn{
  display:block;
  width:100%;
  max-width:400px;
  padding:18px 24px;
  font-size:20px;
  font-weight:700;
  border-radius:14px;
  border:none;
  color:#fff;
  cursor:pointer;
}

.status-new{
  background:#fff3cd;
  border:2px solid #ffc107;
  color:#856404;
}

.status-paid{
  background:#d4edda;
  border:2px solid #28a745;
  color:#155724;
}

.status-shipped{
  background:#cce5ff;
  border:2px solid #007bff;
  color:#004085;
}

.status-cancelled{
  background:#f8d7da;
  border:2px solid #dc3545;
  color:#721c24;
}

/* Kleine status badges in tabel */
.badge.status-new{ background:#fff3cd; border-color:#ffc107; color:#856404; }
.badge.status-paid{ background:#d4edda; border-color:#28a745; color:#155724; }
.badge.status-shipped{ background:#cce5ff; border-color:#007bff; color:#004085; }
.badge.status-cancelled{ background:#f8d7da; border-color:#dc3545; color:#721c24; }

/* Stappen box */
.steps-box{
  background:#f0f7ff;
  border:2px solid #007bff;
  border-radius:14px;
  padding:18px;
  margin-bottom:18px;
}

.steps-box h2{
  margin:0 0 12px;
  font-size:18px;
  color:#004085;
}

.steps-box ol{
  margin:0;
  padding-left:24px;
}

.steps-box li{
  margin-bottom:8px;
  font-size:15px;
  line-height:1.5;
}

.steps-box li strong{
  color:#007bff;
}

.form-inline{ display:flex; gap:8px; flex-wrap:wrap; }

.hidden{ display:none; }