/**
 * FactuPress — Mobile single-column layout
 *
 * Cuando el admin activa "Force single column on mobile devices" desde
 * Metas Order, el body recibe la clase .fp-checkout-mobile-1col y este
 * CSS se aplica. Por debajo del breakpoint (579px), todos los campos
 * del checkout pasan a ocupar una fila completa cada uno.
 *
 * Funciona para los DOS layouts del plugin:
 *
 *   v1 (clásico WC): los campos llevan clases nativas
 *      .form-row-first / .form-row-last / .form-row-wide. Las
 *      neutralizamos forzando width:100%, float:none y margin-right:0.
 *
 *   v2 (multi-columna FP): los campos llevan .fp-grid-cell con un
 *      style inline `--fp-w: XX%`. Sobrescribimos esa variable a 100%
 *      mediante el selector .fp-grid-cell — el CSS inline de
 *      printLayoutV2Inline lee `var(--fp-w, 100%)` así que con esto
 *      los campos vuelven a ancho completo SIN tocar el HTML inline.
 *
 * El body class lo añade CheckoutClassic::filterBodyClasses solo si
 * la opción está ON. Si está OFF, este CSS no aplica nada (porque la
 * media query exige la clase del body para activar las reglas).
 *
 * Por qué un breakpoint fijo: la opción es "encendido/apagado", no
 * "elige el ancho". Si quisiéramos hacer el breakpoint configurable
 * habría que inyectar el media query inline en wp_head como hace el
 * loader con el height — overkill para una decisión que rara vez
 * varía. Si en el futuro hace falta, este media query puede pasar a
 * inline.
 */

@media (max-width: 579px) {

   /* === v1 (clásico WC): neutralizar form-row-first/last/wide === */

   /* WooCommerce y muchos temas (Neve, Astra, Storefront) declaran
      width:48% / float:left con !important sobre estos selectores —
      por eso necesitamos !important aquí también. Es la misma razón
      por la que CheckoutClassic::printLayoutV2Inline lo usa. */
   body.fp-checkout-mobile-1col .woocommerce form .form-row-first,
   body.fp-checkout-mobile-1col .woocommerce form .form-row-last,
   body.fp-checkout-mobile-1col .woocommerce form .form-row-wide {
      width: 100% !important;
      float: none !important;
      clear: both !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
   }

   /* === v2 (multi-columna FP): forzar --fp-w a 100% === */

   /* CheckoutClassic::printLayoutV2Inline emite reglas que leen
      width: var(--fp-w, 100%); aquí pisamos la propiedad
      --fp-w en el elemento mismo, lo que automáticamente hace que la
      regla del v2 calcule width:100%. No hay que tocar el style
      inline de cada celda — el cambio cae por defecto al fallback.

      Truco: en vez de redeclarar width:100% (que entraría en pelea
      de specificidad con la regla inline de v2), redefinimos la
      variable misma. Así "ganamos" sin recurrir a más !important. */
   body.fp-checkout-mobile-1col .woocommerce form .form-row.fp-grid-cell {
      --fp-w: 100% !important;
      width: 100% !important;
      float: none !important;
      clear: both !important;
   }

   /* === Ajustes generales === */

   /* Algunos temas distribuyen los campos vía flex/grid en el padre
      (.woocommerce-billing-fields__field-wrapper). Forzar que sea
      block elimina cualquier comportamiento de columnas residual. */
   body.fp-checkout-mobile-1col .woocommerce form .woocommerce-billing-fields__field-wrapper,
   body.fp-checkout-mobile-1col .woocommerce form .woocommerce-shipping-fields__field-wrapper,
   body.fp-checkout-mobile-1col .woocommerce form .woocommerce-additional-fields__field-wrapper {
      display: block !important;
   }

   /* Espaciado vertical entre campos cuando van en cascada — sin
      esto algunos temas dejan los campos pegados (porque su
      margin-bottom está pensado para alinearse en una fila de
      varios). 12px es un compromiso entre "compacto" y "respiración". */
   body.fp-checkout-mobile-1col .woocommerce form .form-row {
      margin-bottom: 12px !important;
   }
}