/* ==========================================================================
   Bewegingen en terugkoppeling (17-09-2026)

   Alles hier draait in de browser van de bezoeker en kost de server niets.
   Er wordt zoveel mogelijk geanimeerd op transform en opacity, want die
   gaan via de grafische kaart; daardoor blijft het ook op een oudere
   telefoon soepel. Onderaan staat een uitzondering voor bezoekers die in
   hun systeem hebben aangegeven bewegingen liever niet te zien.
   ========================================================================== */

:root {
  --lc-snel:    0.16s;
  --lc-normaal: 0.24s;
  --lc-traag:   0.36s;
  --lc-veer:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --lc-soepel:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Knoppen: indrukken voelt als indrukken
   -------------------------------------------------------------------------- */

.btn,
button,
.btn-addtocart,
.lc-btn-cart,
.lc-btn-secondary,
.qty-btn,
.cart-trigger,
.bcart-btn,
.lc-view-btn,
.lc-search__btn,
.lc-search-toggle,
.lc-subcat-chip,
input[type="submit"] {
  transition: background-color var(--lc-snel) var(--lc-soepel),
              border-color var(--lc-snel) var(--lc-soepel),
              color var(--lc-snel) var(--lc-soepel),
              transform var(--lc-snel) var(--lc-soepel),
              opacity var(--lc-snel) var(--lc-soepel);
}

.btn:active,
button:active,
.btn-addtocart:active,
.lc-btn-cart:active,
.lc-btn-secondary:active,
.cart-trigger:active,
.bcart-btn:active,
.lc-view-btn:active,
.lc-search__btn:active,
input[type="submit"]:active {
  transform: translateY(1px) scale(0.98);
}

.qty-btn:active {
  transform: scale(0.9);
}

.btn:disabled,
button:disabled,
.btn.disabled {
  transform: none !important;
  opacity: 0.65;
}

/* Toetsenbordgebruikers zien duidelijk waar ze zijn, muisgebruikers niet. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent, #8b1a1a);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* --------------------------------------------------------------------------
   2. Invoervelden
   -------------------------------------------------------------------------- */

.form-control,
.lc-search__input,
.lc-select {
  transition: border-color var(--lc-normaal) var(--lc-soepel),
              box-shadow var(--lc-normaal) var(--lc-soepel);
}

/* --------------------------------------------------------------------------
   3. Productkaarten
   Het thema laat de kaart al iets omhoog komen; hier alleen de knop en de
   afbeelding nog wat levendiger.
   -------------------------------------------------------------------------- */

.b-card__img {
  transition: transform var(--lc-traag) var(--lc-soepel);
}

.b-card__name,
.b-card__name a {
  transition: color var(--lc-snel) var(--lc-soepel);
}

.b-card .btn-addtocart svg {
  transition: transform var(--lc-normaal) var(--lc-veer);
}

.b-card .btn-addtocart:hover svg {
  transform: translateY(-1px) scale(1.08);
}

/* --------------------------------------------------------------------------
   4. In het mandje leggen
   -------------------------------------------------------------------------- */

@keyframes lcGelukt {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.btn-addtocart.lc-gelukt,
.lc-btn-cart.lc-gelukt,
#button-cart.lc-gelukt {
  background: var(--green, #2e7d4f) !important;
  border-color: var(--green, #2e7d4f) !important;
  color: #ffffff !important;
  animation: lcGelukt var(--lc-traag) var(--lc-veer);
}

.btn-addtocart.lc-gelukt svg,
.btn-addtocart.lc-gelukt path {
  stroke: #ffffff;
}

/* Bezig: rustig pulserend, zodat duidelijk is dat er iets gebeurt. */
@keyframes lcBezig {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.btn-addtocart.lc-bezig,
.lc-btn-cart.lc-bezig,
#button-cart.lc-bezig {
  animation: lcBezig 0.9s ease-in-out infinite;
  pointer-events: none;
}

/* Lukt het niet, dan een kort schudje in plaats van alleen tekst. */
@keyframes lcNee {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

.lc-nee {
  animation: lcNee var(--lc-traag) var(--lc-soepel);
}

/* Het mandje in de kop wipt even op zodra er iets bij komt. */
@keyframes lcMandje {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.18) rotate(-8deg); }
  55%  { transform: scale(0.96) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.cart-trigger.lc-wip svg,
.lc-mini-cart.lc-wip svg {
  display: inline-block;
  animation: lcMandje 0.55s var(--lc-veer);
}

/* Het aantal naast het mandje telt zichtbaar op. */
@keyframes lcTeller {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

#bcart-count-label.lc-tel,
.cart-badge.lc-tel,
.cart-text.lc-tel,
#cart-count.lc-tel,
.kz-cart__count.lc-tel {
  display: inline-block;
  animation: lcTeller 0.45s var(--lc-veer);
}

/* --------------------------------------------------------------------------
   5. Meldingen
   -------------------------------------------------------------------------- */

@keyframes lcMeldingIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert-cart,
.alert-dismissible {
  animation: lcMeldingIn var(--lc-traag) var(--lc-soepel);
}

/* Zwevende melding. Ligt bewust boven de winkelwagenlade (z-index 9999),
   zodat een bericht nooit achter de lade verdwijnt. */
.lc-melding {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 10050;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 18px;
  border-radius: var(--radius, 6px);
  background: #ffffff;
  border: 1px solid rgba(15, 15, 15, 0.1);
  box-shadow: 0 12px 34px rgba(15, 15, 15, 0.16);
  color: var(--text, #111111);
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity var(--lc-normaal) var(--lc-soepel),
              transform var(--lc-normaal) var(--lc-veer);
  pointer-events: none;
}

.lc-melding--zichtbaar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lc-melding--fout {
  border-color: rgba(139, 26, 26, 0.3);
  background: #fdeaea;
  color: #8b1a1a;
}

.lc-melding--goed {
  border-color: rgba(46, 125, 79, 0.3);
  background: #eef7f1;
  color: #226141;
}

/* Het blokje dat de productpagina gebruikt had nog helemaal geen opmaak. */
.lc-cart-notif {
  display: block;
  max-height: 0;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  border-radius: var(--radius, 6px);
  background: #fdeaea;
  border: 1px solid transparent;
  color: #8b1a1a;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height var(--lc-traag) var(--lc-soepel),
              padding var(--lc-traag) var(--lc-soepel),
              margin var(--lc-traag) var(--lc-soepel),
              opacity var(--lc-normaal) var(--lc-soepel),
              transform var(--lc-normaal) var(--lc-soepel);
}

.lc-cart-notif--show {
  max-height: 220px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-color: rgba(139, 26, 26, 0.22);
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   6. Links in de kop en de zijbalk
   Het hoofdmenu heeft een eigen hover-opmaak; die laten we met rust.
   -------------------------------------------------------------------------- */

.lc-topbar a,
.lc-utility-item,
.lc-compare-link,
.b-card__login-prompt {
  transition: color var(--lc-snel) var(--lc-soepel),
              opacity var(--lc-snel) var(--lc-soepel),
              transform var(--lc-snel) var(--lc-soepel);
}

.lc-utility-item:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   7. Aantal wijzigen
   -------------------------------------------------------------------------- */

@keyframes lcWaarde {
  0%   { transform: translateY(0); opacity: 1; }
  45%  { transform: translateY(-3px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.qty-value.lc-veranderd {
  display: inline-block;
  animation: lcWaarde var(--lc-normaal) var(--lc-soepel);
}

/* --------------------------------------------------------------------------
   8. Wie liever geen bewegingen ziet, krijgt ze ook niet
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}