/*
 * Los temas de WordPress (Betheme, Elementor) imponen sus propios estilos a
 * button/input con alta especificidad. Todo aquí va scopeado a .gg-lead-modal y
 * las propiedades que el tema pisa llevan !important a propósito.
 */

.gg-lead-modal[hidden] { display: none !important; }

.gg-lead-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  font-family: Montserrat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
}
.gg-lead-modal, .gg-lead-modal * { box-sizing: border-box !important; }
.gg-lead-modal.is-inline { position: static; z-index: auto; padding: 0; }

.gg-lead-modal .gg-lead-backdrop {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: rgba(4, 18, 45, .72) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px);
  cursor: default;
}
.gg-lead-modal.is-inline .gg-lead-backdrop { display: none; }

.gg-lead-modal .gg-lead-dialog {
  position: relative; z-index: 1;
  width: min(100%, 430px);
  margin: auto;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  overflow: auto;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 28px 90px rgba(0, 20, 60, .35);
  text-align: left;
}

/* ---------- Encabezado ---------- */

.gg-lead-modal .gg-lead-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.05rem 1.15rem;
  color: #fff !important;
  background: linear-gradient(135deg, #0b2f78, #1769d8) !important;
}
.gg-lead-modal[data-mode="wa"] .gg-lead-head {
  background: linear-gradient(135deg, #128c4a, #25d366) !important;
}
.gg-lead-modal .gg-lead-head__icon {
  display: flex !important; align-items: center; justify-content: center;
  width: 40px !important; height: 40px !important; flex: 0 0 40px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}
.gg-lead-modal .gg-lead-head__icon svg { width: 20px; height: 20px; display: block; }
.gg-lead-modal .gg-lead-head-text { flex: 1 1 auto; min-width: 0; }
.gg-lead-modal .gg-lead-head h2 {
  margin: 0 !important; padding: 0 !important;
  color: #fff !important;
  font-size: 1.12rem !important; font-weight: 800 !important; line-height: 1.2 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.gg-lead-modal .gg-lead-head h2:after { display: none !important; }
.gg-lead-modal .gg-lead-head p {
  margin: .2rem 0 0 !important; padding: 0 !important;
  color: #fff !important; opacity: .92;
  font-size: .78rem !important; font-weight: 500 !important; line-height: 1.35 !important;
}
.gg-lead-modal .gg-lead-close {
  flex: 0 0 32px;
  display: flex !important; align-items: center; justify-content: center;
  width: 32px !important; height: 32px !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 9px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
  font-size: 1.25rem !important; font-weight: 400 !important; line-height: 1 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer;
}
.gg-lead-modal .gg-lead-close:hover { background: rgba(255, 255, 255, .3) !important; }

/* ---------- Cuerpo ---------- */

.gg-lead-modal .gg-lead-form { padding: 1.05rem 1.15rem 1.15rem !important; margin: 0 !important; }
.gg-lead-modal .gg-lead-form fieldset {
  margin: 0 0 .8rem !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
.gg-lead-modal .gg-lead-form legend,
.gg-lead-modal .gg-lead-form > label,
.gg-lead-modal .gg-lead-amount > label {
  display: block !important; float: none !important;
  width: auto !important; margin: 0 0 .45rem !important; padding: 0 !important;
  color: #102950 !important; background: none !important;
  font-size: .85rem !important; font-weight: 800 !important; line-height: 1.3 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}

.gg-lead-modal .gg-lead-options { display: flex !important; flex-wrap: wrap; gap: .5rem; margin: 0 !important; }

/* Botones de opción: el tema los pinta de azul sólido, aquí se revierten. */
.gg-lead-modal .gg-lead-option,
.gg-lead-modal .gg-lead-unit {
  display: flex !important; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px !important; height: auto !important;
  margin: 0 !important; padding: .6rem .7rem !important;
  border: 2px solid #dbe3ef !important; border-radius: 11px !important;
  color: #345073 !important;
  background: #fff !important; background-image: none !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: inherit !important; font-size: .87rem !important; font-weight: 700 !important;
  line-height: 1.25 !important; text-align: center; text-transform: none !important;
  letter-spacing: 0 !important; text-decoration: none !important;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.gg-lead-modal .gg-lead-option { flex: 1 1 130px; }
.gg-lead-modal .gg-lead-option svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* Las capacidades (20 / 30 / 45 kg) siempre en un solo renglón, repartidas por
   igual sea cual sea el número configurado. */
.gg-lead-modal [data-cylinder-options] .gg-lead-options { flex-wrap: nowrap !important; gap: .45rem; }
.gg-lead-modal [data-cylinder-options] .gg-lead-option {
  flex: 1 1 0 !important; min-width: 0 !important;
  padding: .6rem .25rem !important;
  white-space: nowrap;
}
.gg-lead-modal .gg-lead-option:hover,
.gg-lead-modal .gg-lead-unit:hover {
  border-color: #79a2da !important; background: #f5f9ff !important; color: #1b4a86 !important;
}
.gg-lead-modal .gg-lead-option.active,
.gg-lead-modal .gg-lead-unit.active {
  border-color: #1769d8 !important; background: #eef5ff !important; color: #0b2f78 !important;
  box-shadow: inset 0 0 0 1px #1769d8 !important;
}

.gg-lead-modal .gg-lead-form input[type="tel"],
.gg-lead-modal .gg-lead-form input[type="number"] {
  display: block !important;
  width: 100% !important; max-width: 100% !important;
  min-height: 46px !important; height: 46px !important;
  margin: 0 !important; padding: .6rem .8rem !important;
  border: 2px solid #dbe3ef !important; border-radius: 10px !important;
  color: #102950 !important; background: #fff !important;
  box-shadow: none !important;
  font-family: inherit !important; font-size: .95rem !important; font-weight: 600 !important;
  letter-spacing: .02em !important;
}
.gg-lead-modal .gg-lead-form input::placeholder { color: #9db0c6 !important; font-weight: 500 !important; opacity: 1; }
.gg-lead-modal .gg-lead-form input:focus {
  border-color: #1769d8 !important;
  outline: 3px solid rgba(23, 105, 216, .13) !important; outline-offset: 0;
}
/* Sin flechas en el campo numérico: la unidad ya la elige el usuario. */
.gg-lead-modal .gg-lead-form input[type="number"] { -moz-appearance: textfield !important; }
.gg-lead-modal .gg-lead-form input[type="number"]::-webkit-outer-spin-button,
.gg-lead-modal .gg-lead-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

.gg-lead-modal .gg-lead-input-row {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem;
  margin: 0 0 .8rem !important;
}
.gg-lead-modal .gg-lead-units { display: flex !important; gap: .35rem; }
.gg-lead-modal .gg-lead-unit { min-width: 68px !important; flex: 0 0 auto; }

.gg-lead-modal .gg-lead-call-note {
  margin: .45rem 0 0 !important; padding: 0 !important;
  color: #52677f !important; background: none !important;
  font-size: .76rem !important; font-weight: 500 !important; line-height: 1.4 !important;
}
.gg-lead-modal .gg-lead-error {
  margin: .75rem 0 0 !important;
  padding: .65rem .75rem !important;
  border: 1px solid #efb6b6 !important; border-radius: 9px !important;
  color: #8e1717 !important; background: #fff1f1 !important;
  font-size: .8rem !important; font-weight: 700 !important; line-height: 1.35 !important;
}
.gg-lead-modal .gg-lead-error[hidden] { display: none !important; }

.gg-lead-modal .gg-lead-submit {
  display: flex !important; align-items: center; justify-content: center; gap: .5rem;
  width: 100% !important; min-height: 50px !important; height: auto !important;
  margin: .85rem 0 0 !important; padding: .75rem 1rem !important;
  border: 0 !important; border-radius: 11px !important;
  color: #fff !important;
  background: #25d366 !important; background-image: none !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: inherit !important; font-size: .95rem !important; font-weight: 800 !important;
  line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer;
}
.gg-lead-modal .gg-lead-submit:hover { background: #1fb857 !important; }
.gg-lead-modal[data-mode="call"] .gg-lead-submit { background: #1769d8 !important; }
.gg-lead-modal[data-mode="call"] .gg-lead-submit:hover { background: #0f52b3 !important; }
.gg-lead-modal .gg-lead-submit:disabled { opacity: .65; cursor: wait; }
.gg-lead-modal .gg-lead-submit svg { width: 19px; height: 19px; flex: 0 0 19px; }
.gg-lead-modal .gg-lead-ico { display: flex !important; align-items: center; }
.gg-lead-modal:not([data-mode="call"]) .gg-lead-ico.call { display: none !important; }
.gg-lead-modal[data-mode="call"] .gg-lead-ico.wa { display: none !important; }

.gg-lead-modal .gg-lead-small {
  margin: .6rem 0 0 !important; padding: 0 !important;
  color: #8395a8 !important; background: none !important;
  text-align: center !important;
  font-size: .71rem !important; font-weight: 500 !important; line-height: 1.35 !important;
}

.gg-lead-modal [hidden] { display: none !important; }
body.gg-lead-open { overflow: hidden !important; }

/* En móvil se mantiene centrado y despegado de los bordes (nada de hoja
   pegada al pie), respetando el área segura de iOS. */
@media (max-width: 520px) {
  .gg-lead-modal {
    padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  .gg-lead-modal .gg-lead-dialog { border-radius: 16px !important; }
  .gg-lead-modal .gg-lead-head { padding: .9rem 1rem; }
  .gg-lead-modal .gg-lead-form { padding: .95rem 1rem 1.05rem !important; }
  .gg-lead-modal .gg-lead-input-row { grid-template-columns: 1fr; }
  .gg-lead-modal .gg-lead-units { display: grid !important; grid-template-columns: 1fr 1fr; }
  .gg-lead-modal .gg-lead-unit { min-width: 0 !important; }
}

/* Pantallas muy bajas (teléfono en horizontal): el diálogo hace scroll interno
   pero nunca toca los bordes. */
@media (max-height: 560px) {
  .gg-lead-modal .gg-lead-head { padding: .75rem 1rem; }
  .gg-lead-modal .gg-lead-form { padding: .85rem 1rem 1rem !important; }
}