/*
 * form-propio.css — Estilos del formulario PROPIO de nacaré (no Zoho).
 * Se carga desde includes/head.php cuando $hasContactForm.
 *
 * El styles.css base de nacaré NO contempla "apellido" ni el prefijo (su versión
 * anterior usaba el iframe de Zoho). Esto lo añade, copiado de
 * luxhabitatskylinemataro.com, + un arreglo de padding lateral en móvil.
 */

/* --- Rejilla con apellido + prefijo (igual que lux) --- */
.form .form-inputs {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .form .form-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'nombre apellido' 'telefono email' 'mensaje mensaje';
  }
}
@media (max-width: 992px) {
  .form .form-inputs {
    grid-template-areas: 'nombre' 'apellido' 'telefono' 'email' 'mensaje';
  }
}
.form .box-nombre   { grid-area: nombre; }
.form .box-apellido { grid-area: apellido; }
.form .box-telefono { grid-area: telefono; }
.form .box-email    { grid-area: email; }
.form .box-mensaje  { grid-area: mensaje; }

/* --- Prefijo telefónico (intl-tel-input) — igual que lux --- */
.form .input-box .iti {
  width: 100%;
  display: block;
}
.form .input-box .iti__selected-dial-code {
  background-color: var(--form-input-backgroud-color);
  color: var(--form-input-color);
  font-size: var(--form-text-size);
}
.form .input-box .iti__arrow {
  border-right-color: var(--form-input-color);
  border-bottom-color: var(--form-input-color);
}
/* La etiqueta flotante del teléfono se desplaza para no solaparse con la bandera */
.form-container.floating-labels .form .input-box.box-telefono label {
  left: 100px;
}

/* --- Botón de enviar visible (el .button base es beige sobre fondo beige) --- */
.form .submits .button-submit {
  color: #fff;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
}
.form .submits .button-submit:hover {
  color: var(--color-primary);
  background-color: transparent;
}

/* --- Arreglo móvil: el form-content tenía 'padding: 50px 0' (0 lateral),
       las líneas de los campos llegaban al borde. Restauramos gutter lateral. --- */
@media (max-width: 768px) {
  .form-container .form-content {
    padding: 50px var(--padding-container-x);
  }
}