/* On the front page, .welcome-info-container > section is itself a flex row
   (this widget sits beside the login column - see welcome.css), so this
   needs flex:1 to claim the remaining width, same as .info-box-column used
   to when it was the direct flex child there. Harmless (a no-op) on
   Map.cshtml, where the parent isn't a flex container. */
.denmarkmap-widget {
    flex: 1 1 auto;
}

.geomap-container, .geomap {
    width: 500px;
    height: 500px;
}

.geomap-container {
    position: relative; /* anchor for .geomap-legend, added by JS in GeoMap.js */
}

/* Heading above the whole list+map section (.info-box-column) - see the
   comment above it in _denmarkMap.cshtml. */
.denmarkmap-heading {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

/* Color-code key for the map pins. Sits above the map's own bottom-right
   controls (zoom, my-location, scale line and attribution all cluster in
   roughly the bottom ~85px there - see okapi-1.8.0.min.css) rather than
   flush in the corner, so it doesn't overlap them. */
.geomap-legend {
    position: absolute;
    right: 5px;
    bottom: 25px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #bcbcbc;
    border-radius: 4px;
    padding: 8px 11px;
    font-size: 14px;
    line-height: 1.4;
    pointer-events: none; /* purely informational, shouldn't block map interaction */
}

.geomap-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geomap-legend-item + .geomap-legend-item {
    margin-top: 4px;
}

.geomap-legend-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    flex: 0 0 auto;
}

.geomap-legend-swatch-available {
    background-color: #45B39D;
}

.geomap-legend-swatch-unavailable {
    background-color: #BCBCBC;
}

/* Desktop: map is fluid — shrinks before pushing siblings, capped at 600px */
@media (min-width: 991px) {
    .geomap-container {
        flex: 1 1 auto;
        min-width: 250px;
        max-width: 600px;
        width: auto;
    }

    .geomap {
        width: 100%;
    }

    /* Cap the address/locationtable column so the map gets the extra space */
    .dkmap-container {
        flex: 0 1 auto;
        max-width: 250px;
        min-width: 0;
    }
}

.input-image-row {
    display: flex;
    align-items: center;
}

.address-input-field {
    flex: 1 1 auto;
    min-width: 0; /* important */
}

.use-current-location {
    flex: 0 0 auto;
    width: 32px; /* or whatever size */
    height: 32px;
    margin-right: 5px;
}

.dkmap-btn {
    border-width: 0px !important;
    background-color: transparent !important;
    text-align: left;
    width: 100%;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#locationtable .accordion-header {
    margin-bottom: 0px;
}

.location-filters {
    margin: 8px 0;
    /* Indent so the focus/active highlight on the toggle and filter buttons
       isn't clipped by .info-box-column's overflow-x: clip on the left. */
    padding-left: 5px;
    /* The drop-in filter (the only thing that lived in here) has been
       removed, leaving this collapsible section empty - hide it rather than
       showing users an empty "Filtre" dropdown. The markup is kept as-is in
       _denmarkMap.cshtml for whenever a new filter is added here; remove
       this rule at that point. */
    display: none;
}

/* Discreet text-style toggle for the filter section */
.location-filters-toggle {
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #007A66;
}

.location-filters-toggle .fas {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.location-filters-toggle[aria-expanded="true"] .fas {
    transform: rotate(180deg);
}

.location-filter-headline {
    font-size: 14px;
    font-weight: 600;
    margin: 6px 0 4px;
}

.location-type-filter .btn {
    font-size: 13px;
    padding: 2px 10px;
    color: #007A66;
    border-color: #007A66;
}

/* Scoped to .location-type-filter so this doesn't touch other
   .btn-outline-secondary buttons elsewhere on the site (see button.css). */
.location-type-filter .btn:not(:disabled):not(.disabled):hover,
.location-type-filter .btn:not(:disabled):not(.disabled):focus {
    color: #007A66;
    background-color: #e6f2f0;
    border-color: #007A66;
}

/* Selected (checked) button: solid green fill. Bootstrap itself ships
   ".btn-outline-secondary:not(:disabled):not(.disabled).active", which beats
   a plain ".btn.active" class chain on specificity - that's what was still
   winning once hover/focus cleared. !important pins this scoped override
   above Bootstrap's built-in rule rather than chasing its exact selector
   (which could change on a Bootstrap upgrade). */
.location-type-filter .btn.active {
    color: #ffffff !important;
    background-color: #007A66 !important;
    border-color: #007A66 !important;
}

.location-dropin-filter {
    margin-top: 8px;
}

.location-dropin-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}

/* Neutralise Bootstrap's .form-check-input absolute offset so the box sits
   inline next to its label here (there's no .form-check wrapper). */
.location-dropin-filter .form-check-input {
    position: static;
    margin: 0;
    accent-color: #00806A; /* green check to match the map colour scheme */
}

#locationtable .btn-available-times > .green {
    color: #00806A;
}

.accordion-item {
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: black;
}

.accordion-item:first-child {
    border-top-style: none;
}

#locationtable {
    overflow: auto;
    /* All borders live on the scroll container (not the inner .accordion),
       so they stay fixed during iOS rubber-band overscroll and don't double
       up with the container borders at the bottom/right. */
    border: thin solid black;
    /* Light gray scrollbar track (Firefox) */
    scrollbar-color: #b0b0b0 #e9e9e9;
}

/* Light gray scrollbar track (Chrome/Edge/Safari) */
#locationtable::-webkit-scrollbar {
    width: 10px;
}

#locationtable::-webkit-scrollbar-track {
    background: #e9e9e9;
}

#locationtable::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 5px;
}

#locationtable .btn-available-times {
    /* darkgray (#A9A9A9) on white was ~2.35:1 contrast, failing WCAG AA (4.5:1
       required for this text size). #666 gives ~5.7:1. */
    color: #666666;
    font-weight: 600;
    display: flex;
    margin-top: .5rem;
}

.dkmap-container {
    padding-right: 5px;
}

/* Loading overlay while locations are fetched (matches #overlay-spinner styling) */
.dkmap-spinner-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #5e685e57;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dkmap-spinner-overlay:not(.displayed) {
    display: none;
}

.dkmap-spinner-overlay span {
    font-size: 48px;
    color: #007A66;
}

.btn-location-name {
    font-size: large;
}

#locationtable .accordion {
    border: none;
}

.accordion-chevron {
    font-size: large;
}

.dkmap-btn .accordion-chevron .fas {
    transition: transform 0.2s ease;
}

/* when collapsed (default) */
.dkmap-btn[aria-expanded="false"] .accordion-chevron .fas {
    transform: rotate(0deg);
}

/* when expanded */
.dkmap-btn[aria-expanded="true"] .accordion-chevron .fas {
    transform: rotate(180deg);
}


.dkmap-btn[aria-expanded="true"] {
    font-weight: 600;
}

/* Highlight the expanded accordion item */
.accordion-item {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion-item:has(.dkmap-btn[aria-expanded="true"]) {
    background-color: #eaf5f2;
    /* inset shadow instead of border-left to avoid layout shift */
    box-shadow: inset 4px 0 0 #00806A;
}

/* Keep a visible focus indicator for keyboard users (WCAG 2.4.7).
   Only the mouse/touch "active" press state suppresses the outline. */
.dkmap-btn:focus-visible {
    outline: 2px solid #00806A !important;
    outline-offset: -2px;
}

.dkmap-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* After a mouse/touch click the button stays focused; suppress the default
   focus highlight so the row keeps its thin borders. Keyboard focus still
   shows via :focus-visible above. */
.dkmap-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

.info-box-column {
    /* Flex layout so the location list and map sit side by side.
       Declared here (not just in welcome.css) so the layout also applies
       on the standalone map page. */
    display: flex;
    justify-content: center;
    max-height: 500px;
    position: relative; /* anchor for the loading overlay */
}

/* ============================
   Location details (inline disclosure)
   ============================ */

/* Actions row at the bottom of an expanded accordion item */
.dkmap-body-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Match the bold <dt> "Adresse" heading above it */
.dkmap-info-headline {
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 4px;
}

.dkmap-details-btn .fas {
    font-size: 12px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

/* Desktop: the details float to the side, so the chevron points back (left)
   when expanded. Mobile overrides this to point up (see the mobile media query). */
.dkmap-details-btn.details-open .fas {
    transform: rotate(180deg);
}

/* Inline details region: lives in the accordion row (natural reading order for
   screen readers). By default it expands inline (used on mobile); on desktop
   JavaScript adds .floating and positions it (fixed) over the map.
   Only "display" needs to be gated on :not([hidden]) - it has to lose to the
   browser's own "[hidden] { display: none }" rule while hidden. The
   opacity/transform (below) are deliberately NOT keyed off :not([hidden]):
   toggling the hidden attribute and a class in the same tick made Chromium's
   style invalidation briefly resolve those to the wrong rule and then
   "correct" itself a frame later, which - because a transition is defined -
   played out as a spurious animation from the wrong value. Keeping them keyed
   on classes only avoids that race entirely. */
.location-details-region:not([hidden]) {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    background: #ffffff;
    border: thin solid black;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Closed/entering state: slid down slightly and transparent. JS toggles .open
   (after forcing a reflow) so this animates in/out instead of popping, while
   [hidden] still fully removes it from the a11y tree. */
.location-details-region {
    opacity: 0;
    transform: translateY(16px);
}

.location-details-region.open {
    opacity: 1;
    transform: translateY(0);
}

/* Desktop: floated over the map. top/left/width/height are set inline by JS. */
.location-details-region.floating {
    margin-top: 0;
    border-radius: 0;
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.12);
    z-index: 1050; /* above the map and its controls */
    opacity: 0;
    transform: translateX(-16px); /* desktop slides in from the left (toward the map) instead of up */
}

.location-details-region.floating.open {
    opacity: 1;
    transform: translateX(0);
}

/* Suppresses the transition for one frame while JS establishes the closed
   starting position (mobile vs. floating), so that setup is never itself
   mistaken for the animated open/close move. */
.location-details-region.no-transition {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .location-details-region:not([hidden]) {
        transition: none;
    }
}

.location-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid lightgray;
    flex: 0 0 auto;
}

.location-details-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #007A66;
}

/* Visible ring when the headline is focused on open (programmatic focus after a
   mouse click doesn't trigger :focus-visible, so target :focus directly). */
.location-details-title:focus {
    outline: 2px solid #00806A !important;
    outline-offset: 2px;
}

.location-details-close {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #333;
    padding: 4px 8px;
    cursor: pointer;
}

.location-details-close:focus-visible {
    outline: 2px solid #00806A;
    outline-offset: -2px;
}

.location-details-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}

.location-details-body dl {
    margin-bottom: 0;
}

.location-details-body dt {
    font-weight: 600;
    margin-top: 12px;
}

.location-details-body dt:first-child {
    margin-top: 0;
}

.location-details-body dd {
    margin-bottom: 0;
}

.location-age-groups-list {
    margin: 0;
    padding-left: 1.2em;
}

/* Opening hours are nested inside the "drop-in possible" box (shown only
   when drop-in is possible), so this labels them without needing their own
   title. */
.location-opening-hours-label {
    font-weight: 600;
}

/* Boxed sections below the main details list: some (like Accessibility) are
   still placeholders for data added later, others (like drop-in/opening
   hours) already have real data, but both share the same box look. */
.location-details-placeholder {
    margin-top: 16px;
    padding: 12px;
    border: 1px dashed #bcbcbc;
    border-radius: 4px;
    background: #f7f7f7;
}

.location-details-placeholder-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.location-details-placeholder-note {
    font-size: 13px;
    color: #666666;
    font-style: italic;
    margin: 0;
}

.location-accessibility-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

/* Mobile: stack vertically with map on top, full width */
@media (max-width: 990.98px) {
    .info-box-column {
        flex-direction: column;
        max-height: none;
    }

    .geomap-container, .geomap {
        order: -1; /* place map above address field and location table */
        width: 100% !important;
    }

    .dkmap-container {
        width: 100%;
        padding-right: 0;
    }

    #locationtable {
        max-height: 300px;
        overflow-y: auto;
    }

    /* The accordion row already shows a "Bestil tid" button right above the
       inline details, so hide the duplicate inside the details on mobile. */
    .location-details-book {
        display: none;
    }

    /* Mobile: details expand inline below the button, so the chevron points
       down when closed and up when open. */
    .dkmap-details-btn .fas {
        transform: rotate(90deg);
    }

    .dkmap-details-btn.details-open .fas {
        transform: rotate(-90deg);
    }
}