/* ========================================
   FORMULARIO MISEUR - ESTILO 50/50 EXACTO
   ======================================== */

.tit_frm_envio{
  color: white; text-align: center; font-family: 'PlutoSansDPDLight',Arial, Helvetica, sans-serif; font-size: 28px; font-weight: 700; margin: 0 0 15px 0;
  text-align: left;
  font-weight: normal;
}

/* Bandera de España inline */
.frm-miseur .select-with-flag.flag-ES::before {
  background-image: url("data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNEBCAgICAkICQoKCQ0ODA4NExEQEBETHBQWFBYUHCsbHxsbHxsrJi4lIyUuJkQ1Ly81RE5CPkJOX1VVX3dxd5yc0f/CABEIAB4AMgMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAABgMFB//aAAgBAQAAAACSyCo9E3CL6OgcSQyCl//EABkBAAIDAQAAAAAAAAAAAAAAAAIFAAEDBv/aAAgBAhAAAADjwtrgMY//xAAXAQADAQAAAAAAAAAAAAAAAAAAAgUG/9oACAEDEAAAANm5HsORv//EACwQAAAEAwYGAQUAAAAAAAAAAAABAgMEBRIRExVRU5EUFiFUktGxBjEzQUP/2gAIAQEAAT8AfbmxvvUIi6a1U2Euyy0XU504zZYupzpxmyxdTnTjNli6nOnGbLF1OdOM2WIdLlwzWR10JqqI7bbP2IRSuFh+p/iR8CpWZipWZipWZipWZipWZiLM+KiOv9V/IZ+o5Iy0205GkS0JJKipV0MhzPIe/LwUOZ5D35eChzPIe/LwUOZ5D35eChzPIe/LwUHYhl51x1tRKQtRqSdh9SPqQfk8St91ZLbsUtR/c8xgkVqNbn6GCRWo1ufoYJFajW5+hgkVqNbn6GCRWo1ufoQ7DiGGUmabUoSWxD//xAAkEQABAgQFBQAAAAAAAAAAAAACAAMBBBZTFSFSkqEFBhNRYf/aAAgBAgEBPwBzuB0XCHwDlHUqidsDuVRO2B3LE46UfQJYjIom5nH4qelrjnCp6WuOcLDGvcV//8QAIBEAAQQBBAMAAAAAAAAAAAAAAwABAgQUMlNUkRETUv/aAAgBAwEBPwAd6LDg2MPSs+PGGs+PGGnO3yhV6Ljh5LPSsajuz6WNR3Z9L1hX/9k=") !important;
}

/* Contenedor Principal Limitado a 415px */
.frm-miseur.formulario-envio-header {
  background: #0163b4;
  max-width: 415px;
  width: 100%;
  font-family: 'PlutoSansDPDLight',Arial, Helvetica, sans-serif;

  min-height: 340px;
}

@media (min-width: 380px) and (max-width: 768px) {
  .frm-miseur.formulario-envio-header {
    min-height: 460px;
  }
}

@media (min-width: 765px) {
  .frm-miseur.formulario-envio-header {
    right: 0;
    position: absolute;
    z-index: 2;
  }
}

@media (min-width: 769px) {
  .frm-miseur.formulario-envio-header {
    margin-top: 22px;
  }
}

/*Margenes*/
@media (min-width: 1341px) {
  .frm-miseur.formulario-envio-header {
    /* margin-right: calc((100% - 1200px) / 2); */
    margin-right: calc((100% - 1158px) / 2);
  }
}

@media (min-width: 764px) and (max-width: 1340px) {
  .frm-miseur.formulario-envio-header {
    /* 1. Igualamos el ancho al de arriba */
    width: 96%;

    /* 2. El cálculo manual del margen */
    margin-right: 4.1%;
    margin-left: 2%;
  }
}

/* CENTRADO VERTICAL DEL FORMULARIO */
.frm-miseur .form-envio-container {
  display: flex;
  align-items: center; /* Centrado vertical */
  min-height: 340px; /* Altura mínima igual al contenedor padre */
}
@media (min-width: 380px) and (max-width: 768px) {
  .frm-miseur .form-envio-container {
    min-height: 460px;
  }
}

.frm-miseur .form-envio-inner {
  width: 100%; /* Mantiene el ancho completo */
  padding: 20px;
}

/* Layout Vertical general */
.frm-miseur .form-stacked-layout {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio vertical entre filas */
}

/* GRID 50/50 PARA LAS FILAS */
.frm-miseur .form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% y 50% exacto */
  gap: 15px; /* Espacio horizontal entre País y CP */
  align-items: end; /* Alinea los inputs abajo por si los labels tienen distinta altura */
}

.frm-miseur .grid-cell {
  width: 100%;
  position: relative;
}

/* Labels */
.frm-miseur label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;
  display: block;
 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

.frm-miseur .codigo-postal-wrapper {
  position: relative;
  width: 100%;
}

/* Inputs y Selects */
.frm-miseur .form-control-envio {
  width: 100%;
  padding-top: 18px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid white;
  font-size: 13px;
  height: 48px;
  box-sizing: border-box;
  background: white;
}

#origen_pais{
  padding-top: 2px !important;
}
#destino_pais{
  padding-top: 2px !important;
}


/*

.frm-miseur select.form-control-envio {
  text-overflow: ellipsis;
}*/

.frm-miseur .custom-select-wrapper {
  position: relative;
}

/* Oculta la flecha nativa */
.frm-miseur select.form-control-envio {
  appearance: none;
  -webkit-appearance: none;
}

/* Flecha personalizada */
.frm-miseur .custom-select-wrapper::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  pointer-events: none;
  z-index: 2;
}




.frm-miseur .form-control-envio:focus {
  outline: none;
  border-color: #ff6b35;
}

.frm-miseur .form-control-envio.error {
  border-color: #ff6b35;
}

/* Bandera*/
.frm-miseur .custom-select-wrapper {
  position: relative;
}

/* Bandera Custom */
.frm-miseur .select-with-flag::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 16px;
  background-size: cover;
  z-index: 2;
  pointer-events: none;
}
.frm-miseur .select-with-flag select {
  padding-left: 40px !important;
}

/* Disabled */
.frm-miseur .origen-disabled select {
  background-color: #f0f0f0 !important;
  color: #888;
}
.frm-miseur .origen-disabled::after {
  display: none;
}

/* BOTÓN */
.frm-miseur .form-submit {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.frm-miseur .btn-calcular {
  background: #ea4f26;
  color: white;
  border: none;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



@media (min-width: 380px) {
  .frm-miseur .btn-calcular {
    /*width: 56%;*/
  }
}



.frm-miseur .btn-calcular:hover {
  background: #ff430f;
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

/* Sugerencias Dropdown */
.frm-miseur .sugerencias-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  max-height: 180px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  /*border-radius: 0 0 4px 4px;*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.frm-miseur .sugerencias-dropdown.active {
  display: block;
}
.frm-miseur .sugerencia-item {
  padding: 10px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #333;
  text-align: left; /* ← añade esto */
}
.frm-miseur .sugerencia-item:hover {
  background: #f5f5f5;
}
.frm-miseur .sugerencia-item strong {
  color: #003d82;
}

/*tablet-movil*/
@media (min-width: 360px) and (max-width: 764px) {
  .frm-miseur.formulario-envio-header {
    max-width: none !important;
    min-height: 320px !important;
  }
  .frm-miseur .form-envio-container{

    min-height: 320px !important;

  }
}

/* Convierte el contenedor padre en flex container */
.container.marketing {
  display: flex;
  flex-direction: column; /* Mantiene disposición vertical */
}

/* Invierte el orden: slider primero (order: 1), formulario después (order: 2) */
#animate_slider_3 {
  order: 1;
}

.formulario-envio-header {
  order: 2;
}


/* Mini-label overlay dentro de campos */

.frm-miseur .field-inner-label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 13px;
  color: #aaa;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  transition: all 0.2s ease;
}

/* Cuando el campo tiene foco o tiene contenido: sube y se hace pequeño */
.frm-miseur .form-control-envio:focus ~ .field-inner-label,
.frm-miseur .form-control-envio:not(:placeholder-shown) ~ .field-inner-label,
.frm-miseur select.form-control-envio:focus ~ .field-inner-label {
  top: 8px;
  transform: translateY(0);
  font-size: 10px;
  color: #999;
}

.frm-miseur .select-with-flag .field-inner-label {
  left: 40px;
}


.frm-miseur .field-inner-label-select {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 10px;
  color: #999;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}
