/* ============================================
   Google Maps Module - Frontend Styles
   ============================================ */

.google-maps-container {
    position: relative;
    margin: 0 auto;
    max-width: var(--map-width, 100%);
}

.google-maps-canvas {
    position: relative;
    width: 100%;
    height: var(--map-height, 400px);
    border-radius: 10px;
    overflow: hidden;
    background-color: #e9ecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 5C14.48 5 10 9.48 10 15c0 9 10 20 10 20s10-11 10-20c0-5.52-4.48-10-10-10z' fill='%23adb5bd'/%3E%3Ccircle cx='20' cy='15' r='4' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}

/* Info window custom styles */
.google-maps-info-window {
    position: relative;
    font-family: inherit !important;
    min-width: 180px;
    max-width: 300px;
    padding: 12px 14px;
    font-size: 0.875rem !important;
}

/* Info window content row: image + description side by side */
.google-maps-info-content-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

/* LTR: image right, text left */
[dir="ltr"] .google-maps-info-content-row,
.google-maps-info-content-row {
    flex-direction: row;
}

/* RTL: image left, text right */
[dir="rtl"] .google-maps-info-content-row {
    flex-direction: row-reverse;
}

/* Info window image */
.google-maps-info-image {
    width: 100px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Text section next to image */
.google-maps-info-text {
    min-width: 0;
    flex: 1;
}

.google-maps-info-title {
    font-weight: 700;
    font-size: 1rem !important;
    margin-bottom: 4px;
    color: #1a1a2e;
    line-height: 1.3;
}

.google-maps-info-desc {
    font-size: 0.8125rem !important;
    color: #4a4a5a;
    margin-bottom: 6px;
    line-height: 1.4;
}

.google-maps-info-link {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    outline: none;
}

.google-maps-info-link:hover {
    text-decoration: underline;
    color: #155046;
}

.google-maps-info-link:hover sup {
    opacity: 1;
}

/* Google Maps info window overrides.
   Padding lives on the inner .google-maps-info-window (not here) so the custom
   close button can anchor to the padded box's corner — matching the OpenStreet Maps
   popup structure where the padded box is the relative anchor. */
.gm-style-iw {
    padding: 0 !important;
}

/* Marker icon container */
.google-maps-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.google-maps-marker-icon i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 16px;
}

/* Cluster styles */
.google-maps-cluster {
    background-color: rgba(29, 107, 94, 0.85);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.google-maps-cluster:hover {
    transform: scale(1.1);
    background-color: rgba(21, 80, 70, 0.95);
}

.gm-style .gm-bundled-control > div,
.gm-style .gm-bundled-control button,
.gm-style .gm-svpc,
.gm-style .gm-fullscreen-control,
.gm-style .gm-control-active,
.gm-style .gm-style-mtc button,
.gm-style .gm-style-mtc ul,
.gm-style .gm-style-mtc ul li,
.gm-style button[title*="Street View"],
.gm-style button[aria-label*="Street View"] {
    font-size: 0.875rem !important;
}


/* Responsive */
@media (max-width: 992px) {
    .google-maps-container {
        max-width: 100%;
    }
}



/* ============================================
   GOOGLE MAPS Dark Mode Styles
   ============================================ */

html[data-bs-theme="dark"] .google-maps-canvas {
    background-color: #2a2a3e;
}

/* Info window background and arrow in dark mode */
html[data-bs-theme="dark"] .gm-style .gm-style-iw-c {
    background: #242830 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-bs-theme="dark"] .gm-style .gm-style-iw-tc::after {
    background: #242830 !important;
}

html[data-bs-theme="dark"] .gm-style .gm-style-iw-d {
    color: #e2e2f0;
}

/* Route info window text in dark mode (Google Maps internal .gm-iw element) */
html[data-bs-theme="dark"] .gm-style .gm-iw {
    color: #e2e2f0 !important;
}

/* Route info window links in dark mode */
html[data-bs-theme="dark"] .gm-style .gm-iw a {
    color: #2d8676 !important;
}

html[data-bs-theme="dark"] .gm-style .gm-iw a:hover {
    color: var(--primary-color) !important;
}

/* Info window close button in dark mode */
html[data-bs-theme="dark"] .gm-style .gm-ui-hover-effect {
    background-color: transparent !important;
}

html[data-bs-theme="dark"] .gm-style .gm-ui-hover-effect:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Info window content text in dark mode */
html[data-bs-theme="dark"] .google-maps-info-title {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .google-maps-info-desc {
    color: #a0a0b8;
}

html[data-bs-theme="dark"] .google-maps-info-link {
    color: #2d8676;
}

html[data-bs-theme="dark"] .google-maps-info-link:hover {
    color: var(--primary-color);
}

/* Map controls dark mode — unified background + invert for icons */
html[data-bs-theme="dark"] .gm-style .gm-bundled-control > div,
html[data-bs-theme="dark"] .gm-style .gm-bundled-control button,
html[data-bs-theme="dark"] .gm-style .gm-svpc,
html[data-bs-theme="dark"] .gm-style .gm-fullscreen-control,
html[data-bs-theme="dark"] .gm-style .gm-control-active,
html[data-bs-theme="dark"] .gm-style .gm-style-mtc button,
html[data-bs-theme="dark"] .gm-style .gm-style-mtc ul,
html[data-bs-theme="dark"] .gm-style .gm-style-mtc ul li,
html[data-bs-theme="dark"] .gm-style button[title*="Street View"],
html[data-bs-theme="dark"] .gm-style button[aria-label*="Street View"] {
    background-color: #242830 !important;
    color: #c8c8d8 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    font-size: 0.875rem !important;
}

html[data-bs-theme="dark"] .gm-style .gm-style-mtc button {
    color: #c8c8d8 !important;
}

/* Invert only the SVG icon images inside controls — not the containers */
html[data-bs-theme="dark"] .gm-style .gm-bundled-control img,
html[data-bs-theme="dark"] .gm-style .gm-fullscreen-control img,
html[data-bs-theme="dark"] .gm-style .gm-control-active img {
    filter: invert(0.85);
}

/* Pegman SVG icons invert */
html[data-bs-theme="dark"] .gm-style .gm-svpc img {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Zoom control separator line */
html[data-bs-theme="dark"] .gm-style .gm-bundled-control > div > div {
    background-color: #3a3a4e !important;
}

/* Terms of use / copyright text dark mode */
html[data-bs-theme="dark"] .gm-style .gm-style-cc {
    filter: invert(0.85) hue-rotate(180deg);
}

/* Cluster dark mode */
html[data-bs-theme="dark"] .google-maps-cluster {
    border-color: #3a3a4e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================
   GOOGLE MAPS The Empty Top Space Bug Fix
   ============================================ */

.gm-style-iw-chr {
    display: none !important;
}

/* Unclamp Google's InfoWindow so it grows to fit its content instead of scrolling.
   Google caps BOTH the outer window (.gm-style-iw-c, e.g. 217px) and the inner
   scroll box (.gm-style-iw-d, e.g. 199px) with inline max-height computed from the
   viewport at open time. A tall portrait image inflates the content past both caps,
   so the bottom (directions link) is clipped by the outer window even when the inner
   box is set to overflow: visible. Forcing both boxes to fit their content makes the
   whole window visible, matching the OpenStreet Maps popup. The JS re-applies these
   on domready + image load (Google re-writes the inline styles after open). */
.gm-style-iw-c,
.gm-style-iw-d {
    max-height: none !important;
    overflow: visible !important;
}

/* Hide Google's default info-window close button — a custom, module-consistent
   close button is rendered inside the content (see .google-maps-info-close-btn)
   so both map modules show the exact same control in the exact same place. */
.gm-style .gm-ui-hover-effect {
    display: none !important;
}

/* ============================================
   INFO WINDOW CLOSE BUTTON (shared across both map modules)
   ============================================ */

/* A single close button rendered inside each info window's content. Sized and
   positioned identically on Google Maps and OpenStreet Maps so the two modules
   look and behave the same. Anchored to the inline-end (right in LTR) top corner
   of the padded .google-maps-info-window box. */
.google-maps-info-close-btn {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 11px;
    height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 2px;
    background-color: transparent;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    z-index: 5;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.google-maps-info-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1a1a2e;
}

.google-maps-info-close-btn i {
    font-size: 0.5rem;
}

html[data-bs-theme="dark"] .google-maps-info-close-btn {
    color: #a0a0b8;
}

html[data-bs-theme="dark"] .google-maps-info-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e2e2f0;
}

/* ============================================
   DIRECTIONS LINK IN INFO WINDOW
   ============================================ */

.google-maps-info-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem !important;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    margin-top: 4px;
}

.google-maps-info-directions-link:hover {
    text-decoration: underline;
    color: #155046;
}

/* ============================================
   DIRECTIONS MODAL STYLES
   ============================================ */

.gmaps-directions-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
}

.gmaps-directions-total,
.gmaps-directions-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gmaps-directions-route {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #4a4a5a;
    line-height: 1.5;
}

.gmaps-directions-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gmaps-directions-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f5;
}

.gmaps-directions-step:last-child {
    border-bottom: none;
}

.gmaps-directions-step-number {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gmaps-directions-step-content {
    flex: 1;
    min-width: 0;
}

.gmaps-directions-step-instruction {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1a1a2e;
}

.gmaps-directions-step-distance {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

/* ============================================
   DIRECTIONS LOADING MODAL
   ============================================ */

.gmaps-directions-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
}

.gmaps-directions-loading-spinner {
    color: var(--primary-color);
}

.gmaps-directions-loading-text {
    color: #6b7280;
    font-size: 14px;
}

html[data-bs-theme="dark"] .gmaps-directions-loading-spinner {
    color: #2d8676;
}

html[data-bs-theme="dark"] .gmaps-directions-loading-text {
    color: #a0a0b8;
}


/* ============================================
   DIRECTIONS MODAL DARK MODE
   ============================================ */

html[data-bs-theme="dark"] .google-maps-info-directions-link {
    color: #2d8676;
}

html[data-bs-theme="dark"] .google-maps-info-directions-link:hover {
    color: var(--primary-color);
}

html[data-bs-theme="dark"] #gmapsDirectionsResultModal .modal-content,
html[data-bs-theme="dark"] #gmapsDirectionsErrorModal .modal-content {
    background-color: #1e1e2e;
    color: #e2e2f0;
}

html[data-bs-theme="dark"] #gmapsDirectionsResultModal .modal-header,
html[data-bs-theme="dark"] #gmapsDirectionsErrorModal .modal-header {
    border-bottom-color: #3a3a4e;
}

html[data-bs-theme="dark"] #gmapsDirectionsResultModal .modal-footer,
html[data-bs-theme="dark"] #gmapsDirectionsErrorModal .modal-footer {
    border-top-color: #3a3a4e;
}

html[data-bs-theme="dark"] .gmaps-directions-summary {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .gmaps-directions-route {
    color: #a0a0b8;
    border-bottom-color: #3a3a4e;
}

html[data-bs-theme="dark"] .gmaps-directions-step {
    border-bottom-color: #2a2a3e;
}

html[data-bs-theme="dark"] .gmaps-directions-step-number {
    background-color: #155046;
}

html[data-bs-theme="dark"] .gmaps-directions-step-instruction {
    color: #e2e2f0;
}

html[data-bs-theme="dark"] .gmaps-directions-step-distance {
    color: #6a6a80;
}

/* ============================================
   DIRECTIONS PRINT
   ============================================ */

@media print {
    .google-maps-container {
        display: none !important;
    }
}

/* ============================================
   DIRECTIONS ROUTE CLEAR BUTTON
   ============================================ */

.google-maps-clear-route-btn {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 10px;
    z-index: 10;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    border: none;
    background-color: #fff;
    color: #dc3545;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.15s;
}

.google-maps-clear-route-btn:hover {
    background-color: #dc3545;
    color: #fff;
    transform: scale(1.1);
}

html[data-bs-theme="dark"] .google-maps-clear-route-btn {
    background-color: #242830;
    color: #f87171;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .google-maps-clear-route-btn:hover {
    background-color: #dc3545;
    color: #fff;
}

/* ============================================
   CATEGORY FILTER BUTTONS
   ============================================ */

.google-maps-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    justify-content: center;
}

.google-maps-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 18px;
    border: 2px solid var(--cat-color, #1d6b5e);
    background: var(--cat-icon-bg, transparent);
    color: var(--cat-icon-color, var(--cat-color, #1d6b5e));
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-width 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.google-maps-filter-btn:hover {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cat-color, #1d6b5e) 30%, transparent);
}

/* Active state indicator: a colored dot placed opposite the icon
   (on the inline-end / right side), so the icon stays untouched. */
.google-maps-filter-btn::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cat-color, #1d6b5e);
    margin-inline-start: 4px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.google-maps-filter-btn.active::after {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #1d6b5e) 25%, transparent);
}

.google-maps-filter-btn i {
    font-size: 0.82rem;
}

/* Fallback dot shown when a category has no icon: a filled circle
   the size of an icon glyph, colored with the category color — matches
   the marker pin dot rendered on the map canvas. */
.google-maps-filter-dot {
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 50%;
    background: var(--cat-color, #1d6b5e);
    flex-shrink: 0;
}

/* ============================================
   FILTER POSITION: TOP (default)
   ============================================ */

.google-maps-container.filter-top {
    display: flex;
    flex-direction: column;
}

.google-maps-container.filter-top .google-maps-category-filter {
    order: -1;
}

/* ============================================
   FILTER POSITION: BOTTOM
   ============================================ */

.google-maps-container.filter-bottom {
    display: flex;
    flex-direction: column;
}

/* ============================================
   FILTER POSITION: LEFT
   ============================================ */

.google-maps-container.filter-left {
    display: flex;
    flex-wrap: wrap;
}

.google-maps-container.filter-left .google-maps-canvas {
    flex: 1;
    min-width: 0;
}

.google-maps-container.filter-left .google-maps-category-filter {
    flex-direction: column;
    order: -1;
    padding-inline-end: 12px;
    justify-content: flex-start;
    gap: 6px;
}

.google-maps-container.filter-left .google-maps-filter-btn {
    border-radius: 8px;
}

/* ============================================
   FILTER POSITION: RIGHT
   ============================================ */

.google-maps-container.filter-right {
    display: flex;
    flex-wrap: wrap;
}

.google-maps-container.filter-right .google-maps-canvas {
    flex: 1;
    min-width: 0;
}

.google-maps-container.filter-right .google-maps-category-filter {
    flex-direction: column;
    padding-inline-start: 12px;
    justify-content: flex-start;
    gap: 6px;
}

.google-maps-container.filter-right .google-maps-filter-btn {
    border-radius: 8px;
}

/* ============================================
   FILTER POSITION: OVERLAY (inside map)
   ============================================ */

.google-maps-container.filter-overlay .google-maps-category-filter {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 1;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.google-maps-container.filter-overlay .google-maps-filter-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-width: 1.5px;
    background-color: color-mix(in srgb, var(--cat-icon-bg, #ffffff) 92%, transparent);
    backdrop-filter: blur(4px);
}

/* ============================================
   CATEGORY FILTER - DARK MODE
   ============================================ */

html[data-bs-theme="dark"] .google-maps-filter-btn {
    border-color: var(--cat-color, #2d8676);
    background: var(--cat-icon-bg, #1e1e2e);
    color: var(--cat-icon-color, var(--cat-color, #2d8676));
}

html[data-bs-theme="dark"] .google-maps-filter-btn::after {
    background: var(--cat-color, #2d8676);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color, #2d8676) 25%, transparent);
}

html[data-bs-theme="dark"] .google-maps-container.filter-overlay .google-maps-filter-btn {
    background-color: color-mix(in srgb, var(--cat-icon-bg, #1e1e2e) 92%, transparent);
    color: var(--cat-icon-color, var(--cat-color, #2d8676));
}

/* ============================================
   CATEGORY FILTER - RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    .google-maps-category-filter {
        gap: 6px;
        padding: 8px 0;
    }

    .google-maps-filter-btn {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .google-maps-filter-btn::after {
        width: 6px;
        height: 6px;
        margin-inline-start: 3px;
    }

    .google-maps-container.filter-left,
    .google-maps-container.filter-right {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .google-maps-container.filter-left .google-maps-canvas,
    .google-maps-container.filter-right .google-maps-canvas {
        flex: none;
        width: 100%;
    }

    .google-maps-container.filter-left .google-maps-category-filter,
    .google-maps-container.filter-right .google-maps-category-filter {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 0 0 0;
        order: 0;
        width: 100%;
    }

    .google-maps-container.filter-overlay .google-maps-category-filter {
        top: 5px;
        inset-inline-start: 5px;
    }

    .google-maps-info-content-row {
        flex-direction: column !important;
    }

    .google-maps-info-image {
        width: auto;
        max-width: 150px !important;
        max-height: 50px !important;
    }

    .google-maps-info-desc {
        font-size: 0.8rem !important;
    }

    .google-maps-info-title.google-maps-info-link {
        display: inline;
        background: none;
    }
}