/* ODY SEARCH 04 CSS */

  :root {
    --option4-input-border-color: #fff;
    --option4-dropdown-ul-border-color: #e8ebf3;
    --option4-dropdown-li-bg-color: #e8ebf3;
    --option4-dropdown-ul-bg-color: #ebe8fb;
    --option4-itineraries-color: #011e3c;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform {
    background: url('https://cruiseclub.co/wp-content/uploads/2025/03/hero_royal-caribbean_1920x600.jpg') 
              no-repeat center center;
    background-size: cover;
    padding: 0;
    font-family: 'Roboto';
    position: relative;
  }

  /* OVExplore4 – Disable background overlay mask */
   #option-four #odysseus #OVExploreContainer .cruiseform::after {
   display: none !important;
   }


  #option-four #odysseus #OVExploreContainer .cruiseform .od-wrapper { padding: 0 0px; }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__tags {
    padding: 11px 10px 0 35px;
    border: 0;
  }

  #option-four #odysseus #OVExploreContainer .vue_multiselect.destinationId .multiselect_input_wrapper {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper { position: relative; z-index: 1; }


  #option-four #odysseus #OVExploreContainer .vue_multiselect .od-location-select .location-select,
  #option-four #odysseus #OVExploreContainer .vue_multiselect .od-location-select .pax-count-input,
  #option-four #odysseus #OVExploreContainer .vue_multiselect .od-pax-picker .location-select,
  #option-four #odysseus #OVExploreContainer .vue_multiselect .od-pax-picker .pax-count-input {
    border: 1px solid;
  }

  #option-four #odysseus #OVExploreContainer .od-input-wrapper .od-date-picker { border-left: none; }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper.departurePortCode .multiselect_input_wrapper .multiselect__tags {
    border-left: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #option-four #odysseus #OVExploreContainer .vue_multiselect .multiselect__select:before {
    border: none;
    content: "\f107";
    font: normal normal normal 16px/1 FontAwesome;
    color: #000;
    top: 25%;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper {
    min-width: 16.66%;
    max-width: 16.66%;
    padding: 4px 0;
  }

/* OVExplore4 – Vertically center the built-in icons */

#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper {
  position: relative; /* anchor for absolute icon */
}

#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper .od-icon {
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 14px;              /* keep your horizontal position */
  padding: 0 !important;    /* remove padding that can offset centering */
}

#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper .od-icon {
  transform: translateY(calc(-50% + 1px)) !important;
}


  #option-four #odysseus #OVExploreContainer .od-tab-form-wrapper .od-form-wrapper .od-input-wrapper .od-icon svg {
    color: var(--secondary-color);
    fill: var(--secondary-color);
  }

  #option-four #odysseus #OVExploreContainer .od-tab-form-wrapper .od-form-wrapper {
    z-index: auto !important;
    position: relative;
  }


  #option-four #odysseus #OVExploreContainer .od-tab-form-wrapper .od-form-wrapper .od-button-wrapper.od-search-button .btn-search {
    font-size: 16px;
    font-weight: 600;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    padding: 15px;
    border-radius: 7px;
  }

  #option-four #odysseus #OVExploreContainer .od-tab-form-wrapper .od-form-wrapper .od-reset-btn-wrapper .reset {
    width: 48px;
    height: 48px;
    margin-left: auto;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 7px;
  }

  #option-four #odysseus #OVExploreContainer .od-main-button-wrapper {
    width: auto;
    margin-top: 20px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .destination-type-radio {
    margin: 0;
    padding: 0 30px;
  }

  #option-four #odysseus #OVExploreContainer .od-main-button-wrapper .od-button-wrapper:not(.od-search-button) { display: none; }

  @media (max-width: 767px) {
    #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper {
      min-width: 100%;
      max-width: 500px;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper {
      min-width: 50%;
      max-width: 50%;
    }
  }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__spinner:after,
  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__spinner:before {
    border-color: var(--text-color) transparent transparent;
  }

  #option-four #odysseus #OVExploreContainer .vue_multiselect.cruiselineId .multiselect_input_wrapper {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__single { font-weight: 500; }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__single span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 95%;
  }

  #option-four #odysseus #OVExploreContainer #cruise .cruiseform .itineraties-found span {
    color: var(--option4-itineraries-color);
    font-weight: 500;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .multiselect_input_wrapper .od-multiselect .multiselect__content-wrapper {
    border-color: var(--option4-dropdown-ul-bg-color);
    box-shadow: 2px 2px 38px 0px var(--option4-dropdown-ul-border-color);
    border-radius: 10px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .multiselect_input_wrapper .od-multiselect .multiselect__content-wrapper .multiselect__content {
    padding: 5px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .multiselect_input_wrapper .od-multiselect .multiselect__content-wrapper .multiselect__content .multiselect__element {
    background: var(--option4-dropdown-li-bg-color);
    border-radius: 10px;
    margin-bottom: 5px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .multiselect_input_wrapper .od-multiselect .multiselect__content-wrapper .multiselect__content .multiselect__element .multiselect__option--highlight {
    background: var(--secondary-color);
    color: #FFF;
    border-radius: 10px;
  }

  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .multiselect_input_wrapper .od-multiselect .multiselect__content-wrapper .multiselect__content .multiselect__element .multiselect__option--selected {
    background: var(--secondary-color);
    color: var(--text-color);
  }


  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__tags .multiselect__placeholder {
    font-family: 'Roboto', sans-serif !important;
	font-weight: 400;
    padding-top: 0;
    font-size: 18px;
    color: var(--text-color);
  }

  
  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.multiselect--active) { z-index: 9999; }


  #option-four #odysseus #OVExploreContainer .vue_multiselect:not(:last-child) .multiselect_input_wrapper .multiselect__tags {
    border-right: transparent;
  }

  #option-four #odysseus #OVExploreContainer .od-tab-form-wrapper .od-form-wrapper .od-reset-btn-wrapper .reset .od-icon > svg {
    width: 18px;
    height: 18px;
  }

  #option-four #odysseus #OVExploreContainer .vue_multiselect .multiselect_input_wrapper {
    background-color: #fff;
    border-right: 1px solid #c0c0c0;
  }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .multiselect__select { display: none; }

  @media (min-width: 768px) and (max-width: 1024px) {
    #option-four #odysseus #OVExploreContainer .vue_multiselect .multiselect_input_wrapper { border-radius: 10px; }
    #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper { padding: 4px 8px; }
    #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper .od-icon { left: 20px; }
  }

  @media (max-width: 767px) {
    #option-four #odysseus #OVExploreContainer .vue_multiselect .multiselect_input_wrapper {
      border-radius: 10px;
      border: 1px solid var(--option4-input-border-color);
    }
  }


/* =========================================================
   OVExplore4 – FINAL OVERRIDES (put at very bottom)
   2 rows × 3 fields + exact order
   ========================================================= */


/* 3 columns on desktop */
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Force each field wrapper to 1/3 width */
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper{
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
  min-width: 33.3333% !important;
  box-sizing: border-box !important;
}

/* Make sure the control inside fills the column */
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper > div{
  width: 100% !important;
}

/* --- Exact order (targets the inner wrapper which usually has the field class) --- */
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.destinationId){ order: 1 !important; }
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.sailingDate){ order: 2 !important; }
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.duration){ order: 3 !important; }

#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.departurePortCode){ order: 4 !important; }
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.cruiselineId){ order: 5 !important; }
#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper:has(.shipId){ order: 6 !important; }

/* Tablet: 2 per row */
@media (max-width: 1024px){
  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 767px){
  #option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* =========================================================
   OVExplore4 – FINAL POLISH OVERRIDES (do not delete old CSS)
   Purpose:
   1) Force consistent border radius on ALL fields
   2) Neutralize old "only-first/last corner" radius rules
   3) Make spacing/borders look clean in a 2x3 grid
   ========================================================= */

#option-four #odysseus #OVExploreContainer .cruiseform .od-form-wrapper .od-input-wrapper {
  padding: 8px !important;              /* creates breathing room between fields */
}

/* 1) Uniform rounded corners for every field shell */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.vue_multiselect .multiselect_input_wrapper,
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.od-date-picker,
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.od-input-box {
  border-radius: 10px !important;
}

/* 2) “Deactivate” the old corner-only radius behavior by forcing all corners */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.vue_multiselect .multiselect_input_wrapper {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
}

/* 3) Make borders consistent and eliminate weird seams */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.vue_multiselect .multiselect_input_wrapper {
  border: 1px solid #c0c0c0 !important;
  background: #fff !important;
}

/* Some options add a right-border; turn it off so the box border is clean */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.vue_multiselect .multiselect_input_wrapper {
  border-right: 1px solid #c0c0c0 !important;
}

/* 4) Hover polish */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.vue_multiselect .multiselect_input_wrapper:hover,
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.od-date-picker:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* 5) Focus polish (keyboard + click) */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.multiselect__tags:focus-within,
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.od-input-box:focus-within {
  box-shadow: 0 0 0 3px rgba(5,89,156,0.25) !important;
}

/* 6) Make sure the inner controls fill the rounded container */
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.multiselect__tags,
#option-four #odysseus #OVExploreContainer
.cruiseform .od-form-wrapper
.od-input-box {
  border: 0 !important;
}


/* OVExplore4 – Increase icon size inside dropdowns */
#option-four #odysseus #OVExploreContainer .cruiseform 
.od-form-wrapper .od-input-wrapper .od-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* Add a touch more breathing room for text */
#option-four #odysseus #OVExploreContainer 
.cruiseform .od-form-wrapper .multiselect__tags {
  padding-left: 42px !important;
}


/* =========================================================
   OVExplore4 – Align Sailings block with buttons + respect padding
   ========================================================= */

/* Give the main area the same side padding as your form fields */
#option-four #odysseus #OVExploreContainer .od-main-wrapper{
  padding-left: 0px !important;
  padding-right: 0px !important;
  box-sizing: border-box !important;
}

/* Make results + buttons capable of sharing a row */
#option-four #odysseus #OVExploreContainer .od-main-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Results: stop centering, align right, don't force full-width */
#option-four #odysseus #OVExploreContainer .od-results-wrapper{
  width: auto !important;
  text-align: right !important;
  margin: 10px 12px 0 0 !important;
  order: 1 !important;
}

/* Buttons: keep right aligned AND respect padding */
#option-four #odysseus #OVExploreContainer .od-main-button-wrapper{
  width: auto !important;
  margin-top: 10px !important;
  margin-left: auto !important;    /* pushes button group to the right */
  order: 2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0px !important;
}

/* =========================================================
   OVExplore4 – FIX: dropdowns not opening / not clickable
   ========================================================= */

/* 1) Ensure the dark overlay never blocks clicks */
#option-four #odysseus #OVExploreContainer .cruiseform::after{
  pointer-events: none !important;
}

/* 2) Do NOT clip the dropdown list (rounded corners often adds overflow:hidden somewhere) */
#option-four #odysseus #OVExploreContainer .multiselect_input_wrapper,
#option-four #odysseus #OVExploreContainer .od-input-wrapper,
#option-four #odysseus #OVExploreContainer .od-form-wrapper{
  overflow: visible !important;
}

/* 3) Make sure the dropdown list sits above everything */
#option-four #odysseus #OVExploreContainer .multiselect__content-wrapper{
  z-index: 10000 !important;
}

/* OVExplore4 – Dropdowns MUST be visible and clickable */
#option-four #odysseus #OVExploreContainer .vue_multiselect .multiselect_input_wrapper{
  overflow: visible !important;
}

/* OVExplore4 – Right-align “itineraries” next to the buttons */
#option-four #odysseus #OVExploreContainer .od-main-wrapper{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;  /* pushes everything to the right */
  gap: 20px !important;
}

/* Make sure the counts sit immediately left of the buttons */
#option-four #odysseus #OVExploreContainer .od-main-wrapper .itineraries{
  order: 1 !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Buttons to the right, no auto margins fighting the layout */
#option-four #odysseus #OVExploreContainer .od-main-wrapper .od-main-button-wrapper{
  order: 2 !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}

/* OVExplore4 – Hide Sailings count */ #option-four #odysseus #OVExploreContainer .total-itineraries { display: none !important; }


/* OVExplore4 – Selected value styling */
#option-four #odysseus #OVExploreContainer 
.multiselect__single {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: #011e3c !important;
}

/* OVExplore4 – Selected value styling */
#option-four #odysseus #OVExploreContainer 
.multiselect__tags {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* OVExplore4 – Selected value styling */
#option-four #odysseus #OVExploreContainer 
.multiselect__option {
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* STEP 2: Remove background color from the form’s parent wrapper */
#option-four #odysseus #OVExploreContainer .od-tab-form-wrapper {
  background: transparent !important;
}

/* =========================================================
   OVExplore4 – Right align itineraries + buttons (desktop/tablet)
   Center on mobile
   ========================================================= */

/* Put these two at the end of the flex flow (in case order matters) */
#option-four #odysseus #OVExploreContainer .od-form-wrapper .itineraries{
  order: 500 !important;
  margin-left: auto !important;     /* <-- this is the key */
  width: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#option-four #odysseus #OVExploreContainer .od-form-wrapper .od-main-button-wrapper{
  order: 501 !important;
  margin-left: 10px !important;     /* small gap between itineraries and buttons */
  width: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Mobile: center the whole group */
@media (max-width: 767px){
  #option-four #odysseus #OVExploreContainer .od-form-wrapper .itineraries{
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  #option-four #odysseus #OVExploreContainer .od-form-wrapper .od-main-button-wrapper{
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Mobile: tighten spacing between dropdowns */
@media (max-width: 767px){
  #option-four #odysseus #OVExploreContainer 
  .cruiseform .od-form-wrapper .od-input-wrapper{
    padding-top: 5px !important;
    padding-bottom: 5px !important; /* ≈ 10px total gap */
  }
}

/* Mobile: add breathing room between itineraries and buttons */
@media (max-width: 767px){
  #option-four #odysseus #OVExploreContainer 
  .od-form-wrapper .itineraries{
    margin-bottom: 10px !important; /* use 10–15px as you prefer */
  }
}

/* OVExplore4 – Emphasize Sailings / Itineraries number */
#option-four #odysseus #OVExploreContainer .number{
  font-family: 'Roboto', sans-serif !important;
  font-size: 22px !important;   /* adjust to taste (17–20px works well) */
  font-weight: 600 !important;
  color: #800020 !important;    /* burgundy */
  line-height: 1 !important;
}



/* =========================================================
   Cruise vs Offer toggle + Offer form
   (append this AFTER your working OLD SEARCH CSS)
   ========================================================= */

/* Radio row */
#option-four .cc-search-mode{
  display:flex;
  justify-content:flex-start !important;
  align-items:center;
  gap:16px;
  margin:0 0 5px;
  padding:20px 0 0 10px;
  font-family:'Roboto', sans-serif;
}

@media (max-width:480px){
  #option-four .cc-search-mode{ flex-wrap:wrap; }
}

#option-four .cc-search-mode .cc-mode-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:600;
  color:#011e3c;
  cursor:pointer;
  user-select:none;
}

#option-four .cc-search-mode input[type="radio"]{
  width:16px;
  height:16px;
  accent-color:#05599c;
  cursor:pointer;
}

/* Offer form */
.cc-offer-lookup { max-width:520px; width:100%; }
.cc-offer-row { display:flex; gap:10px; align-items:stretch; }

.cc-offer-row input{
  flex:1;
  min-width:0;
  height:48px;
  padding:10px 2px 12px 14px; /* Top Right Bottom Left */
  margin:10px 0 20px 10px;
  border:1px solid #05599c;
  border-radius:7px;
  font-size:18px;
  font-weight:400;
  color:#000000;
  line-height:1.2;
  outline:none;
}

.cc-offer-row input:focus{ border-color:rgba(0,0,0,.35); }

.cc-offer-btn{
  height:44px;
  padding:0 14px;
  margin:12px 0 0px 0px;
  border:0;
  border-radius:12px;
  font-weight:800;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  background-color:#05599c;
  color:#fff;
}

.cc-offer-btn:hover{ background-color:#044a83; }

.cc-offer-btn:focus{
  outline:2px solid rgba(5,89,156,.4);
  outline-offset:2px;
}

@media (max-width:520px){
  .cc-offer-row{ flex-direction:column; }
  .cc-offer-btn{ width:100%; }
}


/* =========================================================
   Offer Lookup – Inline message + button spinner
   ========================================================= */

/* RETURN ERROR MESSAGE IF OFFER ID OR CRUISEID IS NOT FOUND */
#option-four .cc-offer-msg{
  display:none;
  margin: -10px 0 20px 10px; /* aligns with your input left margin */
  font-size:14px;
  font-weight:600;
  line-height:1.3;
}

#option-four .cc-offer-msg.is-error{ color:#b00020; }
#option-four .cc-offer-msg.is-success{ color:#0a7a2f; }

/* Spinner + loading state on the Search button */
#option-four .cc-offer-btn.is-loading{
  opacity:.85;
  cursor:not-allowed;
  pointer-events:none;
  position:relative;
}

/* Spinner icon (uses your button's white text color look) */
#option-four .cc-offer-btn.is-loading::before{
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:rgba(255,255,255,1);
  border-radius:50%;
  animation: ccOfferSpin .8s linear infinite;
}

@keyframes ccOfferSpin { to { transform: rotate(360deg); } }