/* Двухчасовки (Ши Чень) — стили виджета («Линия времени»). */

.dvh-widget {
    /* Блок по ширине страницы сайта (как .vcm-gates-main в «Вратах Ци Мень») */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
    font-family: Roboto, system-ui, sans-serif;
    color: #22262B;
    padding: 40px 48px;
}

.dvh-widget * { box-sizing: border-box; }

/* Содержимое — читаемая колонка слева, без центрирования в широком блоке. */
.dvh-widget__inner {
    max-width: 480px;
    margin: 0;
}

.dvh-widget__title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    font-family: "Noto Sans", system-ui, sans-serif;
}

.dvh-widget__subtitle {
    margin: 0 0 24px;
    font-size: 13px;
    color: #767067;
}

.dvh-widget__search { position: relative; }

.dvh-widget__label {
    display: block;
    font-size: 12px;
    color: #767067;
    margin-bottom: 6px;
}

.dvh-widget__input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: #22262B;
    background: #FBFAF8;
    border: 1px solid #DAD5CC;
    border-radius: 3px;
    padding: 10px 12px;
    outline: none;
}
.dvh-widget__input:focus { border-color: #9C6B3E; }

.dvh-widget__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.dvh-widget__suggestions li {
    padding: 10px 12px;
    cursor: pointer;
}

.dvh-widget__suggestions li:hover,
.dvh-widget__suggestions li:focus {
    background: #f0f0f0;
}

.dvh-widget__status {
    margin: 10px 0 0;
    font-size: 13px;
}

.dvh-widget__result { margin-top: 28px; }

.b-city { font-weight: 600; margin: 0 0 10px; }

.b-timeline { position: relative; padding-left: 20px; }
.b-timeline::before {
    content: "";
    position: absolute;
    left: 4px; top: 6px; bottom: 6px;
    width: 1px;
    background: #DAD5CC;
}

.b-stop {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
}
.b-stop::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #C7C1B5;
}

/* Иероглиф — цветом своей стихии (у син); перевод в скобках — обычным цветом текста.
   Фиксированная ширина колонки — чтобы название и время начинались на одной линии
   независимо от длины конкретного иероглифа/пиньиня. */
.b-hanzi { flex: 0 0 66px; font-size: 13px; white-space: nowrap; }
.b-hanzi .char { font-weight: 700; }
.b-hanzi .pinyin { color: #22262B; }
.b-hanzi.elem-wood  .char { color: #3E7C43; }
.b-hanzi.elem-fire  .char { color: #B3412E; }
.b-hanzi.elem-earth .char { color: #A1783B; }
.b-hanzi.elem-metal .char { color: #767F8C; }
.b-hanzi.elem-water .char { color: #2F5D8A; }

.b-stop .sign {
    flex: 0 0 110px;
    font-size: 14px;
}

.b-stop .time {
    flex: 0 0 80px;
    font-size: 13px;
    color: #55504A;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .dvh-widget { padding: 28px 20px; }
    .dvh-widget__title { font-size: 21px; }
}