/* planetreisen.eu — booking search form (_searchform.php), 2026-11-01 (user: "this looks cheap").
   One search bar: boxed fields with a small label, icon and value; theme colours navy #212a69 and red #ec0f4c. */

/* one way / return switch */
.search-sub-pills.nav-pills { display: inline-flex; gap: 4px; padding: 4px; background: #f1f2f8; border-radius: 50px; margin-bottom: 20px !important; }
.search-sub-pills.nav-pills .nav-link { padding: 7px 22px; font-size: 14px; font-weight: 600; color: #212a69; border-radius: 50px; box-shadow: none; }
.search-sub-pills.nav-pills .nav-link.active { background: #ec0f4c; color: #fff; box-shadow: 0 3px 8px rgba(236, 15, 76, .3); }

/* the bar */
.ps-form .ps-row { display: flex; align-items: stretch; gap: 10px; }
.ps-form .ps-field { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0;
   padding: 8px 14px; background: #fff; border: 1px solid #dfe2ee; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.ps-form .ps-field:hover { border-color: #b9bed6; }
.ps-form .ps-field:focus-within { border-color: #212a69; box-shadow: 0 0 0 3px rgba(33, 42, 105, .08); }
.ps-form .ps-city { flex: 1.25 1 0; }
.ps-form .ps-date { flex: 1 1 0; }
.ps-form .ps-pax { flex: 1.4 1 0; }
.ps-form .ps-ico { flex: 0 0 auto; width: 20px; height: 20px; color: #ec0f4c; }
.ps-form .ps-in { flex: 1 1 auto; min-width: 0; }
.ps-form label { display: block; margin: 0 0 1px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8fac; }

/* values: bootstrap-select buttons + the date input, flat inside the box */
.ps-form .bootstrap-select { width: 100% !important; }
.ps-form .bootstrap-select > .dropdown-toggle,
.ps-form .bootstrap-select > .dropdown-toggle:focus,
.ps-form .bootstrap-select > .dropdown-toggle:hover,
.ps-form .bootstrap-select.open > .dropdown-toggle {
   width: 100%; padding: 0 18px 0 0; height: 26px; line-height: 26px; background: transparent !important; border: 0 !important;
   box-shadow: none !important; outline: 0 !important; color: #212a69; font-size: 16px; font-weight: 600; text-align: left; }
.ps-form .bootstrap-select .filter-option { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-form .bootstrap-select.bs-placeholder > .dropdown-toggle,
.ps-form .bootstrap-select .dropdown-toggle .bs-title-option { color: #b0b4c8 !important; font-weight: 400; }
.ps-form .bootstrap-select .caret,
.ps-form .bootstrap-select .bs-caret { position: absolute; right: 0; top: 50%; margin-top: -2px; color: #8a8fac; }
.ps-form .bootstrap-select .dropdown-menu { min-width: 240px; border: 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(33, 42, 105, .18); margin-top: 14px; }
.ps-form .bootstrap-select .dropdown-menu li a:hover,
.ps-form .bootstrap-select .dropdown-menu li.selected a { background: #f1f2f8; color: #212a69; }
.ps-form .bootstrap-select .dropdown-header { color: #ec0f4c; font-weight: 700; font-size: 11px; letter-spacing: .05em; }
.ps-form .ps-date input.form-control { height: 26px; padding: 0; border: 0 !important; box-shadow: none !important; background: transparent;
   color: #212a69; font-size: 16px; font-weight: 600; cursor: pointer; }
.ps-form .ps-date input.form-control::placeholder { color: #b0b4c8; font-weight: 400; }

/* passengers: three small columns in one box */
.ps-form .ps-pax-cols { flex: 1 1 auto; display: flex; gap: 10px; min-width: 0; }
.ps-form .ps-pax-cols .ps-in + .ps-in { padding-left: 10px; border-left: 1px solid #eceef5; }

/* search button */
.ps-form .ps-submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 30px;
   min-height: 58px; border: 0; border-radius: 12px; background: #ec0f4c; color: #fff; font-size: 17px; font-weight: 700;
   box-shadow: 0 6px 16px rgba(236, 15, 76, .3); transition: background .2s, transform .1s; }
.ps-form .ps-submit:hover { background: #d4003a; }
.ps-form .ps-submit:active { transform: translateY(1px); }
.ps-form .ps-submit svg { width: 19px; height: 19px; }

/* smaller screens: 2 per row, then 1 */
@media (max-width: 1199px) {
   .ps-form .ps-row { flex-wrap: wrap; }
   .ps-form .ps-city, .ps-form .ps-date, .ps-form .ps-pax { flex: 1 1 calc(50% - 5px); }
   .ps-form .ps-submit { flex: 1 1 100%; }
}
@media (max-width: 575px) {
   .ps-form .ps-city, .ps-form .ps-date, .ps-form .ps-pax { flex-basis: 100%; }
}

/* city list opens under its own box, same width (the select sits after the icon, so it opened shifted right) */
.ps-form .ps-city .bootstrap-select { position: static; }
.ps-form .ps-city .bootstrap-select .dropdown-menu { left: -1px !important; right: -1px; top: 100% !important; width: auto; min-width: 0; margin-top: 6px; }
.ps-form .bootstrap-select .bs-searchbox { padding: 10px 10px 6px; }
.ps-form .bootstrap-select .bs-searchbox input { height: 38px; border: 1px solid #dfe2ee; border-radius: 8px; box-shadow: none; }
.ps-form .bootstrap-select .bs-searchbox input:focus { border-color: #212a69; }

/* the next step to fill is red: departure → arrival → date (class set by the script in _footer.php) */
.ps-form .ps-field.ps-need { border-color: #f5a3ba; }
.ps-form .ps-field.ps-need .bootstrap-select > .dropdown-toggle,
.ps-form .ps-field.ps-need input.form-control::placeholder { color: #ec0f4c !important; }