/* Reusable info/legal modal (native <dialog>, class .vd-modal).
   Mobile (<768px): full-width bottom sheet that slides up (like the add-to-cart
   confirmation). Desktop (≥768px): centered card that pops in.
   Token fallbacks let the component render correctly even outside a .vd page. */

.vd-modal {
  position: fixed;
  inset: auto 0 0 0;                 /* mobile: pinned to the bottom, full width */
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border: none;
  padding: 0;
  background: #fff;
  color: var(--vd-body, #2b3038);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
}
.vd-modal::backdrop { background: rgba(20, 30, 25, 0.45); }
dialog.vd-modal:not([open]) { display: none; }

/* entrance animation (native dialog: animate on [open]) */
.vd-modal[open] { animation: vd-modal-up 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.vd-modal[open]::backdrop { animation: vd-modal-fade 200ms ease-out; }
@keyframes vd-modal-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vd-modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* drag-handle cue (mobile bottom sheet only) */
.vd-modal-handle { width: 40px; height: 4px; border-radius: 2px; background: #d4d4d4; margin: 10px auto 2px; }

.vd-modal-card { max-height: 90vh; overflow-y: auto; padding: 6px 22px 24px; }

/* header sticks so the title + close stay reachable while the body scrolls */
.vd-modal-head { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.vd-modal-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--vd-ink, #15181c); }
.vd-modal-close { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--vd-chip-bg, #eef1f3); border: none; padding: 0; cursor: pointer; color: var(--vd-icon, #5b6470); border-radius: 50%; transition: background-color .12s ease, color .12s ease; }
.vd-modal-close:hover { background: #e2e6e9; color: var(--vd-ink, #15181c); }
.vd-modal-close .vd-icon { font-size: 20px; }

.vd-modal-body { font-size: 14px; line-height: 1.6; }
.vd-modal-body p { margin: 0 0 10px; }
.vd-modal-strong { font-weight: 700; color: var(--vd-ink, #15181c); }
.vd-modal-list { margin: 0 0 12px; padding-left: 22px; list-style: disc outside; }
.vd-modal-list li { margin: 0 0 6px; list-style: disc outside; display: list-item; }
.vd-modal-biocide { background: var(--vd-bg-soft, #f3f6f4); border: 1px solid var(--vd-line, #e4e7ea); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--vd-muted, #515862); }
.vd-modal-legal { font-size: 13px; color: var(--vd-muted, #515862); }
.vd-modal-legal a { color: var(--vd-primary-dark, #d9601f); text-decoration: underline; }

/* desktop: centered card */
@media (min-width: 768px) {
  .vd-modal { inset: 0; margin: auto; width: calc(100% - 32px); max-width: 560px; max-height: 85vh; border-radius: var(--vd-radius, 14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); }
  .vd-modal-card { max-height: 85vh; padding: 0 24px 22px; }
  .vd-modal-handle { display: none; }
  .vd-modal-head { padding: 18px 0 12px; }
  .vd-modal[open] { animation: vd-modal-pop 220ms ease-out; }
  @keyframes vd-modal-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* lock background scroll while a modal is open (set by modal.js) */
body.vd-modal-open { overflow: hidden; }