/* Traffic — Splitv Zone (wide short).
 * 4 equal columns: label/status, time, street, route+distance.
 */

.tr-splitv {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.tr-splitv-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1.5fr auto 1fr;
    align-items: stretch;
    color: #202124;
    width: 80%;
    height: 80%;
    box-sizing: border-box;
    gap: 0;
}

.tr-splitv-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border: 1.5cqh solid #4b555c;
    border-radius: 5cqh;
    padding: 2cqh 1cqw;
    gap: 1cqh;
    box-shadow:
        rgba(0, 0, 0, 0.16) 0 0.3cqh 0.6cqh,
        rgba(0, 0, 0, 0.23) 0 0.3cqh 0.6cqh;
}

/* ── Cell 1: Label + status ─────────────────────────── */
.tr-splitv-section-label {
    font-size: 7cqh !important;
    font-weight: 700 !important;
    font-family: 'Roboto', sans-serif;
    color: #5F6368;
    letter-spacing: 0.15em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    text-align: center;
}
.tr-splitv-section-icon {
    font-size: 20cqh !important;
    color: #1A73E8;
    line-height: 1 !important;
}
.tr-splitv-status {
    font-size: 9cqh !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    background: var(--tr-color, #34A853);
    padding: 1cqh 2.5cqh;
    border-radius: 1cqh;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
}

/* ── Cell 2: Time + delay ───────────────────────────── */
.tr-splitv-time {
    --shadow: color-mix(in srgb, var(--tr-color, #34A853), #000 60%);
    font-size: 22cqh !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif;
    color: var(--tr-color, #34A853);
    line-height: 1 !important;
    text-shadow:
        -0.15cqh 0 var(--shadow),
        0 0.15cqh var(--shadow),
        0.15cqh 0 var(--shadow),
        0 -0.15cqh var(--shadow),
        -1.2cqh 1.2cqh var(--shadow),
        -1.05cqh 1.05cqh var(--shadow),
        -0.9cqh 0.9cqh var(--shadow),
        -0.75cqh 0.75cqh var(--shadow),
        -0.6cqh 0.6cqh var(--shadow),
        -0.45cqh 0.45cqh var(--shadow),
        -0.3cqh 0.3cqh var(--shadow),
        -0.15cqh 0.15cqh var(--shadow);
}
.tr-splitv-time-unit {
    font-size: 6cqh !important;
    font-weight: 500 !important;
    text-shadow: none;
}
.tr-splitv-delay {
    font-size: 6.5cqh !important;
    font-weight: 500 !important;
    font-family: 'Roboto', sans-serif;
    color: #5F6368;
    line-height: 1 !important;
}

/* ── Cell 3: Street SVG ─────────────────────────────── */
.tr-splitv-street-cell {
    overflow: hidden;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tr-splitv-street-img {
    width: auto !important;
    height: 80% !important;
    max-width: 100% !important;
    max-height: 80% !important;
    object-fit: contain;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block;
}
.tr-splitv-card > .tr-splitv-cell:nth-child(2) .tr-splitv-street-img {
    transform: scaleX(-1);
}

/* ── Cell 4: Points + distance ──────────────────────── */
.tr-splitv-points-cell {
    flex-direction: column;
    gap: 1.2cqh;
}
.tr-splitv-point {
    font-size: 7cqh !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif;
    color: #202124;
    line-height: 1.1 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.tr-splitv-line {
    height: 0.4cqh;
    background: var(--tr-color, #34A853);
    align-self: center;
}
.tr-splitv-line-left {
    width: 3cqh;
}
.tr-splitv-line-right {
    width: 3cqh;
    position: relative;
}
.tr-splitv-line-right::after {
    content: '';
    position: absolute;
    right: -1.2cqh;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 1.4cqh solid var(--tr-color, #34A853);
    border-top: 0.9cqh solid transparent;
    border-bottom: 0.9cqh solid transparent;
}
.tr-splitv-dots-dash {
    font-size: 9cqh !important;
    font-weight: 700 !important;
    line-height: 0.7 !important;
    color: var(--tr-color, #34A853);
    font-family: 'Courier New', 'Consolas', 'Roboto Mono', monospace;
}
.tr-splitv-dots-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.7;
    color: var(--tr-color, #34A853);
    font-family: 'Courier New', 'Consolas', 'Roboto Mono', monospace;
}
.tr-splitv-dots-arrow .tr-splitv-dots {
    font-size: 9cqh !important;
    font-weight: 700 !important;
}
.tr-splitv-dots-arrow .tr-splitv-tri {
    font-size: 6cqh !important;
    margin-top: -1cqh;
}
.tr-splitv-distance {
    font-size: 6.5cqh !important;
    font-weight: 500 !important;
    font-family: 'Roboto', sans-serif;
    color: #5F6368;
    line-height: 1 !important;
}