/* =========================
   WIDGET OMNI
   ========================= */

/* Headline */
.providers h2{
  color:#fff;
  font-size:40px;
  max-width:460px;
  padding-left:30px;
  text-shadow:0 0 5px #00000054;
}
.providers h2 span{
  font-size:20px;
  display:block;
}

/* Global form reset (alleen binnen deze widget) */
.widgetomniwrap input[type=date],
.widgetomniwrap input[type=email],
.widgetomniwrap input[type=number],
.widgetomniwrap input[type=password],
.widgetomniwrap input[type=search],
.widgetomniwrap input[type=tel],
.widgetomniwrap input[type=text],
.widgetomniwrap input[type=url],
.widgetomniwrap select,
.widgetomniwrap textarea{
  padding:0;
}

/* Wrapper background */
.widgetomniwrap{
  position:relative;
  z-index:0; /* stacking context zodat :before met z-index:-1 niet "verdwijnt" */
  margin-bottom: 40px;
}
.widgetomniwrap:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url(https://www.hurghada-vakantie.nl/wp-content/uploads/sites/9/2023/04/hurghada-hotel-header-e1681307157691.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  opacity:0.8;
}

/* Layout */
.widgetomni{
  position:relative;
  display:flex;
  gap:10px;
  max-width:1350px;
  margin-left:auto;
  margin-right:auto;
  padding:70px 15px;
  box-sizing:border-box;
}

/* Form card */
.wformwrap{
  box-sizing:border-box;
  border-radius:5px;
  background-color:#0da4b6e3;
  box-shadow:0 0 14px #00000029;
  padding:20px 20px;
  min-width:355px;
  width:340px;
}
.wformwrap p{ margin:0; padding:0; }

.wformwrap h4{
  color:#fff;
  margin:10px 0 18px 0;
  padding:0;
  font-size:20px;
  font-weight:700;
}
.wformwrap h4:before{
  content:'';
  background:url(https://www.vamosmallorca.nl/sites/omni00.d8.webpactserver.nl/themes/custom/images/sprite.svg) no-repeat;
  background-size:900px;
  background-position:-36px -234px;
  width:27px;
  height:30px;
  display:block;
  float:left;
}
.wformwrap label{
  display:none;
  color:#17d2dd;
  padding:0;
  margin:0;
  font-weight:700;
  font-size:14px;
}

.wformwrap select,
.wformwrap input{
  border:none;
  width:100%;
  box-sizing:border-box;
  height:47px;
  border-radius:3px;
  text-indent:10px;
  font-size:17px;
  margin-bottom:12px;
  cursor:pointer;
  color:#000;
}
.wformwrap input::placeholder{ color:initial; }

.wformwrap button{
  width:100%;
  margin:7px 0 13px 0;
  line-height:22px;
  background-color:#ff860e;
  color:#fff;
  border:none;
  font-weight:600;
  font-size:19px;
  padding:11px;
}

/* Error */
div#error{
  position:absolute;
  left:30px;
  top:20px;
  max-width:300px;
  font-size:12px;
  background-color:#fff;
  padding:5px;
}

/* Providers row */
.providers{
  width:100%;
  display:flex !important;
  gap:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Provider card */
.cardw{
  border-radius:15px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  border:1px solid #d0cfcf;
  transition:0.15s ease-out;
  background-color:#fff;
}
.cardw:hover{
  border:1px solid #59529e;
  transform:translate(0,-2px) !important;
}

.cardw a{
  padding:20px 15px;
  box-sizing:border-box;
  height:100%;
  width:250px;
  display:flex;
}

.cardw a div:first-child{
  width:100%;
  box-sizing:border-box;
}

/* Date / nights */
span.nachten,
span.datum{
  color:#64748b;
}
span.nachten:after{
  content:', ';
}

/* CTA pill */
.cardw .cta{
  position:relative;
}
.cardw .cta:before{
  content:'Check prijs';
  padding:10px 20px;
  background-color:#47a554;
  border-radius:6px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Logo sprite */
.cardw h3{
  font-size:0;
  margin:0;
  padding:0;
}
.cardw h3:before{
  content:'';
  display:block;
  width:100px;
  height:30px;
  background:url(https://www.vamosmallorca.nl/sites/omni00.d8.webpactserver.nl/themes/custom/images/logosprite.svg) no-repeat;
  background-size:900px;
  background-position:0 -46px;
  transform:scale(1);
  transform-origin:left center;
}

/* Provider logo positions */
.cardw.prov-prijsvrij h3:before{ background-position:2px -84px; }
.cardw.prov-sunweb  h3:before{ background-position:4px -161px; }
.cardw.prov-dreizen h3:before{ background-position:1px -361px; }

/* Providers verbergen */
.cardw.prov-tui,
.cardw.prov-vakantiediscounter{
  display:none !important;
}

/* Price / info pill text */
.cardw .pill{
  font-size:13px;
  text-align:center;
}

/* Dit pakt 'm vrijwel altijd (i.p.v. :first-child) */
.cardw .pill span:first-of-type{
  font-weight:700 !important;
  font-size:16px !important;
  width:100% !important;
  display:block !important;
  color:#1e293b !important;
}

/* =========================
   Responsive
   ========================= */

@media (max-width:1000px){
  .cardw a{
    padding:14px 12px;
  }
  .cardw .pill span{
    width:100%;
    display:inline-block;
  }
}

@media (max-width:767px){
  .widgetomni{
    flex-direction:column;
    padding-top:50px;
    padding-bottom:30px;
  }
  .wformwrap{
    width:100%;
    min-width:initial;
  }
  span.nachten:after{
    content:'';
  }
  .wformwrap button{
    line-height:inherit;
    font-size:20px;
    padding:8px;
  }
  .providers h2{
    font-size:29px;
    padding-right:30px;
    margin-top:5px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}