/* 96-verzoek.css — scherm A van het speciale verzoek.
 *
 * Sheet van 920px op de verloopband; daarbinnen het formulier op 480 en de
 * voorvertoning op 344, met 32 ertussen. */

.tb-verzoek-band{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--tb-wash);
  padding:64px 20px;
  display:flex;justify-content:center;
}
.tb-verzoek-sheet{
  width:100%;max-width:920px;
  background:var(--tb-surface);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
  box-shadow:var(--tb-lift);
  padding:32px;box-sizing:border-box;
}

.tb-verzoek-kolommen{display:grid;gap:32px;align-items:start;}
@media (min-width:900px){
  .tb-verzoek-kolommen{grid-template-columns:480px 344px;}
}

.tb-verzoek h1{
  font-family:var(--tb-serif);font-size:25px;font-weight:600;line-height:1.2;
  color:var(--tb-ink);margin:0;
}
.tb-verzoek-intro{margin:8px 0 24px;font:400 14.5px/1.6 var(--tb-sans);color:var(--tb-muted);}
.tb-verzoek-fout{
  margin:0 0 16px;padding:12px 14px;border-radius:var(--tb-r-ctrl);
  background:var(--tb-bad-bg);color:var(--tb-bad-ink);
  font:500 14px/1.5 var(--tb-sans);
}

.tb-veld{display:block;margin:0 0 16px;}
.tb-veld > span,.tb-veld-kop{
  display:block;margin:0 0 6px;
  font:500 13.5px/1.3 var(--tb-sans);color:var(--tb-body);
}
/* `tel` hoort in deze rij sinds het telefoonveld erbij kwam; zonder dat
   kreeg het als enige veld de browserbreedte in plaats van de kolom. */
.tb-veld input[type=text],.tb-veld input[type=email],.tb-veld input[type=tel],.tb-veld textarea{
  width:100%;box-sizing:border-box;
  padding:0 14px;height:var(--tb-h-ctrl);
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  background:var(--tb-surface);
  font:400 15px/1.5 var(--tb-sans);color:var(--tb-ink);
}
.tb-veld textarea{height:auto;min-height:92px;padding:12px 14px;resize:vertical;}
.tb-veld input:focus,.tb-veld textarea:focus{outline:2px solid var(--tb-action);outline-offset:1px;border-color:var(--tb-action);}
.tb-veld-hulp{margin:-8px 0 16px;font:400 13px/1.5 var(--tb-sans);color:var(--tb-soft);}
.tb-veld-paar{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}

/* Ophalen of bezorgen als segment, met het postcodeveld ernaast. */
.tb-verzoek-levering{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tb-segment{position:relative;}
.tb-segment input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.tb-segment span{
  display:flex;align-items:center;height:var(--tb-h-ctrl);padding:0 18px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  font:500 14.5px/1 var(--tb-sans);color:var(--tb-body);background:var(--tb-surface);
}
.tb-segment input:checked + span{
  background:var(--tb-ground-alt);border-color:var(--tb-ink);color:var(--tb-ink);font-weight:600;
}
.tb-segment input:focus-visible + span{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-verzoek-postcode{flex:1 1 180px;min-width:160px;}

/* De statusregel die de N.v.t.-knoppen vervangt. */
.tb-verzoek-status{
  margin:8px 0 0;padding:12px 14px;border-radius:var(--tb-r-ctrl);
  font:500 14px/1.5 var(--tb-sans);
  background:var(--tb-ground-alt);color:var(--tb-muted);
}
.tb-verzoek-status[data-status="bijna"]{background:var(--tb-warn-bg);color:var(--tb-warn-ink);}
.tb-verzoek-status[data-status="klaar"]{background:var(--tb-ok-bg);color:var(--tb-ok-ink);}
.tb-verzoek-status[data-status="klaar"]::before{content:"✓ ";font-weight:700;}

.tb-verzoek-form hr{border:0;border-top:1px solid var(--tb-line);margin:24px 0;}
.tb-verzoek-versturen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;}
.tb-verzoek-versturen span{font:400 13.5px/1.4 var(--tb-sans);color:var(--tb-soft);}

/* De voorvertoning. */
.tb-voorbeeld-kop{
  margin:0 0 10px;font:600 11.5px/1.2 var(--tb-sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tb-soft);
}
.tb-voorbeeld-kaart{
  background:var(--tb-ground-alt);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);padding:18px;
}
.tb-voorbeeld-van{display:flex;gap:10px;align-items:center;margin-bottom:14px;}
.tb-voorbeeld-avatar{
  width:34px;height:34px;border-radius:var(--tb-r-pill);flex:none;background:var(--tb-sand);
}
.tb-voorbeeld-van b{display:block;font:600 14px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-voorbeeld-van span{font:400 12.5px/1.3 var(--tb-sans);color:var(--tb-soft);}
.tb-voorbeeld-regels{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;
  font:400 13.5px/1.45 var(--tb-sans);
}
.tb-voorbeeld-regels dt{color:var(--tb-soft);}
.tb-voorbeeld-regels dd{margin:0;color:var(--tb-ink);font-weight:500;}
.tb-voorbeeld-tekst{
  margin:0;padding:12px 14px;border:0;
  background:var(--tb-surface);border-radius:var(--tb-r-ctrl);
  font:400 14px/1.6 var(--tb-sans);color:var(--tb-body);
}
.tb-voorbeeld-tekst.is-leeg{color:var(--tb-soft);font-style:italic;}
.tb-voorbeeld-hulp{margin:10px 0 0;font:400 12.5px/1.5 var(--tb-sans);color:var(--tb-soft);}

.tb-verzoek-klaar{max-width:560px;}
.tb-verzoek-klaar h1{margin-bottom:12px;}
.tb-verzoek-klaar p{font:400 15.5px/1.65 var(--tb-sans);color:var(--tb-body);margin:0 0 14px;max-width:60ch;}
.tb-verzoek-klein{font-size:13.5px;color:var(--tb-soft);}

@media (max-width:899px){
  .tb-verzoek-band{padding:32px 16px;}
  .tb-verzoek-sheet{padding:24px 20px;}
  /* Op een telefoon staat de voorvertoning ónder het formulier — daar is hij
     een controle achteraf in plaats van een spiegel tijdens het typen. */
  .tb-verzoek-voorbeeld{order:2;}
}

/* ============================================================ scherm B — statuskaart
   Boven het gesprek, zodat de klant na het versturen ziet dat er iets loopt
   in plaats van een chat met één onbeantwoord bericht. */

.tb-verzoekstatus:empty{display:none;}
.tb-verzoekstatus{padding:16px 20px 0;}

.tb-vs-kaart{
	border:1px solid var(--tb-accent-line);
	border-radius:var(--tb-r-card);
	background:var(--tb-cream);
	padding:16px 18px;
	max-width:520px;
}
.tb-vs-verlopen{background:var(--tb-sand);border-color:var(--tb-border);}

.tb-vs-kop{
	display:flex;align-items:center;gap:8px;
	margin:0 0 6px;
	font-weight:650;color:var(--tb-ink);
}
.tb-vs-icoon{font-size:16px;line-height:1;}

.tb-vs-regel{margin:0 0 4px;font-size:14px;line-height:1.5;color:var(--tb-body);}
.tb-vs-zacht{color:var(--tb-soft);}

.tb-vs-voet{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	margin-top:12px;
}
.tb-vs-voet .tb-vs-zacht{font-size:13px;}
/* 40px hoog: onder de 24px-ondergrens uit WCAG 2.5.8 komt dit doel niet. */
.tb-vs-knop{min-height:40px;display:inline-flex;align-items:center;}

/* ============================================================ scherm C — takenlijst
   Bovenin de gesprekkenlijst. Een index op de chat, geen tweede postvak. */

.tb-verzoektaken:empty{display:none;}
.tb-vt{
	border-bottom:1px solid var(--tb-line);
	padding:16px 16px 12px;
}
.tb-vt-kop{
	display:flex;align-items:center;gap:8px;
	margin:0 0 10px;
	font-size:13px;font-weight:650;letter-spacing:.02em;
	text-transform:uppercase;color:var(--tb-muted);
}
.tb-vt-teller{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:20px;height:20px;padding:0 6px;
	border-radius:var(--tb-r-pill);
	background:var(--tb-accent);color:#fff;
	font-size:12px;letter-spacing:0;
}

.tb-vt-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}

.tb-vt-rij{
	display:flex;flex-direction:column;gap:3px;
	min-height:48px;
	padding:9px 11px;
	border:1px solid var(--tb-border);
	border-radius:var(--tb-r-ctrl);
	background:var(--tb-surface);
	text-decoration:none;
}
.tb-vt-rij:hover,
.tb-vt-rij:focus-visible{border-color:var(--tb-accent-line);background:var(--tb-cream);}
.tb-vt-dringend{border-left:3px solid var(--tb-accent);}

.tb-vt-boven{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.tb-vt-naam{font-size:14px;font-weight:600;color:var(--tb-ink);}
.tb-vt-tijd{font-size:12px;color:var(--tb-soft);white-space:nowrap;}
.tb-vt-dringend .tb-vt-tijd{color:var(--tb-warn-ink);font-weight:600;}

.tb-vt-regels,
.tb-vt-bakkerij{font-size:12.5px;line-height:1.4;color:var(--tb-muted);}
.tb-vt-bakkerij{color:var(--tb-soft);}

@media (max-width:900px){
	.tb-verzoekstatus{padding:12px 14px 0;}
	.tb-vs-kaart{max-width:none;}
	.tb-vs-voet{gap:8px;}
}

/* ------------------------------------------------------------- doorsturen */

.tb-verzoek-overgenomen{
	margin:0 0 16px;padding:10px 12px;
	border-left:3px solid var(--tb-accent-line);
	background:var(--tb-cream);
	font-size:14px;color:var(--tb-body);
}
.tb-verzoek-keuze{
	list-style:none;margin:0 0 20px;padding:0;
	display:flex;flex-wrap:wrap;gap:8px;
}
.tb-verzoek-keuze a{
	display:inline-flex;align-items:center;min-height:40px;
	padding:0 14px;
	border:1px solid var(--tb-border);border-radius:var(--tb-r-pill);
	background:var(--tb-surface);
	color:var(--tb-body);text-decoration:none;font-size:14px;
}
.tb-verzoek-keuze a:hover,
.tb-verzoek-keuze a:focus-visible{border-color:var(--tb-accent-line);background:var(--tb-cream);}

/* --------------------------------------------------- de verzoeklink op kaarten
 *
 * Eén klasse voor alle kaarten — baksels op /baksels/ en de voorpagina,
 * bakkerijen op /thuisbakkers/, de stadspagina's en de voorpagina. Bewust géén
 * knop: de kaart heeft al één hoofdactie (naar het baksel of de bakker) en een
 * tweede gevulde knop maakt van elke kaart een keuze in plaats van een
 * uitnodiging. Onderstreept, in bodykleur, met de raakvlakhoogte van 44px op
 * touch die de rest van de kaarten ook aanhoudt.
 */
/* Het raakvlak stond eerst achter `@media (hover:none)`, dus alleen op touch.
   Maar 2.5.8 kent die uitzondering niet, en "Vraag iets op maat" heeft geen
   grotere tegenhanger op de kaart -- de fotolink ernaast gaat ergens anders
   heen. Op een muis van 15px hoog mikken is voor niemand prettig. */
.tb-kaart-verzoek{
	display:inline-flex;align-items:center;min-height:44px;margin-top:2px;
	font-size:13px;color:var(--tb-body);text-decoration:underline;
	text-decoration-color:var(--tb-accent-line);text-underline-offset:3px;
}
.tb-kaart-verzoek:hover,
.tb-kaart-verzoek:focus-visible{color:var(--tb-action);}

/* Op de bakselpagina staat hij onder de koopknop: bestellen wat er is blijft de
   eerste weg, vragen om iets anders de tweede. */
.tb-koop-verzoek{
	margin:12px 0 0;padding-top:12px;
	border-top:1px solid var(--tb-line);
	font-size:14px;color:var(--tb-muted);line-height:1.5;
}
.tb-koop-verzoek a{
	color:var(--tb-accent-text);text-decoration:underline;
	text-decoration-color:var(--tb-accent-line);text-underline-offset:3px;
}
.tb-koop-verzoek a:hover,
.tb-koop-verzoek a:focus-visible{color:var(--tb-action);}

/* In de regel "Nog geen baksels online · Vraag iets op maat" loopt de link mee
   in de zin; daar hoort de eigen bovenmarge van de kaartlink niet. */
.tb-bakker-geenbaksels .tb-kaart-verzoek{display:inline;margin-top:0;min-height:0;}

/* Het pictogram is nu inline SVG in plaats van een emoji: het schaalt met de
   tekst mee en krijgt de kleur van de kop ernaast. */
.tb-vs-icoon{display:inline-flex;align-items:center;flex-shrink:0;}
.tb-vs-icoon svg{width:17px;height:17px;}
.tb-vs-verlopen .tb-vs-icoon{color:var(--tb-muted);}

/* --------------------------------------------------- sms-toestemming (klant)
   Het vinkje staat onder het telefoonveld en nooit voorgevinkt; zie
   `TB\Verzoek\SMS_TEKST` voor de tekst die erbij hoort en die zo wordt
   opgeslagen. Het vakje is 20px met een raakvlak van 44px eromheen: kleiner
   is op een telefoon niet te raken, en het vakje zelf groter maken laat het
   naast de tekst zwellen. */
.tb-verzoek-sms{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-height:44px;
  margin:4px 0 0;
  cursor:pointer;
}
.tb-verzoek-sms input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  min-width:20px;
  margin:2px 0 0;
  accent-color:var(--tb-action);
  cursor:pointer;
}
.tb-verzoek-sms span{
  font-size:13.5px;
  line-height:1.5;
  color:var(--tb-body);
}
.tb-verzoek-sms input:focus-visible{
  outline:2px solid var(--tb-action);
  outline-offset:2px;
}