.headerBackground {
    width: 100%;
    min-height: 140px;

    background-image: url('../js/components/header/assets/buyerDashboardHeaderImg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px 30px 50px;
}

.portlet-boundary_buyerdashboardreact_ .autofit-float.autofit-row.portlet-header{
    display: none !important;
}

.headerPosition{
    position: relative;
}

/* Cards stay in the normal document flow so the following content
   (e.g. the order graph) is pushed below them instead of overlapping.
   The negative top margin keeps the original overlapping look on the
   header image. */
.countCards{
    position: relative;
    width: 100%;
    margin-top: -40px;
    margin-bottom: 24px;
    padding: 0 70px;
    z-index: 2;
}

.allCardsPadding{
    padding: 0 70px;
}

/* Responsive grid: 4 columns (desktop) -> 2 (tablet) -> 1 (mobile) */
.countCardsGrid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .countCardsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .countCardsGrid{
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

.buyerGreeting{
    font-weight: 600;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
    margin-bottom: 8px;
}

.buyerGreeting + p{
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 1rem);
    margin-bottom: 0;
}

.countCard {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 110px;
    padding: 18px 16px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    container-type: inline-size;
}

/* Icon */
.countCardIcon {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countCardIcon img {
    width: 58px;
    height: 58px;
    max-width: 100%;
    object-fit: contain;
}

/* Content */
.countCardContent {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
    padding-left: 8px;
}

.countCardTitle {
    font-size: 14px;
    color: #334e7d;
    margin-bottom: 4px;
}

.countCardBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.countCardValue {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #101b3d;
    min-width: 0;
    white-space: nowrap;
}

.countCardTrend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #55a629;
    white-space: nowrap;
}
.countCardTrend.DOWN {
    color: #e02424 !important;
}
.countCardTrend.FLAT {
    color: #6b7280 !important;
}

.trendArrow {
    font-size: 18px;
    font-weight: 600;
}
.trendArrow.UP {
    color: #55a629;
}
.trendArrow.DOWN {
    color: #e02424;
}
.trendArrow.FLAT {
    color: #6b7280;
}


.countCardComparison {
    margin-top: 5px;
    text-align: right;
    font-size: 12px;
    color: #47546b;
}

/* Bottom wave */
.countCardWave {
        position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* height: 37px; */
    overflow: hidden;
    pointer-events: none;
}
.countCardWave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Extra small devices - mobile */
@media (max-width: 575.98px) {
    .headerBackground {
        min-height: 120px;
        padding: 16px 16px 56px;
    }

    .countCards {
        margin-top: -34px;
        margin-bottom: 16px;
    }

    .countCard {
        min-height: 96px;
        padding: 14px 12px;
    }

    .countCardIcon {
        width: 52px;
        height: 52px;
    }

    .countCardIcon img {
        width: 46px;
        height: 46px;
    }

    .countCardValue {
        font-size: 22px;
    }

    .countCardTitle {
        font-size: 13px;
    }
     .countCards ,.allCardsPadding{
        padding: 0 20px;
    }
}

/* Small devices - mobile landscape / small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .headerBackground {
        padding: 18px 24px 58px;
    }

    .countCards {
        margin-top: -36px;
        margin-bottom: 20px;
    }
     .countCards ,.allCardsPadding{
        padding: 0 30px;
    }

    .countCard {
        min-height: 102px;
    }
}

/* Medium devices - tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .countCards {
        margin-top: -38px;
    }
     .countCards ,.allCardsPadding{
        padding: 0 30px;
    }
}

/* Large devices - desktop */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .countCards ,.allCardsPadding{
        padding: 0 30px;
    }
   
}

/* Extra large devices */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .countCards ,.allCardsPadding{
        padding: 0 30px;
    }
   
}
/* Extra extra large devices */
@media (min-width: 1400px) {
    .countCards ,.allCardsPadding{
        padding: 0 40px;
    }
   
}

/* Card content scales with the card's own width (container query), so a long
   value such as the Pending Payments amount shrinks instead of wrapping and
   stretching every card in the same grid row. */
@container (max-width: 300px) {
    .countCardIcon {
        width: 54px;
        height: 54px;
    }

    .countCardIcon img {
        width: 48px;
        height: 48px;
    }

    .countCardValue {
        font-size: 20px;
    }

    .countCardTitle {
        font-size: 13px;
    }
}

@container (max-width: 260px) {
    .countCardIcon {
        width: 46px;
        height: 46px;
    }

    .countCardIcon img {
        width: 40px;
        height: 40px;
    }

    .countCardValue {
        font-size: 17px;
    }

    .countCardTitle {
        font-size: 12px;
    }

    .countCardTrend {
        font-size: 12px;
    }

    .trendArrow {
        font-size: 15px;
    }
}