/* Shared header account area (05.09.2026 redesign) — pairs with /js/account-menu.js.
   Lives on the green header band of every public page; keep in sync with the
   «رکنیت» discovery link rule (revenue plan 2.4). */

.membership-link {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05em;
    padding: 4px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.membership-link:hover { background-color: rgba(255, 255, 255, 0.15); }

.am-login-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    border-radius: 999px;
    padding: 4px 18px;
    font-size: 1em;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.am-login-chip svg { color: #0f6b5c; }
.am-login-chip:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }

/* The pages' own .header-user-section uses transform: translateY(-50%), which
   creates a stacking context at z-index auto — later positioned page content
   (article cards, slider) would paint OVER the open menu. Lift the whole section;
   pages that position it absolute keep doing so (they don't set z-index). */
.header-user-section { z-index: 1000; }

.am-wrap { position: relative; z-index: 1000; }

.am-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    color: #ffffff;
    font-family: inherit;
    font-size: 1em;
}
.am-wrap.am-open .am-trigger,
.am-trigger:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.55); }

.am-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dfe8df;
}
.am-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-avatar-initial { background: #0f6b5c; color: #ffffff; font-size: 18px; line-height: 1; }

.am-name { white-space: nowrap; }
.am-chevron { transition: transform 0.15s; }
.am-wrap.am-open .am-chevron { transform: rotate(180deg); }

/* display:flex below would defeat the hidden attribute — restore it explicitly. */
.am-menu[hidden] { display: none; }

.am-menu {
    position: absolute;
    top: calc(100% + 10px);
    /* RTL: inline-start = right, so the menu's right edge hugs the trigger and the
       panel grows leftward INTO the page instead of off the viewport edge. */
    inset-inline-start: 0;
    width: 260px;
    background: #ffffff;
    border: 1px solid #e7dfc9;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 8px;
    display: flex;
    flex-direction: column;
    z-index: 300;
    text-align: right;
}

.am-menu-head { padding: 6px 12px 10px; border-bottom: 1px solid #eee8d8; line-height: 1.7; }
.am-menu-name { color: #2c3e50; font-size: 1em; }
.am-menu-email { color: #999999; font-size: 12px; font-family: system-ui, sans-serif; text-align: right; }

.am-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.95em;
}
.am-item svg { color: #0f6b5c; flex-shrink: 0; }
.am-item:hover { background: #f6f3ea; }
.am-item-label { display: flex; align-items: center; gap: 10px; }
.am-item .am-item-label ~ .am-pill { margin-inline-start: auto; }

.am-pill {
    background: #f0efe9;
    color: #8a8272;
    border-radius: 999px;
    font-size: 12px;
    padding: 1px 10px;
    white-space: nowrap;
}
.am-pill-active { background: #eaf6ea; color: #0f6b5c; }

.am-logout-form { border-top: 1px solid #eee8d8; margin-top: 4px; display: flex; }
.am-logout {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: #8c2f2f;
    text-align: right;
}
.am-logout svg { color: #8c2f2f; }
.am-logout:hover { background: #faf1f1; }