/* VPS-Server.Host — client-area actions menu on narrow screens.
 *
 * shufytheme's shipped app.min.css hides the "Actions" toggle of the
 * Service/Domain Details Actions panel below 768px (the compiled hide-rule
 * lacks the exception the source CSS has) and renders the list as a
 * hover-only stack of white-on-white blocks. This sheet restores a visible
 * "..." button, turns the list into a proper tap-to-open dropdown and
 * keeps the desktop layout untouched. Loaded by includes/hooks/vpsh_actions_menu.php.
 */
@media only screen and (max-width: 767px) {
    /* --- wrapper -------------------------------------------------------- */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter {
        position: relative;
        order: 12;
        display: flex !important;
        align-items: center;
        align-self: center;
        margin: 0 12px 0 auto !important;
        padding: 0 !important;
        z-index: 30;
    }
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter {
        margin: 0 auto 0 12px !important;
    }

    /* --- toggle button -------------------------------------------------- */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .main__nav__title {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--background-4);
        color: #fff;
        box-shadow: 0 8px 18px -8px rgba(22, 28, 45, .45);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .main__nav__title i,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .main__nav__title i,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .main__nav__title i {
        display: none !important;
    }
    /* three dots, drawn in CSS so no icon-font dependency */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .main__nav__title::before,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .main__nav__title::before,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .main__nav__title::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
    }
    /* tooltip text is useless on touch and overlaps the tabs: keep it for screen readers only */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .main__nav__title .main__nav__title__text,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .main__nav__title .main__nav__title__text,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .main__nav__title .main__nav__title__text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        transition: none !important;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions:hover .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions:hover .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter:hover .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions.vpsh-open .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions.vpsh-open .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter.vpsh-open .main__nav__title {
        background: var(--background-13);
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions.vpsh-open .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions.vpsh-open .main__nav__title,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter.vpsh-open .main__nav__title {
        transform: scale(.94);
        box-shadow: 0 4px 10px -6px rgba(22, 28, 45, .5);
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .main__nav__title:focus-visible,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .main__nav__title:focus-visible,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .main__nav__title:focus-visible {
        outline: 2px solid var(--background-13) !important;
        outline-offset: 2px;
    }

    /* --- dropdown panel ------------------------------------------------- */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav,
    /* beat the theme's hover-to-open rule: closed unless .vpsh-open */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions:not(.vpsh-open):hover .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions:not(.vpsh-open):hover .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter:not(.vpsh-open):hover .nav {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap;
        width: min(300px, calc(100vw - 32px));
        min-width: 0;
        max-height: min(70vh, 560px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin: 0;
        padding: 8px;
        background: var(--background-14);
        border: 1px solid var(--border-color-light);
        border-radius: 14px;
        box-shadow: 0 20px 44px -14px rgba(22, 28, 45, .28), 0 2px 8px rgba(22, 28, 45, .06);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px) scale(.98);
        transform-origin: top right;
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
        z-index: 1050;
    }
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav {
        right: auto;
        left: 0;
        transform-origin: top left;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions.vpsh-open .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions.vpsh-open .nav,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter.vpsh-open .nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    /* --- items ---------------------------------------------------------- */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item {
        width: 100%;
        margin: 0;
        flex: 0 0 auto;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 !important;
        padding: 11px 14px !important;
        border: 0 !important;
        border-radius: 10px;
        background: transparent !important;
        color: var(--color-h);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        text-align: left;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        transition: background-color .12s ease, color .12s ease;
    }
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link,
    body.rtl .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link {
        text-align: right;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link:hover,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link:hover,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link:hover,
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link:focus-visible,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link:focus-visible,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link:focus-visible,
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link.active,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link.active,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link.active {
        background: var(--background-2) !important;
        color: var(--btn-primary-bg);
        outline: none;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link.active::after,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link.active::after,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link.active::after {
        display: none;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link.disabled,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link.disabled,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link.disabled {
        opacity: .45;
        pointer-events: none;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link .loading,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link .loading,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link .loading {
        order: 2;
        margin-left: auto;
        font-size: 12px;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item .nav-link .badge,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item .nav-link .badge,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item .nav-link .badge {
        margin-left: auto;
    }
    /* plain-text rows (section labels / "please wait") */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item-text,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item-text,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item-text {
        padding: 8px 14px 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        text-align: left;
        color: var(--color-h-hover);
    }
    /* footer buttons (e.g. domain auto-renew, ticket filter apply) */
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item-footer,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item-footer,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item-footer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 6px 0 0;
        padding: 10px 4px 2px;
        border-top: 1px solid var(--border-color-light);
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item-footer .btn,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item-footer .btn,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item-footer .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
        padding: 10px 12px;
        border: 0;
        border-radius: 10px;
        background: var(--background-3);
        color: var(--btn-primary-bg);
        font-size: 13px;
        font-weight: 600;
    }
    .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav .nav-item-footer .btn:hover,
    .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav .nav-item-footer .btn:hover,
    .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav .nav-item-footer .btn:hover {
        background: var(--background-4);
        color: #fff;
    }

    /* --- dark mode ------------------------------------------------------ */
    body.body__dark .full__width__secondarysidebar__menu .nav__items__wrapper.service.actions .nav,
    body.body__dark .full__width__secondarysidebar__menu .nav__items__wrapper.domain.actions .nav,
    body.body__dark .full__width__secondarysidebar__menu .nav__items__wrapper.status.filter .nav {
        border-color: rgba(255, 255, 255, .08);
        box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .6);
    }
}