/*
 * A hőtérkép (homersekletterkep.inc.php) saját stílusa; a doboz, a cím, a gombok és a buborék az Időkép
 * térképéi (css/idokepterkep.css), a jelmagyarázat a hótérképéhez hasonló.
 */
.homerseklet-terkep,
.homerseklet-terkep .idokep-map {
    background: #1b2026;
}

.homerseklet-skala {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding: 10px 14px 12px;
    background: #12171d;
    color: rgba(255, 255, 255, .88);
    font: 500 12px/1.3 "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.homerseklet-skala-fo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 360px; /* nem szűkül: ha a számok nem férnek mellé, új sorba kerülnek */
    min-width: 0;
}

.homerseklet-skala-cim {
    flex: none;
    font-weight: 700;
}

.homerseklet-skala-sav {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-bottom: 15px;
}

.homerseklet-skala-sav canvas {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 2px;
}

.homerseklet-skala-jelek span {
    position: absolute;
    top: 13px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.homerseklet-skala-jelek span:first-child {
    transform: none;
}

.homerseklet-skala-jelek span:last-child {
    transform: translateX(-100%);
}

.homerseklet-skala-egyeb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.homerseklet-skala-elem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.homerseklet-skala-elem b {
    padding: 0 3px;
    border-radius: 3px;
    background: #2a313a;
    font-weight: 700;
}


.homerseklet-jel-amator {
    color: #fff;
}

.homerseklet-jel-allomas {
    color: #e9f3ff;
    font-weight: 500 !important;
}

.homerseklet-jel-viz {
    color: #8fe3ff;
    background: rgba(4, 30, 70, .95) !important;
}

.homerseklet-ctrl-gps svg {
    display: block;
    margin: auto;
    color: #333;
}

.homerseklet-tip .idokep-tip-eg {
    font-weight: 700;
}

/* az automaták buboréka a 510 px-es grafikonnal és a bannerrel szélesebb (mint a széltérképen) */
.idokep-tip.homerseklet-tip-automata {
    width: 534px;
    max-width: calc(100vw - 8px);
}

.homerseklet-tip-banner {
    display: block;
    width: 100%;
    max-height: none !important;
    aspect-ratio: 1020 / 132;
    object-fit: contain;
    margin-top: 8px;
    border-radius: 6px;
}

@media (max-width: 575.98px) {
    .homerseklet-skala {
        padding: 8px 10px 10px;
        font-size: 11px;
    }

    .homerseklet-skala-fo {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .homerseklet-skala-elem {
        white-space: normal;
    }
}

/* idősáv (visszajátszás) a térkép és a jelmagyarázat között, a jelmagyarázat színében */
.homerseklet-idosav {
    background: #12171d;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.homerseklet-idosav[hidden] {
    display: none;
}