@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

@font-face {
    font-family: "Roca One";
    src: local("Roca One"), local("RocaOne");
    font-display: swap;
}

.scsl-wrapper {
    --scsl-bg: #f1ebdf !important;
    --scsl-ink: #1f2522 !important;
    --scsl-muted: #5d675f !important;
    --scsl-panel: rgba(255, 255, 255, 0.78) !important;
    --scsl-panel-strong: #ffffff !important;
    --scsl-border: rgba(103, 113, 89, 0.24) !important;
    --scsl-accent: #1f2d27 !important;
    --scsl-accent-deep: #131c18 !important;
    --scsl-accent-soft: #e8f0d2 !important;
    --scsl-map-height: 540px !important;

    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--scsl-border) !important;
    border-radius: 30px !important;
    padding: clamp(18px, 3vw, 30px) !important;
    color: var(--scsl-ink) !important;
    font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at -10% -20%, rgba(151, 170, 82, 0.16), transparent 48%),
        radial-gradient(circle at 110% 110%, rgba(122, 102, 63, 0.1), transparent 52%),
        var(--scsl-bg) !important;
    box-shadow:
        0 26px 48px -34px rgba(36, 41, 32, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

.scsl-wrapper * {
    box-sizing: border-box !important;
}

.scsl-wrapper::before {
    content: "" !important;
    position: absolute !important;
    inset: -18% -8% -18% -12% !important;
    background: repeating-radial-gradient(circle at 30% 30%, rgba(175, 183, 153, 0.11) 0 24px, transparent 24px 56px) !important;
    opacity: 0.38 !important;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.45) 78%, transparent 100%) !important;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.45) 78%, transparent 100%) !important;
    transform: rotate(-4deg) !important;
    pointer-events: none !important;
}

.scsl-wrapper::after {
    content: "" !important;
    position: absolute !important;
    inset: -8% -12% -26% 34% !important;
    background:
        radial-gradient(circle at 36% 28%, rgba(151, 170, 82, 0.2), transparent 64%),
        radial-gradient(circle at 78% 70%, rgba(124, 97, 51, 0.1), transparent 68%) !important;
    opacity: 0.52 !important;
    pointer-events: none !important;
}

.scsl-layout {
    position: relative !important;
    z-index: 2 !important;
}

.scsl-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
    gap: clamp(14px, 1.9vw, 22px) !important;
    align-items: start !important;
}

.scsl-sidebar {
    background: var(--scsl-panel) !important;
    border: 1px solid rgba(101, 111, 86, 0.2) !important;
    border-radius: 22px !important;
    padding: clamp(12px, 1.6vw, 18px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(2px) !important;
}

.scsl-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.scsl-search {
    width: 100% !important;
    border: 1px solid #c8cfbc !important;
    border-radius: 12px !important;
    background: #fdfefa !important;
    color: #1f2522 !important;
    font-size: 0.94rem !important;
    font-family: "Manrope", "Avenir Next", sans-serif !important;
    padding: 10px 12px !important;
}

.scsl-search:focus {
    outline: none !important;
    border-color: #8ca456 !important;
    box-shadow: 0 0 0 3px rgba(151, 170, 82, 0.2) !important;
    background: #ffffff !important;
}

.scsl-location-list {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 14px !important;
    max-height: calc(var(--scsl-map-height) - 74px) !important;
    overflow: auto !important;
    padding-right: 2px !important;
}

.scsl-location-item,
.scsl-empty-row {
    border: 1px solid rgba(186, 202, 161, 0.84) !important;
    border-radius: 14px !important;
    padding: 11px !important;
    background: linear-gradient(168deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 242, 0.94)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 16px -14px rgba(20, 31, 27, 0.24) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.scsl-location-item {
    position: relative !important;
    overflow: hidden !important;
}

.scsl-location-item::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(149, 172, 112, 0.9), rgba(103, 141, 111, 0.72)) !important;
    pointer-events: none !important;
}

.scsl-location-item:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(138, 167, 107, 0.86) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 14px 22px -14px rgba(20, 31, 27, 0.36) !important;
}

.scsl-location-item.is-active {
    border-color: rgba(86, 117, 91, 0.88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 16px 26px -16px rgba(20, 31, 27, 0.44) !important;
}

.scsl-location-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.scsl-location-title {
    margin: 0 !important;
    font-family: "Roca One", "Fraunces", "Iowan Old Style", serif !important;
    font-size: 1.03rem !important;
    line-height: 1.18 !important;
    color: #1e2f27 !important;
}

.scsl-location-line,
.scsl-location-description {
    margin: 7px 0 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
    color: #3d463f !important;
}

.scsl-location-actions {
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.scsl-outline-button,
.scsl-route-link,
.scsl-site-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.scsl-outline-button {
    border: 1px solid #b9c9a0 !important;
    background: #f3f8e6 !important;
    color: #2f4636 !important;
    cursor: pointer !important;
}

.scsl-outline-button:hover {
    background: #e7f0d1 !important;
}

.scsl-route-link {
    border: 1px solid rgba(31, 45, 39, 0.35) !important;
    background: #1f2d27 !important;
    color: #f7f9f4 !important;
}

.scsl-site-link {
    border: 1px solid #d0dac2 !important;
    background: #ffffff !important;
    color: #3b483f !important;
}

.scsl-map-column {
    position: relative !important;
    border: 1px solid rgba(69, 85, 65, 0.28) !important;
    border-radius: 22px !important;
    padding: 12px !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)) !important;
    box-shadow:
        0 18px 34px -24px rgba(20, 31, 27, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.scsl-map-column::after {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    pointer-events: none !important;
}

.scsl-map {
    width: 100% !important;
    height: var(--scsl-map-height) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(86, 102, 79, 0.3) !important;
    background: #dfe8cd !important;
}

.scsl-map .leaflet-container {
    font-family: "Manrope", "Avenir Next", sans-serif !important;
}

.scsl-map .leaflet-tile {
    image-rendering: auto !important;
    filter: none !important;
}

.scsl-map .leaflet-control-zoom {
    border: 1px solid rgba(47, 66, 55, 0.2) !important;
    box-shadow: 0 8px 18px -12px rgba(16, 27, 22, 0.5) !important;
}

.scsl-map .leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.94) !important;
    color: #1c2b25 !important;
    border-bottom-color: rgba(47, 66, 55, 0.16) !important;
}

.scsl-map .leaflet-control-zoom a:hover {
    background: #ffffff !important;
}

.scsl-map .leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 14px 30px -18px rgba(20, 31, 27, 0.55) !important;
}

.scsl-map .leaflet-popup-tip {
    box-shadow: 0 10px 24px -18px rgba(20, 31, 27, 0.5) !important;
}

.scsl-marker-wrap {
    background: transparent !important;
    border: 0 !important;
}

.scsl-marker-pin {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    display: block !important;
    background: radial-gradient(circle at 35% 35%, #315949, #1a3028 72%) !important;
    border: 2px solid rgba(245, 250, 238, 0.95) !important;
    box-shadow:
        0 12px 18px -10px rgba(20, 31, 27, 0.72),
        0 0 0 1px rgba(28, 44, 36, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.scsl-marker-wrap:hover .scsl-marker-pin,
.scsl-marker-wrap.is-active .scsl-marker-pin {
    transform: scale(1.08) !important;
    box-shadow:
        0 16px 24px -12px rgba(20, 31, 27, 0.8),
        0 0 0 2px rgba(231, 240, 210, 0.94) !important;
}

.scsl-popup {
    display: grid !important;
    gap: 4px !important;
    line-height: 1.35 !important;
}

.scsl-popup a {
    margin-top: 4px !important;
    color: #1f4f3e !important;
    font-weight: 700 !important;
}

.scsl-empty {
    margin: 0 !important;
}

.scsl-wrapper .screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

@media (max-width: 1120px) {
    .scsl-layout {
        grid-template-columns: 1fr !important;
    }

    .scsl-location-list {
        max-height: 360px !important;
    }

    .scsl-map {
        height: min(72vh, var(--scsl-map-height)) !important;
    }
}

@media (max-width: 680px) {
    .scsl-wrapper {
        border-radius: 22px !important;
        padding: 14px !important;
    }

    .scsl-sidebar,
    .scsl-map-column {
        border-radius: 18px !important;
        padding: 10px !important;
    }

    .scsl-map {
        border-radius: 12px !important;
        height: 430px !important;
    }
}