/*
 * SEHL MAIL
 * iPhone Contact Fit V1
 *
 * Corrige exclusivamente la ficha/modal de contacto.
 *
 * Objetivos:
 * - nunca salir por debajo del viewport
 * - scroll vertical interno
 * - Cancel / Save completamente accesibles
 * - safe-area de iPhone
 * - cero overflow horizontal
 * - no alterar composer
 */

@media (max-width: 768px) {

  .sehl-contact-mobile-fit {
    box-sizing: border-box !important;

    /*
     * El JS calcula esta altura usando visualViewport.height
     * y la posición REAL del modal.
     */
    max-height:
      var(
        --sehl-contact-max-height,
        calc(100dvh - 24px)
      ) !important;

    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;

    scroll-padding-top: 12px;

    scroll-padding-bottom:
      calc(
        24px +
        env(safe-area-inset-bottom, 0px)
      );

    /*
     * El modal no debe aumentar su ancho por ningún hijo.
     */
    max-width:
      calc(
        100vw -
        max(16px, env(safe-area-inset-left, 0px)) -
        max(16px, env(safe-area-inset-right, 0px))
      ) !important;
  }


  /*
   * Ningún contenido de la ficha puede imponer ancho.
   */
  .sehl-contact-mobile-fit *,
  .sehl-contact-mobile-fit *::before,
  .sehl-contact-mobile-fit *::after {
    box-sizing: border-box !important;
    min-width: 0;
  }


  /*
   * Inputs y campos.
   */
  .sehl-contact-mobile-fit input,
  .sehl-contact-mobile-fit textarea,
  .sehl-contact-mobile-fit select {
    box-sizing: border-box !important;

    max-width: 100% !important;
    min-width: 0 !important;

    font-size: max(16px, 1em);
  }


  /*
   * Textarea no puede crecer horizontalmente.
   */
  .sehl-contact-mobile-fit textarea {
    width: 100% !important;
    resize: vertical;
  }


  /*
   * Elementos multimedia/tablulares.
   */
  .sehl-contact-mobile-fit img,
  .sehl-contact-mobile-fit video,
  .sehl-contact-mobile-fit iframe,
  .sehl-contact-mobile-fit table {
    max-width: 100% !important;
  }


  /*
   * Zona de acciones detectada.
   *
   * No la hacemos sticky porque ocuparía demasiado espacio
   * en un iPhone. Se mantiene dentro del scroll y totalmente
   * accesible al llegar al final.
   */
  .sehl-contact-mobile-actions {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-bottom:
      max(
        16px,
        env(safe-area-inset-bottom, 0px)
      ) !important;
  }


  /*
   * Último elemento de la ficha.
   */
  .sehl-contact-mobile-fit > :last-child {
    margin-bottom:
      max(
        12px,
        env(safe-area-inset-bottom, 0px)
      );
  }

}