/* --------------------------------------------------------------------------
   Site chrome — mobile nav, toast
   -------------------------------------------------------------------------- */

/* 移动端侧栏导航（汉堡菜单） */
@media (max-width: 991.98px) {
    body.is-mobile-nav-open {
        overflow: hidden;
    }

    .mobile-nav-portal {
        position: fixed;
        inset: 0;
        z-index: 1070;
        pointer-events: none;
    }

    body.is-mobile-nav-open .mobile-nav-portal {
        pointer-events: auto;
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1;
        background-color: rgba(15, 23, 42, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.32s ease, visibility 0.32s ease;
    }

    body.is-mobile-nav-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #mainNav.mobile-nav-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: min(88vw, 320px);
        max-width: 320px;
        height: 100dvh;
        margin: 0;
        padding: 0;
        background-color: var(--surface-color, #fff);
        box-shadow: 4px 0 28px rgba(15, 23, 42, 0.16);
        transform: translateX(-105%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        overflow: hidden;
    }

    #mainNav.mobile-nav-drawer.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    .mobile-nav-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-shrink: 0;
        min-height: 3.5rem;
        padding: max(0.875rem, env(safe-area-inset-top, 0px)) 1rem 0.875rem;
        border-bottom: 1px solid var(--gray-200, #e5e7eb);
        background-color: var(--surface-color, #fff);
    }

    .mobile-nav-drawer__brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        flex: 1;
        text-decoration: none;
    }

    .mobile-nav-drawer__title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900, #111827);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-drawer__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    }

    #mainNav .navbar-nav {
        flex-direction: column;
        gap: 0.125rem;
        width: 100%;
    }

    #mainNav .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.625rem 0.75rem !important;
        border-radius: var(--border-radius);
    }

    #mainNav .nav-item__mobile-row {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.25rem;
    }

    #mainNav .nav-item__mobile-row > .nav-link {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
    }

    #mainNav .nav-submenu-toggle {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--gray-500, #6b7280);
        cursor: pointer;
        border-radius: var(--border-radius);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    #mainNav .nav-submenu-toggle:hover,
    #mainNav .nav-submenu-toggle:focus-visible {
        background-color: var(--gray-100, #f3f4f6);
        color: var(--primary-color);
        outline: none;
    }

    #mainNav .nav-link-arrow--mobile {
        display: inline-block !important;
        font-size: 0.75rem;
        line-height: 1;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #mainNav .nav-item--has-children.is-submenu-open .nav-link-arrow--mobile {
        transform: rotate(90deg);
    }

    #mainNav .navbar-nav .nav-link.active,
    #mainNav .navbar-nav .nav-item__mobile-row .nav-link.active {
        color: var(--primary-color) !important;
        background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
        font-weight: 600;
    }

    #mainNav .navbar-nav .nav-item--has-children.is-submenu-open > .nav-item__mobile-row .nav-link.active,
    #mainNav .navbar-nav .nav-item--has-children.is-submenu-open > .nav-link--has-children.active {
        color: var(--primary-color) !important;
        background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    }

    #mainNav .navbar-nav .nav-submenu {
        position: static;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        box-shadow: none;
        border: none;
        transition: max-height 0.3s ease;
    }

    #mainNav .navbar-nav .nav-item--has-children.is-submenu-open .nav-submenu {
        max-height: 500px;
    }

    #mainNav .navbar-nav .nav-submenu-link {
        display: block;
        padding: 0.5rem 0.75rem 0.5rem 1.25rem;
        border-radius: calc(var(--border-radius) - 2px);
        color: var(--gray-600, #6b7280);
    }

    #mainNav .navbar-nav .nav-submenu-link.active {
        color: var(--primary-color);
        background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    }
}

@media (min-width: 992px) {
    #desktopNav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
    }

    .mobile-nav-drawer__body {
        display: contents;
    }
}

/* 移动端底部导航 */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface-color, #fff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem 0.15rem;
    font-size: 0.6875rem;
    color: var(--gray-600, #6b7280);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-bottom-nav__item i {
    font-size: 1.1rem;
}

.mobile-bottom-nav__item.is-active,
.mobile-bottom-nav__item:hover {
    color: var(--primary-color);
}

.mobile-bottom-nav__item--primary {
    color: var(--primary-color);
    font-weight: 600;
}

/* 新版移动端底部操作栏（全局设置 → 移动端体验） */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--mobile-bar-bg, #ffffff);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.mobile-bottom-bar--bordered {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-bottom-bar--scroll {
    transform: translateY(100%);
}

.mobile-bottom-bar--scroll.mobile-bottom-bar--visible {
    transform: translateY(0);
}

.mobile-bottom-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
}

.mobile-bottom-bar__item {
    flex: 1;
    text-align: center;
}

.mobile-bottom-bar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--mobile-bar-icon, #2d3436);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.mobile-bottom-bar__link:hover,
.mobile-bottom-bar__link:focus {
    color: var(--primary-color);
}

.mobile-bottom-bar__link.is-active {
    color: var(--mobile-bar-icon-active, var(--primary-color));
}

.mobile-bottom-bar__visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-bottom-bar__visual--icon .mobile-bottom-bar__icon-fa {
    font-size: 1.25rem;
    line-height: 1;
}

.mobile-bottom-bar__visual .mobile-bottom-bar__state--active {
    display: none;
}

.mobile-bottom-bar__link.is-active .mobile-bottom-bar__visual .mobile-bottom-bar__state--default {
    display: none;
}

.mobile-bottom-bar__link.is-active .mobile-bottom-bar__visual .mobile-bottom-bar__state--active {
    display: inline-flex;
}

.mobile-bottom-bar__icon,
.mobile-bottom-bar__icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.mobile-bottom-bar__icon-placeholder {
    display: inline-block;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mobile-bar-icon, #2d3436) 18%, transparent);
}

.mobile-bottom-bar__label {
    font-size: 12px;
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-bottom-bar.has-mobile-bottom-bar--fixed {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-bottom-bar.has-mobile-bottom-bar--scroll {
        padding-bottom: 0;
    }

    .mobile-bottom-bar {
        display: block;
    }
}

/* 轻提示 */
.pet-toast {
    position: fixed;
    left: 50%;
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    z-index: 1095;
    transform: translateX(-50%) translateY(12px);
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(45, 52, 54, 0.92);
    color: #fff;
    font-size: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pet-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 991.98px) {
    body.has-mobile-bottom-nav .pet-toast {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-bottom-bar.has-mobile-bottom-bar--fixed .pet-toast {
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   Site popup
   -------------------------------------------------------------------------- */

.site-popup {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.site-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-popup[hidden]:not(.is-open) {
    display: none !important;
}

.site-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.site-popup__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, var(--site-popup-width, 26rem));
    max-height: min(88vh, var(--site-popup-max-height, 40rem));
    overflow: hidden;
    border-radius: 1rem;
    background: var(--surface-color, #fff);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s ease;
}

.site-popup--width-sm {
    --site-popup-width: 20rem;
    --site-popup-max-height: 32rem;
    --site-popup-media-max-height: 8rem;
}

.site-popup--width-md {
    --site-popup-width: 26rem;
    --site-popup-max-height: 40rem;
    --site-popup-media-max-height: 10rem;
}

.site-popup--width-lg {
    --site-popup-width: 32rem;
    --site-popup-max-height: 48rem;
    --site-popup-media-max-height: 11rem;
}

.site-popup--width-xl {
    --site-popup-width: 40rem;
    --site-popup-max-height: 56rem;
    --site-popup-media-max-height: 15rem;
}

.site-popup.is-open .site-popup__dialog {
    transform: translateY(0) scale(1);
}

.site-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--gray-600, #4b5563);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.site-popup__close:hover,
.site-popup__close:focus-visible {
    color: var(--gray-900, #111827);
    background: var(--gray-100, #f3f4f6);
    outline: none;
}

.site-popup__media {
    flex-shrink: 0;
    overflow: hidden;
    background: var(--gray-100, #f3f4f6);
}

.site-popup__media-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.site-popup__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--site-popup-media-max-height, 14rem);
    object-fit: cover;
}

.site-popup__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.25rem 1.35rem;
    overflow: auto;
}

.site-popup__title {
    margin: 0;
    padding-right: 1.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-color, #212529);
}

.site-popup__content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text-color, #212529);
}

.site-popup__content > *:first-child {
    margin-top: 0;
}

.site-popup__content > *:last-child {
    margin-bottom: 0;
}

.site-popup__content p {
    margin-bottom: 0.75rem;
}

.site-popup__content img {
    max-width: 100%;
    height: auto;
}

.site-popup__content a {
    color: var(--primary-color);
}

.site-popup__content a:hover {
    color: var(--secondary-color);
}

.site-popup__actions {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}

.site-popup__btn.btn-primary,
.site-popup__btn.btn-primary:link,
.site-popup__btn.btn-primary:visited {
    min-width: 8rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
    text-decoration: none;
}

.site-popup__btn.btn-primary:hover,
.site-popup__btn.btn-primary:focus,
.site-popup__btn.btn-primary:focus-visible {
    color: #fff;
    background-color: var(--primary-hover-color, var(--primary-hover, color-mix(in srgb, var(--primary-color) 85%, #000)));
    border-color: var(--primary-hover-color, var(--primary-hover, color-mix(in srgb, var(--primary-color) 85%, #000)));
    box-shadow: none;
}

.site-popup__btn.btn-primary:active,
.site-popup__btn.btn-primary.active {
    color: #fff;
    background-color: color-mix(in srgb, var(--primary-color) 78%, #000 22%);
    border-color: color-mix(in srgb, var(--primary-color) 78%, #000 22%);
    box-shadow: none;
}

html.site-popup-open,
body.site-popup-open {
    overflow: hidden;
}

body.site-popup-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

@media (max-width: 575.98px) {
    .site-popup {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .site-popup__dialog {
        width: 100%;
        max-height: min(86vh, var(--site-popup-max-height, 36rem));
        border-radius: 1rem 1rem 0.75rem 0.75rem;
    }

    .site-popup__media img {
        max-height: min(11rem, var(--site-popup-media-max-height, 11rem));
    }

    .site-popup--width-lg .site-popup__media img,
    .site-popup--width-xl .site-popup__media img {
        max-height: 13rem;
    }
}