.bsf-hotellsok-block { padding:20px 22px; border-radius:6px; }
.bsf-hotellsok-heading { margin-top:0; font-size:1.65rem; margin-bottom:6px; }
.bsf-hotellsok-subheading { margin-top:0; margin-bottom:14px; font-size:.95rem; color:#333; }

/* Base form layout: desktop = alt på én linje (wrap only for child ages) */
.bsf-hotellsok-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.bsf-hotellsok-form--advanced { width:100%; }

/* Field group blocks */
.bsf-field-group { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.bsf-field-destination { flex:1 1 220px; min-width:200px; }
.bsf-field-dates { flex:1 1 320px; min-width:260px; }
.bsf-field-guests { flex:0 1 300px; flex-wrap:nowrap; }
/* Children ages & submit placed later via explicit ordering (also on desktop for consistency) */
.bsf-field-children-ages { flex:1 1 100%; }
.bsf-field-submit { flex:1 1 100%; }

/* Explicit ordering (matches flysøk): destination -> dates -> guests -> child ages -> submit */
.bsf-field-destination { order:10; }
.bsf-field-dates { order:20; }
.bsf-field-guests { order:30; }
.bsf-field-children-ages { order:40; }
.bsf-field-submit { order:50; }

.bsf-field-group label { display:flex; flex-direction:column; font-size:.8rem; font-weight:600; color:#333; min-width:90px; flex:1 1 80px; }
.bsf-field-group label span { margin-bottom:4px; font-weight:600; font-size:.68rem; letter-spacing:.5px; text-transform:uppercase; color:#555; }
.bsf-field-group input, .bsf-field-group select { padding:9px 10px; border:1px solid #b9b9b9; border-radius:4px; font-size:.95rem; background:#fff; }
.bsf-field-group input:focus, .bsf-field-group select:focus { outline:2px solid #2684ff33; border-color:#2684ff; }

/* Child ages: one per small inline cell desktop; full width mobile later */
.bsf-field-children-ages { display:flex; gap:12px; flex-wrap:wrap; }
.bsf-field-children-ages .bsf-child-age { max-width:110px; flex:1 1 90px; }

.bsf-hotellsok-submit { background:var(--primary-color, #568d03); color:#fff; padding:12px 28px; font-size:.95rem; border:none; border-radius:6px; cursor:pointer; font-weight:600; box-shadow:0 3px 5px rgba(0,0,0,.12); letter-spacing:.5px; transition:.18s background-color,.18s transform; margin-bottom: 2px;}
.bsf-hotellsok-submit:hover { background:var(--primary-color-hover, #70b10c); }
.bsf-hotellsok-submit:active { transform:translateY(1px); }
.bsf-hotellsok-partner-html { margin-top:24px; flex:1 1 100%; }
.bsf-hotellsok-disclaimer { margin-top:10px; font-size:.68rem; line-height:1.25; color:#555; opacity:.8; font-style:italic; }

/* Autocomplete suggestions */
[data-hotellsok-destination-wrapper] { position:relative; }
.bsf-destination-suggestions { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #cfcfcf; border-radius:4px; box-shadow:0 4px 10px rgba(0,0,0,.08); z-index:30; padding:4px; display:flex; flex-direction:column; max-height:260px; overflow:auto; }
.bsf-destination-suggestion { text-align:left; background:none; border:none; padding:8px 10px; font-size:.9rem; border-radius:3px; cursor:pointer; }
.bsf-destination-suggestion:hover, .bsf-destination-suggestion:focus { background:#f2f6f0; }
.bsf-destination-suggestion:active { background:#e2eedc; }
.bsf-destination-suggestion.is-active { background:#e9f2e4; }
.bsf-destination-clear { position:absolute; top:30px; right:6px; background:transparent; border:none; font-size:18px; line-height:1; color:#777; cursor:pointer; padding:2px 6px; }
.bsf-destination-clear:hover { color:#333; }

/* Klar-knapp fokus / bedre tilgjengelighet */
.bsf-destination-clear:focus { outline:2px solid #2684ff55; border-radius:3px; }
.bsf-field-destination input[type=text]{ box-sizing:border-box; width:100%; padding-right:30px; }


/* Medium breakpoint: allow wrap to to-linjer */
@media (max-width:1100px){
	.bsf-field-destination { flex:1 1 200px; }
	.bsf-field-dates { flex:1 1 300px; }
	.bsf-field-guests { flex:1 1 260px; }
}

/* Mobile layout: spesifikk rekkefølge og én linje per gruppe
	 1: Destinasjon
	 2: Fra/Til (to felt på samme linje)
	 3: Voksne/Barn/Rom på samme linje
	 4+: Barnealder én pr linje */
@media (max-width:820px){
	.bsf-hotellsok-form { flex-direction:column; align-items:stretch; gap:12px; }
	.bsf-field-group { width:100%; }
	.bsf-field-destination, .bsf-field-dates, .bsf-field-guests { width:100%; }
	/* Dates: to kolonner for å redusere høyde */
	.bsf-field-dates { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
	.bsf-field-dates label { min-width:0; }
	/* Guests: tre per rad, wrap når trangt */
	.bsf-field-guests { display:flex; gap:10px; flex-wrap:nowrap; }
	.bsf-field-guests label { flex:1 1 33%; min-width:105px; }
	.bsf-field-children-ages { flex-direction:column; gap:8px; }
	.bsf-field-children-ages .bsf-child-age { max-width:none; width:100%; }
	.bsf-hotellsok-submit { width:100%; }
}

@media (max-width:680px){
	/* Guests: nå wrap (2 per rad) og datoer går til én kolonne for smalere skjermer */
	.bsf-field-guests { flex-wrap:wrap; }
	.bsf-field-guests label { flex:1 1 48%; }
	.bsf-field-dates { grid-template-columns:1fr; }
}

@media (max-width:480px){
	.bsf-field-guests label { flex:1 1 100%; }
}

/* --- Forbedret mobil-layout (justering for samsvar med flysok) --- */
@media (max-width:840px){
	/* Overstyr tidligere layout til en ren kolonneflyt */
	.bsf-hotellsok-form { flex-direction:column; align-items:stretch; gap:18px; }
	.bsf-field-destination, .bsf-field-dates, .bsf-field-guests, .bsf-field-submit, .bsf-field-children-ages{ width:100%; flex:1 1 100%; }
	/* Datoer på egne linjer full bredde */
	.bsf-field-dates { display:flex; flex-direction:column; gap:14px; }
	.bsf-field-dates label { flex:1 1 100%; min-width:0; width:100%; }
	.bsf-field-dates label input { width:100%; }
	/* Gjester: Voksne + Barn på samme linje, Rom under */
	.bsf-field-guests { display:flex; flex-wrap:wrap; gap:12px; }
	/* Tving Voksne og Barn (første to) til 50% bredde på samme linje */
	.bsf-field-guests label { flex:0 0 calc(50% - 6px); max-width:calc(50% - 6px); min-width:0; }
	/* Rom (tredje) full bredde */
	.bsf-field-guests label:nth-child(3) { flex:0 0 100%; max-width:100%; }
	/* Barnealder full bredde og vertikal stack */
	.bsf-field-children-ages { flex-direction:column; gap:10px; }
	.bsf-field-children-ages .bsf-child-age { max-width:none; width:100%; }
	/* Submit full bredde for tydelig CTA */
	.bsf-hotellsok-submit { width:100%; }
}
@media (max-width:600px){
	/* Behold 50/50 for første to, rom full bredde */
	.bsf-field-guests label { flex:0 0 calc(50% - 6px); max-width:calc(50% - 6px); }
	.bsf-field-guests label:nth-child(3) { flex:0 0 100%; max-width:100%; }
	.bsf-field-dates { gap:12px; }
}
@media (max-width:420px){
	.bsf-hotellsok-block { padding:18px 16px; }
	.bsf-hotellsok-heading { font-size:1.45rem; }
	.bsf-hotellsok-subheading { font-size:.9rem; }
	.bsf-hotellsok-submit { padding:14px 20px; font-size:1rem; }
}

/* Finjustering forslag-liste for bedre samsvar med flysok */
.bsf-destination-suggestions { font-size:.9rem; }
.bsf-destination-suggestion { transition:background-color .15s, color .15s; }
.bsf-destination-suggestion.is-active, .bsf-destination-suggestion:focus { outline:none; background:#e9f2e4; }