/* kassa.css
   Opmaak voor de winkelwagenbalk en het kassascherm. Werkt op alle pagina's,
   dus met eigen kleuren in plaats van de variabelen van een losse pagina. */

.wagenbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  transform: translateY(115%); transition: transform .25s ease;
  background: rgba(26, 32, 56, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.wagenbalk.aan { transform: translateY(0); }
.wagenbalk-binnen {
  max-width: 780px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; text-align: left;
}
.wagenbalk-tekst { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.35; }
.wagenbalk-tekst b {
  display: block; font-family: 'Baloo 2', cursive; font-weight: 600;
  font-size: 19px; color: #fff;
}
.wagenbalk-knop {
  appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  background: #FF7A66; color: #2A1410; border-radius: 999px; padding: 11px 22px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px;
}
.wagenbalk-knop.uit { opacity: .4; pointer-events: none; }
.wagenbalk-knoppen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.wagenbalk-knop.tweede {
  background: transparent; color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 600;
}
.wagenbalk-knop.tweede:hover { border-color: #FF7A66; color: #FF7A66; }
@media (max-width: 620px) {
  .wagenbalk-binnen { flex-wrap: wrap; }
  .wagenbalk-knoppen { width: 100%; }
  .wagenbalk-knoppen .wagenbalk-knop { flex: 1 1 0; padding: 11px 10px; }
}
body.met-wagenbalk { padding-bottom: 96px; }
.wagenbalk.knippert { animation: wagenTik 1.1s ease; }
@keyframes wagenTik {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 -2px 0 0 #FF7A66 inset, 0 -14px 30px -14px rgba(255,122,102,.65); }
}
@media (prefers-reduced-motion: reduce) { .wagenbalk.knippert { animation: none; } }
@media (prefers-reduced-motion: reduce) { .wagenbalk { transition: none; } }

.kassa {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; text-align: left;
  background: rgba(12, 16, 30, 0.84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
.kassa[hidden] { display: none; }
.kassa-blad {
  max-width: 480px; margin: 0 auto; padding: 20px 20px 18px; border-radius: 20px;
  background: #232A46; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
}
.kassa-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kassa-kop h2 { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 20px; line-height: 1.25; color: #fff; }
.kassa-sluit {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06); color: #fff; width: 32px; height: 32px;
  border-radius: 50%; font-size: 21px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.kassa-sluit:hover { border-color: rgba(255, 122, 102, .6); color: #FF7A66; }

.kassa-mandje {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 14px;
  font-size: 14.5px; color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; padding: 14px 16px;
}
/* Alles hier staat met een eigen voorvoegsel, want losse namen als .prijs
   bestaan op de pagina's al en die zijn daar veel groter. */
.kassa-mandje .kassa-regel, .kassa-mandje .kassa-prijs {
  display: flex; align-items: center; font-size: 14.5px; line-height: 1.4;
  font-family: inherit; margin: 0;
}
.kassa-mandje .kassa-prijs { justify-content: flex-end; white-space: nowrap; }
.kassa-mandje b.kassa-regel, .kassa-mandje b.kassa-prijs {
  font-family: 'Baloo 2', cursive; font-weight: 600; font-size: 18px; padding-top: 7px;
  margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.kassa-mandje .kassa-leegmelding {
  grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 14.5px;
}
.kassa-mandje .kassa-tip {
  grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.65); font-family: inherit;
}
.kassa-mandje .kassa-korting { color: #8FE3A5; font-weight: 700; }
/* Verzenden zit dichtgeklapt onder het totaal. De knop leest als een regel,
   niet als een grote knop, want het is een detail en geen actie. */
.kassa-mandje .kassa-verzendvink {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  margin: 10px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.82); cursor: pointer;
}
.kassa-mandje .kassa-verzendvink input {
  width: 18px; height: 18px; flex: 0 0 auto; accent-color: #FF7A66; cursor: pointer;
}
.kassa-mandje .kassa-verzendvink.mist { color: #FFB4A6; }
.kassa-mandje .kassa-verzendvink.mist input { outline: 2px solid #FFB4A6; outline-offset: 2px; }
.kassa-mandje .kassa-verzendvak {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto;
  gap: 5px 14px; margin: 6px 0 0;
}
/* Deze regel moet erbij: display:grid hierboven wint het anders van het
   hidden-attribuut, waardoor het vak toch zichtbaar blijft. */
.kassa-mandje .kassa-verzendvak[hidden] { display: none; }
/* Het kruisje om een artikel eruit te halen. Groot genoeg om met een duim te
   raken, dus minstens 28 bij 28, en met een zichtbare rand zodat het als knop
   leest en niet als een tekentje. */
.kassa-mandje .kassa-weg {
  appearance: none; cursor: pointer; margin-left: 8px; vertical-align: middle;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75); font: inherit; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kassa-mandje .kassa-weg:hover { border-color: #FF7A66; color: #FF7A66; background: rgba(255, 122, 102, .12); }
.kassa-mandje .kassa-weg:focus-visible { outline: 2px solid #FF7A66; outline-offset: 2px; }


.kassa-leeg-regel { margin: 10px 0 0; text-align: right; }
.kassa-leeg {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 13px; text-decoration: underline;
}
.kassa-leeg:hover { color: #FFB4A6; }
.kassa-tussenkop { margin: 20px 0 0; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 17px; line-height: 1.3; color: #fff; }
.kassa-blad label { display: block; font-family: inherit; font-size: 13.5px; font-weight: 700;
  line-height: 1.4; letter-spacing: 0; text-transform: none; color: #fff; margin: 14px 0 6px; }
.kassa-blad input[type=text], .kassa-blad input[type=email] {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: #fff; font: inherit; font-size: 15px;
}
.kassa-blad input::placeholder { color: rgba(255, 255, 255, 0.38); }
.kassa-blad input:focus { outline: 2px solid #FF7A66; outline-offset: 1px; }
.kassa-twee { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.kassa-twee[hidden] { display: none; }
.kassa-twee label { margin-top: 14px; }
.kassa-hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); margin: 6px 0 0; }

.kassa-vink {
  display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0;
  font-size: 13.5px; line-height: 1.5; font-weight: 400;
  color: rgba(255, 255, 255, 0.82); cursor: pointer;
}
.kassa-vink[hidden] { display: none; }
.kassa-vink input {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px;
  accent-color: #FF7A66; cursor: pointer;
}
.kassa-vink a { color: #FFB4A6; }
.kassa-vink.mist { color: #FFB4A6; }
.kassa-vink.mist input { outline: 2px solid #FFB4A6; outline-offset: 2px; }

.kassa-status { margin: 16px 0 0; font-size: 14px; min-height: 1.2em; color: rgba(255, 255, 255, 0.7); }
.kassa-status.fout { color: #FFB4A6; }
.kassa-status a { color: #FFB4A6; }
.kassa-knop {
  appearance: none; border: 0; cursor: pointer; width: 100%; margin-top: 6px;
  background: #FF7A66; color: #2A1410; border-radius: 999px; padding: 14px 22px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 17px;
}
.kassa-knop:disabled { opacity: .55; cursor: default; }
.kassa-voet { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); text-align: center; margin: 12px 0 0; }
.kassa-terug {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, 0.68); font: inherit; font-size: 14px; text-decoration: underline;
}
.kassa-terug:hover { color: #FF7A66; }
body.kassa-open { overflow: hidden; }

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