/* Срочные сообщения FlashNews: тонкая полоса вверху экрана, модальное окно
   и иконка «свёрнутого» сообщения. Подключается один раз на страницу
   из виджета (resources/views/components/widgets/flash-news.blade.php). */
/* --- Тонкая полоса вверху экрана --- */
.fn-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10050;
    color: #fff;
    background: linear-gradient(90deg, #14809f 0%, #1BA3D5 60%, #28b6e6 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .35s ease, transform .35s ease;
}

/* Плавное появление полосы: класс вешается после снятия hidden */
.fn-bar.is-open {
    opacity: 1;
    transform: none;
}

.fn-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 48px 10px 16px;
    box-sizing: border-box;
}

.fn-bar__badge {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 4px;
    background: #fff;
    color: #14809f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.fn-bar__text {
    flex: 1 1 240px;
    font-size: 15px;
    line-height: 1.4;
}

.fn-bar__more {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.fn-bar__more:hover {
    background: #fff;
    color: #14809f;
}

.fn-bar__close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

.fn-bar__close:hover {
    opacity: 1;
}

/* Полоса фиксированная: сдвигаем контент, чтобы ничего не пряталось */
body.fn-news-open {
    padding-top: 50px;
}

/* --- Модальное окно --- */
.fn-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .35s ease;
}

/* Плавное появление окна: класс вешается после снятия hidden */
.fn-modal.is-open {
    opacity: 1;
}

.fn-modal[hidden],
.fn-modal [hidden] {
    display: none !important;
}

.fn-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(9, 30, 42, .62);
}

.fn-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    transform: translateY(16px) scale(.98);
    transition: transform .35s ease;
}

.fn-modal.is-open .fn-modal__dialog {
    transform: none;
}

/* Обратный отсчёт автозакрытия: рядом с кнопкой закрытия */
.fn-modal__timer {
    position: absolute;
    top: 11px;
    right: 46px;
    z-index: 2;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(27, 163, 213, .14);
    color: #14809f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.fn-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    padding: 0 6px;
    border: 0;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    color: #1b2a33;
    font-size: 24px;
    line-height: 1.2;
    cursor: pointer;
}

.fn-modal__media img {
    display: block;
    width: 100%;
    height: auto;
}

.fn-modal__body {
    padding: 24px 26px 20px;
}

.fn-modal__badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 9px;
    border-radius: 4px;
    background: #1BA3D5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.fn-modal__title {
    margin: 0 0 12px;
    color: #1b2a33;
    font-size: 22px;
    line-height: 1.3;
}

.fn-modal__text {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-line;
}

.fn-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.fn-modal__link {
    padding: 11px 24px;
    border-radius: 6px;
    background: #1BA3D5;
    border: 1px solid #1BA3D5;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.fn-modal__link:hover {
    background: #14809f;
    border-color: #14809f;
    color: #fff;
}

.fn-modal__ok {
    padding: 11px 24px;
    border-radius: 6px;
    border: 1px solid #ccd5dc;
    background: #fff;
    color: #1b2a33;
    font-weight: 600;
}

html.fn-modal-open,
html.fn-modal-open body {
    overflow: hidden;
}

/* --- Иконка «свёрнутого» сообщения в левом нижнем углу --- */
.fn-fab {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #1BA3D5 0%, #14809f 100%);
    box-shadow: 0 8px 22px rgba(20, 128, 159, .38);
    cursor: pointer;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Класс перебивает display:flex, иначе атрибут hidden не сработает */
.fn-fab[hidden] {
    display: none !important;
}

.fn-fab:hover {
    box-shadow: 0 10px 26px rgba(20, 128, 159, .5);
}

.fn-fab.is-visible {
    opacity: 1;
    transform: none;
}

.fn-fab__icon {
    position: relative;
    z-index: 1;
    animation: fn-fab-bob 2.2s ease-in-out infinite;
}

.fn-fab__ring {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid rgba(27, 163, 213, .7);
    animation: fn-fab-ring 2.2s ease-out infinite;
}

@keyframes fn-fab-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-8deg); }
}

@keyframes fn-fab-ring {
    0% { transform: scale(1); opacity: .75; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* Пока окно «летит» в иконку, контейнер не гаснет, а фон растворяется */
.fn-modal.is-flying {
    opacity: 1;
    transition: none;
}

.fn-modal.is-flying .fn-modal__backdrop {
    opacity: 0;
    transition: opacity .35s ease;
}

@media (max-width: 575px) {
    .fn-bar__text { font-size: 14px; }
    body.fn-news-open { padding-top: 74px; }
    .fn-modal__body { padding: 20px 18px 16px; }
    .fn-modal__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .fn-bar,
    .fn-modal,
    .fn-modal__dialog {
        transition: none;
    }

    .fn-fab,
    .fn-fab__icon,
    .fn-fab__ring {
        animation: none;
    }
}