/* ============================= */
/* SETTINGS BUTTON */
/* ============================= */

.settings-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(84, 243, 255, 0.22);
    background: linear-gradient(180deg, rgba(12, 18, 40, 0.95), rgba(8, 13, 30, 0.95));
    color: #eef4ff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

    .settings-btn:hover {
        background: linear-gradient(180deg, rgba(16, 24, 52, 0.98), rgba(10, 16, 36, 0.98));
        border-color: rgba(84, 243, 255, 0.42);
        color: #54f3ff;
        box-shadow: 0 12px 26px rgba(0, 0, 0, .36), 0 0 0 1px rgba(84, 243, 255, .10);
    }

    .settings-btn:active {
        transform: translateY(1px);
    }

    .settings-btn:focus-visible {
        outline: none;
        border-color: rgba(84, 243, 255, 0.52);
        box-shadow: 0 0 0 4px rgba(84, 243, 255, .18);
    }

.settings-gear {
    font-size: 1.15rem;
    line-height: 1;
}


/* ============================= */
/* SETTINGS DROPDOWN */
/* ============================= */

.settings-menu {
    min-width: 260px;
    padding: .5rem 0;
    border: 1px solid rgba(110, 168, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .34);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 18, 40, 0.98), rgba(8, 13, 30, 0.98));
    backdrop-filter: blur(12px);
}

    .settings-menu .dropdown-header {
        font-size: .8rem;
        color: #97a8d4;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .settings-menu .dropdown-item {
        font-size: .95rem;
        padding: .55rem 1rem;
        color: #eef4ff;
    }

        .settings-menu .dropdown-item:hover {
            background: rgba(84, 243, 255, 0.08);
            color: #54f3ff;
        }

        .settings-menu .dropdown-item:active {
            background: rgba(155, 123, 255, 0.14);
            color: #ffffff;
        }

    .settings-menu .dropdown-divider {
        margin: .45rem 0;
        border-top-color: rgba(110, 168, 255, 0.12);
    }


/* ============================= */
/* SUBSCRIPTION EXPIRE MINI BAR */
/* ============================= */

.expire-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.03);
}

.expire-label {
    opacity: .88;
}

.expire-value {
    font-weight: 700;
}

.expire-btn {
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255,255,255,.04);
    color: inherit;
}

.expire-green {
    background: rgba(82, 255, 184, 0.10);
    color: #7dffca;
    border-color: rgba(82, 255, 184, 0.28);
}

.expire-yellow {
    background: rgba(255, 200, 87, 0.10);
    color: #ffd978;
    border-color: rgba(255, 200, 87, 0.30);
}

.expire-red {
    background: rgba(255, 110, 207, 0.10);
    color: #ff9cdd;
    border-color: rgba(255, 110, 207, 0.28);
}

.expire-gray {
    background: rgba(151, 168, 212, 0.10);
    color: #c5d2f3;
    border-color: rgba(151, 168, 212, 0.22);
}


/* ============================= */
/* ANNOUNCEMENT BANNER */
/* ============================= */

.announcement-banner-wrap {
    margin-bottom: 1rem;
    display: none;
}

.announcement-banner {
    border-radius: 16px;
    padding: .9rem 1rem;
    border: 1px solid rgba(84, 243, 255, 0.22);
    background: linear-gradient(180deg, rgba(84, 243, 255, 0.10), rgba(110, 168, 255, 0.08));
    color: #dff7ff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

    .announcement-banner.success {
        background: linear-gradient(180deg, rgba(82, 255, 184, 0.12), rgba(82, 255, 184, 0.06));
        border-color: rgba(82, 255, 184, 0.28);
        color: #baffe0;
    }

    .announcement-banner.warning {
        background: linear-gradient(180deg, rgba(255, 200, 87, 0.12), rgba(255, 200, 87, 0.06));
        border-color: rgba(255, 200, 87, 0.28);
        color: #ffe6a3;
    }

    .announcement-banner.danger {
        background: linear-gradient(180deg, rgba(255, 110, 207, 0.12), rgba(255, 110, 207, 0.06));
        border-color: rgba(255, 110, 207, 0.26);
        color: #ffc2ea;
    }

.announcement-banner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}

.announcement-banner-title {
    font-weight: 700;
    margin-bottom: 0;
}

.announcement-banner-message {
    margin-bottom: 0;
    line-height: 1.6;
    word-break: break-word;
}

.announcement-banner-ack {
    flex: 0 0 auto;
    white-space: nowrap;
}


/* ============================= */
/* ANNOUNCEMENT MARQUEE */
/* ============================= */

.announcement-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.announcement-marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: announcement-marquee linear infinite;
}

@keyframes announcement-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* ============================= */
/* ANNOUNCEMENT MODAL */
/* ============================= */

.announcement-image {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: block;
    border: 1px solid rgba(110, 168, 255, 0.14);
}

.announcement-popup-message {
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: #d8e6ff;
}


/* ============================= */
/* MOBILE RESPONSIVE */
/* ============================= */

@media (max-width: 767.98px) {
    .expire-menu {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .expire-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .settings-menu {
        min-width: 220px;
    }

    .announcement-banner-head {
        flex-direction: column;
        align-items: stretch;
    }

    .announcement-banner-ack {
        width: 100%;
    }
}