.elementor-2903 .elementor-element.elementor-element-fc354e5{--display:flex;}.elementor-2903 .elementor-element.elementor-element-6b654f9{--spacer-size:4px;}.elementor-2903 .elementor-element.elementor-element-91cef1b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2903 .elementor-element.elementor-element-32d139f{text-align:left;}.elementor-2903 .elementor-element.elementor-element-32d139f .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:32px;font-weight:700;color:#4A4A4A;}.elementor-2903 .elementor-element.elementor-element-22bb182 > .elementor-widget-container{margin:-34px 0px 0px 0px;}.elementor-2903 .elementor-element.elementor-element-22bb182{text-align:left;}.elementor-2903 .elementor-element.elementor-element-22bb182 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:15px;font-weight:400;color:#4A4A4A;}.elementor-2903 .elementor-element.elementor-element-6cc073f{--display:flex;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-2903 .elementor-element.elementor-element-8c2a42e{--divider-border-style:solid;--divider-color:#E5E5E5;--divider-border-width:1px;}.elementor-2903 .elementor-element.elementor-element-8c2a42e .elementor-divider-separator{width:100%;margin:0 auto;margin-left:0;}.elementor-2903 .elementor-element.elementor-element-8c2a42e .elementor-divider{text-align:left;padding-block-start:3px;padding-block-end:3px;}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2903 .elementor-element.elementor-element-21927a7 .cart button, .elementor-2903 .elementor-element.elementor-element-21927a7 .cart .button{transition:all 0.2s;}.elementor-2903 .elementor-element.elementor-element-21927a7 .quantity .qty{transition:all 0.2s;}.elementor-2903 .elementor-element.elementor-element-0a74e7a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2903 .elementor-element.elementor-element-e74b79e{--spacer-size:28px;}.elementor-2903 .elementor-element.elementor-element-0102a9f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2903 .elementor-element.elementor-element-f239fad{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-2903 .elementor-element.elementor-element-32d139f .elementor-heading-title{font-size:22px;}.elementor-2903 .elementor-element.elementor-element-22bb182 > .elementor-widget-container{margin:-25px 0px 0px 0px;}.elementor-2903 .elementor-element.elementor-element-22bb182 .elementor-heading-title{font-size:14px;}}@media(min-width:768px){.elementor-2903 .elementor-element.elementor-element-91cef1b{--width:35%;}.elementor-2903 .elementor-element.elementor-element-6cc073f{--content-width:655px;}}/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-21927a7 *//* 🟫 TIPOGRAFÍA GENERAL DEL FORMULARIO */
.woocommerce div.product form.cart,
.wapf-field-label,
.wapf-field-label label,
.wapf-field-input input,
.wapf-field-input select,
.wapf-field-input textarea,
form.cart button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button.button.alt {
  font-family: "proxima-n-w01-reg", sans-serif !important;
}

/* 🟫 CONTENEDOR PRINCIPAL DEL FORMULARIO */
.woocommerce div.product form.cart {
  background-color: #F9F9F9 !important;      /* mismo fondo */
  border: 2px solid #ddd !important;         /* borde más marcado tipo .well */
  border-radius: 8px !important;             /* ↓ antes 12px */
  padding: 32px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  box-shadow: none !important;               /* sin sombra, como la caja de ejemplo */
}

/* 🟫 TÍTULOS DE LOS CAMPOS */
.wapf-field-label,
.wapf-field-label label {
  color: #4A4A4A !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* 🟫 INPUTS, SELECTS Y TEXTAREAS */
.wapf-field-input input[type="text"],
.wapf-field-input input[type="email"],
.wapf-field-input input[type="number"],
.wapf-field-input input[type="tel"],
.wapf-field-input input[type="date"],
.wapf-field-input select,
.wapf-field-input textarea {
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease !important;
  appearance: auto !important;
  background-image: none !important;
}

/* 🟫 PLACEHOLDER */
.wapf-field-input input::placeholder,
.wapf-field-input textarea::placeholder,
.wapf-field-input select::placeholder {
  color: #B0B0B0 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}

/* 🟫 FOCUS DE CAMPOS */
.wapf-field-input input:focus,
.wapf-field-input select:focus,
.wapf-field-input textarea:focus {
  border-color: #999999 !important;
  outline: none !important;
}

/* ✅ BOTÓN DE AÑADIR AL CARRITO (MISMA APARIENCIA) */
form.cart button.single_add_to_cart_button,
form.cart button.single_add_to_cart_button.button.alt {
  background-color: #337ab7 !important;      /* color que tenés ahora */
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-block !important;
  margin-top: 10px !important;
  cursor: pointer !important;
}

/* Hover */
form.cart button.single_add_to_cart_button:hover,
form.cart button.single_add_to_cart_button.button.alt:hover {
  background-color: #337ab7 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* 📱 RESPONSIVE MOBILE */
@media screen and (max-width: 600px) {
  .woocommerce div.product form.cart {
    padding: 20px !important;
    max-width: 90% !important;
  }

  .wapf-field-label,
  .wapf-field-label label {
    font-size: 15px !important;
  }

  .wapf-field-input input,
  .wapf-field-input select,
  .wapf-field-input textarea {
    font-size: 16px !important;             /* evita zoom en móviles */
    padding: 11px 13px !important;
  }

  form.cart button.single_add_to_cart_button,
  form.cart button.single_add_to_cart_button.button.alt {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }
}

/* ===================================================== */
/*  FLECHA TIPO <i class="fa fa-arrow-right"> EN CONTINUAR */
/* ===================================================== */

/* Estilo del icono dentro de los botones de siguiente paso del wizard */
.tv-nav .tv-btn .fa-arrow-right,
.vp-step-nav .vp-step-btn .fa-arrow-right {
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}



<script>
(function () {
  function initWizard() {
    const form = document.querySelector('form.cart');
    if (!form) return setTimeout(initWizard, 400);

    // Evitar doble inicialización
    if (form.dataset.vpWizard === 'on') return;

    const groups = form.querySelectorAll('.wapf .wapf-field-group, .wapf-field-group');
    if (groups.length < 3) return setTimeout(initWizard, 400);

    form.dataset.vpWizard = 'on';

    // ---- Buscar grupo por texto de encabezado ----
    function findGroupByNeedles(needles) {
      for (const g of groups) {
        const txt = (g.textContent || '').toLowerCase();
        for (const n of needles) {
          if (!n) continue;
          if (txt.includes(n.toLowerCase())) {
            return g;
          }
        }
      }
      return null;
    }

    // PÁGINA 1 – "Iniciá tu Solicitud"
    const gPag1 = findGroupByNeedles([
      'iniciá tu solicitud',
      'inicia tu solicitud'
    ]);

    // PÁGINA 2 – "Datos del Vehículo"
    const gPag2 = findGroupByNeedles([
      'datos del vehículo',
      'datos del vehiculo'
    ]);

    // PÁGINA 3 – "Datos del titular actual"
    const gPag3 = findGroupByNeedles([
      'datos del titular actual'
    ]);

    // Armar orden 1 → 2 → 3, rellenando con lo que falte
    const ordered = [];
    const pushUnique = (g) => { if (g && !ordered.includes(g)) ordered.push(g); };

    pushUnique(gPag1);
    pushUnique(gPag2);
    pushUnique(gPag3);

    // Cualquier grupo que no se haya asignado entra al final como fallback
    groups.forEach(pushUnique);

    const step1 = ordered[0];
    const step2 = ordered[1];
    const step3 = ordered[2];

    // Si por algún motivo no tenemos 3 pasos, abortamos
    if (!step1 || !step2 || !step3) return;

    const allSteps = [step1, step2, step3];

    const addToCartBtn = form.querySelector('.single_add_to_cart_button');

    // Ocultar botón nativo de WooCommerce al inicio
    if (addToCartBtn) {
      addToCartBtn.style.display = 'none';
      addToCartBtn.style.visibility = 'hidden';
    }

    // Ocultar todos los pasos salvo el primero
    allSteps.forEach(g => g && (g.style.display = 'none'));
    step1.style.display = 'block';

    // ---- Botones de navegación ----
    const nav1 = document.createElement('div');
    nav1.className = 'vp-nav';
    nav1.innerHTML = `
      <button type="button" class="vp-btn" id="vp-next-1">
        Continuar <span class="vp-btn-arrow">&rarr;</span>
      </button>
    `;
    form.appendChild(nav1);

    const nav2 = document.createElement('div');
    nav2.className = 'vp-nav';
    nav2.style.display = 'none';
    nav2.innerHTML = `
      <button type="button" class="vp-btn vp-btn-secondary" id="vp-prev-2">Volver</button>
      <button type="button" class="vp-btn" id="vp-next-2">
        Continuar <span class="vp-btn-arrow">&rarr;</span>
      </button>
    `;
    form.appendChild(nav2);

    const nav3 = document.createElement('div');
    nav3.className = 'vp-nav';
    nav3.style.display = 'none';
    nav3.innerHTML = `
      <button type="button" class="vp-btn vp-btn-secondary" id="vp-prev-3">Volver</button>
    `;
    form.appendChild(nav3);

    // ---- Estilos botones + error ----
    const style = document.createElement('style');
    style.textContent = `
      .vp-nav{
        display:flex;
        gap:12px;
        justify-content:flex-end;
        margin-top:20px;
      }
      .vp-btn{
        background:#337ab7;
        color:#fff;
        border:0;
        border-radius:6px;
        padding:12px 22px;
        font-weight:600;
        font-size:16px;
        cursor:pointer;
        display:inline-flex;
        align-items:center;
        gap:8px;
      }
      .vp-btn:hover{
        background:#2b6393;
      }
      .vp-btn.vp-btn-secondary{
        background:#e9ecef;
        color:#333;
        border-radius:6px;
        padding:10px 16px;
      }
      .vp-btn.vp-btn-secondary:hover{
        background:#dfe3e6;
      }
      .vp-btn .vp-btn-arrow{
        font-size:18px;
        line-height:1;
        transform:translateY(1px);
      }
      .wapf-field-error{
        border:1px solid #d93025!important;
        box-shadow:0 0 0 1px #d93025!important;
      }
    `;
    document.head.appendChild(style);

    // ---- Mostrar pasos ----
    function show(step) {
      allSteps.forEach((g, i) => {
        if (!g) return;
        g.style.display = (step === i + 1 ? 'block' : 'none');
      });

      nav1.style.display = (step === 1 ? 'flex' : 'none');
      nav2.style.display = (step === 2 ? 'flex' : 'none');
      nav3.style.display = (step === 3 ? 'flex' : 'none');

      if (addToCartBtn) {
        if (step === 3) {
          addToCartBtn.style.display = 'inline-flex';
          addToCartBtn.style.visibility = 'visible';
        } else {
          addToCartBtn.style.display = 'none';
          addToCartBtn.style.visibility = 'hidden';
        }
      }

      // mismo comportamiento que el otro formulario
      window.scrollTo({ top: form.offsetTop - 60, behavior: 'smooth' });
    }

    // ---- Validación por paso ----
    function validateStep(currentStep) {
      let valid = true;
      const requiredFields = currentStep.querySelectorAll(
        'input[required], select[required], textarea[required]'
      );

      requiredFields.forEach(f => {
        f.classList.remove('wapf-field-error');
        const v = (f.value || '').toString().trim();
        if (!v) {
          f.classList.add('wapf-field-error');
          valid = false;
        }
      });
      return valid;
    }

    // ---- Eventos ----
    const btnNext1 = document.getElementById('vp-next-1');
    const btnPrev2 = document.getElementById('vp-prev-2');
    const btnNext2 = document.getElementById('vp-next-2');
    const btnPrev3 = document.getElementById('vp-prev-3');

    if (btnNext1) {
      btnNext1.addEventListener('click', () => {
        if (validateStep(step1)) show(2);
      });
    }
    if (btnPrev2) {
      btnPrev2.addEventListener('click', () => show(1));
    }
    if (btnNext2) {
      btnNext2.addEventListener('click', () => {
        if (validateStep(step2)) show(3);
      });
    }
    if (btnPrev3) {
      btnPrev3.addEventListener('click', () => show(2));
    }
  }

  initWizard();
})();
</script>/* End custom CSS */