.elementor-553 .elementor-element.elementor-element-f81c6ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5vw;--padding-bottom:5vw;--padding-left:0vw;--padding-right:0vw;}.elementor-553 .elementor-element.elementor-element-7ec1322{text-align:center;}.elementor-553 .elementor-element.elementor-element-7ec1322 .elementor-heading-title{font-family:"Oswald", Sans-serif;font-size:65px;font-weight:500;text-transform:uppercase;}.elementor-553 .elementor-element.elementor-element-117d5fb{--display:flex;--padding-top:1vw;--padding-bottom:10vw;--padding-left:0vw;--padding-right:0vw;}.elementor-553 .elementor-element.elementor-element-e4917f6{border-radius:5px 5px 5px 5px;}@media(max-width:767px){.elementor-553 .elementor-element.elementor-element-117d5fb{--padding-top:10vw;--padding-bottom:010vw;--padding-left:4vw;--padding-right:4vw;}}/* Start custom CSS for html, class: .elementor-element-e4917f6 *//* =========================
   Hoist / Terraza – layout + rundade hörn
   ========================= */

.besearchmask * { box-sizing: border-box; }

/* Bakgrundsrutan */
.besearchmask .searchmask-container{
  border-radius: 14px;
  padding: 18px;
}

/* Rundade hörn på fält + knappar */
.besearchmask .sm-form-control,
.besearchmask .occupancy-summary,
.besearchmask .be-button,
.besearchmask .plus-minus-.elementor-553 .elementor-element.elementor-element-e4917f6{
  border-radius: 10px !important;
}

/* Ser till att rundningen faktiskt syns även om något barn-element “spiller” */
.besearchmask .sm-input-wrap,
.besearchmask .dropdown-wrapper{
  border-radius: 10px;
  overflow: hidden;
}

/* Desktop/tablet: allt på en rad */
@media (min-width: 768px){

  /* Yttersta raden: fältblock + SÖK-knapp */
  .besearchmask .sm-fields > .row.sm-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;              /* <-- detta styr avståndet mellan fältblocket och SÖK */
  }

  /* Vänster block (alla fält) ska få ta utrymme, knappen ska inte tryckas ner */
  .besearchmask .sm-fields > .row.sm-row > .sm-col:first-child{
    flex: 1 1 auto;
    min-width: 0;
  }
  .besearchmask .sm-fields > .row.sm-row > .sm-col:last-child{
    flex: 0 0 auto;
  }

  /* Inre raden med fälten */
  .besearchmask .sm-fields > .row.sm-row > .sm-col:first-child > .row.sm-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;             /* <-- avstånd mellan själva fälten */
  }

  /* Tar bort “kolumn-padding” som ofta skapar onödiga glapp */
  .besearchmask .sm-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Valfria min-bredder så allt håller sig snyggt på en rad */
  .besearchmask #SMJSON-classification{ min-width: 120px; }
  .besearchmask #SMJSON-arrivalDate,
  .besearchmask #SMJSON-departureDate{ min-width: 140px; }
  .besearchmask .bindToggleOccupancy{ min-width: 260px; }
}

/* Bonus: enhetlig höjd på alla fält + knapp */
.besearchmask .sm-form-control,
.besearchmask .occupancy-summary,
.besearchmask .sm-book-button{
  height: 44px;
  line-height: 44px;
}

/* Så occupancy-fältet centrerar texten fint */
.besearchmask .occupancy-summary{
  display: flex;
  align-items: center;
  padding: 0 12px;
}

/* SÖK-knappen: ingen extra “radkänsla” */
.besearchmask .sm-book-wrap{ margin-top: 0 !important; }
.besearchmask .sm-book-button{ white-space: nowrap; }
/* =========================
   Finjustering: mindre glapp + bättre SÖK + bredare datumfält
   ========================= */

@media (min-width: 768px){

  /* Mindre glapp mellan fältblocket och SÖK-knappen */
  .besearchmask .sm-fields > .row.sm-row{
    gap: 6px !important;   /* <-- justera vid behov (t.ex. 4–10px) */
  }

  /* Se till att den inre raden (med fälten) fyller hela ytan */
  .besearchmask .sm-fields > .row.sm-row > .sm-col:first-child > .row.sm-row{
    width: 100%;
  }

  /* Datumkolumnerna: gör dem lite bredare och “låsta” */
  .besearchmask .bindTriggerArrival,
  .besearchmask .bindTriggerDeparture{
    flex: 0 0 155px;       /* <-- öka/minska (t.ex. 165px) */
  }

  .besearchmask #SMJSON-arrivalDate,
  .besearchmask #SMJSON-departureDate{
    min-width: 155px;
    padding-right: 34px;   /* plats för kalender-ikon om den ligger ovanpå */
  }

  /* Occupancy-kolumnen (Antal rum och gäster): låt den växa och ta upp “tomrummet” */
  .besearchmask .sm-fields .bindToggleOccupancy{
    width: 100%;
  }

  /* Targetar själva kolumnen som innehåller occupancy (col-lg-4 i din HTML) */
  .besearchmask .sm-fields .col-lg-4.sm-col{
    flex: 1 1 auto;
    min-width: 260px;
  }

  /* SÖK-kolumnen: ingen extra padding och fin align */
  .besearchmask .sm-fields > .row.sm-row > .sm-col:last-child{
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    align-items: flex-end;
  }

  /* SÖK-knappen: exakt centrering + tydlig storlek */
  .besearchmask .sm-book-wrap{
    margin: 0 !important;
  }

  .besearchmask .sm-book-button{
    min-width: 130px;      /* <-- justera om du vill ha bredare knapp */
    height: 44px;
    line-height: normal !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
  }
}
/* =========================
   HARD FIX: ta bort bootstrap-glapp + få plats i rutorna
   ========================= */

@media (min-width: 768px){

  /* Ytterrad: (fältblock) + (SÖK) */
  .besearchmask .sm-fields > .row.sm-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 8px !important;              /* avstånd mellan fältblock och SÖK */
  }

  /* Vänster kolumn (col-lg-10): låt den bli "auto", inte 10/12 */
  .besearchmask .sm-fields > .row.sm-row > .col-12.col-lg-10.sm-col{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Höger kolumn (SÖK): inga procentbredder */
  .besearchmask .sm-fields > .row.sm-row > .col-12.col-lg-2.sm-col{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Inre raden med fälten: gör den flex och fyll hela bredden */
  .besearchmask .sm-fields > .row.sm-row > .col-12.col-lg-10.sm-col > .row.sm-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    width: 100% !important;
    gap: 10px !important;             /* avstånd mellan fälten */
  }

  /* NOLLSTÄLL bootstrap padding som ofta skapar extra glapp */
  .besearchmask .sm-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* DATUM: ge dem riktig bredd så text + ikon får plats */
  .besearchmask .col-6.col-lg-2.sm-col{
    flex: 0 0 175px !important;       /* öka vid behov: 185px */
    max-width: none !important;
  }

  .besearchmask #SMJSON-arrivalDate,
  .besearchmask #SMJSON-departureDate{
    width: 100% !important;
    min-width: 175px !important;
    padding-right: 42px !important;   /* plats för kalenderikon */
  }

  /* ANTAL RUM OCH GÄSTER: ta resten av utrymmet (detta tar bort "långa mellanrummet") */
  .besearchmask .col-12.col-lg-4.sm-col{
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 320px !important;
  }

  .besearchmask .occupancy-summary{
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 40px !important;   /* plats för pil/ikon */
  }

  /* SÖK: stabil storlek + perfekt centrering */
  .besearchmask .sm-book-wrap{ margin: 0 !important; }
  .besearchmask .sm-book-button{
    min-width: 150px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20 18px !important;
    margin: 0 !important;
  }
}
/* =========================
   Ta bort pilen vid "Antal rum och gäster"
   ========================= */

/* 1) Ta bort ev. ny pil som vi råkat skapa tidigare */
.besearchmask .bindToggleOccupancy::after{
  content: none !important;
}

/* 2) Ta bort pilar/ikoner som kan ligga i eller runt occupancy */
.besearchmask .col-12.col-lg-4.sm-col svg,
.besearchmask .col-12.col-lg-4.sm-col i,
.besearchmask .col-12.col-lg-4.sm-col .caret,
.besearchmask .col-12.col-lg-4.sm-col .dropdown-arrow,
.besearchmask .col-12.col-lg-4.sm-col .arrow,
.besearchmask .col-12.col-lg-4.sm-col [class*="arrow"],
.besearchmask .col-12.col-lg-4.sm-col [class*="caret"],
.besearchmask .col-12.col-lg-4.sm-col [class*="chevron"]{
  display: none !important;
}

/* 3) Ta bort bakgrundspilar (om det är en select-liknande styling) */
.besearchmask .bindToggleOccupancy{
  background-image: none !important;
}
/* Döljer alla “extra element” som råkar ligga efter occupancy-summary (men behåller dropdownen) */
.besearchmask .col-12.col-lg-4.sm-col .bindToggleOccupancy ~ *:not(.occupancy-dropdown-wrap){
  display: none !important;
}
/* =========================
   NUKA PILEN på "Antal rum och gäster"
   (Den skapas via background/pseudo-element)
   ========================= */

/* 1) Ta bort ev. caret som ritas med ::before/::after */
#appForm .besearchmask .bindToggleOccupancy::before,
#appForm .besearchmask .bindToggleOccupancy::after,
#appForm .besearchmask .occupancy-summary::before,
#appForm .besearchmask .occupancy-summary::after{
  content: none !important;
  display: none !important;
}

/* 2) Ta bort ev. pil som är en bakgrundsbild (många teman gör så på combobox) */
#appForm .besearchmask .bindToggleOccupancy,
#appForm .besearchmask .bindToggleOccupancy[role="combobox"]{
  background-image: none !important;
  background: #fff !important;          /* behåll vit ruta, men utan bakgrundspil */
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
}

/* 3) Du hade lagt extra högerpadding för pil tidigare – ta bort den så det inte blir “tom yta” */
#appForm .besearchmask .occupancy-summary{
  padding-right: 12px !important;
}
/* Mer luft i bakgrundsrutan */
.besearchmask .searchmask-container{
  padding: 26px 22px !important;   /* top/bottom, left/right */
}
/* Wrapper ska INTE klippa dropdown */
#appForm .besearchmask .searchmask-wrapper{
  position: relative;
  border-radius: 14px !important;
  overflow: visible !important;   /* <-- dropdown får sticka ut */
  background: transparent !important; /* bakgrund flyttas till ::before */
}

/* Bakgrunden (beige rutan) ritas som ett lager bakom */
#appForm .besearchmask .searchmask-wrapper::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px !important;
  background: #d8ccad;            /* samma beige som du har */
  z-index: 0;
}

/* Allt innehåll över bakgrunden */
#appForm .besearchmask .searchmask-wrapper > *{
  position: relative;
  z-index: 1;
}

/* 2) SAMMA HÖJD som in-/utcheckning (44px) + snygg centrering */
#appForm .besearchmask #SMJSON-arrivalDate,
#appForm .besearchmask #SMJSON-departureDate,
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary{
  height: 44px !important;
  min-height: 44px !important;
}
/* Lite mer mellanrum mellan Antal rum & gäster och SÖK (desktop) */
@media (min-width: 768px){
  #appForm .besearchmask .sm-fields > .row.sm-row > .col-12.col-lg-2.sm-col{
    margin-left: 10px !important; /* testa 8–14px */
  }
}
/* NUKA "inner-rectangle" i Antal rum & gäster */
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary,
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary .occupancy-summary-texts{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Extra hårt: om någon span råkat få border/box-shadow */
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary .occupancy-summary-texts *{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ta bort fokus-ram (som kan se ut som en inner-box när man klickar) */
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary:focus,
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary:focus-visible,
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* Bygg upp fältet så det ser ut som de andra (endast en "ytter-box") */
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary{
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  background: #fff !important;
  border-radius: 10px !important;
}

/* Inre textwrap: ingen egen padding/ram */
#appForm .besearchmask .bindToggleOccupancy.occupancy-summary .occupancy-summary-texts{
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  gap: 6px;
}/* End custom CSS */