/* =========================================================
   STAR CLIPPERS CUSTOM SEARCH DROPDOWNS
   ========================================================= */


/* Hide native selects only after JS has created replacements */

.sc-native-select-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.sc-custom-select {
    position: relative !important;
    width: 100%;
    z-index: 1000 !important;
    overflow: visible !important;
}


/* Raise whichever dropdown is currently open */

.sc-custom-select:has(.sc-select-menu.is-open) {
    z-index: 99999 !important;
}


/* =========================================================
   CLOSED DROPDOWN
   ========================================================= */

.sc-select-trigger {
    width: 100%;
    height: 44px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
    color: #102B43;

    border: 1px solid rgba(16, 43, 67, 0.16);
    border-radius: 8px;

    font: inherit;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    outline: none;
    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        border-radius 0.2s ease;
}


.sc-select-trigger:hover {
    border-color: #E77B6D;

    box-shadow:
        0 4px 12px rgba(16, 43, 67, 0.08);
}


.sc-select-trigger:focus {
    border-color: #E77B6D;

    box-shadow:
        0 0 0 2px rgba(231, 123, 109, 0.12);
}


.sc-select-trigger.is-open {
    border-color: #E77B6D;
    border-radius: 8px 8px 0 0;

    box-shadow:
        0 4px 12px rgba(16, 43, 67, 0.08);
}


/* =========================================================
   LABEL
   ========================================================= */

.sc-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   CSS CHEVRON
   No SVG, icon font or external image required
   ========================================================= */

.sc-select-arrow {
    width: 9px;
    height: 9px;

    margin-left: 15px;
    margin-right: 3px;

    border-right: 2px solid #102B43;
    border-bottom: 2px solid #102B43;

    transform:
        rotate(45deg)
        translateY(-2px);

    transform-origin: center;

    flex: 0 0 auto;

    transition:
        transform 0.15s ease;
}


.sc-select-trigger.is-open .sc-select-arrow {
    transform:
        rotate(225deg)
        translate(-2px, -2px);
}


/* =========================================================
   OPEN DROPDOWN
   ========================================================= */

.sc-select-menu {
    position: absolute;
    z-index: 999999 !important;

    top: calc(100% - 1px);
    left: 0;
    right: 0;

    background: #ffffff;

    border: 1px solid #E77B6D;
    border-top: 0;

    border-radius: 0 0 12px 12px;

    max-height: 360px;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-shadow:
        0 14px 30px rgba(16, 43, 67, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-7px);
    transform-origin: top center;

    transition:
        opacity 0.15s ease,
        transform 0.15s cubic-bezier(.25,.8,.25,1),
        visibility 0.15s ease;
}


.sc-select-menu.is-open {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0);
}


/* =========================================================
   OPTIONS
   ========================================================= */

.sc-select-option {
    display: block;
    width: 100%;

    padding: 11px 14px;

    background: #ffffff;
    color: #102B43;

    border: 0;
    border-radius: 0;

    font: inherit;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.sc-select-option:hover {
    background: #FBE9E6;
    color: #102B43;
}


.sc-select-option.is-selected {
    background: #E77B6D;
    color: #ffffff;
    font-weight: 600;
}


.sc-select-option:focus {
    background: #E77B6D;
    color: #ffffff;
    font-weight: 600;

    outline: none;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.sc-select-menu::-webkit-scrollbar {
    width: 8px;
}


.sc-select-menu::-webkit-scrollbar-track {
    background: transparent;
}


.sc-select-menu::-webkit-scrollbar-thumb {
    background: #B7ADA1;
    border-radius: 4px;
}


.sc-select-menu::-webkit-scrollbar-thumb:hover {
    background: #E77B6D;
}


/* Firefox scrollbar */

.sc-select-menu {
    scrollbar-width: thin;
    scrollbar-color: #B7ADA1 transparent;
}


/* =========================================================
   ALLOW DROPDOWNS TO ESCAPE YOOTHEME FORM CONTAINERS
   ========================================================= */

#cruises_search,
#cruises_search .uk-grid,
#cruises_search .uk-grid > *,
#cruises_search .uk-margin,
#cruises_search .uk-panel,
#cruises_search .uk-form-controls,
#cruises_search .uk-width-1-1 {
    overflow: visible !important;
}


/* =========================================================
   PREVENT DROPDOWN CLICK-THROUGH
   ========================================================= */


/* =========================================================
   STACKING ORDER
   ========================================================= */

/*
 * IMPORTANT:
 * Add the class "sc-search-section" to the YOOtheme SECTION
 * containing the search module.
 *
 * This raises the whole section above the Awards section,
 * rather than trying to raise only children inside a lower
 * stacking context.
 */
.sc-search-section {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
}


/*
 * IMPORTANT:
 * Add the class "sc-awards-section" to the YOOtheme SECTION
 * containing the Awards logos.
 *
 * This forces the Awards section into a lower stacking context
 * so its linked images cannot sit above the search dropdown.
 */
.sc-awards-section {
    position: relative !important;
    z-index: 1 !important;
}


/* Search must sit above Awards/content underneath */
#cruises_search {
    position: relative;
    z-index: 5000;
}


/* Main navigation must sit above the search when scrolling */
.tm-header,
.tm-header-mobile {
    z-index: 10000 !important;
}


/*
 * Create an isolated stacking context for each custom select.
 */
.sc-custom-select {
    isolation: isolate;
}


/*
 * Raise the active dropdown well above underlying page links.
 */
.sc-custom-select:has(.sc-select-menu.is-open) {
    z-index: 999999 !important;
}


/*
 * Ensure the open menu itself receives pointer events and sits
 * above any links/images underneath the dropdown.
 */
.sc-select-menu {
    z-index: 9999999 !important;
    pointer-events: auto !important;
}


.sc-select-menu.is-open {
    pointer-events: auto !important;
}


/*
 * Ensure each option itself receives the click rather than
 * allowing interaction with content underneath.
 */
.sc-select-option {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 639px) {

    .sc-select-trigger {
        height: 44px;
    }

    .sc-select-option {
        padding: 13px 14px;
    }

    .sc-select-menu {
        max-height: 300px;
    }
}

/* ==================================================
   LOCKED DESTINATION
   Destination-specific landing pages
   ================================================== */

.sc-custom-select.sc-destination-locked
.sc-select-trigger {
    cursor: default !important;
    opacity: 1 !important;

    background: #F7F6F3 !important;
    color: #263F40 !important;

    border-color: rgba(38, 63, 64, 0.16) !important;
    box-shadow: none !important;
}


/* No hover state */
.sc-custom-select.sc-destination-locked
.sc-select-trigger:hover,
.sc-custom-select.sc-destination-locked
.sc-select-trigger:focus {
    border-color: rgba(38, 63, 64, 0.16) !important;
    box-shadow: none !important;
}


/* No dropdown arrow because field is fixed */
.sc-custom-select.sc-destination-locked
.sc-select-arrow {
    display: none !important;
}


/* Dropdown menu can never appear */
.sc-custom-select.sc-destination-locked
.sc-select-menu {
    display: none !important;
}

/* ==================================================
   DYNAMIC DESTINATION HERO
   ================================================== */

.sc-destination-hero {
    position: relative !important;
    overflow: hidden !important;
}


.sc-destination-hero-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;

    opacity: 1;

    transition:
        opacity 0.35s ease-in-out;
}


/* Brief fade while replacing image */
.sc-destination-hero-bg.is-changing {
    opacity: 0.35;
}


/* Keep hero content above background */
.sc-destination-hero > *:not(.sc-destination-hero-bg) {
    position: relative;
    z-index: 1;
}

/* ==================================================
   DESTINATION HERO - MOBILE SAFARI
   ================================================== */

@media (max-width: 959px) {

    .sc-destination-hero {
        position: relative !important;
        isolation: isolate;
    }

    .sc-destination-hero-bg {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;

        z-index: 0 !important;
        opacity: 1;
        visibility: visible !important;
    }

    .sc-destination-hero > *:not(.sc-destination-hero-bg) {
        position: relative;
        z-index: 1;
    }

}

/* ==================================================
   iPHONE / iOS: NATIVE MOMENTUM SCROLL FOR OPEN MENUS
   ================================================== */
.sc-select-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}
.sc-select-option {
    touch-action: pan-y;
}

@media (max-width: 639px) {
    .sc-select-menu {
        max-height: min(300px, 55dvh);
    }
}