/* Fix modal telephonie mobile : scroll + bords visibles (hors encapsulation). */
.tel-modal-backdrop {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  box-sizing: border-box !important;
  padding:
    max(12px, var(--vd-safe-top, 0px))
    max(12px, var(--vd-safe-right, 0px))
    max(12px, var(--vd-safe-bottom, 0px))
    max(12px, var(--vd-safe-left, 0px)) !important;
}
.tel-modal {
  width: min(480px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  max-height: min(90dvh, 100%) !important;
  overflow: hidden !important;
}
.tel-modal-head,
.tel-modal-body,
.tel-modal-foot { min-width: 0 !important; }
.tel-modal-head h3 {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-wrap: anywhere !important;
}
.tel-modal-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  min-height: 0 !important;
}
.tel-modal-foot { flex-wrap: wrap !important; }
.tel-field,
.tel-field input,
.tel-field select {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.tel-field input,
.tel-field select { width: 100% !important; }
.tel-modal-note { overflow-wrap: anywhere !important; min-width: 0 !important; }

@media (max-width: 640px) {
  .tel-modal-backdrop {
    place-items: end stretch !important;
    padding:
      max(8px, var(--vd-safe-top, 0px))
      max(10px, var(--vd-safe-right, 0px))
      0
      max(10px, var(--vd-safe-left, 0px)) !important;
  }
  .tel-modal {
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: min(92dvh, calc(100dvh - var(--vd-safe-top, 0px))) !important;
  }
  .tel-modal-head { padding: 14px 14px 12px !important; }
  .tel-modal-body { padding: 14px 14px 8px !important; }
  .tel-modal-foot {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: stretch !important;
  }
  .tel-modal-foot .tel-ghost,
  .tel-modal-foot .tel-primary {
    flex: 1 1 calc(50% - 10px) !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .tel-seg { flex-direction: column !important; }
  .tel-seg button { width: 100% !important; justify-content: flex-start !important; }
  .tel-field-row { flex-wrap: wrap !important; }
  .tel-field-row input { flex: 1 1 100% !important; width: 100% !important; }
  .tel-field-row .tel-ghost { width: 100% !important; justify-content: center !important; }
  .tel-sheet { display: block !important; }
  .tel-sheet tr {
    display: block !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--vd-color-border, #eef0f4) !important;
  }
  .tel-sheet td {
    display: block !important;
    width: auto !important;
    padding: 2px 0 !important;
    border-bottom: none !important;
    white-space: normal !important;
  }
}