/*
 * Global announcement bar — sits above the fixed header.
 * Desktop / mobile visual reference: Metronic national-day promo strip.
 * Colors follow --tw-brand so National Day theme (green) and default brand both work.
 */

@keyframes twAnnounceDrop {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes twAnnounceShine {
    0% { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(320%) skewX(-18deg); }
}

@keyframes twAnnounceCodePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Scroll long copy inside its slot (LTR and RTL). */
@keyframes twAnnounceMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--tw-announce-marquee-distance, 100%))); }
}

@keyframes twAnnounceMarqueeRtl {
    from { transform: translateX(0); }
    to { transform: translateX(var(--tw-announce-marquee-distance, 100%)); }
}

body:has(.tw-announce) {
    --tw-announce-h: 36px;
}

html.tw-announce-dismissed {
    --tw-announce-h: 0px;
}

html.tw-announce-dismissed .tw-announce {
    display: none !important;
}

.tw-announce {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1031;
    color: #fff;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--tw-brand) 72%, #000),
        var(--tw-brand) 50%,
        color-mix(in srgb, var(--tw-brand) 72%, #000)
    );
    overflow: hidden;
    animation: twAnnounceDrop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    font-family: var(--tw-font);
}

.tw-announce__shine {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    pointer-events: none;
    animation: twAnnounceShine 5s ease-in-out 1.2s infinite;
}

.tw-announce__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background: #fff;
    -webkit-mask-image: url('../images/announce-watermark.png');
    mask-image: url('../images/announce-watermark.png');
    -webkit-mask-size: 160px 160px;
    mask-size: 160px 160px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

.tw-announce__in {
    max-width: var(--tw-max, 1280px);
    margin: 0 auto;
    padding: 7px 18px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    font-size: 12.5px;
}

/* Groups are structural only: the message, coupon, CTA and end date flow as one row. */
.tw-announce__start,
.tw-announce__mid,
.tw-announce__end {
    display: contents;
}

.tw-announce__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: color-mix(in srgb, var(--tw-brand) 85%, #000);
    border-radius: 99px;
    padding: 3px 10px 3px 6px;
    font-weight: 800;
    font-size: 11.5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.tw-announce__flag {
    width: 16px;
    height: 11px;
    border-radius: 2px;
    background: var(--tw-brand);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.tw-announce__flag::after {
    content: "";
    position: absolute;
    inset-inline: 3px;
    top: 5px;
    height: 1.5px;
    background: #fff;
    border-radius: 1px;
}

.tw-announce__msg {
    flex: 0 1 auto;
    font-weight: 700;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tw-announce__msg-track {
    display: inline-block;
    white-space: nowrap;
}

.tw-announce__msg.is-marquee .tw-announce__msg-track {
    padding-inline-end: 2rem;
    animation: twAnnounceMarquee var(--tw-announce-marquee-duration, 12s) linear infinite;
}

html[dir="rtl"] .tw-announce__msg.is-marquee .tw-announce__msg-track {
    animation-name: twAnnounceMarqueeRtl;
}

.tw-announce__code {
    border: 1.5px dashed rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 8px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    direction: ltr;
    transition: background 0.2s, transform 0.2s;
    animation: twAnnounceCodePulse 2.6s ease-out infinite;
    flex-shrink: 0;
}

.tw-announce__code:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.tw-announce__cta {
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 8px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
}

.tw-announce__cta:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: translateY(-1px);
}

.tw-announce__ends {
    opacity: 0.8;
    font-size: 11.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tw-announce__grow {
    display: block;
    flex: 1 1 0;
    min-width: 0;
}

.tw-announce__count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.tw-announce__tick {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 2px 7px;
    direction: ltr;
    min-width: 34px;
    text-align: center;
    transition: transform 0.2s;
}

.tw-announce__tick:hover {
    transform: translateY(-2px);
}

.tw-announce__tick-u {
    opacity: 0.7;
    font-size: 9px;
    margin-inline-start: 2px;
}

.tw-announce__close {
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.2s;
}

.tw-announce__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile layout — matches Metronic mobile national-day promo strip:
   single row: badge | message | code/cta | countdown | close */
@media (max-width: 767.98px) {
    body:has(.tw-announce) {
        --tw-announce-h: 36px;
    }

    html.tw-announce-dismissed {
        --tw-announce-h: 0px;
    }

    .tw-announce__shine {
        width: 28%;
    }

    .tw-announce__grain {
        -webkit-mask-size: 120px 120px;
        mask-size: 120px 120px;
    }

    .tw-announce__in {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 7px 12px;
        min-height: 36px;
        max-width: none;
        font-size: 11px;
    }

    .tw-announce__badge {
        gap: 5px;
        padding: 2px 8px 2px 5px;
        font-size: 10px;
    }

    .tw-announce__flag {
        width: 14px;
        height: 10px;
    }

    .tw-announce__flag::after {
        top: 4.5px;
    }

    .tw-announce__msg {
        font-size: 11px;
        font-weight: 700;
    }

    .tw-announce__code {
        border-radius: 7px;
        padding: 2px 8px;
        font-size: 11px;
    }

    .tw-announce__cta {
        border-radius: 7px;
        padding: 2px 8px;
        font-size: 11px;
    }

    .tw-announce__ends {
        display: none;
    }

    .tw-announce__count {
        gap: 3px;
        font-size: 10px;
    }

    .tw-announce__tick {
        border-radius: 5px;
        padding: 2px 5px;
        min-width: 0;
    }

    .tw-announce__tick-u {
        font-size: 8px;
        margin-inline-start: 1px;
    }

    .tw-announce__close {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-announce__msg.is-marquee .tw-announce__msg-track {
        animation: none;
    }
}