/* ---- Tekstselectie uitgeschakeld ---- */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Formuliervelden wel selecteerbaar houden */
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* ===========================================================
   Mams at Work - Recepten
   Stijl afgestemd op de slowcooker e-books:
   crème achtergrond, oud-roze serif-titels, taupe accenten,
   warme gouddetails en zachte afgeronde vlakken.
   =========================================================== */

:root{
  /* Achtergronden */
  --cream:#FBF6EF;        /* paginakleur */
  --cream-2:#F7EFE3;      /* zachte variant */
  --panel:#F1E7D7;        /* beige vlak (badges, info) */
  --card:#FFFFFF;         /* witte kaarten */

  /* Accenten */
  --purple:#53213F;       /* huisstijl paars */
  --rose:#BE8576;         /* oud-roze: titels, sectiekoppen */
  --rose-deep:#A96E5E;    /* sterker, voor hover */
  --rose-soft:#EAD4CC;    /* blush: chips en tip-cirkel */
  --taupe:#7E7167;        /* hoofdstukkoppen, secundair */
  --goud:#BFA14A;         /* merkgoud, spaarzaam */

  /* Tekst en lijnen */
  --tekst:#4A413B;        /* warme donkere tekst */
  --muted:#9A8C80;        /* gedempt */
  --rand:#E6D9C8;         /* haarlijnen */

  /* Status */
  --fout-bg:#F6E4DF; --fout:#A6503E;
  --ok-bg:#E8F0E5;   --ok:#5C7A52;

  --radius:14px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tekst);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
}

/* ---- Header ---- */
.site-header{
  background:var(--cream-2);
  border-bottom:1px solid var(--rand);
  padding:0;
}
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 26px;
}
.brand{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--rose);
  letter-spacing:.04em;
}
.site-nav{
  display:flex;align-items:center;gap:20px;
  padding:0 26px;
}
.user-email{font-size:.8rem;color:var(--muted);}
.inline-form{display:inline;margin:0;}
.nav-link{
  color:var(--taupe);text-decoration:none;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
}
.nav-link:hover{color:var(--rose);}
.btn-link{
  background:none;border:none;color:var(--taupe);
  font-family:inherit;font-size:.82rem;font-weight:500;
  cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--rose);text-decoration:underline;}

/* ---- Layout ---- */
.site-main{width:100%;margin:0;padding:28px 28px 44px;box-sizing:border-box;}

.card{
  background:var(--card);
  border:1px solid var(--rand);
  border-radius:var(--radius);
  padding:34px 38px;
  box-shadow:0 6px 22px rgba(126,113,103,.07);
}
.auth-card{max-width:400px;margin:7vh auto 0;}

/* ---- Koppen ---- */
h1{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--rose);
  margin:0 0 18px;
  line-height:1.15;
}
h2{font-family:var(--serif);font-weight:600;color:var(--rose);}

label{display:block;font-size:.82rem;font-weight:500;margin:16px 0 6px;color:var(--taupe);}

/* ---- Formuliervelden ---- */
input[type=email],input[type=password],input[type=number],input[type=text],
textarea,select{
  width:100%;padding:11px 13px;
  border:1px solid var(--rand);border-radius:9px;
  font-family:inherit;font-size:.95rem;color:var(--tekst);
  background:var(--card);
}
textarea{resize:vertical;}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(190,133,118,.18);
}

/* ---- Knoppen ---- */
.btn{
  margin-top:22px;width:100%;
  background:var(--rose);color:#fff;
  border:none;padding:12px 16px;border-radius:9px;
  font-family:inherit;font-size:.92rem;font-weight:600;
  letter-spacing:.03em;cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--rose-deep);}
.btn-small{
  display:inline-block;background:var(--rose);color:#fff;text-decoration:none;
  padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  transition:background .15s;
}
.btn-small:hover{background:var(--rose-deep);}
.btn-link-dark{color:var(--rose);font-weight:600;text-decoration:none;margin-left:14px;}
.btn-link-dark:hover{color:var(--rose-deep);}
.btn-add{
  margin-top:10px;background:none;border:1px dashed var(--rose);color:var(--rose);
  padding:9px 14px;border-radius:9px;font-family:inherit;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn-add:hover{background:var(--cream-2);border-color:var(--rose-deep);}
.btn-remove{
  margin-top:8px;background:none;border:none;color:var(--fout);font-family:inherit;
  font-size:.82rem;cursor:pointer;padding:0;
}
.btn-remove:hover{text-decoration:underline;}
.btn-danger{
  background:var(--fout);color:#fff;border:none;padding:10px 16px;border-radius:9px;
  font-family:inherit;font-weight:600;cursor:pointer;
}
.danger-form{max-width:820px;margin:14px auto 0;}

/* ---- Tekst en links ---- */
.muted{color:var(--muted);font-size:.88rem;}
.muted a{color:var(--rose);font-weight:600;text-decoration:none;}
.muted a:hover{text-decoration:underline;}

/* ---- Flashberichten ---- */
.flashes{max-width:400px;margin:0 auto 18px;}
.flash{padding:11px 15px;border-radius:9px;font-size:.88rem;margin-bottom:10px;}
.flash-error{background:var(--fout-bg);color:var(--fout);}
.flash-success{background:var(--ok-bg);color:var(--ok);}

/* ---- Receptenlijst ---- */
.list-header{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.list-header h1{margin:0;}
.recipe-grid{
  display:grid;gap:18px;margin-top:22px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.recipe-card{
  display:block;background:var(--card);border:1px solid var(--rand);
  border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:inherit;
  box-shadow:0 4px 16px rgba(126,113,103,.06);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.recipe-card:hover{
  border-color:var(--rose);
  box-shadow:0 8px 22px rgba(126,113,103,.12);
  transform:translateY(-2px);
}
.recipe-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.recipe-card h2{font-size:1.45rem;font-weight:600;margin:0 0 6px;line-height:1.2;}
.recipe-card h2 a{color:var(--rose);text-decoration:none;}
.recipe-card h2 a:hover{color:var(--rose-deep);}
.recipe-card .muted{margin:0 0 10px;}
.card-meta{
  font-size:.72rem;color:var(--goud);font-weight:600;margin:0;
  text-transform:uppercase;letter-spacing:.12em;
}
.card-actions{margin:10px 0 0;}
.card-actions a{font-size:.82rem;color:var(--rose);font-weight:600;text-decoration:none;}
.card-actions a:hover{text-decoration:underline;}

/* ---- Badges ---- */
.badge{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.04em;}
.badge-concept{background:var(--panel);color:#9a7b2e;}

/* ===========================================================
   Receptdetail
   =========================================================== */
.recipe-detail{max-width:820px;margin-left:auto;margin-right:auto;}
.detail-top-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}

.detail-photos{margin:0 0 26px;}
.hero-photo{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);}
.photo-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px;}
.photo-thumbs img{width:100%;height:104px;object-fit:cover;border-radius:10px;}

.detail-head{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;}
.detail-head h1{
  margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:1.9rem;
}
.lead{
  font-family:var(--serif);font-size:1.3rem;line-height:1.4;
  color:var(--taupe);text-align:center;margin:8px auto 22px;max-width:46ch;
}

/* Iconenrij: voorbereiding / bereiding / porties (zoals in het e-book) */
.stat-row{
  display:flex;justify-content:center;flex-wrap:wrap;gap:34px;
  padding:18px 0 22px;margin:0 0 26px;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);
}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;min-width:74px;}
.stat svg{width:30px;height:30px;color:var(--rose);}
.stat .stat-label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--rose);font-weight:600;
}
.stat .stat-value{font-size:.9rem;color:var(--tekst);font-weight:500;}

.publications{
  font-size:.9rem;background:var(--panel);border-radius:10px;padding:12px 16px;margin:0 0 8px;
}
.publications span{font-weight:600;color:var(--rose);}
.media-note{font-style:italic;margin-top:0;}

.detail-section{margin-top:30px;}
.detail-section h2{
  font-size:1.5rem;font-weight:600;color:var(--rose);
  text-transform:uppercase;letter-spacing:.07em;
  margin:0 0 4px;
}
.detail-section h2::after{
  content:"";display:block;width:48px;height:2px;background:var(--rose-soft);
  margin-top:8px;margin-bottom:14px;
}
.detail-section h3{font-family:var(--serif);font-size:1.15rem;color:var(--taupe);margin:18px 0 6px;}

.ingredient-list{list-style:none;padding:0;margin:0;}
.ingredient-list li{padding:7px 0;border-bottom:1px solid var(--cream-2);}
.ingredient-list .qty{display:inline-block;min-width:88px;font-weight:600;color:var(--rose);white-space:nowrap;}

.step-list{padding-left:22px;margin:0;}
.step-list li{padding:7px 0 7px 4px;}
.step-list li::marker{color:var(--rose);font-weight:600;}
.step-meta{font-size:.8rem;color:var(--muted);margin-top:4px;}

.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.tag{background:var(--rose-soft);color:var(--rose-deep);font-size:.76rem;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}

/* ===========================================================
   Formulieren (nieuw / bewerken / rechten)
   =========================================================== */
.check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--tekst);}
.check input{width:auto;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.form-card{max-width:820px;margin-left:auto;margin-right:auto;}
.section-title{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--rose);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--rand);
  padding-bottom:8px;margin:30px 0 14px;
}
.rows{display:flex;flex-direction:column;gap:12px;}
.row-item{
  border:1px solid var(--rand);border-radius:10px;padding:14px;background:var(--cream);
  display:flex;flex-direction:column;gap:8px;
}
.form-actions{margin-top:26px;display:flex;align-items:center;}
.form-actions .btn{width:auto;margin-top:0;padding:12px 28px;}

/* Foto's in formulier */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:12px;}
.photo-item{border:1px solid var(--rand);border-radius:10px;padding:8px;text-align:center;background:var(--card);}
.photo-item img{width:100%;height:90px;object-fit:cover;border-radius:7px;}
.photo-item .check{justify-content:center;font-size:.8rem;margin-top:6px;}

/* ---- Tabel (rechtenbeheer e.d.) ---- */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rand);}
.data-table th{
  color:var(--rose);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;
}

/* ---- Receptkaart: foto ---- */
.card-photo-link { display:block; }
.card-photo {
  width:100%; height:160px; object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0;
  display:block;
}
.recipe-card-body { padding:18px 22px 18px; }
/* kaart zonder foto behoudt de oude padding */
.recipe-card:not(:has(.card-photo)) .recipe-card-body { padding:22px 24px; }

/* ---- Ingrediëntrij: onderste balk ---- */
.ing-bottom-row {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.ing-optional-check { margin:0; white-space:nowrap; }
.ing-notes { flex:1; min-width:140px; }

/* ---- Tag chip-invoer ---- */
.tag-chips-list {
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom:10px; min-height:0;
}
.tag-add-row {
  display:flex; gap:8px; align-items:center;
}
.tag-add-row .tag-text-input {
  flex:1; min-width:0;
}
.btn-add-tag {
  white-space:nowrap;
  background:none; border:1px solid var(--rose); color:var(--rose);
  padding:10px 16px; border-radius:9px;
  font-family:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
}
.btn-add-tag:hover { background:var(--rose); color:#fff; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--rose-soft); color:var(--rose-deep);
  font-size:.78rem; font-weight:600;
  padding:5px 10px 5px 13px; border-radius:999px;
  white-space:nowrap;
}
.chip-remove {
  background:none; border:none; cursor:pointer;
  color:var(--rose-deep); font-size:1rem; line-height:1;
  padding:0; display:flex; align-items:center;
}
.chip-remove:hover { color:var(--rose); }

/* ---- Overflow voorkomen op smal scherm ---- */
html, body { overflow-x:hidden; max-width:100%; }
img, input, select, textarea { max-width:100%; }

/* ---- Hamburger-knop (verborgen op desktop) ---- */
.nav-toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
  width:36px; height:36px;
}
.nav-toggle span {
  display:block; height:2px; width:22px;
  background:var(--taupe); border-radius:2px;
  transition:background .15s;
}
.nav-toggle:hover span { background:var(--rose); }

/* ---- Mobiel (tot 640px) ---- */
@media(max-width:640px){
  .header-top { padding:12px 16px; }

  /* Hamburger zichtbaar */
  .nav-toggle { display:flex; }

  /* Nav standaard ingeklapt */
  .site-nav {
    display:none;
    flex-direction:column; align-items:flex-start;
    gap:0; padding:0;
    border-top:1px solid var(--rand);
  }
  /* Nav uitgeklapt */
  .site-nav.nav-open { display:flex; }

  .site-nav .nav-link,
  .site-nav .btn-link,
  .site-nav .user-email {
    display:block; width:100%;
    padding:13px 18px;
    border-bottom:1px solid var(--rand);
    font-size:.95rem;
  }
  .site-nav .inline-form { width:100%; margin:0; }
  .site-nav .inline-form .btn-link { text-align:left; }
  .site-nav .user-email { color:var(--muted); font-size:.82rem; }

  /* Receptengrid: 2 kolommen */
  .site-main { padding:14px 10px 36px; }
  .recipe-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }

  /* Compactere kaart op telefoon */
  .card-photo { height:120px; }
  .recipe-card-body { padding:10px 12px 12px; }
  .recipe-card h2 { font-size:1.05rem; margin-bottom:4px; }
  .recipe-card .muted { display:none; }  /* summary verbergen, alleen foto+titel */
  .recipe-card .card-meta { font-size:.65rem; }
  .recipe-card .card-actions { margin-top:6px; }
}

/* ---- Tablet (641-900px) ---- */
@media(min-width:641px) and (max-width:900px){
  .recipe-grid { grid-template-columns:repeat(2,1fr); }
  .site-main { padding:20px 18px 40px; }
}


/* ---- Lijst-header met filterknop ---- */
.list-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; flex-wrap:wrap; gap:10px; }
.list-header-actions { display:flex; align-items:center; gap:10px; }
.admin-note { margin-top:4px; margin-bottom:12px; }

.btn-filter {
  position:relative;
  background:none; border:1px solid var(--rand); border-radius:8px;
  padding:7px 10px; cursor:pointer; display:flex; align-items:center;
  color:var(--taupe); transition:border-color .15s, color .15s;
}
.btn-filter:hover, .btn-filter-active { border-color:var(--rose); color:var(--rose); }
.filter-badge {
  position:absolute; top:-4px; right:-4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--rose); border:2px solid var(--cream);
}

/* ---- Filterpaneel ---- */
.filter-panel {
  display:none;
  background:var(--cream-2); border:1px solid var(--rand);
  border-radius:12px; padding:20px 22px 16px;
  margin-bottom:20px;
}
.filter-panel-open { display:block; }

.filter-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px 18px;
}
.filter-field label { display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.filter-field input, .filter-field select { width:100%; }
.filter-field-wide { grid-column:1 / -1; }

.filter-chips-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:0; }
.filter-chip-add-row { display:flex; gap:8px; align-items:center; }
.filter-chip-add-row input { flex:1; min-width:0; }

.filter-actions { display:flex; align-items:center; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--rand); }

/* ---- Receptkaart: alleen foto + titel, klikbaar als geheel ---- */
.recipe-card-body { padding:12px 14px 14px; }

@media(max-width:640px){
  .filter-grid { grid-template-columns:1fr; }
  .filter-field-wide { grid-column:auto; }
  .recipe-card h2 { font-size:.9rem; }
  .card-edit-link { display:none; } /* op mobiel via de receptpagina zelf bewerken */
}

/* ---- Ingrediëntengroepen ---- */
.ing-add-buttons { display:flex; gap:10px; margin-top:10px; }

.row-group {
  background:var(--cream-2);
  border:1px solid var(--rand);
  border-radius:8px;
  padding:10px 14px;
  margin-bottom:4px;
}
.group-header-row {
  display:flex; align-items:center; gap:10px;
}
.group-label {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--rose); white-space:nowrap;
}
.group-header-row input[type=text] {
  flex:1;
}
.row-ingredient {
  border-left:3px solid var(--rand);
  padding-left:14px;
  margin-left:10px;
}

/* ---- Homepagina: categorie-tegels ---- */
.home-title { font-size: clamp(1.1rem, 5vw, 1.6rem); margin-bottom: 18px; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px 22px;
  background: var(--card);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--taupe);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  text-align: center;
}
.cat-tile:hover {
  box-shadow: 0 6px 24px rgba(120,80,60,.14);
  transform: translateY(-3px);
  border-color: var(--rose);
  color: var(--rose);
}

.cat-tile-icon {
  width: 64px;
  height: 64px;
  color: var(--rose);
  transition: color .18s;
}
.cat-tile-icon svg {
  width: 100%;
  height: 100%;
}

.cat-tile-label {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--purple);
  line-height: 1.2;
}
.cat-tile:hover .cat-tile-label { color: var(--rose); }

.cat-tile-count {
  font-size: .72rem;
  color: var(--muted);
  margin-top: -6px;
}

/* ---- Receptkaart: foto vult de hele tegel, titel erover ---- */
.recipe-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.recipe-card .card-photo,
.recipe-card .card-photo-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-photo-placeholder {
  background: var(--cream-2);
}
.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(40,16,28,.78) 0%, rgba(40,16,28,.32) 55%, transparent 100%);
}
.card-overlay h2 {
  font-size: .95rem;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.card-overlay .badge-concept {
  align-self: flex-start;
  margin-bottom: 6px;
}
.card-overlay .card-edit-link {
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  text-decoration: underline;
  margin-top: 4px;
}
.recipe-card:hover .card-overlay {
  background: linear-gradient(to top, rgba(40,16,28,.88) 0%, rgba(40,16,28,.4) 60%, transparent 100%);
}

/* ---- Mobiel aanpassingen ---- */
@media(max-width:640px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cat-tile { padding: 18px 8px 14px; gap: 8px; }
  .cat-tile-icon { width: 44px; height: 44px; }
  .cat-tile-label { font-size: .82rem; }
  .cat-tile-count { display: none; }
  .card-overlay h2 { font-size: .82rem; }
}

/* ---- Home-knop in navigatie ---- */
.nav-home {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .15s;
}
.nav-home:hover { background: var(--cream); }

/* ---- Gebruikersbeheer ---- */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 4px;
}
.filter-bar input { flex: 1; min-width: 180px; }

.badge-admin   { background: var(--purple); color: #fff; }
.badge-user    { background: var(--cream-2); color: var(--taupe); border: 1px solid var(--rand); }
.badge-ok      { background: #d4edda; color: #276944; }
.badge-waiting { background: #fff3cd; color: #856404; }

.cell-actions  { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.btn-small-outline {
  background: none; border: 1px solid var(--rose); color: var(--rose);
  padding: 4px 10px; border-radius: 6px; font-size: .78rem; cursor: pointer;
}
.btn-small-outline:hover { background: var(--rose); color: #fff; }

.entitlements-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.entitlement-check {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--cream-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s;
}
.entitlement-check:hover { border-color: var(--rose); }
.entitlement-check input { margin-top: 3px; flex-shrink: 0; }

/* ---- Accountpagina ---- */
.account-card { max-width: 480px; padding: 18px 14px; }

.account-dl {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 5px 10px; margin-bottom: 18px;
}
.account-dl dt {
  font-weight: 600; color: var(--muted);
  font-size: .82rem; padding-top: 2px;
}
.account-dl dd { margin: 0; }
.account-email {
  word-break: break-all; overflow-wrap: anywhere;
  font-size: .92rem;
}

.account-entitlement-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.account-entitlement-list li {
  background: var(--cream-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 10px 14px;
  font-size: .92rem; line-height: 1.4;
}
.account-entitlement-list .expires {
  display: block; font-size: .75rem; margin-top: 2px;
}

/* ---- Wachtwoordveld met oogje ---- */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input[type=password],
.pw-wrap input[type=text] {
  flex: 1;
  padding-right: 42px;
}
.pw-toggle {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  display: flex;
  align-items: center;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--rose); }

/* ---- Vaste home-knop in de header ---- */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-home-fixed {
  display: flex;
  align-items: center;
  color: var(--taupe);
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  text-decoration: none;
}
.nav-home-fixed:hover { color: var(--rose); background: var(--cream); }

/* Verberg .user-email als die nog ergens staat */
.user-email { display: none; }

/* ---- Verwijder-knop gebruikers ---- */
.btn-small-danger {
  background: none; border: 1px solid #c0392b; color: #c0392b;
  padding: 4px 10px; border-radius: 6px; font-size: .78rem; cursor: pointer;
}
.btn-small-danger:hover { background: #c0392b; color: #fff; }



/* ---- Favoriet-hartje en sterren op detailpagina ---- */
.detail-head { display: flex; flex-direction: column; gap: 8px; }
.detail-title-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}
.detail-title-row h1 { flex: 1; min-width: 0; margin: 0; }

.fav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--rose); padding: 4px;
  display: flex; align-items: center;
  transition: transform .15s;
}
.fav-btn:hover { transform: scale(1.15); }
.fav-btn-active { color: #c0392b; }

.star-rating { display: flex; gap: 2px; }
.star-btn {
  background: none; border: none; cursor: pointer;
  color: var(--gold, #BFA14A); padding: 2px;
  display: flex; align-items: center;
  transition: transform .12s;
}
.star-btn:hover { transform: scale(1.2); }
.star-active { color: #BFA14A; }



/* ---- Detailfoto: volle breedte met hartje-overlay ---- */
.detail-photos {
  position: relative;
  margin: 0 -24px 20px;   /* negatieve marge zodat foto tot kaartrand loopt */
}
.detail-photos .hero-photo {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}
.detail-fav-overlay {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  border: none; border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3));
}
.detail-fav-overlay:hover { background: rgba(255,255,255,.38); transform: scale(1.1); }
.detail-fav-overlay.fav-btn-active { color: #e74c3c; }
.detail-fav-overlay svg { display: block; }

/* ---- Favorietenfilter toggle-knop ---- */
.filter-field-fav { display: flex; align-items: center; }
.fav-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none;
  border: 1.5px solid var(--rand);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  color: var(--taupe); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.fav-toggle-btn:hover {
  border-color: var(--rose); color: var(--rose);
}
.fav-toggle-active {
  border-color: #e74c3c !important;
  color: #e74c3c !important;
  background: rgba(231,76,60,.07) !important;
}

@media(max-width:640px) {
  .detail-photos { margin: 0 -14px 16px; }
  .detail-photos .hero-photo { border-radius: 0; }
}

/* ---- Hartje zonder foto ---- */
.detail-photos-empty {
  position: relative;
  height: 64px;
  margin-bottom: 8px;
}
.detail-fav-no-photo {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--cream-2);
  border: 1px solid var(--rand);
  backdrop-filter: none;
  color: var(--rose);
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  filter: none;
}
.detail-fav-no-photo.fav-btn-active { color: #e74c3c; }
/* Kroon zonder foto */
.detail-crown-no-photo {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--cream-2);
  border: 1px solid var(--rand);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}



/* ---- Badges op receptkaarten (kroon en hartje) ---- */
.card-badge {
  position: absolute;
  top: 8px;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
}
.card-crown { left: 8px; }
.card-heart  { right: 8px; }

/* ---- Favorietentegel op homepagina ---- */
.cat-tile-fav .cat-tile-icon { color: #e74c3c; }
.cat-tile-fav:hover .cat-tile-label { color: #e74c3c; }
.cat-tile-fav:hover { border-color: #e74c3c; }

/* ---- Autocomplete chip-selector (filter) ---- */
.ac-field { position: relative; }

.ac-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px; min-height: 0;
}

.ac-input-wrap { position: relative; }
.ac-input { width: 100%; }

.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--rand);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  list-style: none; padding: 4px 0; margin: 0;
  max-height: 220px; overflow-y: auto;
  z-index: 100;
}
.ac-dropdown li {
  padding: 9px 14px;
  font-size: .9rem; cursor: pointer;
  transition: background .1s;
}
.ac-dropdown li:hover,
.ac-dropdown li.ac-active {
  background: var(--cream-2);
  color: var(--rose);
}