/* Route maps on the cruise results and offer pages. Sized to the slot the
   supplied MSC image occupies, so a Royal card and an MSC card line up. */
.cruise-map {
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: .5rem;
    overflow: hidden;
    background: #eaf1f6;
}
.cruise-map .ol-viewport { border-radius: .5rem; }
.cruise-map-empty {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; height: 100%;
    color: #7a8791; font-size: .78rem; text-align: center; padding: .5rem;
}
.cruise-map-pop {
    position: absolute; z-index: 5; pointer-events: none;
    transform: translate(-50%, -140%);
    background: #fff; border-radius: .35rem; padding: .18rem .45rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); white-space: nowrap;
    font-size: .72rem; line-height: 1.25;
}
.cruise-map-pop strong { display: block; font-weight: 600; }
.cruise-map-legend { font-size: .68rem; color: #7a8791; }

/* The offer page timeline, when a pin is clicked. */
.cb-day-flash { animation: cbDayFlash 1.6s ease-out 1; }
@keyframes cbDayFlash {
    0%   { background: rgba(201,162,39,.22); }
    100% { background: transparent; }
}

@media (max-width: 575.98px) { .cruise-map { height: 150px; } }

/* --- zoom, full screen, reset ------------------------------------------- */
/* OpenLayers' own controls are sized for a full-page map; these sit on a
   170px card, so they are scaled down and tucked in. */
.cruise-map .ol-control button {
    width: 1.55rem; height: 1.55rem;
    font-size: .95rem; line-height: 1;
    background: rgba(255,255,255,.92);
    color: #1b6ca8; border: 0; border-radius: .25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cruise-map .ol-control button:hover,
.cruise-map .ol-control button:focus { background: #fff; color: #14527c; outline: none; }
.cruise-map .ol-zoom { top: .35rem; left: .35rem; }
.cruise-map .ol-zoom button { margin-bottom: 2px; }
.cruise-map .ol-full-screen { top: .35rem; right: .35rem; }
.cruise-map .ol-attribution { font-size: .6rem; }
.cruise-map .ol-attribution button { display: none; }

.cruise-map-reset {
    position: absolute; z-index: 6; left: .35rem; bottom: .35rem;
    width: 1.55rem; height: 1.55rem; padding: 0;
    font-size: .9rem; line-height: 1;
    background: rgba(255,255,255,.92); color: #1b6ca8;
    border: 0; border-radius: .25rem; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
}
.cruise-map-reset:hover { background: #fff; color: #14527c; }

.cruise-map-hint {
    position: absolute; inset: 0; z-index: 7;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,32,42,.55); color: #fff;
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    pointer-events: none;
}

/* Full screen gives the route real estate; the pins can grow with it. */
.cruise-map:fullscreen { height: 100% !important; border-radius: 0; }
.cruise-map:-webkit-full-screen { height: 100% !important; border-radius: 0; }

/* --- expand to a modal -------------------------------------------------- */
.cruise-map-expand {
    position: absolute; z-index: 6; right: .35rem; top: .35rem;
    width: 1.55rem; height: 1.55rem; padding: 0;
    font-size: .85rem; line-height: 1;
    background: rgba(255,255,255,.92); color: #1b6ca8;
    border: 0; border-radius: .25rem; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
}
.cruise-map-expand:hover { background: #fff; color: #14527c; }

.cruise-map-modal { position: fixed; inset: 0; z-index: 2000; }
.cruise-map-modal-backdrop { position: absolute; inset: 0; background: rgba(14,22,30,.72); }
.cruise-map-modal-box {
    position: relative; z-index: 1;
    width: min(1100px, calc(100vw - 2rem));
    height: min(760px, calc(100vh - 3rem));
    margin: 1.5rem auto 0;
    background: #fff; border-radius: .6rem; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 18px 48px rgba(0,0,0,.4);
}
.cruise-map-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid #e6eaed; flex: 0 0 auto;
}
.cruise-map-modal-title {
    margin: 0; font-size: 1rem; font-weight: 600; color: #21313d;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cruise-map-modal-close {
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    color: #6b7a85; cursor: pointer; padding: 0 .25rem;
}
.cruise-map-modal-close:hover { color: #21313d; }
.cruise-map-modal-body { flex: 1 1 auto; min-height: 0; }
.cruise-map-large { height: 100%; border-radius: 0; }
body.cruise-map-modal-open { overflow: hidden; }

@media (max-width: 575.98px) {
    .cruise-map-modal-box {
        width: 100vw; height: 100vh; margin: 0; border-radius: 0;
    }
}