/* Optional: make any "container-fluid" act like  centered container */
.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px;
}

.header-settings {
    display: none !important;
}





/* Dots (optional modern style — small color dot indicator) */
[data-ody-id="ProgressStepperBar"] .checkout-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    background-color: #1f82e6; /* light gray by default */
}



/* Optional: make entire step "bold" when current */
[data-ody-id="ProgressStepperBar"] .checkout-step.current .checkout-step-inner span {
    color: #ffffff; /* CruiseHub red */
}



[data-ody-id="BreadcrumbSection"] {
    background-color: transparent !important;  /* fully transparent */
    box-shadow: none !important;               /* just in case */
    border: none !important;                   /* just in case */
}



span.flex-spacer.text-right {
    display: none !important;
}


.checkout-steps-wrap {
    margin-bottom: 10px !important;
}


.card {
    border: 1px solid #e0e0e0 !important; /* thin light grey border */
    border-radius: 18px !important; /* optional: modern rounded corners */
    background-color: #ffffff !important; /* white background */
    box-shadow: none !important; /* optional: removes any existing shadow */
}



fieldset.ng-star-inserted {
    border: 1px solid #e0e0e0 !important; /* light grey thin border */
    border-radius: 18px !important;       /* modern rounded corners */
    background-color: #ffffff !important; /* clean white background */
    padding: 16px !important;             /* inner spacing */
    margin-bottom: 16px !important;       /* spacing under the fieldset */
    box-shadow: none !important;          /* no shadow for clean look */
}




/* Example: hide NRD, OBC, WIFI, BOGO, SR */
.filter-item:has(.promo-code.promo-NRD),
.filter-item:has(.promo-code.promo-RETREAT),
.filter-item:has(.promo-code.promo-DISCOUNT),
.filter-item:has(.promo-code.promo-BEV),
.filter-item:has(.promo-code.promo-OBC),
.filter-item:has(.promo-code.promo-WIFI),
.filter-item:has(.promo-code.promo-BOGO),
.filter-item:has(.promo-code.promo-SR) {
    display: none !important;
}

/* Same for li */
li:has(.promo-code.promo-NRD),
li:has(.promo-code.promo-DISCOUNT),
li:has(.promo-code.promo-RETREAT),
li:has(.promo-code.promo-BEV),
li:has(.promo-code.promo-OBC),
li:has(.promo-code.promo-WIFI),
li:has(.promo-code.promo-BOGO),
li:has(.promo-code.promo-SR) {
    display: none !important;
}

/* Same for cruise-promotions-component */
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-NRD),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-RETREAT),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-DISCOUNT),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-BEV),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-OBC),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-WIFI),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-BOGO),
cruise-promotions-component .d-inline-flex.align-middle:has(.promo-code.promo-SR) {
    display: none !important;
}




.custom-modifysearchtext {
    display: none !important;
}


.cruise-sailing-dates-container table,
.cruise-sailing-dates-container thead,
.cruise-sailing-dates-container tbody,
.cruise-sailing-dates-container tr,
.cruise-sailing-dates-container td,
.cruise-sailing-dates-container th {
    background-color: #ffffff !important;
}

.odi-video-camera,
.odi-virtual-360-o {
    display: none !important;
}


[data-ody-id="LabelCheckUncheckAll"] {
    margin-right: 10px !important;
}




/* Base Filter Container */
.filter-container {
  font-family: 'Inter', sans-serif;
  color: #002868;
  padding: 12px;
  background-color: #ffffff;
  border-radius: 12px;
}

/* Filter Headings */
.filter-container h5,
.filter-container .filter-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #002868;
}

/* Section Titles (like 'Departure Port') */
.filter-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 20px 0 8px 0;
  color: #002868;
}

.filter-container {
    padding: 4px !important; /* Instead of 8px */
}


/* Optional: section dividers */
.filter-container hr {
  border: none;
  border-top: 1px solid #ffffff;
  margin: 20px 0;
}


/* Hide all filter sections except Departure Port, Cruise Ship, Price Per Person, and Bonus Offers */
.filter-panel .card:not(.filter-departure-port):not(.filter-cruise-ship):not(.filter-price-person) {
  display: none !important;
}

/* Ensure desired filters are open by default */
.filter-departure-port .collapse,
.filter-cruise-ship .collapse,
.filter-price-person .collapse {
  display: block !important;
}


/* Optional hover and active styling */
.filter-panel .card-heading:hover {
  background-color: #ffffff;
}

.filter-panel .panel-title {
  font-weight: 600;
  font-size: 15px;
}




.cruiseline-name {
    display: none !important;
}

.cruise-lowest-prices {
    visibility: hidden !important;
}


.search-bar-section {
    background-color: #ffffff !important; /* white background */
    color: #002868 !important; /* CruiseHub blue text */
}

.search-bar-section * {
    color: #002868 !important; /* force all child text to CruiseHub blue */
}






/* Container */
.form-group {
    position: relative;
    margin-bottom: 10px;
    background-color: #ffffff;
}




[data-ody-id="ItinerariesAndSailingsCountsContainer"] {
    display: none !important;
}



.search-departureport-line,
.search-cruise-ship {
    display: none !important;
}




div.container-fluid.main-container.loader-wrapper.skeleton-loader.ng-star-inserted {
    background-color: #ffffff !important;
}




@media (min-width: 768px) {

.section-initial-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px; 
    gap: 10px; /* optional: nice spacing between fields */
}

}


@media (min-width: 768px) {
/* Parent grid: spacing tighter, larger field widths */
.section-initial-search .row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* spacing between fields */
}

}


/* Force all field containers same size */
.section-initial-search .form-group {
    flex: 1 1 22%; /* 4 in a row desktop */
    min-width: 200px;
}



    /* Select2 dropdown fields: Destination, Length, Cruise Line */

@media (min-width: 768px) {

    /* Select2 dropdown fields: Destination, Length, Cruise Line */
    .section-initial-search .select2-container--default {
        background-color: #ffffff;
        border: 1px solid #6d6d6d !important;
        border-radius: 8px;
        padding: 6px 12px;
        min-height: 40px;
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        box-shadow: none;
        transition: border-color 0.2s ease;
        width: 100% !important;
    }
}



@media (min-width: 768px) {
    .section-initial-search .select2-selection--multiple .select2-selection__rendered {
    flex-wrap: nowrap; /* prevent wrapping to new lines */
    overflow: hidden;
    white-space: nowrap;
    height: 38px
}

}



@media (min-width: 768px) {
    /* Sailing Dates (datepicker field) */
    .section-initial-search .form-group .relative .custom-datepicker {
        background-color: #ffffff;
        border: 1px solid #6d6d6d;
        border-radius: 8px;
        padding: 4px 12px; /* MATCH Select2 */
        min-height: 40px; /* MATCH Select2 */
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* ensure text starts same as Select2 */
        box-shadow: none;
        transition: border-color 0.2s ease;
        width: 100%;
    }
    }



@media (min-width: 768px) {
.section-initial-search .form-group .relative .custom-datepicker input.custom-datepicker-input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 1.5; /* force line height to match Select2 */
    height: auto; /* let it flex naturally */
    display: flex;
    align-items: center;
}
}




/* Optional: Responsive tweak */
@media (max-width: 1024px) {
    .section-initial-search .form-group {
        flex: 1 1 30%; /* 3 in row for tablet */
    }
}

@media (max-width: 768px) {
    .section-initial-search .form-group {
        flex: 1 1 48%; /* 2 per row for mobile */
    }
}

@media (max-width: 480px) {
    .section-initial-search .form-group {
        flex: 1 1 100%; /* 1 per row for small screens */
    }
}



[data-ody-id="FilterContainerButton"] {
    padding: 0 !important;
    margin-top: 0 !important; /* also removes the mt-2 */
    margin-bottom: 8px;
}

.filter-container {
    padding: 0 !important;
}


.container-fluid.main-container.loader-wrapper.skeleton-loader.ng-star-inserted {
    background-color: #ffffff !important;
}


@media (min-width: 768px) {
.cruise-item-card {
    border: 1px solid #e0e0e0; /* light grey modern border */
    border-radius: 12px; /* modern rounded corners */
    background-color: #ffffff; /* clean white */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* subtle modern shadow */
    overflow: hidden; /* clips child corners */
}

}




@media (min-width: 768px) {
.cruise-offers-list {
    border-radius: 12px;
    border: 1px solid #cbcccd;
    background-color: #f1f1f1;
    padding: 16px;
}
}

@media (min-width: 768px) {
.cruise-offers-list ul {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
}

body {
    background-color: white !important;
}



/* Hide the view toggle buttons */
.cruise-list-view {
    display: none !important;
}



.sort-by-section {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 2px !important;
}


/* === MAIN OUTER FLEX: 2-column layout === */
.sort-by-section .d-flex {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 2px !important;  /* small left/right padding */
}

/* === Sailings Found to LEFT === */
.sort-by-section [data-ody-id="TotalFacetSailingFound"] {
    order: -1;
    margin-right: auto;
}

/* === Sort-by-component: lock as FLEX ROW, NO WRAP === */
.sort-by-section sort-by-component {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;  /* align button + dropdown bottom */
    gap: 4px;  /* space between dropdown + button (adjust if needed) */
}

/* === Sort-by-control: FLEX COLUMN for label + dropdown === */
.sort-by-section .sort-by-control {
    display: flex !important;  /* DO NOT use inline-flex */
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* === Sort-by label style === */
.sort-by-section .sort-by-control label {
    font-size: 0.75rem !important;
    margin-bottom: 4px !important;
    color: #333;
}

/* === Sort button wrapper (LblSorthByBotton): clean alignment === */
.sort-by-section [data-ody-id="LblSorthByBotton"] {
    display: flex !important;
    align-self: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;  /* NO manual margins — let gap handle it */
}

/* === Sort button inside: kill ml-2 === */
.sort-by-section [data-ody-id="LblSorthByBotton"] .btn-icon {
    margin-left: 0 !important;
}

/* === View toggle buttons: align to bottom, space from Sort button === */
.sort-by-section .cruise-list-view {
    align-self: flex-end !important;
    margin-left: 8px !important;
}

/* === View toggle buttons themselves: space between buttons === */
.sort-by-section .cruise-list-view button {
    margin-left: 4px;
}


/* Align the SHARE BUTTON (far right button) to bottom */
.sort-by-section > .d-flex > .btn-icon {
    align-self: flex-end !important;
    margin-left: 8px;  /* Optional — small space from Sort section */
}






[data-ody-id="ResultsItineraryCount"] {
    display: none !important;
}




/* === CruiseHub Sidebar (Expedia style) === */

/* Remove card styling */
.filters-section .card,
.filters-section .card-heading,
.filters-section .panel-body {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: white !important;
    padding: 0 !important;
}

/* Remove separator lines and borders on panel titles */
.filters-section .panel-title {
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    color: #002868 !important; /* CruiseHub dark blue */
    font-size: 14px !important;
    background-color: transparent !important;
}

/* Flatten button styling */
.filters-section .btn {
    border-radius: 4px !important;
    box-shadow: none !important;
    border: 1px solid #002868 !important; /* CruiseHub blue border */
    color: #002868 !important;
    font-size: 12px !important;
    padding: 4px 4px !important;
    background-color: white !important;
}

/* Remove background on filter items */
.filters-section .filter-container {
    background-color: white !important;
    padding: 4px 6px !important;
}






/* Label text */
.filters-section .custom-control-label {
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1 !important;
}

/* Optional: tighten up spacing */
.filters-section .filter-item {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
}

/* Optional: refine search input */
.filters-section input.search-box {
    border-radius: 4px !important;
    border: 1px solid #cbcccd !important; /* CruiseHub light gray */
    font-size: 12px !important;
    color: #333 !important;
}




div[data-ody-id="searchQuery"].search-filter {
    padding: 4px !important;
    margin: 4px 4px 0 0 !important;
}


@media (min-width: 768px) {

/* Make the parent a flex row */
.section-initial-search {
    display: flex;
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    justify-content: space-between; /* space them out evenly */
    gap: 8px; /* modern spacing between fields */
    align-items: flex-end; /* align fields nicely */
}
}

@media (min-width: 768px) {
/* Target the 4 fields (all form-group children) */
.section-initial-search > .form-group {
    flex: 1 1 24%; /* 4 fields per row (about 22% with gap) */
    max-width: 24%;
    box-sizing: border-box;
    min-width: 200px; /* optional: ensures fields don’t get too small */
}

}








.panel-icon {
  color: #5a6b8a !important; /* muted navy/gray-blue */
}



.section-initial-search .form-group .form-control.custom-datepicker {
    height: 53px !important;
}






/* Remove borders and shadows from filter section */
.filters-section,
.filters-section .card,
.filters-section .card-heading,
.filters-section .panel-body {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important; /* optional: make background transparent if needed */
}

/* Optional: also remove inner padding if you want super clean look */
.filters-section .card,
.filters-section .card-heading,
.filters-section .panel-body {
    padding: 0 !important;
}




.filters-section .filter-item {
    margin: 0 !important;
}


.filters-section .filter-container {
    padding: 0 !important;
}



@media (min-width: 768px) {
.card-image .embed-responsive {
    padding-bottom: 40% !important; /* wider than 16:9 */
}
}


@media (min-width: 768px) {
.card-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #ffffff;
}
}


.list-view .cruise-item .cruise-prices {
    display: block !important;
    height: auto !important;
    min-height: unset !important;
    margin-bottom: 1px;
    box-sizing: border-box;
}



.cruise-low-price {
    font-size: 28px;
    font-weight: bold;
    color: #002868;
}

@media (max-width: 768px) {
    .cruise-low-price {
        font-size: 22px;
    }
}



[data-ody-id="PortsOfCallDisclaimer"] {
    display: none !important;
}



label.custom-checkbox:has(input[data-ody-id="includeInternalCruiselines"]) {
    display: none !important;
}





/* Make table container rounded with light border */
.cruise-sailing-dates-container {
    border: 1px solid #e0e0e0; /* light grey border */
    border-radius: 12px; /* rounded corners */
    overflow: hidden; /* clip inner content */
    background-color: #ffffff;
    padding: 0;
    margin-bottom: 16px;
}




.filters-section .custom-checkbox {
    background-color: #FFFFFF !important;
}

.filters-section .custom-checkbox .custom-control-label {
    background-color: #FFFFFF !important;
}







/* Table styling */
.cruise-sailing-dates-container table {
    background-color: #ffffff;
}

/* Header */
.cruise-sailing-dates-container thead {
    background-color: #f9f9f9;
    border-bottom: 0px solid #e0e0e0;
    box-shadow: none !important;
}

.cruise-sailing-dates-container thead th {
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* Row dividers */
.cruise-sailing-dates-container tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

/* No border after last row */
.cruise-sailing-dates-container tbody tr:last-child {
    border-bottom: none;
}


/* Cell padding */
.cruise-sailing-dates-container td {
    padding: 10px 8px;
    background-color: #ffffff;
    vertical-align: middle;
    text-align: center;
}

/* Sailing info buttons aligned left */
.cruise-sailing-dates-container td.sailing-info-cell {
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
}

/* Lowest price styling */
.cruise-sailing-dates-container .lowest-sailing-price {
    font-weight: bold;
    color: #002868;
}



[data-ody-id="DestinationTypesAndCountsContainer"] {
    display: none !important;
}




.section-initial-search .select2-selection--multiple {
    overflow: hidden;
    height: 38px
}

.select2-selection {
    border: 5px solid #aaa;
    border-radius: 4px;
}

span.select2-container--default span.select2-selection--single {
    border: 1px solid #cbcccd !important; /* CruiseHub light gray */
    border-radius: 8px !important; /* optional rounded corners */
    box-shadow: none !important; /* remove unwanted shadows */
}














div.sort-by-section.card {
    margin-bottom: 0 !important;
}



/* Style for Check All / Apply buttons */
[data-ody-id="FilterContainerButton"] button {
    padding: 8px 10px; /* bigger click area */
    font-size: 14px;
    font-weight: 600;
    color: #002868; /* CruiseHub blue text */
    border: 2px solid #002868; /* thicker border */
    border-radius: 6px; /* rounded corners */
    background-color: #ffffff; /* white background */
    transition: all 0.2s ease;
    margin-right: 8px; /* spacing between buttons */
    cursor: pointer;
}

/* Hover state */
[data-ody-id="FilterContainerButton"] button:hover {
    background-color: #002868; /* CruiseHub blue background */
    color: #ffffff; /* white text */
    border-color: #002868;
}

/* Optional: pressed state */
[data-ody-id="FilterContainerButton"] button:active {
    background-color: #bf0a30; /* CruiseHub red when clicked */
    border-color: #bf0a30;
    color: #ffffff;
}





.custom-results-banner {
    background-color: #012c54;
    color: #ffffff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    flex-wrap: wrap;
}

.custom-banner-image {
    height: 70px;
    margin-right: 16px;
}

.custom-banner-text {
    flex: 1;
    margin-right: 16px;
}

.custom-banner-button {
    background-color: #ffffff;
    color: #012c54;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}





/* Modernize the Search button */





[data-ody-id="SearchButton"] i {
    color: #fff !important;
}



[data-ody-id="SearchButton"] {
    background-color: #012c54 !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}


[data-ody-id="SearchButton"] span {
    color: white !important;
}


[data-ody-id="SearchButton"]:active {
    background-color: #012c54 !important;
}


/* Make ALL icons this new color */
.odi {
    color: #02396c !important;
}

.cruise-tax-inclusive {
    color: #bf0a30 !important;
}


/* Change Lowest Price border to CruiseHub red */
.lowest-sailing-price {
    border-color: #bf0a30 !important;  /* CruiseHub red */
}

[data-ody-id="TotalFacetSailingCount"] {
    color: #bf0a30 !important;
}


[data-ody-id="ShowMoreLessButton"] {
    color: #bf0a30 !important;
}


[data-ody-id="CruiseOffersListContainer"] ul.list li:nth-child(n+4) {
    display: none !important;
}


td[data-ody-id="RulesIocn"] .rules-list-view:nth-child(n+4) {
    display: none !important;
}


/* Heading on Booking Page */
[data-ody-id="CruiseBookingHeading"] .text-primary,
[data-ody-id="CruiseBookingHeading"] h3.text-primary {
    color: #bf0a30 !important;
}

/* "Guest Options" text */
span.text-primary.text-nowrap.fw-bold.fs16 {
    color: #bf0a30 !important;
}

/* "Itinerary" heading */
[data-ody-id="SummaryItineraryTitle"] span.text-primary,
[data-ody-id="SummaryItineraryTitle"] em.text-primary {
    color: #bf0a30 !important;
}

/* Category Price header (assumed inside h6 tag) */
h6.sailing-category-price {
    color: #bf0a30 !important;
}





/* Ensure the banner fills the full available width inside its ODY wrapper */
[data-ody-id^="CruiseResultItemEmptyDiv-"],
[data-ody-id="CruiseEndEmptyDiv"] {
  width: 100%;
  display: block;
}

/* Ensure the tip inside always stretches fully */
[data-ody-id^="CruiseResultItemEmptyDiv-"] .cruise-tip-banner,
[data-ody-id="CruiseEndEmptyDiv"] .cruise-tip-banner {
  display: block;
  width: 99%;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  background-color: #012c54;
  border-left: 4px solid #44fff6;
  color: #eeeeee !important;
  font-size: 15px;
  line-height: 1.6;
}

/* Link styling (always bold and brand-colored) */
.cruise-tip-banner a {
  color: #44fff6;
  font-weight: 600;
  text-decoration: none;
}

.cruise-tip-banner {
  border-left: 4px solid #012c54;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem; /* top, sides, bottom */
  margin-left: 6px !important;
  margin-right: 10px !important;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 8px;
  width: 98% !important;
}


div[data-ody-id="PricingFrom"] .cruise-tax-inclusive::after {
  content: "Resident Deal Next Page →";
  display: block;
  color: #002868; /* CruiseHub blue */
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}



#booking-flow-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #012c54;
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 16px;
  line-height: 1.5;
  gap: 10px;
}

#booking-flow-banner a {
  color: #ffffff !important;
  font-weight: bold;
  text-decoration: underline;
  font-size: 18px;
}






/* Top Banner Ensure the tip inside always stretches fully */
[data-ody-id="CruiseResultsStartEmptyDiv"] .cruise-tip-banner2 {
  display: block;
  width: 99% !important;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  background-color: #f1f1f1;
  border-left: 4px solid #b9b9b9;
  color: #012c54 !important;
  font-size: 15px;
  line-height: 1.6;
}

/* Link styling (always bold and brand-colored) */
.cruise-tip-banner2 a {
  color: #004a8f;
  font-weight: 600;
  text-decoration: none;
}

.cruise-tip-banner2 {
  border-left: 4px solid #e2e2e2;
  padding: .75rem 1.5rem;
  margin: .75rem 0 .75rem; /* top, sides, bottom */
  margin-left: 6px !important;
  margin-right: 10px !important;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 8px;
  width: 100%;
}



/* Hide header */
th:has(.icon-bonus-offer) {
  display: none !important;
}

/* Hide body cells */
td[data-ody-id="RulesIocn"] {
  display: none !important;
}




/* Fixed layout is essential */
.cruise-sailing-dates-container table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* ICON COLUMN — now roomier */
th.sailing-info-cell,
td.sailing-info-cell {
  width: 10% !important;
  max-width: 10% !important;
  text-align: center;
  padding: 4px 2px;
}

/* DATE COLUMN */
th:nth-child(2),
td:nth-child(2) {
  width: 11% !important;
  text-align: left;
}

/* PRICE COLUMNS */
th:nth-child(3),
th:nth-child(4),
th:nth-child(5),
th:nth-child(6),
td:nth-child(3),
td:nth-child(4),
td:nth-child(5),
td:nth-child(6) {
  width: 12% !important;
  text-align: center;
}

/* SELECT BUTTON COLUMN */
th:last-child,
td:last-child {
  width: 17% !important;
  text-align: right;
}

/* OPTIONAL — Hide Bonus Offers */
th:has(.icon-bonus-offer),
td.rules-icons {
  display: none !important;
}




button.back-to-top {
    display: none !important;
  }
  


/* Base price style (desktop and up) */
td.text-center span,
td .lowest-sailing-price span {
  font-size: 1.1rem !important; /* ~20px */
  font-weight: 600;
  line-height: 1.4;
  display: inline-block;
}

/* If you want even larger on wide desktops */
@media (min-width: 1200px) {
  td.text-center span,
  td .lowest-sailing-price span {
    font-size: 1.1rem !important; /* ~22.4px */
  }
}

/* For smaller mobile screens, make it still readable */
@media (max-width: 576px) {
  td.text-center span,
  td .lowest-sailing-price span {
    font-size: 1.1rem !important; /* ~18.4px */
  }
}



/* Base desktop styling */
td[data-ody-id="DepartureDate"],
th.w-10 {
  font-size: 1rem !important;  /* ~17.6px */
  font-weight: 500;
  white-space: nowrap;
}

/* Extra large on wider screens */
@media (min-width: 1200px) {
  td[data-ody-id="DepartureDate"],
  th.w-10 {
    font-size: 1.1rem !important;  /* ~20px */
  }
}

/* Slightly smaller but readable on mobile */
@media (max-width: 576px) {
  td[data-ody-id="DepartureDate"],
  th.w-10 {
    font-size: 1rem !important;  /* ~16px */
  }
}




em.odi-info-circle {
  display: none !important;
}





/* ONLY allow scroll on tablet (e.g. iPad) */
@media (min-width: 768px) and (max-width: 1024px) {
    .cruise-item-card {
      overflow-y: auto !important;
      max-height: 90vh;
      -webkit-overflow-scrolling: touch;
    }
  }
  
  /* On mobile: restore normal flow */
  @media (max-width: 767px) {
    .cruise-item-card {
      overflow-y: visible !important;
      max-height: none !important;
    }
  }
  




  
  /* Remove or relax padding-bottom in embed responsive to avoid forced height */
  @media (max-width: 1024px) {
    .card-image .embed-responsive {
      padding-bottom: unset !important;
      height: auto !important;
    }
  }
  
  /* Loosen rigid flex percentages to let grid adapt better */
  @media (max-width: 1024px) {
    .section-initial-search > .form-group {
      flex: 1 1 45% !important;
      max-width: 45% !important;
    }
    .cruise-item {
      flex: 1 1 100% !important; /* allow full width if needed */
      max-width: 100% !important;
    }
  }
  
  /* Let the table within the sailing dates container auto-size its columns */
  .cruise-sailing-dates-container table {
    table-layout: auto !important;
  }
  

  
/* Make sure list items don’t scrunch */
ul.list.d-flex.flex-wrap {
    flex-wrap: wrap;
    gap: 12px; /* space between items */
  }


  
  /* Give each li a minimum size and allow wrapping */
  ul.list.d-flex.flex-wrap li {
    min-width: 200px;  /* adjust as needed based on your design */
    flex: 1 1 200px;
    padding: 8px 12px;  /* optional: padding for nicer look */
    box-sizing: border-box; /* ensure padding doesn't break flex */
  }
  


  @media (max-width: 1024px) {
    [data-ody-id="CruiseOffersListContainer"] {
      display: none !important;
    }
  }