/* /public_html/assets/css/ui-mobile-overflow-menu.css */

@media (max-width: 719px) {
    .mobile-shell-menu {
        --mobile-shell-menu-origin-x: calc(100vw - 2.25rem);
        --mobile-shell-menu-origin-y: calc(env(safe-area-inset-top, 0px) + 2.25rem);
        --mobile-shell-menu-button-radius: 20px;
        --mobile-shell-menu-button-size: 2.5rem;
        --mobile-shell-menu-open-scale-x: 0.16;
        --mobile-shell-menu-open-scale-y: 0.16;
        --mobile-shell-menu-seed-translate-x: 0px;
        --mobile-shell-menu-seed-translate-y: 0px;
        --mobile-shell-menu-panel-height: 10rem;
        --mobile-shell-menu-panel-width: 15rem;
        --mobile-shell-menu-panel-top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
        --mobile-shell-menu-panel-left: auto;
        --mobile-shell-menu-panel-right: 0.5rem;
        --mobile-shell-menu-open-translate-x: 0px;
        --mobile-shell-menu-open-translate-y: 0px;
        position: fixed;
        inset: 0;
        z-index: 1200;
        overflow: hidden;
        opacity: 0;
        background: transparent;
        transition: opacity 140ms ease-out;
    }

    .mobile-shell-menu.is-ready {
        opacity: 1;
    }

    .mobile-shell-menu.is-closing {
        opacity: 0;
        pointer-events: none;
    }

    .mobile-shell-menu__seed {
        display: none;
    }

    .mobile-shell-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(2, 6, 23, 0.08);
        backdrop-filter: blur(7px) saturate(1.04);
        -webkit-backdrop-filter: blur(7px) saturate(1.04);
        opacity: 0;
        transition: opacity 160ms ease-out;
        pointer-events: none;
    }

    .mobile-shell-menu.is-ready::before {
        opacity: 1;
    }

    .mobile-shell-menu.is-closing::before {
        opacity: 0;
    }

    body[data-theme="light"] .mobile-shell-menu::before,
    html[data-theme="light"] .mobile-shell-menu::before {
        background: rgba(248, 250, 252, 0.18);
        backdrop-filter: blur(8px) saturate(1.02);
        -webkit-backdrop-filter: blur(8px) saturate(1.02);
    }


    .mobile-shell-menu__panel {
        position: absolute;
        top: var(--mobile-shell-menu-panel-top);
        left: var(--mobile-shell-menu-panel-left);
        right: var(--mobile-shell-menu-panel-right);
        width: var(--mobile-shell-menu-panel-width);
        max-width: calc(100vw - 0.75rem);
        min-width: 18.5rem;
        border-radius: 1.55rem calc(var(--mobile-shell-menu-button-radius) + 1px) 1.55rem 1.55rem;
        background: color-mix(in srgb, var(--color-bg-elevated, #0f172a) 74%, transparent);
        backdrop-filter: blur(46px) saturate(1.2);
        -webkit-backdrop-filter: blur(46px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 20px 48px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        padding: 0;
        will-change: clip-path, height, width, top, right, transform, opacity;
        opacity: 0.76;
        clip-path: circle(calc(var(--mobile-shell-menu-button-size) * 0.5 + 1px) at calc(100% - (var(--mobile-shell-menu-button-size) * 0.5)) calc(var(--mobile-shell-menu-button-size) * 0.5));
        transform-origin: top right;
        transform: scale(var(--mobile-shell-menu-open-scale-x), var(--mobile-shell-menu-open-scale-y));
        transition:
            clip-path 280ms cubic-bezier(.18, .9, .24, 1),
            transform 280ms cubic-bezier(.18, .9, .24, 1),
            opacity 200ms ease-out,
            height 180ms cubic-bezier(.24, .84, .24, 1),
            width 180ms cubic-bezier(.24, .84, .24, 1),
            top 180ms cubic-bezier(.24, .84, .24, 1),
            right 180ms cubic-bezier(.24, .84, .24, 1),
            border-radius 180ms cubic-bezier(.24, .84, .24, 1),
            box-shadow 180ms ease-out,
            background-color 180ms ease-out;
        height: var(--mobile-shell-menu-panel-height);
        overflow: hidden;
        color: var(--color-text, #f8fafc);
        isolation: isolate;
    }

    .mobile-shell-menu__panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
        opacity: 0.8;
    }

    .mobile-shell-menu__content {
        position: relative;
        z-index: 1;
        display: block;
        padding: 0.72rem 0.96rem 0.98rem 0.88rem;
        opacity: 0;
        transform: translate3d(0.18rem, -0.1rem, 0) scale(0.988);
        transform-origin: top right;
        transition: opacity 120ms ease-out 70ms, transform 190ms cubic-bezier(.22, .88, .24, 1) 70ms;
    }

    body[data-theme="light"] .mobile-shell-menu__panel,
    html[data-theme="light"] .mobile-shell-menu__panel {
        background: rgba(248, 250, 252, 0.9);
        color: rgba(15, 23, 42, 0.94);
        border-color: rgba(148, 163, 184, 0.26);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .mobile-shell-menu.is-ready .mobile-shell-menu__panel {
        opacity: 1;
        clip-path: inset(0 round 1.55rem calc(var(--mobile-shell-menu-button-radius) + 1px) 1.55rem 1.55rem);
        transform: translate3d(0, 0, 0) scale(1, 1);
    }

    .mobile-shell-menu.is-ready .mobile-shell-menu__content {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        transition-delay: 90ms;
    }

    .mobile-shell-menu.is-closing .mobile-shell-menu__panel {
        opacity: 0.76;
        clip-path: circle(calc(var(--mobile-shell-menu-button-size) * 0.5 + 1px) at calc(100% - (var(--mobile-shell-menu-button-size) * 0.5)) calc(var(--mobile-shell-menu-button-size) * 0.5));
        transform: scale(var(--mobile-shell-menu-open-scale-x), var(--mobile-shell-menu-open-scale-y));
        transition:
            clip-path 170ms cubic-bezier(.42, 0, .9, 1),
            transform 170ms cubic-bezier(.42, 0, .9, 1),
            opacity 120ms ease-out,
            height 120ms ease-out,
            width 120ms ease-out,
            top 120ms ease-out,
            right 120ms ease-out,
            border-radius 120ms ease-out,
            box-shadow 120ms ease-out;
    }

    .mobile-shell-menu.is-closing .mobile-shell-menu__content {
        opacity: 0;
        transform: translate3d(0.12rem, -0.08rem, 0) scale(0.99);
        transition-duration: 90ms;
        transition-delay: 0ms;
    }

    .mobile-shell-menu__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.24rem;
        min-height: 2rem;
    }

    .mobile-shell-menu__header[hidden] {
        display: none;
    }

    .mobile-shell-menu__header-main {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex: 1 1 auto;
    }

    .mobile-shell-menu__header-main.is-clickable {
        cursor: pointer;
    }

    .mobile-shell-menu__title {
        margin: 0;
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .mobile-shell-menu__title-badge {
        min-width: 1.18rem;
        height: 1.18rem;
        padding: 0 0.34rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.18);
        color: inherit;
        font-size: 0.64rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.01em;
        flex: 0 0 auto;
    }

    body[data-theme="light"] .mobile-shell-menu__title-badge,
    html[data-theme="light"] .mobile-shell-menu__title-badge {
        background: rgba(15, 23, 42, 0.1);
    }

    .mobile-shell-menu__title-badge.is-priority {
        background: rgba(251, 113, 133, 0.92);
        color: #fff;
    }

    .mobile-shell-menu__back {
        width: 1.9rem;
        min-width: 1.9rem;
        height: 1.9rem;
        min-height: 1.9rem;
        padding: 0;
        border-radius: 999px;
        border: none;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        box-shadow: none;
        transition: transform 130ms ease, opacity 130ms ease, background-color 130ms ease;
    }

    .mobile-shell-menu__back:active {
        transform: scale(0.94);
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-shell-menu__back[hidden] {
        display: none;
    }

    .mobile-shell-menu__viewport {
        position: relative;
        overflow: hidden;
        min-height: 1px;
        transition: height 180ms cubic-bezier(.24, .84, .24, 1), width 180ms cubic-bezier(.24, .84, .24, 1);
        width: 100%;
    }

    .mobile-shell-menu__page {
        display: grid;
        gap: 0.06rem;
        width: 100%;
        min-width: 0;
    }


    .mobile-shell-menu__separator {
        height: 1px;
        margin: 0.34rem 0 0.42rem;
        border-radius: 999px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(148, 163, 184, 0.02) 6%,
            rgba(148, 163, 184, 0.34) 24%,
            rgba(148, 163, 184, 0.34) 76%,
            rgba(148, 163, 184, 0.02) 94%,
            transparent 100%
        );
        opacity: 0.85;
    }

    body[data-theme="light"] .mobile-shell-menu__separator,
    html[data-theme="light"] .mobile-shell-menu__separator {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(15, 23, 42, 0.02) 6%,
            rgba(148, 163, 184, 0.32) 24%,
            rgba(148, 163, 184, 0.32) 76%,
            rgba(15, 23, 42, 0.02) 94%,
            transparent 100%
        );
    }

    .mobile-shell-menu__page.is-transition-layer {
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
    }

    .mobile-shell-menu__page.is-current {
        position: relative;
    }

    .mobile-shell-menu__page.is-enter-from-right {
        opacity: 0;
        transform: translate3d(1.2rem, 0, 0);
    }

    .mobile-shell-menu__page.is-enter-from-left {
        opacity: 0;
        transform: translate3d(-1rem, 0, 0);
    }

    .mobile-shell-menu__page.is-leave-to-left,
    .mobile-shell-menu__page.is-leave-to-right {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .mobile-shell-menu__page.is-animating {
        transition: transform 170ms cubic-bezier(.24, .84, .24, 1), opacity 140ms ease;
        will-change: transform, opacity;
    }

    .mobile-shell-menu__page.is-enter-from-right.is-animating,
    .mobile-shell-menu__page.is-enter-from-left.is-animating {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .mobile-shell-menu__page.is-leave-to-left.is-animating {
        opacity: 0;
        transform: translate3d(-1rem, 0, 0);
    }

    .mobile-shell-menu__page.is-leave-to-right.is-animating {
        opacity: 0;
        transform: translate3d(1rem, 0, 0);
    }

    .mobile-shell-menu__action {
        position: relative;
        width: 100%;
        min-height: 2.75rem;
        border-radius: 0.9rem;
        border: none;
        outline: none;
        background: transparent;
        display: grid;
        grid-template-columns: 1.55rem minmax(0, 1fr);
        align-items: center;
        column-gap: 0.74rem;
        text-align: left;
        color: inherit;
        box-shadow: none;
        transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
        overflow: visible;
    }
    
    .mobile-shell-menu__action {
    padding: 0.62rem 0.9rem 0.62rem 0.02rem;
}

.mobile-shell-menu__action.has-meta {
    padding-right: 3.1rem;
}

    .mobile-shell-menu__action:active {
        transform: scale(0.986);
        background: color-mix(in srgb, currentColor 5%, transparent);
    }

    .mobile-shell-menu__action.is-danger {
        color: #fda4af;
    }

    .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-icon,
    .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-label,
    .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-chevron {
        color: inherit;
    }

    .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-badge {
        background: rgba(239, 68, 68, 0.18);
        color: #fecdd3;
    }

    body[data-theme="light"] .mobile-shell-menu__action.is-danger,
    html[data-theme="light"] .mobile-shell-menu__action.is-danger {
        color: #dc2626;
    }

    body[data-theme="light"] .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-badge,
    html[data-theme="light"] .mobile-shell-menu__action.is-danger .mobile-shell-menu__action-badge {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c;
    }

    .mobile-shell-menu__action.is-success {
        color: #86efac;
    }

    body[data-theme="light"] .mobile-shell-menu__action.is-success,
    html[data-theme="light"] .mobile-shell-menu__action.is-success {
        color: #16a34a;
    }

    .mobile-shell-menu__action.has-style-color .mobile-shell-menu__action-icon {
        color: var(--mobile-shell-menu-action-color, currentColor);
    }

    .mobile-shell-menu__action.is-selected {
        background: color-mix(in srgb, var(--mobile-shell-menu-action-color, rgba(124,108,255,0.45)) 18%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mobile-shell-menu-action-color, rgba(124,108,255,0.55)) 42%, transparent);
    }

    .mobile-shell-menu__action.is-selected .mobile-shell-menu__action-label,
    .mobile-shell-menu__action.is-selected .mobile-shell-menu__action-icon {
        color: inherit;
    }

    body[data-theme="light"] .mobile-shell-menu__action.is-selected,
    html[data-theme="light"] .mobile-shell-menu__action.is-selected {
        background: color-mix(in srgb, var(--mobile-shell-menu-action-color, rgba(124,108,255,0.30)) 14%, rgba(255,255,255,0.96));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mobile-shell-menu-action-color, rgba(124,108,255,0.45)) 36%, rgba(15,23,42,0.08));
    }

    .mobile-shell-menu__action-icon {
        width: 1.55rem;
        min-width: 1.55rem;
        height: 1.55rem;
        min-height: 1.55rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 1rem;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
        opacity: 0.96;
    }

    .mobile-shell-menu__profile-glyph {
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit;
        overflow: hidden;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, rgba(255, 221, 225, 0.96), rgba(255, 193, 204, 0.86));
        color: rgba(38, 10, 18, 0.9);
    }

    .mobile-shell-menu__profile-glyph img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mobile-shell-menu__action-label {
        min-width: 0;
        max-width: 100%;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-shell-menu__action-meta {
        position: absolute;
        top: 50%;
        right: 0.48rem;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.38rem;
        min-width: 1.8rem;
        max-width: calc(100% - 2rem);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        pointer-events: none;
    }

    .mobile-shell-menu__action-badge {
        min-width: 1.08rem;
        height: 1.08rem;
        padding: 0 0.28rem;
        margin: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.18);
        color: inherit;
        font-size: 0.61rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.01em;
        flex: 0 0 auto;
    }

    body[data-theme="light"] .mobile-shell-menu__action-badge,
    html[data-theme="light"] .mobile-shell-menu__action-badge {
        background: rgba(15, 23, 42, 0.1);
    }

    .mobile-shell-menu__action-badge.is-priority {
        background: #ff4d6d;
        color: #fff;
    }

    body[data-theme="light"] .mobile-shell-menu__action-badge.is-priority,
    html[data-theme="light"] .mobile-shell-menu__action-badge.is-priority {
        background: #ff4d6d;
        color: #fff;
    }

    .mobile-shell-menu__action-chevron {
        opacity: 0.58;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        min-width: 1rem;
        font-size: 0.92rem;
        transform: none;
        flex: 0 0 auto;
    }

    .mobile-shell-menu__measure {
        contain: layout style paint;
    }

    .mobile-shell-menu__panel.mobile-shell-menu__panel--measure {
    position: fixed;
    left: -9999px;
    top: 0;
    right: auto;
    width: auto;
    height: auto;
    max-width: min(calc(100vw - 1rem), 26rem);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none;
}

    .mobile-shell-menu__panel.mobile-shell-menu__panel--measure .mobile-shell-menu__viewport {
        height: auto !important;
        width: auto !important;
        transition: none !important;
    }
}

@media (max-width: 719px) {
    .mobile-shell-menu__viewport,
    .mobile-shell-menu__page {
        max-width: 100%;
    }

    .mobile-shell-menu__panel::before {
        width: calc(var(--mobile-shell-menu-button-size) + 0.24rem);
        height: calc(var(--mobile-shell-menu-button-size) + 0.24rem);
        transform: translate(14%, -14%);
    }
}