/* Talamini Afhalen — base UI (Talamini red) */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#ED1B2D;      /* Talamini rood */
  --brand-600:#C41624;  /* hover/darker */
  --brand-50:#FFE5E8;   /* soft tint */
  --radius:14px;
  --shadow:0 10px 20px rgba(17,24,39,.06), 0 2px 6px rgba(17,24,39,.05);

  /* Achtergrondafbeelding */
  --bg-image: url('');

  /* Header (doorscheinend #ED1B2D) */
  --header-bg-rgb: 203, 36, 63; /* #ED1B2D */
  --header-opacity: .80;         /* 0=transparant, 1=dekkend */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);

  /* Alleen de foto (geen overlay/waas) */
  background-color:var(--bg);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout - Header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  background-color:#CB243F; /* fallback */
  background: rgba(var(--header-bg-rgb), var(--header-opacity)) !important;
  color:#fff;
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
}
.brand{
  font-weight:800;letter-spacing:.2px;
  color:#fff; /* in header altijd wit */
  font-size:18px;
}
header .btn.link{margin-left:auto}

/* Links/knoppen in de header altijd wit */
header a,
header nav a,
header .btn.link{ color:#fff; }
header a:visited,
header nav a:visited,
header .btn.link:visited{ color:#fff; }
header a:hover,
header .btn.link:hover{ opacity:.9; color:#fff; text-decoration:underline; }

/* Eventuele 'secondary' knop in de header */
header .btn.secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
header .btn.secondary:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.6);
}
/* Iconen in header volgen tekstkleur */
header svg{ fill:currentColor }

/* Container & headings */
.container{max-width:1100px;margin:26px auto;padding:0 16px}
h1{font-size:40px;margin:18px 0 20px 0}
h2{font-size:28px;margin:18px 0 10px 0}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

/* Grid rows */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:12px 0;
}
@media (max-width: 820px){
  .row{grid-template-columns:1fr}
  h1{font-size:32px}
  /* Performance op mobiel: geen fixed */
  body{ background-attachment: scroll; }
}

/* Forms */
label{display:block;font-weight:600;margin:2px 0 6px 2px}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;background:#fff;color:var(--text);
  outline:none;transition:border .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-50);
}
input[type="date"]{padding:10px 12px}
hr{border:none;border-top:1px solid var(--border);margin:14px 0}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--brand);
  color:#fff; /* white on red */
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow);
}
.btn:hover{background:var(--brand-600);color:#fff}
.btn.secondary{background:#fff;color:#111;border-color:var(--border)}
.btn.secondary:hover{background:#f3f4f6}
.btn.link{background:transparent;border:none;box-shadow:none;color:var(--brand);padding:6px 0}
.btn.mini{padding:6px 10px;border-radius:8px;font-size:12px}

/* Table */
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid var(--border)}
thead th{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
tfoot td{border:none}

/* Cart quantity controls */
.qtyctrl{display:inline-flex;align-items:center;gap:6px}
.qtyctrl-val{display:inline-block;min-width:24px;text-align:center}

/* Badges & helper UI */
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;font-size:13px
}

/* Slots grid (legacy; safe to keep) */
#slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:8px}
.slot{border:1px solid var(--border);border-radius:10px;padding:10px;background:#fff;box-shadow:var(--shadow)}
.slot strong{font-weight:800}
.slot .badge{margin-left:8px}
.slot button{margin-top:8px}

/* Footer */
footer{color:var(--muted);font-size:14px;text-align:center;margin:30px 0}