
/*
 * BRALEX INFO BOARD 0.5.0
 * Aparência controlada por Configurações > Bralex Info Board.
 * O plugin NÃO define altura da barra verde.
 */

.elementor-widget-shortcode.bralex-info-board-widget {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.elementor-widget-shortcode.bralex-info-board-widget > .elementor-widget-container,
.elementor-widget-shortcode.bralex-info-board-widget .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bralex-info-board,
.bralex-info-board * {
    box-sizing: border-box;
    font-family: var(--bib-font, Arial, Helvetica, sans-serif) !important;
}

.bralex-info-board {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--bib-text-color, #fff) !important;
    overflow: hidden !important;
}

.bralex-info-track {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
}

.bralex-info-slide {
    grid-area: 1 / 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--bib-gap-title, 10px) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(2px);
}

.bralex-info-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.bralex-info-slide.is-entering {
    animation: bralex-info-in .30s ease both;
}

.bralex-info-slide.is-leaving {
    animation: bralex-info-out .18s ease both;
}

.bralex-info-type {
    flex: 0 0 auto;
    color: var(--bib-title-color, #ffe338) !important;
    font-size: var(--bib-title-size, 11px) !important;
    font-weight: var(--bib-title-weight, 800) !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
}

.bralex-weather-list,
.bralex-exchange-list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--bib-gap-items, 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.bralex-weather-item,
.bralex-exchange-item {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--bib-item-gap, 4px) !important;
    white-space: nowrap !important;
}

.bralex-weather-city,
.bralex-exchange-name {
    color: var(--bib-text-color, #fff) !important;
    font-size: var(--bib-text-size, 10px) !important;
    font-weight: var(--bib-text-weight, 700) !important;
    line-height: 1 !important;
}

.bralex-weather-temp,
.bralex-exchange-value {
    color: var(--bib-text-color, #fff) !important;
    font-size: var(--bib-text-size, 10px) !important;
    font-weight: var(--bib-value-weight, 800) !important;
    line-height: 1 !important;
}

.bralex-weather-temp {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--bib-temp-py, 2px) var(--bib-temp-px, 5px) !important;
    background: var(--bib-temp-bg, rgba(0,0,0,.08)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--bib-temp-radius, 3px) !important;
}

.bralex-exchange-flag {
    font-size: var(--bib-text-size, 10px) !important;
    line-height: 1 !important;
}

.bralex-info-separator {
    display: none !important;
}

@keyframes bralex-info-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bralex-info-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-2px); }
}

@media (max-width: 1024px) {
    .bralex-info-type {
        font-size: var(--bib-title-size-tablet, 10px) !important;
    }

    .bralex-weather-city,
    .bralex-exchange-name,
    .bralex-weather-temp,
    .bralex-exchange-value,
    .bralex-exchange-flag {
        font-size: var(--bib-text-size-tablet, 9px) !important;
    }
}

@media (max-width: 767px) {
    .bralex-info-type {
        font-size: var(--bib-title-size-mobile, 9px) !important;
    }

    .bralex-weather-city,
    .bralex-exchange-name,
    .bralex-weather-temp,
    .bralex-exchange-value,
    .bralex-exchange-flag {
        font-size: var(--bib-text-size-mobile, 8px) !important;
    }
}
