/*
  componente_form_cobertura - mapa de zona + selector de zona + CTA (mobile-first)
  - mobile/tablet-v: mapa arriba, selector y botón debajo
  - tablet-h and up: mapa a la izquierda, selector y botón a la derecha
  Ancho, márgenes y paddings calcados de .dynamic-banner (css/bannerDinamico.css):
  max-width 1309px, margen lateral 16px y centrado recién desde 1366px.
*/

.componente_form_cobertura {
  max-width: 1309px;
  margin: 32px 16px 12px;
}

.componente_form_cobertura_card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 32px;
  background-color: var(--v2_grey-light);
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.15);
}

.componente_form_cobertura_media {
  overflow: hidden;
  aspect-ratio: 655 / 297;
  border-radius: 32px;
  background-color: var(--v2_grey);
}

.componente_form_cobertura_map {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.componente_form_cobertura_body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.componente_form_cobertura_title {
  color: var(--v2_magenta);
  font-size: 24px;
/* Titulo bold */
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 42px; /* 105% */
}

/* Selector de zona */
.componente_form_cobertura_select {
  position: relative;
}

.componente_form_cobertura_select_trigger {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 12px 6px 18px;
  border: 0;
  border-radius: 16px;
  background-color: var(--v2_magenta);
  color: var(--v2_white);
  font-family: var(--font-family-mont);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.componente_form_cobertura_select_icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.componente_form_cobertura_select.is-open .componente_form_cobertura_select_icon {
  transform: rotate(180deg);
}

.componente_form_cobertura_select_list {
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 72px;
  margin: -16px 0 0;
  padding: 22px 10px 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--v2_magenta);
  border-radius: 0 0 16px 16px;
  background-color: var(--v2_white);
  scrollbar-width: thin;
  scrollbar-color: var(--v2_grey-dark) var(--v2_grey-light);
}

.componente_form_cobertura_select.is-open .componente_form_cobertura_select_list {
  display: flex;
}

.componente_form_cobertura_select_list::-webkit-scrollbar {
  width: 6px;
}

.componente_form_cobertura_select_list::-webkit-scrollbar-track {
  border-radius: 3px;
  background: var(--v2_grey-light);
}

.componente_form_cobertura_select_list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--v2_grey-dark);
}

.componente_form_cobertura_select_option {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--v2_grey-dark);
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}

.componente_form_cobertura_select_option:hover,
.componente_form_cobertura_select_option:focus-visible {
  color: var(--v2_magenta);
  outline: none;
}

.componente_form_cobertura_select_option.is-selected {
  border-color: var(--v2_magenta);
  background-color: #ffe5f0;
  color: var(--v2_magenta);
}

/* ---------- Webform ({{ content }}) ---------- */

.componente_form_cobertura_form .field__label,
.componente_form_cobertura_form .captcha__title,
.componente_form_cobertura_form .captcha__description,
.componente_form_cobertura_form .description,
.componente_form_cobertura_form .webform-confirmation__message,
.componente_form_cobertura_form .webform-confirmation__back {
  display: none;
}

.componente_form_cobertura_form form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.componente_form_cobertura_form .js-form-item,
.componente_form_cobertura_form .captcha {
  position: relative;
  flex: 1 1 100%;
  margin: 0 !important;
  padding: 0;
  border: 0;
}

/* Calle y altura comparten fila */
.componente_form_cobertura_form .js-form-item-calle {
  flex: 1 1 60%;
}

.componente_form_cobertura_form .js-form-item-numero-altura- {
  flex: 1 1 30%;
}

.componente_form_cobertura_form .js-form-type-textfield label,
.componente_form_cobertura_form .js-form-type-email label,
.componente_form_cobertura_form .js-form-type-tel label,
.componente_form_cobertura_form .js-form-type-number label,
.componente_form_cobertura_form .js-form-type-select label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.componente_form_cobertura_form input[type="text"],
.componente_form_cobertura_form input[type="email"],
.componente_form_cobertura_form input[type="tel"],
.componente_form_cobertura_form input[type="number"],
.componente_form_cobertura_form select {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--v2_grey);
  border-radius: 16px;
  background-color: var(--v2_white);
  box-shadow: none;
  color: var(--v2_grey-dark);
  font-family: var(--font-family-mont);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
}

.componente_form_cobertura_form input:focus,
.componente_form_cobertura_form select:focus {
  border-color: var(--v2_magenta);
  box-shadow: none;
}

.componente_form_cobertura_form input:disabled {
  background-color: var(--v2_grey-light);
  cursor: not-allowed;
}

.componente_form_cobertura_form .componente_form_cobertura_invalid input {
  border-color: var(--v2_magenta);
}

/* Checkbox de datos personales */
.componente_form_cobertura_form .js-form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.componente_form_cobertura_form .js-form-type-checkbox input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--v2_magenta);
}

.componente_form_cobertura_form .js-form-type-checkbox label {
  margin: 0;
  color: var(--v2_grey-dark);
  font-size: 11px;
  line-height: 1.4;
}

/* Autocompletado de calles (respuesta de /callejero/callejero.php) */
.componente_form_cobertura_street_res {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--v2_magenta);
  border-radius: 16px;
  background-color: var(--v2_white);
  color: var(--v2_grey-dark);
  font-size: 12px;
  position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid var(--v2_grey-dark);
    border-radius: 8px;
    background-color: var(--v2_white);
    color: var(--v2_grey-dark);
    font-size: 12px;
}

.componente_form_cobertura_street_res[hidden] {
  display: none;
}

.componente_form_cobertura_street_res .calleRes {
  padding: 4px 16px;
  cursor: pointer;
}

.componente_form_cobertura_street_res .calleRes:hover {
  color: var(--v2_magenta);
}

/* Campos ocultos por el flujo (ver componente_form_cobertura.js) */
.componente_form_cobertura_form .componente_form_cobertura_hidden {
  display: none !important;
}

/* CTA: botón "Elegir" del paso 1 y submit "Contratar" del webform (mismo estilo).
   Con !important para que no los pisen las clases globales de botones
   (p. ej. .v2_button_magenta_white de v2_estilos.css, con uppercase y hover gris). */
.componente_form_cobertura_form .form-actions,
.componente_form_cobertura_form .webform-actions {
  display: flex;
  flex: 1 1 100%;
  justify-content: flex-end;
  margin: 0;
}

.componente_form_cobertura_cta,
.componente_form_cobertura_form [type="submit"] {
  min-width: 116px !important;
  padding: 6px 24px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: var(--v2_magenta) !important;
  color: var(--v2_white) !important;
  font-family: var(--font-family-mont) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
     flex-shrink: 0;
    padding: 12px 26px;
    font-size: 13px;
    background: var(--iplan-pink)!important;
    color: var(--iplan-white)!important;
    font-family: Inter!important;
    font-size: 16px!important;
    font-style: normal!important;
    font-weight: 200!important;
    line-height: normal!important;
}

.componente_form_cobertura_cta:hover,
.componente_form_cobertura_cta:focus,
.componente_form_cobertura_form [type="submit"]:hover,
.componente_form_cobertura_form [type="submit"]:focus {
  /* color: var(--v2_white);
  opacity: 0.85; */
  background-color: var(--v2_magenta) !important;
  color: #FFF !important;
  cursor: pointer !important;
}

.componente_form_cobertura_cta {
  align-self: flex-end !important;
}

.componente_form_cobertura_cta[hidden] {
  display: none !important;
}

.componente_form_cobertura_form [type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Mensaje final y loader */
.componente_form_cobertura_message:empty {
  display: none;
}

.componente_form_cobertura_message {
  margin: 0;
  color: var(--Gris, #7B828C);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.componente_form_cobertura_loader {
  width: 32px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 4px solid var(--v2_grey);
  border-top-color: var(--v2_magenta);
  border-radius: 50%;
  animation: componente_form_cobertura_spin 0.8s linear infinite;
}

.componente_form_cobertura_loader[hidden] {
  display: none;
}

@keyframes componente_form_cobertura_spin {
  to {
    transform: rotate(1turn);
  }
}

.componente_form_cobertura .grecaptcha-badge {
  visibility: hidden;
}

/* Tablet vertical */
@media (min-width: 760px) {
  .componente_form_cobertura_title {
    font-size: 28px;
  }
}

/* Tablet horizontal */
@media (min-width: 996px) {
  .componente_form_cobertura_card {
    flex-direction: row;
    align-items: stretch;
    gap: 40px;
    padding: 32px;
    border-radius: 40px;
  }

  .componente_form_cobertura_media {
    flex: 0 0 52%;
    align-self: flex-start;
    aspect-ratio: 655 / 297;
  }

  .componente_form_cobertura_body {
    flex: 1 1 0;
    padding-block: 4px;
  }

  .componente_form_cobertura_title {
    font-size: 24px;
  }
}

/* Desktop */
@media (min-width: 1366px) {
  .componente_form_cobertura {
    margin: 32px auto 12px auto;
  }

  .componente_form_cobertura_card {
    gap: 48px;
    padding: 30px;
  }

  .componente_form_cobertura_title {
    font-size: 32px;
  }

  .componente_form_cobertura_select_trigger,
  .componente_form_cobertura_cta,
  .componente_form_cobertura_form input[type="text"],
  .componente_form_cobertura_form input[type="email"],
  .componente_form_cobertura_form input[type="tel"],
  .componente_form_cobertura_form input[type="number"],
  .componente_form_cobertura_form select {
    font-size: 14px;
  }

  .componente_form_cobertura_select_option {
    font-size: 13px;
  }

  .componente_form_cobertura_select_list {
    max-height: 144px;
  }
}