/* Mauntz Verhuur: alleen de onderdelen die het script zelf maakt. Kleuren komen uit de Breakdance-variabelen. */

.mz-melding {
  position: fixed; left: 50%; bottom: 24px; z-index: 9999;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 20px; border-radius: 999px;
  background: #fff; color: #0b0816; font-size: 15px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .45s cubic-bezier(.22, 1, .36, 1), visibility .45s;
}
.mz-melding.is-zichtbaar { transform: translate(-50%, 0); visibility: visible; }
.mz-melding a { padding: 9px 16px; border-radius: 999px; background: var(--bg, #0b0816); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }

.mz-aantal { display: inline-flex; align-items: center; padding: 4px; border-radius: 999px; background: var(--surface, #181229); }
.mz-aantal button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.mz-aantal button:hover { background: rgba(255, 255, 255, .08); }
.mz-aantal input { width: 44px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mz-aantal input::-webkit-outer-spin-button, .mz-aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

[data-mz="teller"].is-stuiter { animation: mz-stuiter .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes mz-stuiter { 50% { transform: scale(1.35); } }

.mz-regel { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 36px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line, rgba(244, 246, 255, .1)); }
.mz-regel img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.mz-regel__info { display: grid; gap: 2px; min-width: 0; }
.mz-regel__naam { color: var(--text, #f4f6ff); font-weight: 600; text-decoration: none; }
.mz-regel__naam:hover { color: var(--cyan, #22b8e0); }
.mz-regel__prijs { color: var(--muted, #a8a3c0); font-size: 14px; }
.mz-regel .mz-aantal button { width: 32px; height: 32px; font-size: 16px; }
.mz-regel .mz-aantal input { width: 34px; }
.mz-regel__weg { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted, #a8a3c0); font-size: 22px; cursor: pointer; }
.mz-regel__weg:hover { color: #ff8aa5; background: rgba(255, 138, 165, .1); }
.mz-formfout { grid-column: 1 / -1; margin: 8px 0 0; color: #ff8aa5; }

@media (max-width: 479px) {
  .mz-regel { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  .mz-regel img { width: 52px; height: 52px; }
  .mz-regel .mz-aantal { grid-column: 2; grid-row: 2; justify-self: start; }
  .mz-regel__weg { grid-column: 3; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-melding { transition: none; }
  [data-mz="teller"].is-stuiter { animation: none; }
}