/* ==========================================
   BARRA DE VIAGENS
========================================== */

.trips-bar {

    width: calc(100% - 32px);
    max-width: 1100px;

    margin: 12px auto 18px;

    padding: 12px 14px;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;

    user-select: none;
}


.trips-bar:hover {

    border-color:
        rgba(12, 45, 36, 0.25);

    box-shadow:
        var(--shadow-md);

}


.trips-bar:active {

    transform: scale(0.985);

}


/* ==========================================
   LADO ESQUERDO
========================================== */

.trips-bar-left {

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;

}


.trips-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        var(--primary-green);

    color: #FFFFFF;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

}


.trips-info {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;

}


.trips-info strong {

    font-size: 14px;

    font-weight: 800;

    color: var(--text-dark);

}


.trips-info span {

    font-size: 11px;

    color: var(--text-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* ==========================================
   LADO DIREITO
========================================== */

.trips-bar-right {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}


.trips-count {

    min-width: 27px;
    height: 27px;

    padding: 0 7px;

    border-radius: 9px;

    background:
        var(--bg-light);

    color:
        var(--text-dark);

    border:
        1px solid var(--border-color);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;

    font-weight: 900;

}


.active-trip-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 8px;

    border-radius: 20px;

    background:
        rgba(22, 163, 74, 0.10);

    color:
        #16A34A;

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;

}


.active-trip-badge i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #16A34A;

    animation:
        activeTripPulse 1.6s infinite;

}


@keyframes activeTripPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(22, 163, 74, 0.35);
    }

    70% {
        box-shadow:
            0 0 0 5px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(22, 163, 74, 0);
    }

}


.trips-arrow {

    font-size: 18px;

    color:
        var(--text-muted);

}


/* ==========================================
   DARK MODE
========================================== */

body.dark-theme .trips-icon {

    color:
        var(--primary-green);

    background:
        var(--accent-yellow);

}


body.dark-theme .active-trip-badge {

    background:
        rgba(34, 197, 94, 0.12);

    color:
        #4ADE80;

}


body.dark-theme .active-trip-badge i {

    background:
        #4ADE80;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {

    .trips-bar {

        width: calc(100% - 24px);

        margin-top: 10px;
        margin-bottom: 14px;

        padding: 11px 12px;

    }


    .trips-icon {

        width: 40px;
        height: 40px;

        font-size: 17px;

    }


    .trips-info strong {

        font-size: 13px;

    }


    .trips-info span {

        max-width: 150px;

    }


    .active-trip-badge {

        font-size: 8px;

        padding:
            4px 6px;

    }

}