/* 都道府県ヒートマップ（日本地図）セクション用。world_bank_indicator.css を読み込まないページで使う */
.map-chart-container {
    height: 560px;
}

.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.speed-control label {
    font-weight: 600;
    white-space: nowrap;
}

.speed-control select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.speed-control select:focus {
    outline: none;
    border-color: #0284c7;
}

/* ページ側の .filter-container button より優先させるため親クラス付きで指定する */
.filter-container .playback-btn {
    margin: 0;
    padding: 5px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-container .play-btn {
    background: #0284c7;
    color: white;
    border-color: #0284c7;
}

.filter-container .play-btn:hover:not(:disabled) {
    background: #0369a1;
    border-color: #0369a1;
}

.filter-container .stop-btn {
    background: white;
    color: #333;
}

.filter-container .stop-btn:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #ef4444;
    color: #ef4444;
}

.filter-container .playback-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.select-highlight {
    background-color: #f9fcff;
    border: 1px solid #bbb;
    padding: 6px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .map-chart-container {
        height: 420px;
    }

    .speed-control {
        flex-wrap: wrap;
    }
}