/**
 * Announcement Module Stylesheet
 * Contains clean, responsive styles for top header announcement bar (boAt & Noise styles)
 * and rich detail modal.
 */

/* ============================================================ */
/* 1. TOP HEADER ANNOUNCEMENT BAR                               */
/* ============================================================ */
.announcement-storefront-wrapper {
    position: relative;
    z-index: 1030;
    width: 100% !important;
    -webkit-font-smoothing: antialiased;
}

.announcement-storefront-strip {
    background: #ffda6a !important;
    border-bottom: 1px solid #ecc34e !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

.announcement-storefront-slide {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
}

.announcement-storefront-slide:not(.active) {
    display: none !important;
}

.announcement-storefront-slide.active {
    display: flex !important;
}

.announcement-storefront-content {
    max-width: 95%;
    margin: 0 auto;
    font-size: 13.5px !important;
    line-height: 36px !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.announcement-storefront-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}

.announcement-storefront-headline {
    color: #000000 !important;
    text-decoration: none !important;
}

.announcement-storefront-headline:hover {
    color: #000000 !important;
}

/* ============================================================ */
/* 2. boAt STYLE: SEPARATOR & UNDERLINED CTA                    */
/* ============================================================ */
.announcement-boat-separator {
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 400 !important;
    font-size: 13.5px !important;
    opacity: 0.9 !important;
    display: inline-block !important;
}

.announcement-boat-cta-link {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease-in-out !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

.announcement-boat-cta-link:hover {
    color: #000000 !important;
    text-decoration-color: #000000 !important;
}

/* ============================================================ */
/* 3. NOISE STYLE: ARROW & CLICKABLE FULL-LINE                  */
/* ============================================================ */
.announcement-noise-style {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.announcement-noise-style:hover {
    color: #000000 !important;
}

.announcement-noise-style:hover .announcement-storefront-title {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1.5px !important;
}

.announcement-noise-style:hover .announcement-noise-arrow {
    transform: translateX(3px) !important;
    color: #000000 !important;
}

.announcement-noise-arrow {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #000000 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* ============================================================ */
/* 4. MODAL DIALOG (DETAIL FALLBACK)                            */
/* ============================================================ */
.announcement-storefront-modal {
    z-index: 1060 !important;
}

.announcement-storefront-modal .modal-dialog {
    max-width: 660px !important;
    margin: 1.75rem auto !important;
}

.announcement-storefront-modal .modal-content {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.announcement-modal-header-storefront {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1.25rem 1.5rem !important;
}

.announcement-modal-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    padding: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.announcement-modal-close-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: scale(1.08) !important;
}