/* ── Fons del modal (backdrop) ───────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--backdrop-rgb), var(--opacity-40));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}

/* ── Shell del modal ─────────────────────────────────────────────── */
.modal {
  position: relative;
  width: min(720px, 100%);
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 3px solid var(--modal-border);
  overflow: hidden;
}

/* Mateix patró que el drawer: tancament dins la targeta, cantó superior dret (sense sortir del modal) */
.modal .modal-close-sticky {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 5;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  pointer-events: none;
}

.modal .modal-close-sticky .sidebar-close {
  pointer-events: auto;
  position: relative;
  margin: 0;
  display: inline-flex;
  background: var(--color-primary-strong);
  border-color: var(--ui-overlay-subtle);
  color: var(--card);
}

@media (hover: hover) and (pointer: fine) {
  .modal .modal-close-sticky .sidebar-close:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

/* ── Cap del modal (només diàlegs amb títol; text legal sense fila de capçalera) ── */
.modal-head {
  padding: 14px 5.5rem 14px 16px;
  border-bottom: 3px solid var(--line);
  background: var(--actionable-hover);
}
.modal-head strong {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* ── Cos del modal ───────────────────────────────────────────────── */
.modal-body {
  padding: 16px;
  color: var(--text-strong);
}

/* Text legal llarg (p. ex. privadesa des del formulari de contacte) */
.modal-legal-scroll {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding-right: 6px;
  text-align: left;
}

/* Modal de text legal: marge petit i simètric respecte la finestra */
.modal-backdrop:has(.modal-legal-scroll) {
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
}

.modal-backdrop:has(.modal-legal-scroll) .modal {
  width: min(960px, 100%);
  max-height: calc(
    100vh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(var(--space-3), env(safe-area-inset-top)) - max(var(--space-3), env(safe-area-inset-bottom))
  );
  display: flex;
  flex-direction: column;
}

.modal-backdrop:has(.modal-legal-scroll) .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: var(--space-2);
  box-sizing: border-box;
  width: 100%;
}

/* El cos ja fa el marge; evitem el padding-top extra del markdown fora del modal */
.modal-backdrop:has(.modal-legal-scroll) .modal-legal-scroll.content-page-body {
  padding-top: 0;
}

/* Tipografia més compacta només al modal (la pàgina #coneix-nos/privadesa manté mides de .content-page-body) */
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact {
  font-size: var(--font-xs);
  line-height: 1.5;
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h1 {
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h2 {
  font-size: var(--font-xs);
  font-weight: 800;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body.content-page-body--modal-compact h3 {
  font-size: var(--font-xs);
  font-weight: 700;
  margin: var(--space-2) 0 var(--space-1);
}

.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-loading,
.modal-backdrop:has(.modal-legal-scroll) .content-page-body--modal-compact .content-page-error {
  font-size: var(--font-xs);
  line-height: 1.4;
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: var(--text-strong);
  color: var(--card);
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  font-weight: 900;
  font-family: var(--font-ui);
  display: none;
  z-index: 1000;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}