/* 
 * Promo Banner Block Styles
 */

.mhh-promo-banner {
    background-color: var(--wp--preset--color--blue-900);
    color: var(--wp--preset--color--primary-white);
    padding: 8px 16px;
}

.mhh-promo-banner__inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
}

.mhh-promo-banner__icon {
    align-self: flex-start;
    margin-right: 4px !important;
    flex: 0 0 auto;
}

.mhh-promo-banner__content {
    display: flex;
    align-items: center;
}

.mhh-promo-banner__content-inner {
    font-size: 16px;
}

.mhh-promo-banner__content>* {
    margin: 0;
    line-height: 1.25;
}

.mhh-promo-banner__name {
    font-weight: 700;
    color: var(--wp--preset--color--amber-200);
}

.mhh-promo-banner__deal {
    padding: 4px 8px;
    background-color: var(--wp--preset--color--amber-200);
    color: var(--wp--preset--color--blue-900);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.1;
    flex: 0 0 85px;
}

.mhh-promo-banner__deal-code {
    font-weight: 700;
}

@media screen and (min-width: 620px) {
    .mhh-promo-banner__deal {
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 1024px) {
    .mhh-promo-banner__inner {
        gap: 24px;
        justify-content: center;
    }

    .mhh-promo-banner__content-inner {
        flex-direction: row;
        gap: 8px;
    }
}