/* BisaBaca User Menu — scoped, theme-font inherited, low-decoration UI. */
.bbum-menu,
.bbum-avatar-link,
.bbum-loading-menu,
.bbum-loading-avatar {
    --bbum-size: 40px;
    box-sizing: border-box;
}

.bbum-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    line-height: 1;
    vertical-align: middle;
    font: inherit;
}

.bbum-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--bbum-size);
    width: var(--bbum-size);
    min-width: var(--bbum-size);
    max-width: var(--bbum-size);
    height: var(--bbum-size);
    min-height: var(--bbum-size);
    max-height: var(--bbum-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.bbum-trigger:hover,
.bbum-trigger:active {
    background: transparent;
    color: inherit;
    transform: none;
    box-shadow: none;
}

.bbum-trigger:focus-visible,
.bbum-avatar-link:focus-visible {
    outline: 3px solid rgba(255, 109, 0, .32);
    outline-offset: 3px;
}

.bbum-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 calc(var(--bbum-size) - 4px);
    width: calc(var(--bbum-size) - 4px);
    height: calc(var(--bbum-size) - 4px);
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid #c4c8d0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #d0d4db 52%, #f5f6f8);
    color: #59606e;
    box-shadow: 0 4px 13px rgba(24, 26, 41, .12);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.bbum-avatar--silver {
    border-color: #c4c8d0;
    background: linear-gradient(145deg, #ffffff, #d0d4db 52%, #f5f6f8);
    box-shadow: 0 4px 13px rgba(24, 26, 41, .12);
}

.bbum-avatar--gold {
    border-color: #d5ad4a;
    background: linear-gradient(145deg, #fff8df, #e0b75b 52%, #fff6d5);
    box-shadow: 0 5px 15px rgba(196, 145, 28, .22);
}

.bbum-avatar--guest {
    border: 0;
    background: #FF6D00;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.bbum-avatar--loading {
    border: 0;
    background: #FF6D00;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.bbum-avatar--loading svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bbum-avatar--guest svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bbum-avatar img,
.bbum-avatar .avatar,
.bbum-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bbum-active-dot {
    position: absolute;
    right: -2px;
    bottom: 0;
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 2px 6px rgba(34, 197, 94, .28);
    pointer-events: none;
}

.bbum-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100100;
    width: min(286px, calc(100vw - 24px));
    max-height: min(76vh, 560px);
    box-sizing: border-box;
    padding: 9px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #E6E8F0;
    border-radius: 17px;
    background: #FFFFFF;
    color: #16212E;
    box-shadow: 0 18px 48px rgba(18, 26, 38, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.985);
    transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    line-height: 1.4;
}

.bbum-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.bbum-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 6px;
    padding: 11px;
    border-radius: 13px;
    background: linear-gradient(135deg, #F6F7F9, #FFFFFF);
}

.bbum-head-photo {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid #c4c8d0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #d0d4db 52%, #f5f6f8);
}

.bbum-head-photo.bbum-avatar--gold {
    border-color: #d5ad4a;
    background: linear-gradient(145deg, #fff8df, #e0b75b 52%, #fff6d5);
}

.bbum-head-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bbum-user-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.bbum-user-meta strong {
    display: block;
    max-width: 100%;
    margin: 0 0 5px;
    overflow: hidden;
    color: #16212E;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbum-user-meta small {
    display: block;
    margin-top: 4px;
    color: #707B8C;
    font-size: 10px;
    line-height: 1.35;
}

.bbum-level-chip {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 3px 7px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
}

.bbum-level-chip--silver {
    border-color: #D3D7DF;
    background: linear-gradient(180deg, #F4F5F8, #E7E9EE);
    color: #59606E;
}

.bbum-level-chip--gold {
    border-color: #E8BF55;
    background: linear-gradient(145deg, #FFFDF4 0%, #FFF2C9 48%, #FFE0A0 100%);
    color: #8B6208;
}

.bbum-menu-links {
    display: grid;
    gap: 2px;
}

.bbum-dropdown a.bbum-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #28384D;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    transition: background .14s ease, color .14s ease;
}

.bbum-dropdown a.bbum-menu-link:hover,
.bbum-dropdown a.bbum-menu-link:focus-visible {
    background: #FFF2E8;
    color: #C94D0A;
    outline: none;
}

.bbum-menu-icon {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bbum-menu-divider {
    height: 1px;
    margin: 6px 3px;
    background: #ECEEF2;
}

.bbum-dropdown a.bbum-menu-link--danger {
    color: #C63E4F;
}

.bbum-dropdown a.bbum-menu-link--danger:hover,
.bbum-dropdown a.bbum-menu-link--danger:focus-visible {
    background: #FFF0F1;
    color: #A62D3C;
}

.bbum-avatar-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--bbum-size);
    width: var(--bbum-size);
    height: var(--bbum-size);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
}

.bbum-avatar-link .bbum-avatar {
    flex-basis: calc(var(--bbum-size) - 4px);
    width: calc(var(--bbum-size) - 4px);
    height: calc(var(--bbum-size) - 4px);
}

.bbum-loading-menu,
.bbum-loading-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--bbum-size);
    width: var(--bbum-size);
    height: var(--bbum-size);
    box-sizing: border-box;
    border-radius: 50%;
}

.bbum-loading-menu .bbum-avatar,
.bbum-loading-avatar .bbum-avatar {
    width: calc(var(--bbum-size) - 4px);
    height: calc(var(--bbum-size) - 4px);
    flex-basis: calc(var(--bbum-size) - 4px);
}

/* The initially empty Header Jelajah mount uses the same orange placeholder as JS.
   Higher selector specificity keeps this stable even when the header stylesheet adds
   fixed placeholder dimensions. The inline data SVG matches the final guest glyph. */
#bb-header-jelajah-root.bb-header-jelajah-root .bb-header-jelajah__account-mount[data-bisabaca-user-menu]:empty::before {
    content: "" !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #FF6D00 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.6%2019.2c.8-3.5%203.2-5.3%206.4-5.3s5.6%201.8%206.4%205.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 28px 28px !important;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .22), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* Header Jelajah gives all component SVGs a compact global size; restore the intended
   profile and dropdown icon dimensions specifically inside the account mount. */
#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-avatar--guest svg,
#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-avatar--loading svg {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    stroke: #FFFFFF !important;
    stroke-width: 2.1 !important;
}

#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-menu-icon {
    width: 18px;
    height: 18px;
}

#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-dropdown a.bbum-menu-link {
    color: #28384D;
}

#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-dropdown a.bbum-menu-link:hover,
#bb-header-jelajah-root .bb-header-jelajah__account-mount .bbum-dropdown a.bbum-menu-link:focus-visible {
    color: #C94D0A;
}

@media (max-width: 700px) {
    .bbum-dropdown {
        top: calc(100% + 8px);
        width: min(286px, calc(100vw - 20px));
        max-height: min(72vh, 520px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bbum-avatar,
    .bbum-dropdown,
    .bbum-dropdown a.bbum-menu-link {
        transition: none !important;
    }
}