/* Add your general styles */

.preview-sticky-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    z-index: 999;
    width: 100%;
    background-color: var(--banner-background-color);
}
  
.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    min-height: 4rem;
    height: auto;
    width: 100%;
}

.text-center {
    text-align: center;
}

.countdown-timer {    
    padding-top: 4px;
}

.cta-button {
    /* display: flex; */
}

.cta-button a:hover {
    color: var(--call-action-color);
}

.promotion-text {
    color: var(--promotion-text-color) !important;
}

.call-action-btn {
    cursor: pointer;
    border-radius: 0.375rem;    
    padding: 0.625rem 1.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-decoration-line: none;
    color: var(--call-action-color);
}

.flex-grow {
    flex-grow: 1;
}

.preview-sticky-bar .timer-card {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Roboto;
    display: inline-block;
    text-align: center;
}

.preview-sticky-bar .timer-unit.cf-timer-hidden {
    display: none !important;
}

.preview-sticky-bar .timer-card .timer-unit-block {
    display: inline-block;
}

.preview-sticky-bar .timer-unit-inline {
    display: inline;
}

.preview-sticky-bar .timer-card .timer-unit-block .timer-unit-number {
    padding: .75rem;
    background: #000;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    margin: 0px 5px;
}

.preview-sticky-bar .timer-card .timer-unit-block .timer-unit-text {
    padding-top: 5px;
    font-size: 16px;
    color: #000;
    text-align: center !important;
}
 
.timer-unit-block {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}
  /* Add your specific styles according to the HTML classes you are using */


/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* new-sticky-bar css */

.content-stickybar {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
}

.content-sticky-bar-wrapper {
    height: 100% !important;
}

.promtion-text {
    width: 50%;
    text-align: center;
}

.countdown-timmer {
    width: 100%;
    margin: 0px auto;
}

.close-banner {
    background-color: var(--close-banner-background-color) !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
  
.call-action {
    display: block;
    border: 1px solid var(--call-action-color) !important;
}
  
.timer-card .timer-unit-text {
    padding-top: 5px;
    font-size: 16px;
    color: var(--timer-unit-text-color) !important;
    text-align: center !important;
}
  
.timer-card .timer-unit-block .timer-unit-number {
    padding: 0px;
    border-radius: 3px;
    color: var(--timer-unit-number-color) !important;
    background-color: var(--timer-unit-number-bg-color) !important;
    display: inline-block;
    margin: 0px 5px;
}
  
.text-sm p {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base p {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg p {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl p {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl p {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl p {
    font-size: 2.25rem;
    line-height: 2.5rem;
}


/* Mobile First Approach: Default styles are for mobile */
.promotion-text, .countdown-timer, .cta-button {
    flex-basis: 100%;  /* On mobile, items take the full width */    
}

/* Styles for tablets and desktops */
@media (min-width: 768px) {
    .header-wrapper {
        flex-wrap: nowrap; /* Prevent wrapping on desktop */
    }

    .promotion-text { 
        flex-basis: 50%;  /* 50% width for promotion text on wider screens */
    }

    .countdown-timer, .cta-button { 
        flex-basis: 30%; /* 30% width for timer and CTA button on wider screens */
    }
}