/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


.header-banner {
	height: 40px;
	background-color: var(--coastal-yellow);
	width: 100%;
	display: flex;
	justify-content: center
}

.header-banner__heading {
	margin: 8px 0px;
	font-size: var(--text-s);
	font-weight: 600;
	color: #fff;
}

.header-banner {
    position: relative;
    width: 100%;
    height: 40px;
    color: #fff;
    cursor: pointer;
}

.header-banner__content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-banner__intro,
.header-banner__book {
    color: #fff;
    font-size: var(--text-s);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-banner__book {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.header-banner__countdown {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-banner__time {
    width: 34px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    line-height: 1;
}

.header-banner__number {
    color: var(--color-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.header-banner__label {
    color: var(--color-navy);
    margin-top: 2px;
    font-size: 6px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.header-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Tablet / mobile */
@media (max-width: 767px) {

    .header-banner__content {
        gap: 7px;
    }

    .header-banner__countdown {
        gap: 3px;
    }

    .header-banner__time {
        width: 29px;
        height: 27px;
    }

    .header-banner__number {
        font-size: 11px;
    }

    .header-banner__label {
        font-size: 5px;
        margin-top: 2px;
    }
}