.stay-area-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font: 600 11px/1.3 "Open Sans", sans-serif;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.stay-area-badge--recommended {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(22, 163, 74, 0.35);
}

.stay-area-badge--caution {
    color: #854d0e;
    background: rgba(234, 179, 8, 0.16);
    border-color: rgba(202, 138, 4, 0.35);
}

.stay-area-badge--less_recommended {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

.stay-area-badge--neutral {
    color: #475569;
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(100, 116, 139, 0.28);
}

.stay-area-badge--popup {
    margin: 0;
}

.maps-experiment__guide-toggle,
.hsr-stay-area-panel__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font: 500 13px/1.4 "Open Sans", sans-serif;
    color: #334155;
    cursor: pointer;
}

.maps-experiment__guide-toggle input,
.hsr-stay-area-panel__toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.hsr-stay-area-panel {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.hsr-stay-area-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.hsr-stay-area-panel__title {
    margin: 0 0 4px;
    font: 700 18px/1.25 "Overpass", sans-serif;
    color: #0f172a;
}

.hsr-stay-area-panel__subtitle {
    margin: 0;
    font: 500 13px/1.4 "Open Sans", sans-serif;
    color: #64748b;
}

.hsr-stay-area-map {
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.hsr-stay-area-panel__disclaimer {
    margin: 10px 0 0;
    font: 400 12px/1.45 "Open Sans", sans-serif;
    color: #64748b;
}

.hsr-badge--stay-area-recommended {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

.hsr-badge--stay-area-caution {
    background: rgba(234, 179, 8, 0.16);
    color: #854d0e;
}

.hsr-badge--stay-area-less {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.hsr-card__stay-area-note {
    margin: 0 0 8px;
    font: 500 12px/1.4 "Open Sans", sans-serif;
    color: #94a3b8;
}

@media (max-width: 640px) {
    .hsr-stay-area-panel__head {
        flex-direction: column;
    }

    .hsr-stay-area-map {
        height: 260px;
    }
}
