.kolbeh-header .header-account .dropdown { position: relative; } .kolbeh-header .header-account-menu.dropdown-menu { display: none; position: absolute; top: calc(100% + 0.35rem); inset-inline-end: 0; inset-inline-start: auto; transform: none !important; margin: 0 !important; float: none; } .kolbeh-header .header-account .dropdown.is-open .header-account-menu, .kolbeh-header .header-account .dropdown.show .header-account-menu { display: block; } .kolbeh-header .header-account .dropdown.is-open > .header-utility-link { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.35); color: var(--kolbeh-purple-dark); } .kolbeh-header .header-account .dropdown.is-open .header-account-chevron { transform: rotate(180deg); } .kolbeh-header .header-account-chevron { font-size: 0.7rem; margin-inline-start: 0.15rem; transition: transform 0.2s ease; } .kolbeh-header .header-account-menu { z-index: 1085; min-width: 17rem; padding: 0.55rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, 0.16); background: linear-gradient(165deg, #ffffff 0%, #f8f5ff 100%); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06), 0 16px 40px rgba(124, 58, 237, 0.14); overflow: hidden; } body.kolbeh-body[data-dir="rtl"] .kolbeh-header .header-account-menu { direction: rtl; text-align: right; } .kolbeh-header .header-account-menu > li { list-style: none; } .kolbeh-header .header-account-menu__head { padding: 0.2rem 0.35rem 0.15rem; } .kolbeh-header .header-account-menu__profile { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 12px; background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.1); } .kolbeh-header .header-account-menu__avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: rgba(124, 58, 237, 0.12); border: 2px solid rgba(124, 58, 237, 0.22); color: var(--kolbeh-purple); font-size: 1.1rem; overflow: hidden; } .kolbeh-header .header-account-menu__avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; } .kolbeh-header .header-account-menu__meta { min-width: 0; flex: 1; } .kolbeh-header .header-account-menu__name { display: block; font-size: 0.92rem; font-weight: 800; color: var(--kolbeh-purple-dark); line-height: 1.35; } .kolbeh-header .header-account-menu__phone { display: block; margin-top: 0.1rem; font-size: 0.78rem; color: var(--kolbeh-text-muted); } .kolbeh-header .header-account-menu__divider { margin: 0.35rem 0.5rem; border-color: rgba(124, 58, 237, 0.12); opacity: 1; } .kolbeh-header .header-account-menu__link { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.58rem 0.65rem; border-radius: 11px; text-decoration: none; color: var(--kolbeh-text); font-size: 0.86rem; font-weight: 600; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .kolbeh-header .header-account-menu__link:hover, .kolbeh-header .header-account-menu__link:focus-visible { background: rgba(124, 58, 237, 0.09); color: var(--kolbeh-purple-dark); outline: none; } .kolbeh-header .header-account-menu__link.is-active { color: var(--kolbeh-purple-dark); background: rgba(124, 58, 237, 0.12); box-shadow: inset 3px 0 0 var(--kolbeh-purple); } body.kolbeh-body[data-dir="ltr"] .kolbeh-header .header-account-menu__link.is-active { box-shadow: inset -3px 0 0 var(--kolbeh-purple); } .kolbeh-header .header-account-menu__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; flex-shrink: 0; background: rgba(124, 58, 237, 0.08); border: 1px solid rgba(124, 58, 237, 0.12); color: var(--kolbeh-purple); font-size: 0.95rem; } .kolbeh-header .header-account-menu__link:hover .header-account-menu__icon, .kolbeh-header .header-account-menu__link.is-active .header-account-menu__icon { background: rgba(124, 58, 237, 0.16); border-color: rgba(124, 58, 237, 0.24); } .kolbeh-header .header-account-menu__label { flex: 1; min-width: 0; } .kolbeh-header .header-account-menu__chevron { font-size: 0.68rem; opacity: 0; color: var(--kolbeh-purple); transition: opacity 0.2s ease, transform 0.2s ease; } .kolbeh-header .header-account-menu__link:hover .header-account-menu__chevron, .kolbeh-header .header-account-menu__link:focus-visible .header-account-menu__chevron { opacity: 0.75; transform: translateX(-2px); } .kolbeh-header .header-account-menu .notify-badge { min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 1.25rem; text-align: center; } .kolbeh-header .header-account-menu__link--admin { color: var(--kolbeh-purple-dark); } .kolbeh-header .header-account-menu__link--admin .header-account-menu__icon { color: var(--kolbeh-purple); background: rgba(124, 58, 237, 0.14); } .kolbeh-header .header-account-menu__link--logout { justify-content: center; margin: 0.35rem 0.45rem 0.15rem; padding: 0.65rem 0.85rem; font-weight: 700; color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.28); background: linear-gradient(135deg, rgba(254, 226, 226, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%); } .kolbeh-header .header-account-menu__link--logout .header-account-menu__icon { color: #ef4444; border-color: rgba(239, 68, 68, 0.25); background: rgba(254, 242, 242, 0.95); } .kolbeh-header .header-account-menu__link--logout .header-account-menu__chevron { display: none; } .kolbeh-header .header-account-menu__link--logout:hover, .kolbeh-header .header-account-menu__link--logout:focus-visible { color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); background: rgba(254, 226, 226, 0.95); } .kolbeh-header #headerAccountToggle { position: relative; overflow: visible; } .kolbeh-header #headerAccountBadge { position: absolute; top: -5px; inset-inline-start: -6px; z-index: 2; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.58rem; font-weight: 800; line-height: 16px; text-align: center; pointer-events: none; } .kolbeh-header #headerAccountBadge[hidden], .kolbeh-header #headerAccountBadge[data-count="0"] { display: none !important; }