/**

 * SayWOW Dynamic Content Bars

 * Brand Design System v2.0 — SPEC Section 6

 *

 * Bar types: winner-dark, winner-gold, urgency-red, urgency-dark,

 *            promo-blue, promo-light, info-neutral, success

 *

 * @package SayWOW_Admin_Pro

 * @since 19.7.0

 */



/* ============================================

   BASE BAR — SPEC Section 6.2

   ============================================ */



.sw-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 40px;

    padding: 10px 20px;

    font-family: var(--sw-font);

    font-size: 0.85rem;

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

    line-height: 1.4;

    text-align: center;

    position: relative;

    z-index: var(--sw-z-bar);

    animation: sw-bar-slide-in 300ms ease forwards;

    box-sizing: border-box;

}



.sw-bar strong,

.sw-bar b {

    font-weight: var(--sw-fw-bold);

}



/* ============================================

   BAR CTA BUTTON — SPEC Section 6.2

   ============================================ */



.sw-bar .sw-bar-cta {

    display: inline-flex;

    align-items: center;

    padding: 4px 14px;

    font-family: var(--sw-font);

    font-size: 0.75rem;

    font-weight: var(--sw-fw-bold);

    border-radius: 4px;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    border: none;

    transition: var(--sw-transition);

    flex-shrink: 0;

}



.sw-bar .sw-bar-cta:hover {

    opacity: 0.9;

    transform: translateY(-1px);

}



/* ============================================

   CLOSE BUTTON — SPEC Section 6.3

   ============================================ */



.sw-bar .sw-bar-close {

    position: absolute;

    right: 12px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    cursor: pointer;

    font-size: 1rem;

    line-height: 1;

    padding: 4px;

    opacity: 0.7;

    transition: var(--sw-transition);

    color: inherit;

}



.sw-bar .sw-bar-close:hover {

    opacity: 1;

}



/* ============================================

   COUNTDOWN — SPEC Section 6.3

   ============================================ */



.sw-bar .sw-countdown {

    font-variant-numeric: tabular-nums;

    font-weight: var(--sw-fw-bold);

    letter-spacing: 0.5px;

}



/* ============================================

   BAR TYPES — SPEC Section 6.1

   ============================================ */



/* Winner Dark — Dark BG with gold text */

.sw-bar-winner-dark {

    background-color: var(--sw-grey-900);

    color: var(--sw-gold);

}



.sw-bar-winner-dark .sw-bar-cta {

    background-color: var(--sw-gold);

    color: var(--sw-grey-900);

}



/* Winner Gold — Gold gradient with dark text */

.sw-bar-winner-gold {

    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));

    color: var(--sw-grey-900);

}



.sw-bar-winner-gold .sw-bar-cta {

    background-color: var(--sw-grey-900);

    color: var(--sw-gold);

}



/* Urgency Red — Red BG with white text */

.sw-bar-urgency-red {

    background-color: var(--sw-red);

    color: var(--sw-white);

}



.sw-bar-urgency-red .sw-bar-cta {

    background-color: var(--sw-white);

    color: var(--sw-red);

}



/* Urgency Dark — Dark red BG with white text */

.sw-bar-urgency-dark {

    background-color: var(--sw-red-active);

    color: var(--sw-white);

}



.sw-bar-urgency-dark .sw-bar-cta {

    background-color: var(--sw-white);

    color: var(--sw-red-active);

}



/* Promo Blue — Dark blue BG with white text */

.sw-bar-promo-blue {

    background-color: var(--sw-blue-dark);

    color: var(--sw-white);

}



.sw-bar-promo-blue .sw-bar-cta {

    background-color: var(--sw-white);

    color: var(--sw-blue-dark);

}



/* Promo Light — Light blue BG with blue text */

.sw-bar-promo-light {

    background-color: var(--sw-info-bg);

    color: var(--sw-blue);

}



.sw-bar-promo-light .sw-bar-cta {

    background-color: var(--sw-blue);

    color: var(--sw-white);

}



/* Info Neutral — Light grey BG with dark text */

.sw-bar-info-neutral {

    background-color: var(--sw-grey-100);

    color: var(--sw-grey-900);

}



.sw-bar-info-neutral .sw-bar-cta {

    background-color: var(--sw-blue);

    color: var(--sw-white);

}



/* Success — Green tint BG */

.sw-bar-success {

    background-color: var(--sw-success-bg);

    color: var(--sw-success-text);

}



.sw-bar-success .sw-bar-cta {

    background-color: var(--sw-green);

    color: var(--sw-white);

}



/* ============================================

   ACCESSIBILITY — SPEC Section 6.3

   ============================================ */



.sw-bar[role="alert"] {

    /* Urgency bars — announce to screen readers */

}



.sw-bar[role="status"] {

    /* Info bars — polite announcement */

}



/* ============================================

   POSITIONING — SPEC Section 6.4

   ============================================ */



.sw-bar--above-header {

    /* Sits above the sticky header */

}



.sw-bar--below-header {

    /* Below header, in-page flow */

}



.sw-bar--sticky-bottom {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

}



/* ============================================

   ANIMATIONS — SPEC Section 6.3

   ============================================ */



@keyframes sw-bar-slide-in {

    from {

        transform: translateY(-100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



.sw-bar--slide-out {

    animation: sw-bar-slide-out 300ms ease forwards;

}



@keyframes sw-bar-slide-out {

    from {

        transform: translateY(0);

        opacity: 1;

    }

    to {

        transform: translateY(-100%);

        opacity: 0;

    }

}



/* Sticky bottom slides up from bottom */

.sw-bar--sticky-bottom {

    animation-name: sw-bar-slide-up;

}



@keyframes sw-bar-slide-up {

    from {

        transform: translateY(100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



/* Winner auto-rotate fade */

.sw-bar--fade-in {

    animation: sw-bar-fade 500ms ease forwards;

}



@keyframes sw-bar-fade {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* ============================================

   MOBILE RESPONSIVE — SPEC Section 6.2

   ============================================ */



@media (max-width: 768px) {

    .sw-bar {

        min-height: 36px;

        padding: 8px 14px;

        font-size: 0.75rem;

        padding-right: 32px; /* space for close button */

    }



    .sw-bar .sw-bar-cta {

        font-size: 0.65rem;

        padding: 3px 10px;

    }



    .sw-bar .sw-bar-close {

        right: 8px;

    }

}