/* Header account area (templates/top_user_menu.php, js/lus-account-menu.js): Airbnb-style pill + dropdown. */
.lus-acct {
    --acct-ink: #1c1917; --acct-muted: #78716c; --acct-line: #e7e0d8; --acct-tint: #f4efe9; --acct-accent: #d4363c;
    position: relative; display: flex; align-items: center; gap: 12px; float: right; height: 100%; margin: 0 0 0 16px;
}
.lus-acct *, .lus-acct *::before, .lus-acct *::after { box-sizing: border-box; }
.lus-acct__legacy { display: none !important; }

/* "Become a Host" keeps the theme's red pill button look (#submit_action); just keep it on one line and aligned */
.lus-acct .lus-acct__host { white-space: nowrap; margin: 0; float: none; }

/* The round icon button */
.lus-acct__pill {
    position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
    background: #fff; color: var(--acct-ink); border: 1px solid var(--acct-line); border-radius: 999px; cursor: pointer; font: inherit;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
    transition: box-shadow 200ms cubic-bezier(.22, .61, .36, 1), border-color 200ms cubic-bezier(.22, .61, .36, 1);
}
.lus-acct__pill:hover, .lus-acct.is-open .lus-acct__pill { box-shadow: 0 2px 10px rgba(28, 25, 23, .16); border-color: #d6cdc2; }
.lus-acct__pill:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: 2px; }
.lus-acct__person { flex: none; color: var(--acct-ink); display: block; width: 22px; height: 22px; }
.lus-acct__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background-color: var(--acct-tint); background-size: cover; background-position: center; border: 1px solid rgba(28, 25, 23, .08); }
.lus-acct__dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--acct-accent); border: 2px solid #fff; }

/* The dropdown */
.lus-acct__menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 100000; min-width: 240px; max-width: 300px; padding: 8px;
    background: #fff; border: 1px solid var(--acct-line); border-radius: 16px; box-shadow: 0 16px 40px rgba(28, 25, 23, .18);
    animation: lus-acct-in 160ms cubic-bezier(.22, .61, .36, 1);
}
.lus-acct__menu[hidden] { display: none; }
@keyframes lus-acct-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lus-acct__hello { margin: 0; padding: 10px 14px 8px; font-size: 13px; color: var(--acct-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lus-acct__item {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    font: 400 15px/1.2 inherit; color: var(--acct-ink) !important; text-align: left; text-decoration: none !important;
    transition: background 140ms ease;
}
.lus-acct__item:hover, .lus-acct__item:focus-visible { background: var(--acct-tint); outline: 0; }
.lus-acct__item--strong { font-weight: 600; }
.lus-acct__item i { width: 18px; text-align: center; color: var(--acct-muted); font-size: 14px; }
.lus-acct__item span { flex: 1; min-width: 0; }
.lus-acct__badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acct-accent); color: #fff; font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; }
.lus-acct__sep { height: 1px; margin: 6px 4px; background: var(--acct-line); }
.lus-acct .menulogout { color: var(--acct-ink) !important; }

/* "Log in or sign up" prompt */
.lus-acct__choice {
    --acct-ink: #1c1917; --acct-muted: #78716c; --acct-line: #e7e0d8; --acct-tint: #f4efe9; --acct-accent: #d4363c;
    box-sizing: border-box; position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; place-content: center; padding: 16px; }
.lus-acct__choice[hidden] { display: none; }
.lus-acct__scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, .5); animation: lus-acct-fade 180ms ease; }
.lus-acct__dialog {
    position: relative; width: min(420px, 100%); padding: 36px 32px 30px; background: #fff; border-radius: 24px; text-align: center;
    box-shadow: 0 30px 80px rgba(28, 25, 23, .35); animation: lus-acct-pop 220ms cubic-bezier(.22, .61, .36, 1);
}
.lus-acct__choice *, .lus-acct__choice *::before, .lus-acct__choice *::after { box-sizing: border-box; }
.lus-acct__dialog h2 { margin: 0 0 8px; font-family: inherit; font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--acct-ink); }
.lus-acct__dialog p { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--acct-muted); }
.lus-acct__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--acct-tint); color: var(--acct-ink); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.lus-acct__x:hover { background: var(--acct-line); }
.lus-acct__cta {
    display: block; width: 100%; height: 50px; margin: 0 0 10px; border-radius: 999px; border: 1px solid var(--acct-line); background: #fff; color: var(--acct-ink);
    font: 600 16px/1 inherit; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.lus-acct__cta:hover { border-color: var(--acct-ink); }
.lus-acct__cta:last-child { margin-bottom: 0; }
.lus-acct__cta--primary { background: var(--acct-accent); border-color: var(--acct-accent); color: #fff; }
.lus-acct__cta--primary:hover { background: #b72a30; border-color: #b72a30; }
.lus-acct__cta:focus-visible, .lus-acct__x:focus-visible { outline: 2px solid var(--acct-ink); outline-offset: 2px; }
@keyframes lus-acct-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lus-acct-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
html.lus-acct-modal, html.lus-acct-modal body { overflow: hidden; }

/* While the menu is open, lift the whole header above page content (map buttons, sticky bars) */
html.lus-acct-open .master_header { z-index: 2147483000 !important; }
html.lus-acct-open #all_wrapper { z-index: 2147483000 !important; }   /* the page wrapper is its own layer; page-level buttons live outside it */

/* Hide the theme's old header login area (the new one replaces it); the mobile header has its own account icon */
.master_header .user_menu#user_menu_u, .master_header #user_menu_open { display: none !important; }
@media (prefers-reduced-motion: reduce) { .lus-acct__menu, .lus-acct__scrim, .lus-acct__dialog { animation: none; } }