.deck-plans {
    --padding: 1.5rem;
    --right-pane-width: 30%;

    user-select: none;

    padding: var(--padding);
}

.deck-plans .headline {
    font-style: normal;
    font-weight: 420;
    font-size: 36px;
    line-height: 44px;

    color: var(--azamara-blue);
}

.deck-plans .blurb {
    font-style: normal;
    font-weight: 390;
    font-size: 20px;
    line-height: 30px;    
    letter-spacing: 0.05em;
    
    color: var(--night-sky);
}

.deck-plans .deck-plans-container {
    display: flex;
    flex-direction: column;
}

.deck-plans .nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deck-plans .nav-container .nav {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: .5rem;
}

.deck-plans .nav-container  .deck-number-dropdown {
    background-color: transparent;
    border: 1px solid var(--dusk);
    border-radius: .25rem;
    width: 100%;
    height: 40px;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 4rem;

    font-weight: 390;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;

    color: var(--dark-blue);
}

.deck-plans .nav-container .dropdown-menu {
    display: none;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--dusk);
    z-index: 3000;
}

.deck-plans .nav-container .dropdown-menu.show {
    display: flex;

}

.deck-plans .nav-container .nav .nav-item .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--dusk);

    font-weight: 390;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;

    color: var(--dark-blue);

    display: flex;
    align-items: center;
    width: 100%;
}

.deck-plans .nav-container .nav .nav-item .nav-link.active {
    color: var(--pure-white);
    background-color: var(--azamara-blue);
}

.deck-plans .nav-container .nav .nav-item .nav-link:not(.active):hover {
    background-color: var(--light-blue);
}

.deck-plans .nav-container .tab-content {
    width: 100%;
}

.deck-plans .nav-container .tab-content .tab-pane {
    width: 100%;
    padding: 0 3rem;
    justify-content: center;
}

.deck-plans .nav-container .tab-content .tab-pane img {
    width: max-content;
    max-width: 100%;
    object-fit: contain;
}

.deck-plans .tab-content .tab-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deck-plans .tab-content .tab-pane .left-pane {
    width: 100%;
}

.deck-plans .tab-content .tab-pane .left-pane .row {
    --bs-gutter-x: var(--padding);
    --bs-gutter-y: 3rem;

    margin-top: 0;
}

.deck-plans .card h3 {
    color: var(--azamara-blue);
}

.deck-plans .card .view-features-button {
    border: 0;
    background: 0;
    border-top: 1px solid var(--light-dusk);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 3.5rem;

    color: var(--azamara-blue);
    fill: var(--azamara-blue);

    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: .05em;
}

.deck-plans .card .view-features-button:hover {
    background-color: var(--light-blue);
}

.deck-plans :is(.deck-staterooms-container, .deck-amenities-container) {
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding: 1rem calc(var(--padding) / 2);
    margin: calc(-1 * var(--padding));
}

.deck-plans :is(.deck-staterooms-container, .deck-amenities-container) > .col-12 {
    width: 85vw;
}

.deck-plans .deck-staterooms-container .card .image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background-color: var(--light-dusk);
}

.deck-plans .card .expand-photo-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;

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

    border: 1px solid var(--azamara-blue);
    border-radius: 2px;
    background: var(--pure-white);
    width: 2.25rem;
    height: 2.25rem;

    fill: var(--azamara-blue)
}

.deck-plans .card .expand-photo-button:hover {
    background-color: var(--light-blue);
}

.deck-plans .card .expand-photo-button > svg {
    min-width: 20px;
    min-height: 20px;
}

.deck-plans .deck-staterooms-container .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container {
    display: flex;
    gap: 1rem;
    height: 2.5rem;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--light-dusk);
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator .accessibility-icon {
    margin-right: .25rem;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-04 {
    background-color: #9EA869;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-05 {
    background-color: #FFDC98;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-06 {
    background-color: #D9E0C1;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-08 {
    background-color: #FFEEC6;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-09 {
    background-color: #A4C0B4;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-10 {
    background-color: #C7DAD4;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-11 {
    background-color: #AEBEBD;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-12 {
    background-color: #DAE6E4;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-CO {
    background-color: #C9CEE4;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-CW {
    background-color: #8896c0;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-N1 {
    background-color: #B9E2E4;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-N2 {
    background-color: #DAEFF2;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-P1 {
    background-color: #e88e47;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-P2 {
    background-color: #d8c2c1;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-P3 {
    background-color: #c0999a;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-SP {
    background-color: #B4D2DD;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-V1 {
    background-color: #FED5B5;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-V2 {
    background-color: #CFA996;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-V3 {
    background-color: #ECD8CD;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-VX {
    background-color: #FBB47E;
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-W {
    background-color: var(--light-dusk);
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-X {
    background-color: var(--light-dusk);
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-XP {
    background-color: var(--light-dusk);
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-Y {
    background-color: var(--light-dusk);
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-Z {
    background-color: var(--light-dusk);
}

.deck-plans .deck-staterooms-container .card .tier-indicators-container .tier-indicator.tier-AC {
    background-color: transparent;
    border-color: var(--light-dusk);
    fill: var(--night-sky);
}

.deck-plans .deck-amenities-container .card {
    height: 100%;
}

.deck-plans .deck-amenities-container .card .image-wrapper {
    aspect-ratio: 16 / 9;
    background-color: var(--light-dusk);
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.deck-plans .deck-amenities-container .card .image-wrapper img {
    object-fit: cover;
    width: 100%;
}

.deck-plans .tab-content .tab-pane .right-pane {
    width: 100%;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deck-plans .tab-content .tab-pane .right-pane img {
    max-width: 100%;
    object-fit: contain;
}

.deck-plans .right-pane .legend {
    margin-top: 3rem;
}

.deck-plans .right-pane .legend .card-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.deck-plans .right-pane .legend .icon-group {
    display: flex;
    align-items: center;
    gap: 1rem;

    font-style: normal;
    font-weight: 390;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    color: var(--night-sky);
}

.deck-plans .right-pane .legend .icon {
    position: relative;
    width: 17px;
    height: 17px;
}

.deck-plans .right-pane .legend .icon::before {
    content: "";
    width: 17px;
    height: 17px;
    background-image: url(/static-assets/images/icons/deck-legend-sprites.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 1;
}

.deck-plans .right-pane .legend .legend-convert-bed::before {
    background-position: 0 0;
}

.deck-plans .right-pane .legend .legend-suite-tub::before {
    background-position: -24px 0;
}

.deck-plans .right-pane .legend .legend-door-location::before {
    background-position: -47px 0;
}

.deck-plans .right-pane .legend .legend-connecting-room::before {
    background-position: -72px 0;
}

.deck-plans .right-pane .legend .legend-wheelchair-access::before {
    background-position: -94px 0;
}

.deck-plans .right-pane .legend .legend-restrooms::before {
    background-position: -116px 0;
}

.deck-plans .right-pane .legend .legend-smoking-area::before {
    background-position: -139px 0;
}



/* -sm breakpoint */
@media (min-width: 576px) {

}

/* -md breakpoint */
@media (min-width: 768px) {

}

/* -lg breakpoint*/
@media (min-width: 992px) {
    .deck-plans {
        --padding: 3rem;
    }

    .deck-plans .nav-container {
        flex-direction: row;
        align-items: flex-end;
    }

    .deck-plans .nav-container .nav {
        display: flex;
        width: calc(100% - var(--right-pane-width));
        max-width: none;
        flex-direction: row;
        position: static;
        padding: 0;
        background-color: transparent;
        border: none;
        z-index: auto;
    }

    .deck-plans .nav-container .nav .nav-item .nav-link {
        border: 0;
        border-bottom: 3px solid transparent;
        background: none;
        color: var(--dusk);
    
        font-style: normal;
        font-weight: 420;
        font-size: 17px;
        line-height: 28px;
    
        display: flex;
        align-items: center;
        letter-spacing: 0.05em;
    
        transition: color .3s, border-bottom-color .3s;
    }
    
    .deck-plans .nav-container .nav .nav-item .nav-link.active {
        color: var(--azamara-blue);
        border-bottom-color: var(--azamara-blue);
        background-color: transparent;
    }

    .deck-plans .nav-container .nav .nav-item .nav-link:not(.active):hover {
        background-color: transparent;
    }

    .deck-plans .nav-container .deck-number-dropdown {
        display: none;
    }

    .deck-plans .nav-container .tab-content {
        width: var(--right-pane-width);
    }

    .deck-plans .tab-content .tab-pane.active {
        flex-direction: row;
        align-items: flex-start;
    }

    .deck-plans .tab-content .tab-pane .left-pane {
        width: calc(100% - var(--right-pane-width));
    }

    .deck-plans .tab-content .tab-pane .left-pane .row {
        --bs-gutter-x: 3rem;
        --bs-gutter-y: 3rem;
        margin-bottom: 3rem;
    }

    .deck-plans :is(.deck-staterooms-container, .deck-amenities-container) {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0;
        margin-right: calc(var(--bs-gutter-x) * -.5);
        margin-left: calc(var(--bs-gutter-x) * -.5);
    }
    
    .deck-plans .deck-staterooms-container > .col-lg-6 {
        width: 50%;
    }

    .deck-plans .deck-staterooms-container .card .image-wrapper {
        aspect-ratio: 1 / 1;
    }

    .deck-plans .deck-amenities-container > .col-lg-4 {
        width: 33.33333333%;
    }

    .deck-plans .deck-amenities-container .card .image-wrapper {
        aspect-ratio: 3 / 2;
    }

    .deck-plans .tab-content .tab-pane .right-pane {
        width: var(--right-pane-width);
        padding-top: 3rem;
    }
}

/* -xl breakpoint */
@media (min-width: 1200px) {
    .deck-plans {
        --padding: 5rem;
    }

    .deck-plans .nav-container .nav .nav-item .nav-link {
        font-size: 18px;
    }
}

/* -xxl breakpoint */
@media (min-width: 1400px) {

}