/* The restyled search box (templates/deals_search_box.php, adc-api#3362): a light panel with
   dark text, a tab row of line icons, Land Trips choices as cards, the Odysseus cruise form
   restyled, and on phones and tablets a pill that opens the box as a dialog (search-box.js).
   Every rule is scoped to the new markup (#main_search_box.sbx, .sbx-*), so a page still on
   the older template keeps its look. Some rules need !important to win over older rules that
   use it themselves (deals_search_box_sidebar.css and the page stylesheets). */

#main_search_box.sbx {
  --sbx-navy: #004a83;
  --sbx-navy-dark: #00335c;

  /* White on the site's #e8404f is 3.98:1, under AA's 4.5:1 for the buttons' 16px bold
     labels; this is the nearest red that passes (4.52:1). */
  --sbx-red: #e52536;
  --sbx-red-dark: #c92f3d;
  --sbx-ink: #1f2d3a;
  --sbx-muted: #4d5d6b;

  /* A light cool gray rather than a pale blue, so the white fields stand out from it. */
  --sbx-panel: #e9eef2;
  --sbx-line: #c3ccd4;

  /* 3:1 against white, the AA minimum for a field's edge. */
  --sbx-field: #8996a2;
  --sbx-tabs: var(--sbx-navy);

  overflow: visible;
  border: 1px solid var(--sbx-line) !important;
  border-radius: 8px;
  background: var(--sbx-panel) !important;
  color: var(--sbx-ink);
  box-shadow: 0 2px 10px rgb(0 40 80 / 10%);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.sbx-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* The solid icons (Material Symbols); the line balloon is drawn heavier to sit with them. */
.sbx-svg-fill {
  fill: currentcolor;
  stroke: none;
}

#main_search_box.sbx .top_btns .sbx-svg-line {
  stroke-width: 2.1;
}

/* The drill-down panel (search-box.js): a tour filter's choices or a help text, slid over the
   form inside the dialog. Full screen on phones, the dialog's size and place on tablets. */
.sbx-sheet[hidden] {
  display: none;
}

.sbx-sheet {
  display: flex;
  position: fixed;
  inset: 0;

  /* Above anything in the form under it: the tour form's Locations field (select2) carries its
     own z-index. */
  z-index: 100000;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: #1f2d3a;
  font: 15px/1.4 Arial, "Helvetica Neue", Helvetica, sans-serif;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}

.sbx-sheet.sbx-sheet-in {
  transform: none;
}

.sbx-sheet-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: max(6px, env(safe-area-inset-top, 0px)) 12px 6px max(4px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid #c3ccd4;
  background: #e9eef2;
}

.sbx-sheet-back {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #004a83;
  cursor: pointer;
}

.sbx-sheet-back:hover {
  background: rgb(0 74 131 / 10%);
}

.sbx-sheet-back .sbx-svg {
  stroke-width: 2.4;
}

.sbx-sheet-title {
  margin: 0;
  color: #004a83;
  font: bold 18px/1.2 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.sbx-sheet-title:focus {
  outline: none;
}

.sbx-sheet-back:focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 2px;
}

.sbx-sheet-body {
  flex: 1;
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* A tour filter's choices: one column of full-width rows, with tourSearch.js's buttons pinned to
   the bottom. deals_search_box_tour.css hides the content until fancybox shows it. */
.sbx-sheet .fancycontent {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
}

.sbx-sheet .fancybox_content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.sbx-sheet .col-fancybox {
  flex: 1;
  columns: 1;
  padding: 4px 0;
}

.sbx-sheet .col-fancybox .checkbox {
  display: flex;
  align-items: center;
  gap: 12px;

  /* deals_search_box_tour.css sets width: 100%, which the side padding would push past the edge. */
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid #eef1f4;
}

/* The checkbox beside its label, centered, where deals_search_box_tour.css places it absolutely
   at the row's top. */
.sbx-sheet .col-fancybox .checkbox input[type="checkbox"] {
  position: static;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.sbx-sheet .col-fancybox .checkbox label {
  display: block;
  flex: 1;
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  cursor: pointer;
}

.sbx-sheet .sticky-box-bot {
  display: flex;
  float: none;
  position: sticky;
  bottom: 0;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between !important;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #c3ccd4;
  background: #fff;
}

.sbx-sheet .sticky-box-bot > div:first-child {
  display: flex;
  gap: 8px;
}

.sbx-sheet .sticky-box-bot > div:last-child {
  flex-basis: 100%;
}

.sbx-sheet .sticky-box-bot .btn {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #8996a2;
  border-radius: 4px;
  background: #fff;
  color: #004a83;
  font: bold 13px Arial, "Helvetica Neue", Helvetica, sans-serif;
  cursor: pointer;
}

.sbx-sheet .sticky-box-bot .apply-filter-btn {
  width: 100%;
  min-height: 44px;
  border-color: #004a83;
  background: #004a83;
  color: #fff;
  font-size: 16px;
}

.sbx-sheet .sticky-box-bot .apply-filter-btn:disabled {
  border-color: #8996a2;
  background: #8996a2;
  cursor: default;
}

/* A help text at a phone's reading size; its own "Search Help" title repeats the panel's. */
.sbx-sheet-help {
  padding: 16px;
}

.sbx-sheet-help,
.sbx-sheet-help p,
.sbx-sheet-help span {
  font-size: 15px;
  line-height: 1.5;
}

.sbx-sheet-help p {
  margin: 0 0 12px;
}

.sbx-sheet-help .searchHelpTitle {
  display: none;
}

/* While the search is open, the LiveChat bubble and Cookie Control's corner button stay fixed
   over the page, the chat above the dialog (its z-index is 2147483639), and covered the dialog's
   buttons on phones. They come back when the search closes. !important because LiveChat styles
   its container inline. */
html.sbx-open #chat-widget-container,
html.sbx-open #ccc-icon {
  visibility: hidden !important;
}

/* While the dialog is open, a qTip would show behind it (the panel shows the text instead), and
   any fancybox pop-up opened by other code, such as the Flight + Hotel confirmation, shows above
   it rather than behind it. */
html.sbx-open .qtip {
  /* Hidden, not removed from layout: qTip skips hiding a tooltip it reads as not shown, so
     search-box.js could not close it when the dialog closes. */
  visibility: hidden !important;
}

/* select2's results lists (the tour form's Locations, Tour Name and cities) are attached to the
   page body, under the dialog, while it is open. calendar_table.css, on the tour operator pages,
   sets every select2 container to z-index: 9999 !important. */
html.sbx-open body > .select2-container--open {
  z-index: 2147483300 !important;
}

html.sbx-open .fancybox-overlay {
  z-index: 2147483100 !important;
}

html.sbx-open .fancybox-wrap {
  z-index: 2147483200 !important;
}

/* Tablets: the panel takes the dialog's place, a centered panel over the dimmed page. */
@media (768px <= width <= 1218px) {
  .sbx-sheet {
    inset: 40px 16px;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbx-sheet {
    transition: none;
  }
}

#main_search_box.sbx :focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 2px;
}

/* The labels the older box set white on gray are dark on light. Only these: a blanket rule
   would also darken the date picker's grayed-out days and the dropdown's highlighted option. */
#main_search_box.sbx label,
#main_search_box.sbx .widget-label,
#main_search_box.sbx .destination-type-radio span,
#main_search_box.sbx .od-checkbox-label,
#main_search_box.sbx .od-results-wrapper,
#main_search_box.sbx .od-results-wrapper span:not(.number, .total-sailings),
#main_search_box.sbx .itineraties-found {
  color: var(--sbx-ink);
}

/* Headings */

#main_search_box.sbx .sbx-h {
  margin: 0 0 4px;
  padding: 14px 14px 0;
  color: var(--sbx-navy);
  font-size: 21px;
  font-weight: bold;
  text-transform: none;
}

#main_search_box.sbx .aside_title {
  display: none;
}

/* The tab row */

#main_search_box.sbx .top_btns[role="tablist"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-bottom: 0;

  /* The box's 8px corner less its 1px border, so the curve follows the border with no gap. */
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  background: var(--sbx-tabs);
}

#main_search_box.sbx .top_btns .clear_float {
  display: none;
}

#main_search_box.sbx .top_btns .search_btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 9px 2px 8px;
  border: 0;
  border-right: 1px solid rgb(255 255 255 / 18%);
  border-radius: 0;
  background: transparent;
  color: rgb(255 255 255 / 88%);
  font: bold 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
  cursor: pointer;
}

#main_search_box.sbx .top_btns .search_btn:last-of-type {
  border-right: 0;
}

#main_search_box.sbx .sbx-tab-icon {
  width: 26px;
  height: 26px;
}

#main_search_box.sbx .top_btns .search_btn .text {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

#main_search_box.sbx .top_btns .search_btn:hover {
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

/* The open tab takes the panel's color, so it reads as joined to the panel below it. */
#main_search_box.sbx .top_btns .search_btn[aria-selected="true"] {
  background: var(--sbx-panel);
  color: var(--sbx-navy);
}

/* Cruise panel: the links above the Odysseus form */

/* deals_search_box.css pads the tab 10px as well; the section's padding is the only gutter. */
#main_search_box.sbx #cruise_tab {
  container: sbx / inline-size;
  padding: 0;
}

#main_search_box.sbx #cruise_tab section {
  padding: 10px 12px 12px;
}

/* Search Help and View Expanded Search on one line, at its two ends. */
#main_search_box.sbx .sbx-cruise-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#main_search_box.sbx a#cruiseSearchHelpLink,
#main_search_box.sbx a#cruiseSearchExpanded {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--sbx-navy);
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* The side column's layout1.css gives Search Help margin: 4px 0 9px !important, which pushes it
   off the line it shares with View Expanded Search. */
#main_search_box.sbx .sbx-cruise-links a#cruiseSearchHelpLink,
#main_search_box.sbx .sbx-cruise-links a#cruiseSearchExpanded {
  margin: 0 !important;
}

#main_search_box.sbx a#cruiseSearchHelpLink:hover,
#main_search_box.sbx a#cruiseSearchExpanded:hover {
  text-decoration: underline;
}

#main_search_box.sbx a#cruiseSearchHelpLink .fa {
  color: #1f6fb5;
  font-size: 14px;
}

/* The Odysseus cruise form. Its markup and behavior are Odysseus's; only the look changes. Its
   theme styles these fields as #odysseus #OVExploreContainer ..., so these rules go through
   #OVExploreContainer too to outrank it without !important. */

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .destination-type-radio {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 15px;
  margin: 8px 0 6px;

  /* deals_search_box.css sets padding-left: 16px !important on the row (at 540), which pushed
     the centered options right. */
  padding-right: 0;
  padding-left: 0 !important;
  white-space: nowrap;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .destination-type-radio label {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  /* deals_search_box.css sets margin-right: 12px !important at 721 to 1218px, which pushes the
     row wider than the side column. */
  margin: 0 !important;
  font-size: 13px;
  font-weight: normal;
}

/* Odysseus pads each field 8px on either side; the panel's own padding is the only gutter. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-input-wrapper {
  padding-right: 0;
  padding-left: 0;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer input.od-input-box {
  box-sizing: border-box;
  min-height: 32px;
  border: 1px solid var(--sbx-field);
  border-radius: 4px;
  background: #fff;
  color: var(--sbx-ink);
  font-size: 13px;
}

/* Odysseus paints a square white background behind each dropdown; rounding it keeps its
   corners from showing outside the field's. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect {
  border-radius: 4px;
}

/* A field's text sits in the middle of it; a field with several choices grows a line per row
   of chips rather than clipping them. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags {
  /* Odysseus lays the field out as a column: this centers its text vertically and keeps it
     at the left. deals_search_box.css sets min-height with !important, hence these. */
  justify-content: center;
  align-items: flex-start;
  min-height: 32px !important;
  padding: 3px 36px 3px 10px !important;
  text-align: left;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .multiselect__placeholder,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .multiselect__single,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .multiselect__input {
  /* deals_search_box.css gives the placeholder margin-bottom: 5px !important, which sat the
     text high in its field. */
  margin: 0 !important;
  padding: 0;

  /* The field's size, so text doesn't shrink when a field opens and its search box (12px in
     Odysseus's theme) takes the placeholder's place. */
  font-size: inherit;
  line-height: 18px;
  text-align: left;
}

/* The advanced search's text fields (Package ID, Ports of Call), at the other fields' height,
   indent, text color and size: Odysseus's theme reaches them through a longer selector, and
   deals_search_box.css forces their padding. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-input-wrapper input.od-input-box {
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 10px !important;
  border: 1px solid var(--sbx-field);
  border-radius: 4px;
  background: #fff;
  color: #444;
  font-size: 13px;
}

/* The date field's wrapper draws the field; the input inside it has no border of its own. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker input {
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  border: 0;

  /* deals_search_box.css paints it white with !important, square, over the box's rounded corners. */
  border-radius: 3px;
  background: transparent;
  color: var(--sbx-ink);
  font-size: 13px;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__select {
  top: 1px;
  height: 30px;
}

/* On a touch screen the fields keep a finger-sized height. */
@media (pointer: coarse) {
  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags,
  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker,
  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer input.od-input-box {
    min-height: 38px !important;
  }

  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker input {
    height: 36px;
  }

  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__select {
    height: 36px;
  }
}

/* One look for every field's placeholder, Sailing Dates included: the dropdowns' #444 (9.7:1 on
   white), and the date box's text at the dropdowns' size and indent, where Odysseus's theme sets
   it 12px and 15px in. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .multiselect__placeholder,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker input::placeholder,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer input.od-input-box::placeholder,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .multiselect__input::placeholder {
  color: #444;
  font-size: inherit;
  opacity: 1;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect--active .multiselect__tags,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags:hover,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker:hover {
  border-color: var(--sbx-navy);
}

/* vue-multiselect gives each chip a 5px bottom margin, which sat it high in its field. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tag {
  margin: 0;
  border: 1px solid var(--sbx-line);
  border-radius: 3px;
  background: #dbe9f5;
  color: var(--sbx-navy);
  font-weight: bold;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tag span {
  color: var(--sbx-navy);
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tag-icon::after {
  color: var(--sbx-navy);
  font-size: 16px;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tag-icon:hover {
  background: var(--sbx-navy);
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tag-icon:hover::after {
  color: #fff;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper {
  z-index: 20;
  border: 1px solid var(--sbx-field);
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 8px 18px rgb(0 40 80 / 15%);
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper .multiselect__option {
  background: #fff;
  color: var(--sbx-ink);
  font-size: 14px;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper .multiselect__option--highlight,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper .multiselect__option--highlight span {
  background: var(--sbx-navy);
  color: #fff;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper .multiselect__option--selected:not(.multiselect__option--highlight),
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__content-wrapper .multiselect__option--selected:not(.multiselect__option--highlight) span {
  background: #dbe9f5;
  color: var(--sbx-navy);
  font-weight: bold;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-checkbox-main-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 4px;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-checkbox-main-wrapper label {
  white-space: nowrap;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-adv-search-btn,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .advance-btn-label {
  color: var(--sbx-navy);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-search-button button,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer button.btn-search {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: var(--sbx-red);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-main-button-wrapper .od-search-button button span,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-main-button-wrapper button.btn-search span {
  color: #fff;
  text-transform: none;
}

/* The Search button spans the box. Odysseus's theme caps its wrapper at a third of the row
   (flex-basis, max-width 33%, min-width 198px) through several long selectors, so this one
   wrapper takes !important rather than chasing each of them. */
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-main-button-wrapper {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-button-wrapper.od-search-button {
  flex: 1 1 100% !important;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 0;
  margin-left: 0;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-search-button button:hover,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer button.btn-search:hover {
  background: var(--sbx-red-dark);
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-results-wrapper,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .itineraties-found {
  color: var(--sbx-ink);
  text-align: center;
}

#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-results-wrapper .number,
#main_search_box.sbx .swiftCruiseSearch #OVExploreContainer span.total-sailings {
  color: var(--sbx-navy);
  font-size: 20px;
  font-weight: bold;
}

/* The date picker (v-calendar), which Odysseus opens inside the box: white, like the fields. */
#main_search_box.sbx .vc-popover-content,
#main_search_box.sbx .vc-popover-content .vc-container {
  border-color: var(--sbx-field);
  border-radius: 6px;
  background: #fff;
}

#main_search_box.sbx .vc-popover-content {
  box-shadow: 0 10px 24px rgb(0 40 80 / 18%);
}

/* In a narrow box (the side-nav column) the choices tighten, and wrap rather than overflow:
   their wording ("Ocean Cruises") is Odysseus's text, which CSS cannot shorten. */
@container sbx (width <= 300px) {
  #main_search_box.sbx #cruise_tab section {
    padding: 8px 10px 10px;
  }

  #main_search_box.sbx .sbx-cruise-links {
    margin: 7px 0 5px;
  }

  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .destination-type-radio {
    gap: 8px;
  }

  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .destination-type-radio label,
  #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-checkbox-main-wrapper label {
    font-size: 12px;
  }
}


/* Land Trips */

/* deals_search_box.css pads the tab 10px on the left only; the surround's padding is the only
   gutter, as on the cruise tab. */
#main_search_box.sbx #land_tab {
  padding: 0;
}

#main_search_box.sbx div#land_tab div.surround {
  /* deals_search_box.js sets margin: 10px inline when Go Back returns to the choices. */
  margin: 0 !important;
  padding: 12px 10px 10px;
}

/* deals_search_box.css pads the list 10px on the right and spaces the choices with a bottom
   margin, which left more room right of and below them than left of them. */
#main_search_box.sbx #land_types {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* margin: 0 overrides deals_search_box.css's 10px 0 for this heading. */
#main_search_box.sbx #land_types #selectType {
  margin: 0;
  color: var(--sbx-navy);
  font-size: 15px;
  font-weight: bold;
  text-decoration: underline;
}

#main_search_box.sbx #land_types .landType {
  display: grid;
  grid-template-columns: 40px 1fr 14px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
  padding: 10px;
  border: 1px solid var(--sbx-line);
  border-radius: 6px;
  background: #fff;
  color: var(--sbx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#main_search_box.sbx #land_types .landType:hover {
  border-color: var(--sbx-navy);
}

#main_search_box.sbx #land_types .landType .icon {
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--sbx-navy);
  color: #fff;
}

#main_search_box.sbx #land_types .landType .text {
  float: none;
  width: auto;
  margin: 0;
}

#main_search_box.sbx .sbx-land-name {
  display: block;
  color: var(--sbx-navy);
  font-size: 14px;
  font-weight: bold;
}

#main_search_box.sbx .sbx-land-desc {
  display: block;
  margin-top: 2px;
  color: var(--sbx-muted);
  font-size: 12px;
  line-height: 1.35;
}

#main_search_box.sbx .sbx-land-chevron {
  width: 14px;
  height: 14px;
  color: var(--sbx-muted);
}

/* Go Back sits on one line with Clear Selections (the tour form): a small, quiet button, since
   going back is not what the panel should invite. */
#main_search_box.sbx #land_result .deals_search_box_tours {
  align-items: center;
}

#main_search_box.sbx #land_result #clearSelections {
  padding-right: 0;
  font-size: 13px;
}

#main_search_box.sbx button#land_result_back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--sbx-line);
  border-radius: 4px;
  background: #fff;
  color: var(--sbx-navy);
  font: bold 13px/1.3 Arial, "Helvetica Neue", Helvetica, sans-serif;
  cursor: pointer;
}

/* An off-white on hover: a quiet change on a button that should not draw the eye. */
#main_search_box.sbx button#land_result_back:hover {
  border-color: var(--sbx-field);
  background: #f7f8f9;
}

/* Over the Flight + Hotel form (shown unless deals_search_box.js hides it with an inline
   display: none), Go Back takes a little more room below it. */
#main_search_box.sbx #land_result:has(> #travImpForm:not([style*="none"])) button#land_result_back {
  margin-bottom: 8px;
}

/* The forms after a choice sit straight on the panel, right under Go Back, with the panel's
   width: deals_search_box.css boxes the Flight + Hotel form in a translucent card and indents
   its rows 6px, which the older gray panel needed and this one does not. */
#main_search_box.sbx #land_result form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#main_search_box.sbx #land_result #travImpForm > div {
  margin: 10px 0 0;
}

/* Its empty error box would add space under the Search button; the button's own margins are
   reset so the space left of it and below it match the panel's gutter. */
#main_search_box.sbx #land_result #travImpForm > .validation_container {
  margin: 0;
}

#main_search_box.sbx #land_result #travImpForm #ti_form_submit_btn {
  margin: 10px 0 0;
}

/* From / To and Departure / Return: two halves filling the row, where deals_search_box.css
   floats them at 50% and sizes the fields 97% and 85.3% wide, short of the right edge. */
#main_search_box.sbx #land_result #travImpForm .side_to_side_section {
  display: flex;
}

#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set {
  flex: 1 1 0;
  float: none;
  width: auto;
  min-width: 0;
}

/* Spaced with a margin, not a gap: the row also holds an empty clearing div. */
#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set + .set {
  margin-left: 10px;
}

/* The tour form: deals_search_box.css pads its container 10px on the right and each field 7px
   on both sides, so the fields sat further from the right edge than the left. At 1218px and
   narrower deals_search_box.js also fixes its height at 450px, scrolling inside, for the old
   drawer; the dialog scrolls as a whole instead. */
#main_search_box.sbx #land_result #filters_container_sticky {
  height: auto !important;
  padding-right: 0;
}

#main_search_box.sbx #land_result #filters_container_sticky .filter {
  padding-right: 0;
  padding-left: 0;
}

#main_search_box.sbx #land_result .swiftHotelSearch {
  margin-top: 6px;

  /* deals_search_box.css pads it 10px on the right. */
  padding-right: 0;
}

#main_search_box.sbx #land_result select,
#main_search_box.sbx #land_result input[type="text"] {
  border: 1px solid var(--sbx-field);
  border-radius: 4px;
  background: #fff;
  color: var(--sbx-ink);
}

/* Flights and Excursions */

#main_search_box.sbx div#flights_tab div.surround,
#main_search_box.sbx #excursions_tab {
  padding: 14px;
  color: var(--sbx-ink);
}

/* deals_search_box.css pads the tab 15px !important; the card's own margin is the only gutter. */
#main_search_box.sbx div#flights_tab {
  padding: 0 !important;
}

/* The text sits on a white card, so it stands apart from the panel as the other tabs' fields do. */
#main_search_box.sbx div#flights_tab div.surround {
  margin: 10px;
  padding: 12px 12px 2px;
  border: 1px solid var(--sbx-line);
  border-radius: 6px;
  background: #fff;
}

#main_search_box.sbx div#flights_tab p {
  margin: 0 0 10px;
  color: var(--sbx-ink);
  line-height: 1.5;
}

#main_search_box.sbx div#flights_tab p#flightSm {
  color: var(--sbx-muted);
  font-size: 12px;
}

#main_search_box.sbx #excursions_tab .large {
  color: var(--sbx-navy);
}

#main_search_box.sbx #excursions_tab #excursionLink {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
}

#main_search_box.sbx #excursions_tab .sbx-exc-text {
  color: var(--sbx-muted);
  font-size: 12px;
  text-align: center;
}

#main_search_box.sbx #excursions_tab a.sbx-btn {
  display: inline-flex;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--sbx-navy);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

#main_search_box.sbx #excursions_tab a.sbx-btn:hover {
  background: var(--sbx-navy-dark);
}

#main_search_box.sbx #land_result input.btn-search-tours {
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: var(--sbx-red);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
  cursor: pointer;
}

#main_search_box.sbx #land_result input.btn-search-tours:hover {
  background: var(--sbx-red-dark);
}

#main_search_box.sbx #excursions_tab img {
  margin: 21px 0 5px;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* The pill, and the box as a dialog on phones and tablets (search-box.js) */

.sbx-pill[hidden] {
  display: none;
}

.sbx-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: calc(100% - 10px);
  margin: 12px 5px 25px;
  padding: 10px 18px;
  border: 2px solid #004a83;
  border-radius: 28px;
  background: #fff;
  color: #1f2d3a;
  font: 14px Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: left;
  box-shadow: 0 2px 8px rgb(0 40 80 / 12%);
  cursor: pointer;
}

.sbx-pill:focus-visible {
  outline: 3px solid #f4b400;
  outline-offset: 2px;
}

.sbx-pill .sbx-svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #004a83;
}

.sbx-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.sbx-pill-text strong {
  color: #004a83;
  font-size: 15px;
}

.sbx-pill-sub {
  overflow: hidden;
  color: #4d5d6b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#main_search_box.sbx.sbx-collapsed {
  display: none !important;
}

#main_search_box.sbx .sbx-dialog-head {
  display: none;
}

/* The page wrappers that held the box in a drawer sit in the page in dialog widths, holding
   only the pill; their own "Search Deals" toggle goes away. */
@media (width <= 1218px) {
  .sbx-host {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .sbx-host > .showHideButton {
    display: none !important;
  }
}

html.sbx-open,
html.sbx-open body {
  overflow: hidden;
}

.sbx-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* The panel's color, so a short form doesn't end in a band of another color on phones. */
  background: #e9eef2;
}

.sbx-layer #main_search_box.sbx {
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
}

.sbx-layer #main_search_box.sbx .sbx-dialog-head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--sbx-line);
  background: var(--sbx-panel);
}

/* In the dialog the tab row sits flush under the heading: square, without the heading's line, which
   showed past the row's rounded corners. The cruise-only box, without tabs, keeps the line. */
.sbx-layer #main_search_box.sbx .top_btns[role="tablist"] {
  border-radius: 0;
}

.sbx-layer #main_search_box.sbx:has(.top_btns[role="tablist"]) .sbx-dialog-head {
  border-bottom: 0;
}

.sbx-layer #main_search_box.sbx .sbx-dialog-title {
  margin: 0;
  color: var(--sbx-navy);
  font-size: 18px;
}

.sbx-layer #main_search_box.sbx .sbx-close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--sbx-navy);
  font: 30px/1 Arial, sans-serif;
  cursor: pointer;
}

/* The cruise-only box's own heading repeats the dialog's. */
.sbx-layer #main_search_box.sbx .sbx-h {
  display: none;
}

/* Larger text in the dialog. Every field keeps one height: 32px, or 38px on a touch screen (the
   pointer: coarse rule above). */
.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .multiselect__tags,
.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker {
  font-size: 15px;
}

.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker input,
.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-date-picker input::placeholder {
  font-size: 15px;
}

.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-form-wrapper .od-input-wrapper input.od-input-box {
  font-size: 15px;
}

.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .destination-type-radio label,
.sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-checkbox-label {
  font-size: 15px;
}

/* Phones: the Search button stays in reach at the bottom of the screen. */
@media (width <= 767px) {
  .sbx-layer #main_search_box.sbx .swiftCruiseSearch #OVExploreContainer .od-search-button {
    position: sticky;
    bottom: 0;
    z-index: 25;
    margin: 0 -14px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--sbx-panel);
  }
}

/* Tablets: a centered panel over the dimmed page. */
@media (768px <= width <= 1218px) {
  .sbx-layer {
    padding: 40px 16px;
    background: rgb(10 30 50 / 45%);
  }

  .sbx-layer #main_search_box.sbx {
    max-width: 480px !important;
    margin: 0 auto !important;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  }

  .sbx-layer #main_search_box.sbx .sbx-dialog-head {
    border-radius: 10px 10px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbx-layer {
    scroll-behavior: auto;
  }
}

/* Hotel Only: Odysseus's hotel form. deals_search_box.css styles it through
   div.swiftHotelSearch #odysseus #OVExploreContainer ..., so these rules go through
   #odysseus #OVExploreContainer as well. */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer label,
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .widget-label {
  /* deals_search_box.css sets these white with !important for the old gray panel. */
  color: var(--sbx-ink) !important;
  font-size: 13px;
  font-weight: bold;
}

/* Only the boxes Odysseus draws as fields: not the search input inside a dropdown (a thin line
   when closed, a box when open) or the input inside the date box (a box within the box). */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .multiselect__tags,
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-date-picker {
  /* No background here: Odysseus paints the white on a wrapper underneath, and a white field
     would cover each field's icon (a pin, a star, a globe), which sits behind it. */
  border-color: var(--sbx-field);
  border-radius: 4px;
}

/* Odysseus paints each dropdown's white on a square wrapper; rounding it keeps its corners from
   showing outside the field's. */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .multiselect_input_wrapper {
  border-radius: 4px;
}

/* Destination is two fields joined (Any and Select Destination): square where they meet, so they
   read as one field split by a single line. */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .attached-location-type,
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .attached-location-type .multiselect__tags {
  border-radius: 4px 0 0 4px;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-location-select {
  border-radius: 0 4px 4px 0;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-location-select > .location-select {
  border-radius: 0 3px 3px 0;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-date-picker input,
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .multiselect__input {
  border: 0;
  background-color: transparent;
}

/* Share and Reset (links styled as square icon buttons, their icons white): navy squares
   instead of the old gray. deals_search_box.css sets their hover with !important. */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-reset-btn-wrapper a.od-reset {
  border: 0;
  border-radius: 4px;
  background-color: var(--sbx-navy) !important;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-reset-btn-wrapper a.od-reset:hover {
  background-color: var(--sbx-navy-dark) !important;
}

/* The destination and passenger pickers draw their own boxes (the destination's corners are set
   with Any, above). */
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-location-select,
#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-pax-picker .pax-count-input {
  border-color: var(--sbx-field);
  background: #fff;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-pax-picker .pax-count-input {
  border-radius: 4px;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-search-button .btn-search {
  border: 0;
  border-radius: 4px;
  background: var(--sbx-red);
  color: #fff;
  font-weight: bold;
}

#main_search_box.sbx .swiftHotelSearch #odysseus #OVExploreContainer .od-search-button .btn-search span {
  color: #fff;
}

#main_search_box.sbx .swiftHotelSearch a#hotelSearchHelpLink {
  color: var(--sbx-navy);
}

/* The Flight + Hotel halves' fields fill them (see .side_to_side_section above); here, after the
   general #land_result field rules they outrank. */

#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set .select_span,
#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set select,
#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set input {
  box-sizing: border-box;
  width: 100%;
}

#main_search_box.sbx #land_result #travImpForm .side_to_side_section .set input {
  height: 29px;
}

/* The date box's text at the dropdowns' indent and color (see the placeholder rule above);
   Odysseus's theme reaches it through #odysseus, so this does too. */
#main_search_box.sbx .swiftCruiseSearch #odysseus #OVExploreContainer .od-date-picker input {
  padding-left: 10px;
  color: #444;
}