/*
   #ESTILOS PERSONALIZADOS PARA EL PROYECTO RECAMBIOSOUTLET.COM
*/

/*##INI ARCHIVE-RECAMBIOS*/
.du-recambio {
   border: solid 2px #fe854d;
   padding: 10px;
   margin:3px;
   background-color: #fff;
}

.du-contenido-campo,
.du-contenido-campo a {
   font-weight: bold;
   color: #C72A00;

}

.du-bloque-localizacion-archive,
.du-bloque-familia-archive,
.du-bloque-proveedor-archive {
   margin: 10px;
   padding: 10px;
   background-color: #f1f1f1;
}

.du-titulo-localizacion,
.du-titulo-familia,
.du-titulo-proveedor {
   margin-bottom: 10px;
}

.du-descripcion-localizacion,
.du-descripcion-familia,
.du-datos-proveedor {
   margin: 0px;
}

.du-titulo-recambio,
.du-img-destacada-recambio,
.du-referencia-recambio,
.du-descripcion-recambio,
.du-vehiculos-recambio,
.du-marca-recambio,
.du-disponibilidad-recambio,
.du-precio-recambio,
.du-localizacion-recambio,
.du-familia-recambio {
   
   padding: 0px;
}

.du-titulo-recambio, 
.du-precio-recambio {
  font-size: larger;
  color: #045CB4;
}

.du-precio-recambio,
.du-archive-aviso-recambio {
text-align: right;
}

.du-img-destacada-recambio{ 
  width: 150px;
  height: 150px;
}

/* ###INI GRID ARCHIVE-RECAMBIOS*/
@media (min-width: 701px) {
.du-recambio {
   display: grid;
   grid-template-areas:
     "img titulo titulo"
     "img oem oem"
     "img disponibilidad disponibilidad"
     "img localizacion localizacion"
     "boton precio precio"
     "boton aviso aviso";

   grid-gap: 0px; /* Espacio entre los elementos del grid */
 }
}
@media (max-width: 700px) {
  .du-recambio {
     display: grid;
     grid-template-areas:
        "titulo"
       "img"
       "oem "
       "disponibilidad"
       "localizacion"
       "precio"
       "boton"
       "aviso";
  
     grid-gap: 0px; /* Espacio entre los elementos del grid */
   }
  }
 .du-titulo-recambio {
   grid-area: titulo;
 }
 
 .du-img-destacada-recambio {
   grid-area: img;
 }
 
 .du-referencia-recambio {
   grid-area: referencia;
 }
 
 .du-descripcion-recambio {
   grid-area: descripcion;
 }
 
 .du-vehiculos-recambio {
   grid-area: vehiculos;
 }
 
 .du-marca-recambio {
   grid-area: marca;
 }
 
 .du-disponibilidad-recambio {
   grid-area: disponibilidad;
 }
 
 .du-precio-recambio {
   grid-area: precio;
 }
 
 .du-localizacion-recambio {
   grid-area: localizacion;
 }
 
 .du-referencias-oem-recambio {
  grid-area: oem;
 }

 .du-archive-boton-recambio {
  grid-area: boton;
 }

 .du-archive-aviso-recambio {
  grid-area: aviso;
 }


 /* ###FIN GRID ARCHIVE-RECAMBIOS*/

 .du-archive-boton-recambio a {
  border: solid 1px #fe854d;
  padding: 5px; 
  text-align: center;
  font-size: 1rem;
  background-color: #fe854d;
  color: #f1f1f1;
  border-radius: 50px;
  margin-top: 15px;
 }

 /*##FIN ARCHIVE-RECAMBIOS*/

/*##INI SINGLE-RECAMBIOS*/
.du-single-titulo-recambio {
  font-size: 2rem;
  color: #045CB4;
  margin-bottom: 20px;
}

.du-single-precio-recambio {
  font-size: 1.5rem;
  color: #045CB4;
}

/* ###GRID SINGLE-RECAMBIOS*/
@media (min-width: 701px) {
.du-single-recambio {
  display: grid;
  grid-template-areas:
    "single_titulo single_titulo"
    "single_img single_oem"
    "single_img single_disponibilidad"
    "single_img single_localizacion"
    "single_img single_referencia"
    "single_img single_vehiculos"
    "single_img single_marca"
    "single_img single_alternativas"
    "single_img single_notas"
    "single_img single_galeria"
    "single_img single_precio"
    "single_img single_aviso"
    "single_img single_pedir";

  grid-gap: 15px; /* Espacio entre los elementos del grid */
}
}

@media (max-width: 700px) {
  .du-single-recambio {
    display: grid;
    grid-template-areas:
      "single_titulo"
      "single_img" 
      "single_oem"
      "single_disponibilidad"
      "single_localizacion"
      "single_referencia"
      "single_vehiculos"
      "single_marca"
      "single_alternativas"
      "single_notas"
      "single_galeria"
      "single_precio"
      "single_aviso"
      "single_pedir";
    grid-gap: 15px; /* Espacio entre los elementos del grid */
  }
  }

.du-single-titulo-recambio {
  grid-area: single_titulo;
}

.du-single-img-destacada-recambio {
  grid-area: single_img;
}

.du-single-precio-recambio {
  grid-area: single_precio;
}

.du-single-referencia-recambio {
  grid-area: single_referencia;
}

.du-single-vehiculos-recambio {
  grid-area: single_vehiculos;
}

.du-single-marca-recambio {
  grid-area: single_marca;
}

.du-single-descripcion-recambio {
  grid-area: single_descripcion;
}

.du-single-disponibilidad-recambio {
  grid-area: single_disponibilidad;
}

.du-single-localizacion-recambio {
  grid-area: single_localizacion;
}

.du-single-referencias-oem-recambio {
 grid-area: single_oem;
}

.du-single-referencias-alternativas-recambio {
  grid-area: single_alternativas;
}

.du-single-notas-recambio {
  grid-area: single_notas;
}

.du-single-galeria-recambio {
  grid-area: single_galeria;
}

.du-single-boton-recambio {
  grid-area: single_pedir;
}

.du-single-aviso-recambio {
  grid-area: single_aviso;
}

/*FIN SINGLE-RECAMBIOS*/

.du-single-boton-recambio a {
  border: solid 1px #00FF00;
  padding: 10px; 
  text-align: center;
  font-size: large;
  background-color: #00FF00;
  color: #333;
  border-radius: 5px;
}

.du-single-boton-recambio {
  margin-top: 20px;
}

.du-aviso-sin-busqueda {
  font-size: 1.5rem;
  margin: auto;
  text-align: center;
  margin-top: 20px;
  background-color: #C72A00;
  padding:20px;
  color: white;
}
.du-aviso-sin-busqueda a {
  color: white;
  text-decoration: underline;
}

/* POUP CON IMAGEN DESTACADA */
.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.popup-close:hover {
  color: #ff0000;
}

.popup-image {
  max-width: 100%;
  max-height: 100%;
}