/* Reddo - de publieke klantpagina.

   Geknipt uit components.css. Dit is het enige oppervlak dat een klant ziet, en het enige
   dat zonder sessie werkt. Apart houden maakt dat verschil zichtbaar. */

/* ----------------------------------------------------------- klantpagina --
   Mockup 10c. Eigen kaartklassen naast .r-card: de klant ziet andere informatie
   (bij wie het ligt, ophaalcode) en een KLAAR-kaart klapt hier uit in plaats van
   op een tik — samenvoegen met de vakman-kaart zou beide onduidelijk maken. */

.r-customer__sms { font-family: var(--r-font-mono); font-size: 11px; color: var(--r-faint); }

.r-clist { display: flex; flex-direction: column; padding: 0 16px 24px; gap: var(--r-gap-list); }

.r-ccard {
  position: relative;
  background: var(--r-card);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  overflow: hidden;
  padding: 14px 14px 14px 18px;
}

.r-ccard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--r-strip-w);
  background: var(--strip);
}

/* De kaart die om actie vraagt, mag zwaarder wegen dan de rest. */
.r-ccard--ready {
  border-radius: var(--r-radius-card-lg);
  box-shadow: 0 10px 26px rgba(26, 20, 17, 0.1);
  padding: 16px 16px 18px 20px;
}

.r-ccard__row { display: flex; gap: 12px; align-items: center; }
.r-ccard__info { flex: 1; min-width: 0; }
/* Elke status heeft een pil, en het label van een workflow kan lang zijn ("OPHALEN GEVRAAGD", in het
   Engels "COLLECTION REQUESTED"). Zonder grens perst zo'n pil op 390px de titel samen tot drie regels.
   Een lang woord breekt nu af binnen de pil; een korte pil ("KLAAR") blijft zoals hij was. */
.r-ccard__row .r-pill { flex: 0 1 auto; max-width: 34%; text-align: center; line-height: 1.3; }
.r-ccard__title { font-size: 15px; font-weight: 700; }
.r-ccard__title--lg { font-size: 17px; }
.r-ccard__sub { font-size: 12.5px; color: var(--r-muted); }

.r-pickup { margin-top: 16px; background: var(--r-paper); border-radius: 14px; padding: 16px 18px; }
.r-pickup__label { font-family: var(--r-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--r-faint); }
.r-pickup__name { font-size: 16px; font-weight: 700; margin-top: 4px; }
.r-pickup__line { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.r-pickup__address { font-size: 13px; color: var(--r-muted); }
.r-pickup__route { flex: none; font-size: 12.5px; font-weight: 700; color: var(--r-black); text-decoration: none; }

.r-ccard__code { padding-top: 14px; font-size: 12.5px; color: var(--r-muted); }
.r-ccard__codenum { font-family: var(--r-font-mono); font-weight: 600; color: var(--r-black); }

.r-customer__note { font-size: 12px; color: var(--r-faint); text-align: center; padding-top: 8px; }
.r-customer__empty { font-size: 14px; color: var(--r-muted); line-height: 1.5; padding: 24px 8px; text-align: center; }

/* D9: bedrijfsnaam boven een groep opdrachten, alleen zichtbaar zodra iemand
   bij meer dan één bedrijf iets heeft liggen (BESLUITEN.md #4). */
.r-cgroup__header {
  font-family: var(--r-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--r-faint); text-transform: uppercase;
  padding: 14px 4px 2px;
}
.r-cgroup__header:first-child { padding-top: 0; }

/* D6: link naar het telefoonnummer-scherm op een niet-klare kaart. */
.r-ccard__phonelink {
  display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700;
  color: var(--r-black); text-decoration: none;
}

/* D6/D7: gedeeld tussen phone-optin.ts en pickup-verify.ts. */
.r-phone__back {
  display: inline-block; margin: 4px 0 10px; font-size: 13px;
  color: var(--r-muted); text-decoration: none;
}
.r-phone__explain { font-size: 14px; color: var(--r-muted); line-height: 1.5; padding: 0 4px 4px; }
.r-phone__error { font-size: 13px; color: #A8341F; padding: 10px 4px 0; }
.r-phone__error[hidden] { display: none; }

/* D7: link op de uitgeklapte werkkaart, alleen bij READY_FOR_PICKUP. */
.r-code__verify {
  display: block; margin-top: 10px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--r-black); text-decoration: none;
}

/* #101313: een melding op de klantpagina (kapotte of onbekende link, geen verbinding) en het
   scanscherm (kaart met één zin). Eén kaart met een strook links, zoals de rest van de klantkant;
   geen rode vlak, want dit is geen alarm voor de klant maar een stand van zaken. De strook is
   het donkere oker van "bezig" en niet het groen van "klaar": dit is nooit goed nieuws. */
.r-customer__alert,
.r-scan__note {
  background: var(--r-card);
  border: 1px solid var(--r-border);
  border-left: var(--r-strip-w) solid var(--r-status-bezig);
  border-radius: var(--r-radius-card);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.r-scan__text { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; }
.r-scan__retry { margin-top: 14px; }