/* Fullscreen overlay */
#waxaLeadOverlay{
  position:fixed;
  inset:0;
  width:100vw;
  height: 100dvh;
  height: calc(var(--waxa-vh, 1vh) * 100); /* fallback JS */
  background:#f7ecd6;
  display:none;
  z-index:999999;
}

/* Fullscreen “modal” container */
#waxaLeadModal{
  width:100vw;
  height: 100dvh;                 /* moderno */
  height: calc(var(--waxa-vh, 1vh) * 100); /* fallback JS */
  background:#f7ecd6;
  position:relative;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

#waxaLeadClose{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  z-index:2;
}

#waxaLeadGrid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  height:100%;
  width:100%;
}

#waxaLeadLeft{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

#waxaLeadLeft img{
  max-width:620px;
  width:100%;
  height:auto;
}

#waxaLeadRight{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.waxaLeadCard{
  width:min(520px,92%);
  text-align:center;
}

.waxaTitle{
  font-weight:900;
  letter-spacing:.5px;
  color:#df4a1a;
  font-size:64px;
  line-height:1.0;
  margin:0 0 22px;
}

.waxaSub{
  color:#333;
  font-size:13px;
  margin:0 0 10px;
}

/* Botones: tu spec */
#waxaLeadOverlay .waxaLeadCard button.waxaBtn,
#waxaLeadOverlay .waxaLeadCard .waxaBtn{
  width:100% !important;
  color:#000000 !important;
  /*border:2px solid #000000 !important;*/
  border-radius:10px !important;
  padding:20px 50px !important;
  font-weight: 600 !important;
  font-size: large !important;
  box-shadow:3px 4px 0 0 #000000 !important;

  /* resets típicos que pisan padding/border */
  background:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  line-height:1.1 !important;
}

#waxaLeadOverlay .waxaLeadCard button.waxaBtnPrimary,
#waxaLeadOverlay .waxaLeadCard .waxaBtnPrimary{
  background:#FFAB00 !important;
}

#waxaLeadOverlay .waxaLeadCard button.waxaBtnGhost,
#waxaLeadOverlay .waxaLeadCard .waxaBtnGhost{
  background:#FFD581 !important;
  margin-top:14px !important;
}

/* Transición suave (puedes ajustar ms y easing) */
#waxaLeadOverlay .waxaLeadCard button.waxaBtn,
#waxaLeadOverlay .waxaLeadCard .waxaBtn{
  transition: box-shadow 320ms ease, transform 320ms ease;
}

/* Hover: quitar sombra */
#waxaLeadOverlay .waxaLeadCard button.waxaBtn:hover,
#waxaLeadOverlay .waxaLeadCard .waxaBtn:hover{
  box-shadow: 0 0 0 0 #000000 !important;
}

/* Opcional: efecto “press” (se siente más clickable) */
#waxaLeadOverlay .waxaLeadCard button.waxaBtn:active,
#waxaLeadOverlay .waxaLeadCard .waxaBtn:active{
  box-shadow: 0 0 0 0 #000000 !important;
  transform: translate(3px, 4px);
}

.waxaInput{
  width:100%;
  padding:14px 14px;
  border-radius:10px;
  border:2px solid rgba(0,0,0,.25);
  margin:10px 0;
  background:#fff;
}

/* ===== Botón flotante "pastilla" CUPÓN (estilo final) ===== */

#waxaLeadReopenWrap{
  position: fixed;
  left: 12px;
  bottom: calc(var(--waxa-toolbar-h, 0px) + 18px);
  z-index: 700000101;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  background: #FFAB00;
  border-radius: 10px;
  padding: 10px 16px 10px 10px;

  /* UNA sola sombra para todo el componente */
  box-shadow: 6px 6px 0 0 #000;

  max-width: calc(100vw - 36px);
  width: 174px;
  height: 48px;
  overflow: hidden;
  margin-left: 80px;

  transition: box-shadow 220ms ease, transform 220ms ease;
}

/* Hover: el componente completo pierde la sombra */
#waxaLeadReopenWrap:hover{
  box-shadow: 0 0 0 #000;
}

/* Active: sensación de “press” (opcional, queda bien) */
#waxaLeadReopenWrap:active{
  transform: translateY(6px);
}

/* Botón X (gris claro -> negro en hover) */
#waxaLeadReopenClose{
  width: 34px;
  height: 34px;

  border: 0;
  background: transparent;
  padding: 0;

  cursor: pointer;
  user-select: none;
  line-height: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#waxaLeadReopenClose svg{
  width: 12px;
  height: 12px;
}

/* Color base (gris claro) */
#waxaLeadReopenClose line{
  stroke: #808080;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke 180ms ease;
}

/* Hover en la X: se pone negra */
#waxaLeadReopenClose:hover line{
  stroke: #000;
}

/* Botón principal (texto) */
#waxaLeadReopenBtn{
  border: 0;
  background: transparent;
  padding: 0;

  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#waxaLeadReopenText{
  font-weight: 400;
  letter-spacing: .8px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  color: #000;
  font-size: 18px;
  white-space: nowrap;
}

/* Móvil */
@media (max-width: 480px){
  #waxaLeadReopenWrap{
    padding: 9px 14px 9px 9px;
    border-radius: 10px;
  }
  #waxaLeadReopenText{
    font-size: 16px;
  }
}

.waxaRow{display:flex;gap:10px;}
.waxaSelect{width:92px;}

.waxaCode{
  display:inline-block;
  border:2px dashed #df4a1a;
  padding:10px 16px;
  border-radius:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color:#df4a1a;
  font-weight:900;
}

@media (max-width: 840px){
  /* 1 columna */
  #waxaLeadGrid{
    grid-template-columns: 1fr;
  }

  /* Mostrar la imagen arriba */
  #waxaLeadLeft{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px 18px 6px; /* menos padding abajo para pegarla al contenido */
  }

  #waxaLeadReopenWrap {
    margin-left: 12px;
  }

  /* Ajustar el tamaño de la imagen para móvil */
  #waxaLeadLeft img{
    width: min(420px, 92vw);
    max-width: 66vw;
    height: auto;
  }

  /* Contenido debajo */
  #waxaLeadRight{
    padding: 12px 18px 22px;
    align-items: flex-start; /* para que no quede demasiado centrado verticalmente */
  }

  .waxaTitle{
    font-size: 44px;
  }
}

/* Extra: pantallas MUY pequeñas */
@media (max-width: 420px){
  .waxaTitle{
    font-size: 40px;
  }
  #waxaLeadLeft img{
    width: min(360px, 92vw);
  }
}

/* Phone component (MX fijo +52) */
#waxaLeadOverlay .waxaPhoneWrap{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:10px 0;
}

#waxaLeadOverlay .waxaPhonePrefix{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 14px;
  border-radius:10px;
  border:2px solid rgba(0,0,0,.25);
  background:#fff;
  min-width:118px;
  justify-content:center;
  user-select:none;
}

#waxaLeadOverlay .waxaPhonePrefix .waxaFlag{
  font-size:18px;
  line-height:1;
}

#waxaLeadOverlay .waxaPhonePrefix .waxaDial{
  font-weight:800;
  color:#000;
}

#waxaLeadOverlay input.waxaPhoneInput{
  margin:0; /* porque el wrapper ya maneja spacing */
}

/* ===== PhoneInput (MX fijo +52) ===== */
#waxaLeadOverlay .PhoneInput{
  display:flex;
  align-items:stretch;
  width:100%;
  border:2px solid rgba(0,0,0,.25);
  border-radius:10px;
  background:#fff;
  overflow:hidden; /* para que parezca un solo control */
  margin:10px 0;
}

/* Bloque de país fijo */
#waxaLeadOverlay .PhoneInputCountry{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  min-width:150px;
  border-right:2px solid rgba(0,0,0,.12);
  user-select:none;
  box-sizing:border-box; /* (nuevo) */
}

#waxaLeadOverlay .PhoneInputCountryFlag{
  font-size:18px;
  line-height:1;
}

#waxaLeadOverlay .PhoneInputCountryText{
  font-weight:600;
  color:#000;
  font-size:14px;
  white-space:nowrap;
}

#waxaLeadOverlay .PhoneInputCountryDial{
  font-weight:700;
  opacity:.85;
}

/* Input real */
#waxaLeadOverlay .PhoneInputInput{
  flex:1;
  border:0;
  outline:none;
  padding:14px 14px;
  border-radius:0;
  background:transparent;
  font-size:16px;
  min-height:0;         /* (nuevo) evita min-height global */
  box-sizing:border-box;/* (nuevo) */
}

/* Quitar márgenes que tu .waxaInput mete (para que no rompa el wrapper) */
#waxaLeadOverlay .PhoneInputInput.waxaInput,
#waxaLeadOverlay .PhoneInput .waxaInput{
  margin:0 !important;
}

/* Mejor UX: focus */
#waxaLeadOverlay .PhoneInput:focus-within{
  border-color: rgba(0,0,0,.45);
}

/* (nuevo) En móvil reduce el prefijo para que no se coma el input */
@media (max-width: 480px){
  #waxaLeadOverlay .PhoneInputCountry{
    min-width:120px;
    padding:0 10px;
  }
}

/* Cuando el modal esté abierto, ocultar el botón flotante */
#waxaLeadOverlay[style*="display: block"] ~ #waxaLeadReopenWrap,
#waxaLeadOverlay.is-open ~ #waxaLeadReopenWrap{
  display: none !important;
}