/* Stardock Header — shared styles used by both blue and dark header variants */

/* ===== Utilities ===== */
.offscreen {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ===== Clairvoyance special product card (submenulong) — shared between both headers ===== */
.submenulong {
    background: linear-gradient(45deg,#01a2fd36,#01a2fd0f);
    box-sizing: border-box;
    color: #2d2d2d;
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    padding: .75em 1em;
}

    .submenulong:hover {
        background-color: #ebebeb;
    }

    .submenulong > a:first-child {
        background-repeat: no-repeat;
        background-size: 48px 48px;
        height: 48px;
        width: 58px;
        display: block;
        min-width: 58px;
        flex-shrink: 0;
    }

    .submenulong > span {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 8.5em;
        min-width: 100px;
    }

        .submenulong > span a.prodname {
            text-decoration: none;
        }

            .submenulong > span a.prodname strong {
                color: #2d2d2d;
                font-size: 1em;
                font-weight: 600;
            }

        .submenulong > span .subtitle {
            color: #007fc7;
            font-size: .75em;
            font-weight: 500;
            margin-top: 2px;
        }

        .submenulong > span .mobile-subtitle {
            display: none;
        }

        .submenulong > span .mobile-links {
            display: none;
        }

            .submenulong > span .mobile-links a {
                color: #007fc7;
                text-decoration: none;
            }

    .submenulong > .description {
        color: #555;
        flex: 1;
        font-size: .875em;
        line-height: 1.4;
        margin-right: 1.5em;
        min-width: 0;
    }

        .submenulong > .description .desc-title {
            color: #2d2d2d;
            font-weight: 500;
            display: block;
            margin-bottom: 2px;
        }

    .submenulong > .actions {
        display: block;
        margin-right: 0;
        text-align: center;
    }

        .submenulong > .actions a.btn {
            background-color: #01a2fd;
            border-radius: 4px;
            color: #fff;
            font-size: .875em;
            font-weight: 500;
            padding: .5em 1em;
            text-decoration: none;
            white-space: nowrap;
        }

            .submenulong > .actions a.btn:hover {
                filter: brightness(1.1);
            }

/* ===== Search Form — shared between both headers ===== */
#search-form {
    display: none;
    position: absolute;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    padding: 5px;
    z-index: 1002;
    min-width: 280px;
}

    #search-form.show {
        display: block;
    }

    #search-form form {
        display: flex;
        gap: 4px;
    }

    #search-form input {
        flex: 1;
        padding: 6px 10px;
        border: 1px solid #ccc;
        font-size: 13px;
        outline: none;
    }

        #search-form input:focus {
            border-color: #155298;
        }

    #search-form button {
        background: #155298;
        color: #fff;
        border: none;
        padding: 6px 14px;
        font-size: 13px;
        cursor: pointer;
    }

        #search-form button:hover {
            background: #0367cc;
        }

/* ===== Account Menu Dropdown — shared between both headers =====
   The container paints a solid opaque blue gradient so the body image can
   never bleed through any padding/margin/gap between items. Each child item
   then paints its OWN matching opaque background so an item is never
   transparent against the body either. */
#account-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #0d4c8b;
    background-image: linear-gradient(to bottom, rgba(13,76,139,1) 0%, rgba(16,97,173,1) 100%);
    border: 1px solid #006fda;
    border-top: none;
    box-shadow: rgb(0,0,0) 0px 2px 3px;
    flex-direction: column;
    font-size: .9rem;
    padding: 0;
    z-index: 1002;
    min-width: 200px;
}

    #account-menu.show {
        display: flex;
    }

    #account-menu .welcome {
        background-color: rgba(13,77,139,.9);
        color: #fdfdfd;
        padding: 8px 10px;
        font-weight: 500;
        border-bottom: 1px solid #217bd5;
    }

    #account-menu > a {
        background-color: rgba(13,76,139,.92);
        color: #fdfdfd;
        padding: 5px 10px;
        text-decoration: none;
        font-size: 13px;
    }

        #account-menu > a:hover {
            background-color: rgba(16,97,173,1);
        }

    #account-menu > span.header {
        background-color: #1576d3;
        padding: 3px 0 3px 4px;
        color: #fff;
        border: solid #6894b5;
        border-width: 1px 0;
        pointer-events: none;
    }

        #account-menu > span.header ~ span.header {
            margin-top: 5px;
        }

    #account-menu > hr {
        width: 100%;
        margin: 3px 0 0;
        border-color: #6894b5;
        border-style: solid;
        border-width: 1px 0 0;
    }

    #account-menu form {
        margin: 0;
    }

    #account-menu .signout-link {
        background-color: rgba(13,76,139,.92);
        border: none;
        color: #fdfdfd;
        cursor: pointer;
        font-size: 13px;
        padding: 5px 10px;
        text-align: left;
        width: 100%;
        font-family: inherit;
    }

        #account-menu .signout-link:hover {
            background-color: rgba(16,97,173,1);
        }

/* ===== Notification Badge ===== */
.notification-badge {
    background: linear-gradient(#50bf41,#39892f);
    color: #fff;
    border-radius: 50%;
    font-size: .7rem;
    padding: 2px 5px;
    position: absolute;
    top: -5px;
    right: -5px;
    animation: swing 1s ease-in-out;
}

@keyframes swing {
    0%,100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }
}

.loggedin {
    border: 1px solid #FDFDFD;
}

/* ===== Messages Icon & Badge ===== */
.sd-msg-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.sd-msg-badge {
    background: linear-gradient(#e74c3c,#c0392b);
    color: #fff;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    position: absolute;
    top: -6px;
    right: -8px;
    box-sizing: border-box;
    animation: swing 1s ease-in-out;
}

.sd-sub-icon {
    position: relative;
    display: flex;
    align-items: center;
}

/* ===== Mobile icon overrides — shared ===== */
@media(max-width:850px) {
    .sd-msg-icon,
    .sd-sub-icon {
        display: none !important;
    }
}

/* ===== Mobile account menu overrides — shared ===== */
@media(max-width:850px) {
    #account-menu {
        position: fixed;
        top: 50px;
        right: 0;
        left: auto;
        width: 250px;
        max-height: calc(100vh - 50px);
        overflow-y: auto;
        background: linear-gradient(to bottom,rgba(13,76,139,1) 0%,rgba(16,97,173,1) 100%);
        border: 1px solid #006fda;
        box-shadow: 0 2px 8px rgba(0,0,0,.3);
        z-index: 1050;
    }
}

/* ===== Mobile submenulong overrides — shared ===== */
@media(max-width:850px) {
    .submenulong {
        background: #f5f5f5;
        flex-wrap: wrap;
        line-height: 1.5rem;
    }

        .submenulong > span {
            margin-right: 0;
            min-width: auto;
            flex: 1;
        }

            .submenulong > span .subtitle {
                display: none;
            }

            .submenulong > span .mobile-subtitle {
                display: block;
                color: #777;
                font-size: .875em;
                font-weight: 400;
            }

            .submenulong > span .mobile-links {
                display: block;
                color: #777;
                font-size: .875em;
            }

            .submenulong > span a.prodname {
                display: block;
                border-bottom: 1px solid #ccc;
                margin-bottom: 3px;
                padding-bottom: 3px;
            }

        .submenulong > .description {
            display: none;
        }

        .submenulong > .actions {
            display: none;
        }
}