/* ==========================================================
   YASHARIEL PHASE 1 + 2
   Account menu / login error / footer language selector
   ========================================================== */

.yashariel-login-error {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid rgba(196, 72, 72, .72);
    border-radius: 6px;
    background: rgba(111, 18, 18, .32);
    color: #ffd8d8;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}

.yashariel-login-error[hidden] {
    display: none !important;
}

.yashariel-account-menu-host {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.yashariel-account-menu-host.is-hidden {
    display: none !important;
}

#accountNameButton {
    cursor: pointer;
}

.yashariel-account-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin-left: 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition:
        background-color .16s ease,
        color .16s ease;
}

.yashariel-account-dropdown-toggle:hover,
.yashariel-account-dropdown-toggle:focus-visible,
.yashariel-account-dropdown-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.08);
}

.yashariel-account-dropdown-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.yashariel-account-dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform .16s ease;
}

.yashariel-account-dropdown-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.yashariel-account-dropdown {
    position: absolute;
    z-index: 10000;
    top: calc(100% + 10px);
    right: 0;
    width: min(250px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid rgba(178, 140, 87, .34);
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            rgba(31, 29, 27, .99),
            rgba(18, 17, 16, .99)
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.45);
}

.yashariel-account-dropdown[hidden] {
    display: none !important;
}

.yashariel-account-dropdown a,
.yashariel-account-dropdown button {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    padding: 11px 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    text-decoration: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.yashariel-account-dropdown a:hover,
.yashariel-account-dropdown a:focus-visible,
.yashariel-account-dropdown button:hover,
.yashariel-account-dropdown button:focus-visible {
    background: rgba(255,255,255,.07);
}

.yashariel-account-dropdown-separator {
    height: 1px;
    margin: 7px 5px;
    background: rgba(255,255,255,.12);
}

.yashariel-account-logout {
    color: #f2b5b5 !important;
}


/* ==========================================================
   DESKTOP FOOTER LANGUAGE
   ========================================================== */

.yashariel-footer-language {
    position: relative;
    display: inline-block;
}

.yashariel-footer-language-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.yashariel-footer-language-button:hover,
.yashariel-footer-language-button:focus-visible {
    text-decoration: underline;
}

.yashariel-footer-language-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.yashariel-footer-language-button svg {
    width: 12px;
    height: 12px;
    transition: transform .16s ease;
}

.yashariel-footer-language-button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.yashariel-footer-language-menu {
    position: absolute;
    z-index: 10000;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 175px;
    padding: 7px;
    border: 1px solid rgba(178, 140, 87, .34);
    border-radius: 7px;
    background: rgba(18,17,16,.99);
    box-shadow: 0 16px 36px rgba(0,0,0,.42);
}

.yashariel-footer-language-menu[hidden] {
    display: none !important;
}

.yashariel-footer-language-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.yashariel-footer-language-menu a:hover,
.yashariel-footer-language-menu a:focus-visible {
    background: rgba(255,255,255,.07);
}

.yashariel-footer-language-menu a[aria-current="true"] {
    font-weight: 700;
}


/*
 * Mobile:
 * vorhandene Navigation / vorhandene Sprachwahl bleibt bestehen.
 * Der neue Footer-Dropdown wird dort nicht zus?tzlich angezeigt.
 */
@media (max-width: 767px) {
    .yashariel-footer-language {
        display: none !important;
    }
}

/* ==========================================================
   YASHARIEL PHASE 1 BROWSER HOTFIX
   Login error / account dropdown top layer
   ========================================================== */

.yashariel-login-error,
.yashariel-auth-error-strong {
    display: block !important;
    box-sizing: border-box !important;

    width: 100% !important;

    margin: 18px 0 24px !important;
    padding: 15px 17px !important;

    border:
        1px solid rgba(235, 87, 87, .95) !important;

    border-left:
        4px solid #e45757 !important;

    border-radius: 5px !important;

    background:
        linear-gradient(
            90deg,
            rgba(116, 24, 24, .72),
            rgba(63, 16, 16, .48)
        ) !important;

    box-shadow:
        0 0 0 1px rgba(228, 87, 87, .08),
        0 8px 24px rgba(0,0,0,.22) !important;

    color: #ffdada !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    text-align: left !important;
}

.yashariel-login-error::before,
.yashariel-auth-error-strong::before {
    content: "?";
    display: inline-block;
    margin-right: 9px;
    color: #ff7b68;
    font-size: 17px;
    vertical-align: -1px;
}

.yashariel-login-error[hidden] {
    display: none !important;
}


/*
 * Das Dropdown wird durch JS direkt unter <body> verschoben.
 * Dadurch steckt es nicht mehr im Stacking Context des Headers.
 */
#yasharielAccountDropdown {
    position: fixed !important;

    z-index: 2147483000 !important;

    width: 250px !important;
    max-width: calc(100vw - 24px) !important;

    max-height: calc(100vh - 24px) !important;

    overflow-y: auto !important;

    isolation: isolate !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,.72),
        0 0 0 1px rgba(178,140,87,.22) !important;
}

#yasharielAccountDropdown[hidden] {
    display: none !important;
}

#yasharielAccountDropdown .yashariel-account-logout {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;

    color: #f0aaa2 !important;
}

#yasharielAccountDropdown .yashariel-account-logout:hover,
#yasharielAccountDropdown .yashariel-account-logout:focus-visible {
    background: rgba(150, 43, 43, .20) !important;
    color: #ffd2cc !important;
}

#yasharielAccountDropdown .yashariel-account-logout:disabled {
    opacity: .65 !important;
    cursor: wait !important;
}


/* ==========================================================
   YASHARIEL LOGOUT TOAST FINAL
   ========================================================== */

/*
 * Alte Logout-Meldung darf keinen Platz mehr
 * innerhalb der Login-Karte beanspruchen.
 */
#yasharielLogoutSuccess {
    display: none !important;
}


/*
 * Neue Meldung ist ein Overlay und beeinflusst
 * die Abmessungen des Login-Formulars nicht.
 */
#yasharielLogoutToastFinal {
    position: fixed !important;

    top: 28px !important;
    left: 50% !important;

    transform:
        translateX(-50%) !important;

    z-index: 2147483640 !important;

    box-sizing: border-box !important;

    width:
        min(460px, calc(100vw - 32px)) !important;

    padding:
        15px 48px 15px 18px !important;

    border:
        1px solid rgba(184, 139, 67, .95) !important;

    border-left:
        4px solid #d1a35b !important;

    border-radius:
        5px !important;

    background:
        rgba(17, 14, 10, .97) !important;

    box-shadow:
        0 16px 46px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(205, 158, 83, .08) !important;

    color:
        #f4dfb9 !important;

    font-size:
        15px !important;

    font-weight:
        600 !important;

    line-height:
        1.45 !important;

    text-align:
        left !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

    transition:
        opacity .22s ease,
        transform .22s ease !important;
}


#yasharielLogoutToastFinal.is-visible {
    opacity:
        1 !important;

    transform:
        translateX(-50%)
        translateY(0) !important;

    pointer-events:
        auto !important;
}


#yasharielLogoutToastFinal::before {
    content:
        "?";

    display:
        inline-block;

    margin-right:
        10px;

    color:
        #d9ad65;

    font-weight:
        700;
}


#yasharielLogoutToastClose {
    position:
        absolute;

    top:
        50%;

    right:
        12px;

    transform:
        translateY(-50%);

    width:
        28px;

    height:
        28px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #cdbb9c;

    font-size:
        21px;

    line-height:
        28px;

    cursor:
        pointer;
}


#yasharielLogoutToastClose:hover {
    color:
        #ffffff;
}


@media (max-width: 600px) {

    #yasharielLogoutToastFinal {

        top:
            14px !important;

        width:
            calc(100vw - 24px) !important;
    }
}


/* ==========================================================
   DEDICATED /logout/ PAGE ACTIVE
   Alte Logout-Toasts nicht mehr verwenden.
   ========================================================== */

#yasharielLogoutSuccess,
#yasharielLogoutToastFinal {
    display: none !important;
}