/* =====================================================
   BeautyAlt - Convertir publicación en servicio
   Fix visual responsive para Inicio + Perfil
   - misma medida de foto
   - modal deslizable en teléfono
   - evita preview duplicado abajo
===================================================== */

#svcFormModal {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px !important;
}

#svcFormModalBox {
  width: min(640px, 100%) !important;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 12px auto !important;
}

#svcFormModalBody {
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Card rosa de “Crear servicio desde esta publicación” */
#svcFormModal .ba-convert-service-wrap {
  margin-top: 14px !important;
}

/* Imagen de publicación convertida: misma medida en Inicio y Perfil */
#svcFormModal .ba-convert-service-wrap img {
  width: 100% !important;
  height: clamp(250px, 40vh, 330px) !important;
  max-height: 330px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 16px !important;
}

/* Cuando se convierte desde publicación, ocultar preview duplicado de “Seleccionar foto” */
#svcFormModal:has(.ba-convert-service-wrap) #svcCreatePreview {
  display: none !important;
}

/* Que el texto del input de foto no empuje ni se vea raro */
#svcFormModal:has(.ba-convert-service-wrap) #svcCreateFileName {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Botón final visible y cómodo en teléfono */
#svcFormModal #svc-guardar,
#svcFormModal .svc-main-btn {
  margin-bottom: 12px !important;
}

@media (max-width: 480px) {
  #svcFormModal {
    padding: 8px !important;
  }

  #svcFormModalBox {
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    border-radius: 22px !important;
  }

  #svcFormModal .ba-convert-service-wrap img {
    height: clamp(230px, 38vh, 310px) !important;
    max-height: 310px !important;
  }
}