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

/* ─── Hide old Thrive cities/zip section ────────────────── */
[data-css="tve-u-194bd4f9750"] {
    display: none !important;
}

/* ─── Service Area Section ──────────────────────────────── */

.tsm-service-area {
    background: #0c2f33 !important;
    padding: 60px 0 70px !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    position: relative !important;
    overflow: hidden !important;
}

.tsm-service-area__inner {
    max-width: 96% !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* ─── Header ─────────────────────────────────────────────── */

.tsm-service-area__header {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.tsm-service-area__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(201, 168, 76, 0.12) !important;
    color: #c9a84c !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    margin: 0 auto 20px !important;
    box-sizing: border-box !important;
}

.tsm-service-area__badge svg {
    flex-shrink: 0 !important;
}

.tsm-service-area__title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.tsm-service-area__subtitle {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.5 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ─── Map Layout ────────────────────────────────────────── */

.tsm-service-area__map-wrap {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 500px !important;
}

.tsm-service-area__map-wrap--full {
    width: 100% !important;
    min-height: 620px !important;
}

#tsm-service-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 620px !important;
}

#tsm-service-map .mapboxgl-canvas-container,
#tsm-service-map .mapboxgl-canvas {
    outline: none !important;
}

#tsm-service-map .mapboxgl-ctrl-attrib {
    font-size: 10px !important;
}

/* HQ Badge overlay */
.tsm-service-area__hq-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: rgba(12, 47, 51, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'DM Sans', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    border: 1px solid rgba(201, 168, 76, 0.25) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.tsm-service-area__hq-dot {
    width: 8px !important;
    height: 8px !important;
    background: #c9a84c !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Custom Markers ─────────────────────────────────────── */

.tsm-marker {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    cursor: pointer !important;
}

.tsm-marker:hover {
    z-index: 100 !important;
}

.tsm-marker:hover .tsm-marker__pin {
    transform: scale(1.3) !important;
    box-shadow: 0 4px 14px rgba(12, 47, 51, 0.5), 0 0 0 3px rgba(12, 47, 51, 0.3) !important;
}

.tsm-marker:hover .tsm-marker__label {
    opacity: 1 !important;
    color: #0c2f33 !important;
}

.tsm-marker__pin {
    width: 16px !important;
    height: 16px !important;
    background: #0c2f33 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tsm-marker__pin::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 5px solid #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tsm-marker--hq .tsm-marker__pin {
    width: 22px !important;
    height: 22px !important;
    background: #c9a84c !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 10px rgba(201, 168, 76, 0.5), 0 0 0 3px rgba(201, 168, 76, 0.2) !important;
    animation: tsm-pulse 2.5s ease-in-out infinite !important;
}

.tsm-marker--hq .tsm-marker__pin::after {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 7px solid #fff !important;
    bottom: -7px !important;
}

.tsm-marker--major .tsm-marker__pin {
    width: 18px !important;
    height: 18px !important;
}

.tsm-marker__label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0c2f33 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 1) !important;
    white-space: nowrap !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    letter-spacing: 0.3px !important;
    pointer-events: none !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.tsm-marker--hq .tsm-marker__label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.tsm-marker--major .tsm-marker__label {
    font-size: 9.5px !important;
}

/* ─── Popup ──────────────────────────────────────────────── */

.tsm-map-popup .mapboxgl-popup-content {
    background: rgba(12, 47, 51, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(201, 168, 76, 0.2) !important;
}

.tsm-map-popup .mapboxgl-popup-tip {
    border-top-color: rgba(12, 47, 51, 0.95) !important;
}

.tsm-map-popup .mapboxgl-popup-close-button {
    display: none !important;
}

/* ─── City Grid ──────────────────────────────────────────── */

.tsm-service-area__cities {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.tsm-service-area__city {
    padding: 10px 12px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: color 0.2s !important;
    box-sizing: border-box !important;
}

.tsm-service-area__city:hover,
.tsm-service-area__city.tsm-city-highlight {
    color: #c9a84c !important;
}

/* ─── CTA ────────────────────────────────────────────────── */

.tsm-service-area__cta {
    text-align: left !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

.tsm-service-area__cta--centered {
    text-align: center !important;
    margin: 32px 0 0 !important;
}

.tsm-service-area__cta-text {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.tsm-service-area__cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgb(89, 131, 131) !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(89, 131, 131, 0.3) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tsm-service-area__cta-btn:hover {
    background: rgb(131, 177, 177) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(89, 131, 131, 0.4) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ─── Animations ─────────────────────────────────────────── */

@keyframes tsm-pulse {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(201, 168, 76, 0.5), 0 0 0 3px rgba(201, 168, 76, 0.2);
    }
    50% {
        box-shadow: 0 2px 10px rgba(201, 168, 76, 0.5), 0 0 0 8px rgba(201, 168, 76, 0.05);
    }
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .tsm-service-area__map-wrap {
        min-height: 350px !important;
    }

    #tsm-service-map {
        min-height: 350px !important;
    }
}

@media (max-width: 768px) {
    .tsm-service-area {
        padding: 48px 0 56px !important;
    }

    .tsm-service-area__inner {
        max-width: 95% !important;
    }

    .tsm-service-area__title {
        font-size: 28px !important;
    }

    .tsm-service-area__subtitle {
        font-size: 14px !important;
    }

    .tsm-service-area__city {
        font-size: 13px !important;
    }

    .tsm-marker__label {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .tsm-service-area__map-wrap {
        min-height: 280px !important;
    }

    #tsm-service-map {
        min-height: 280px !important;
    }

    .tsm-service-area__title {
        font-size: 24px !important;
    }

    .tsm-service-area__hq-badge {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
}