/* TravelBasket overrides for the dag-tot-dag module */

/* ── Accommodation detail view (modal left panel) ────────────────────────── */

.dtd-modal__acc-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
}

.dtd-modal__acc-name {
    font-family: var(--dtd-font-headings, 'DM Sans', sans-serif);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dtd-color-primary, #1E2F22);
    margin: 0;
}

.dtd-modal__acc-description {
    font-family: var(--dtd-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    line-height: 1.65;
    color: var(--dtd-color-primary, #1E2F22);
    overflow-y: auto;
    max-height: 220px;
    padding-right: 4px;
}

.dtd-modal__acc-description p { margin: 0 0 0.75em; }
.dtd-modal__acc-description p:last-child { margin-bottom: 0; }

.dtd-modal__acc-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--dtd-font-body, 'DM Sans', sans-serif);
}

.dtd-modal__acc-reviews-score {
    font-size: 15px;
    font-weight: 600;
    color: var(--dtd-color-primary, #1E2F22);
}

.dtd-modal__acc-reviews-count {
    font-size: 13px;
    color: #646970;
}

/* ── Excursion description block (modal left panel) ──────────────────────── */

.dtd-modal__exc-description {
    font-family: var(--dtd-font-body, 'DM Sans', sans-serif);
    font-size: 14px;
    line-height: 1.65;
    color: var(--dtd-color-primary, #1E2F22);
    max-height: 130px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dtd-color-border, #E5E0D8);
}

.dtd-modal__exc-description p { margin: 0 0 0.75em; }
.dtd-modal__exc-description p:last-child { margin-bottom: 0; }

.dag-tot-dag {
    --dtd-font-headings: 'DM Sans', sans-serif;
    --dtd-font-body: 'DM Sans', sans-serif;
}

.dag-tot-dag__eyebrow {
    color: #AB9472;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 3.2px;
    text-transform: uppercase;
}

/* ── Mobile modal: show gallery, hide alternatives ───────────────────────── */

@media (max-width: 1024px) {
    /* Stack vertically — gallery panel on top, scrollable content below */
    .dtd-modal__content {
        display: flex;
        flex-direction: column;
        max-height: 95vh;
        overflow: hidden;
    }

    /* Un-hide the gallery panel and fix its height */
    .dtd-modal__right {
        display: block !important;
        flex: 0 0 260px;
        max-height: 260px;
        order: -1;
    }

    /* Left content scrolls independently */
    .dtd-modal__left {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide the alternatives carousel — confusing on mobile */
    .dtd-modal__options {
        display: none;
    }

    /* Hide footer note tied to alternatives */
    .dtd-modal__footer-note {
        display: none;
    }

    /* Relax inner scroll areas — modal itself scrolls now */
    .dtd-modal__exc-description {
        max-height: none;
        overflow-y: visible;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .dtd-modal__acc-description {
        max-height: none;
        overflow-y: visible;
    }

    .dtd-modal__acc-detail {
        overflow-y: visible;
    }

    /* Preview info overlay: full-width flex row, no background */
    .dtd-modal__preview-info {
        bottom: 0;
        left: 0;
        right: 20px !important;
        padding: 0 !important;
        background-color: transparent !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dtd-modal__preview-title {
        display: none;
    }

    .dtd-modal__preview-meta {
        color: #ffffff;
    }

    .dtd-modal__preview-nav {
        margin-top: 0 !important;
    }
}

@media (max-width: 640px) {
    /* Bottom-sheet feel: slide up from the bottom of the screen */
    .dtd-modal {
        align-items: flex-end;
    }

    .dtd-modal__container {
        width: 100vw;
        max-width: 100vw;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }

    /* Shorter gallery on phones */
    .dtd-modal__right {
        flex: 0 0 200px;
        max-height: 200px;
    }

    /* Compact info overlay */
    .dtd-modal__preview-info {
        bottom: 0;
        left: 0;
        right: 20px !important;
        padding: 0 !important;
    }

    .dtd-modal__preview-meta {
        font-size: 12px;
    }

    .dtd-modal__preview-nav {
        margin-top: 0 !important;
    }

    /* 44px tap targets on nav buttons */
    .dtd-modal__preview-btn {
        width: 44px;
        height: 44px;
    }

    /* Tighter content padding */
    .dtd-modal__left {
        padding: 20px 16px 28px;
    }

    /* Heading sizes */
    .dtd-modal__acc-name {
        font-size: 20px;
    }

    .dtd-modal__title {
        font-size: 20px;
    }

    /* Close button over the gallery — white with shadow for legibility */
    .dtd-modal__close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    /* Header tag — smaller on mobile */
    .dtd-modal__header-tag {
        font-size: 12px;
        padding: 6px 12px;
        margin-bottom: 16px;
    }

    /* Divider — less vertical space */
    .dtd-modal__divider {
        margin: 14px 0 18px;
    }
}

/* ── Map label: hidden everywhere ────────────────────────────────────────── */

.oogopslag-map-zoom-label {
    display: none;
}

/* ── CSS fullscreen fallback for iOS Safari ──────────────────────────────── */

.dtd-sticky-map.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    aspect-ratio: unset !important;
}

body.dtd-map-fullscreen-open {
    overflow: hidden;
}

.dtd-sticky-map.is-fullscreen .oogopslag-map-close-btn {
    display: flex !important;
}