/* ==========================================================
   Kasi Mattress
   File: announcement.css
   Folder: assets/css/layout
   Version: 1.0.0
   Last Updated: 2026-07-23
   ========================================================== */

/* ==========================================================
   Announcement Bar
   ========================================================== */

.km-announcement {

    position: relative;

    width: 100%;

    min-height: var(--announcement-height);

    background: var(--primary);

    color: var(--white);

    font-size: var(--font-size-sm);

    z-index: var(--z-fixed);

}

/* ==========================================================
   Container
   ========================================================== */

.km-announcement .km-container {

    min-height: var(--announcement-height);

}

/* ==========================================================
   Inner Wrapper
   ========================================================== */

.km-announcement-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--space-4);

    min-height: var(--announcement-height);

}

/* ==========================================================
   Message
   ========================================================== */

.km-announcement-message {

    display: flex;

    align-items: center;

    gap: var(--space-3);

    flex: 1;

}

.km-announcement-message i {

    color: var(--accent);

    font-size: 1rem;

}

.km-announcement-message span {

    color: var(--white);

    line-height: 1.4;

}

/* ==========================================================
   Button
   ========================================================== */

.km-announcement-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    padding: 8px 18px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: var(--radius-round);

    background: transparent;

    color: var(--white);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    white-space: nowrap;

    transition: var(--transition-normal);

}

.km-announcement-btn:hover {

    background: var(--accent);

    border-color: var(--accent);

    color: var(--white);

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 768px) {

    .km-announcement {

        min-height: auto;

        padding: 10px 0;

    }

    .km-announcement-inner {

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        gap: var(--space-3);

    }

    .km-announcement-message {

        justify-content: center;

        flex-wrap: wrap;

    }

    .km-announcement-btn {

        width: auto;

    }

}