/**
 * 全站响应式：手机 / 平板 / 电脑分场景适配
 * 断点：768px（手机↔平板/电脑）、480px（小屏手机）
 */

/* —— 全局 —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.site-viewport-mobile {
    --drawer-max-h: min(94dvh, 820px);
}

/* —— 首页：手机增强 —— */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        justify-content: center;
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .visual-grid {
        min-height: 280px;
    }

    .visual-card.large {
        min-height: 180px;
    }

    .marquee-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .shop-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.35rem;
        margin: 0 -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }

    .shop-filters::-webkit-scrollbar {
        display: none;
    }

    .shop-filters .shop-filter-btn,
    .shop-filters button {
        flex-shrink: 0;
        min-height: 40px;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .work-overlay {
        opacity: 1;
        padding: 1.25rem;
    }

    .work-item {
        min-height: 200px;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        transform: translateY(100px);
        padding: 0.85rem 1.25rem;
        font-size: 0.88rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    }

    .toast.show {
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2.15rem;
    }

    .hero-tag {
        font-size: 0.68rem;
        padding: 0.35rem 0.75rem;
    }

    .services-grid--showcase {
        grid-auto-rows: minmax(260px, auto);
    }

    .service-card--showcase {
        min-height: 260px;
    }

    .logo-text {
        font-size: 1rem;
    }

    .logo-text span {
        font-size: 0.62rem;
    }
}

/* —— 平板：内容区留白 —— */
@media (min-width: 769px) and (max-width: 1024px) {
    .services,
    .works {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* —— 大屏：限制抽屉宽度 —— */
@media (min-width: 769px) {
    #checkoutDrawer.checkout-drawer-overlay .checkout-drawer {
        width: min(100%, 480px);
    }

    #ordersDrawer.checkout-drawer-overlay .checkout-drawer,
    #userDrawer.checkout-drawer-overlay .checkout-drawer,
    #chatDrawer.checkout-drawer-overlay .checkout-drawer,
    #authDrawer.checkout-drawer-overlay .checkout-drawer.app-drawer {
        width: min(100%, 440px);
    }

    #authDrawer .oauth-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    #authDrawer .oauth-stack a.oauth-btn {
        margin: 0;
        padding: 0.75rem 0.65rem;
        font-size: 0.88rem;
    }
}

/* —— 手机：抽屉统一底 sheet / 全屏 —— */
@media (max-width: 768px) {
    .checkout-drawer-overlay {
        background: rgba(26, 26, 46, 0.42);
        backdrop-filter: blur(3px);
    }

    /* 结账：全屏自底滑入（表单较长） */
    #checkoutDrawer .checkout-drawer {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
        transform: translate3d(0, 100%, 0);
    }

    #checkoutDrawer.checkout-drawer-overlay.open .checkout-drawer {
        transform: translate3d(0, 0, 0);
    }

    #checkoutDrawer .drawer-header {
        padding: 0.85rem 1rem 0.65rem;
    }

    #checkoutDrawer .drawer-title {
        font-size: 1.2rem;
    }

    #checkoutDrawer .drawer-progress span {
        font-size: 0.65rem;
    }

    #checkoutDrawer .drawer-scroll {
        padding: 0.75rem 1rem 1rem;
    }

    #checkoutDrawer .drawer-footer {
        padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0));
    }

    #checkoutDrawer .drawer-cta {
        min-height: 50px;
        font-size: 1rem;
        border-radius: 10px;
    }

    #checkoutDrawer .flow-form input,
    #checkoutDrawer .flow-form textarea,
    #checkoutDrawer .addr-sheet-row input,
    #checkoutDrawer .addr-sheet-row textarea {
        font-size: 16px;
    }

    /* App 抽屉：订单 / 个人中心 / 客服 / 登录 */
    #ordersDrawer .checkout-drawer,
    #userDrawer .checkout-drawer,
    #chatDrawer .checkout-drawer,
    #authDrawer .checkout-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: var(--drawer-max-h, 94dvh);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px rgba(26, 26, 46, 0.18);
        transform: translate3d(0, 105%, 0);
    }

    #ordersDrawer.checkout-drawer-overlay.open .checkout-drawer,
    #userDrawer.checkout-drawer-overlay.open .checkout-drawer,
    #chatDrawer.checkout-drawer-overlay.open .checkout-drawer,
    #authDrawer.checkout-drawer-overlay.open .checkout-drawer {
        transform: translate3d(0, 0, 0);
    }

    #userDrawer .checkout-drawer {
        max-height: 100dvh;
        border-radius: 0;
    }

    #chatDrawer .checkout-drawer {
        max-height: min(88dvh, 680px);
    }

    .app-drawer .drawer-scroll,
    .app-drawer .drawer-scroll.uc-scroll,
    .app-drawer .drawer-scroll.chat-scroll {
        max-height: calc(var(--drawer-max-h, 94dvh) - 3.5rem);
        -webkit-overflow-scrolling: touch;
    }

    #authDrawer .drawer-scroll {
        padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    }

    #authDrawer .oauth-stack a.oauth-btn {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    #authDrawer .flow-form input,
    #authDrawer .flow-form .flow-captcha input {
        font-size: 16px;
        min-height: 48px;
        box-sizing: border-box;
    }

    #authDrawer .auth-sms-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    #authDrawer .auth-sms-row .uc-sms-send {
        width: 100%;
        min-height: 44px;
    }

    #authDrawer .drawer-cta,
    #authDrawer #authEnterSubmit {
        min-height: 50px;
        font-size: 1rem;
        border-radius: 10px;
    }

    /* 订单卡片 */
    .order-card-actions .btn-repay,
    .order-card-actions .btn-order-cs,
    .order-card-actions .btn-load-logistics {
        min-height: 40px;
    }

    .order-track-form .flow-btn,
    .order-track-submit {
        min-height: 48px;
    }

    /* 个人中心 */
    .uc-profile-card,
    .uc-subnav-back,
    .uc-add-btn,
    .uc-logout-btn {
        min-height: 44px;
    }

    .uc-profile-banner {
        max-height: 120px;
        object-fit: cover;
        width: 100%;
    }

    .app-icon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .app-icon-item {
        min-height: 72px;
        padding: 0.5rem 0.25rem;
    }

    .app-icon-label {
        font-size: 0.72rem;
    }
}

/* —— 手机：支付弹层底 sheet —— */
@media (max-width: 768px) {
    .pay-premium-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .pay-premium-panel {
        width: 100%;
        max-height: min(88dvh, 520px);
        border-radius: 18px 18px 0 0;
        border-bottom: none;
        transform: translate3d(0, 100%, 0);
    }

    .pay-premium-overlay.open .pay-premium-panel {
        transform: translate3d(0, 0, 0);
    }

    .pay-panel-body .pay-method-item {
        min-height: 52px;
    }

    #payPickerConfirm.flow-btn,
    .pay-panel-body .flow-btn {
        min-height: 50px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .pay-panel-body {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
    }

    .pay-loading-box {
        margin: 1rem;
        border-radius: 14px;
    }
}

/* —— 手机：客服 FAB 紧凑 —— */
@media (max-width: 768px) {
    .chat-fab {
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0));
        padding: 0.55rem 0.85rem 0.55rem 0.65rem;
        max-width: calc(100vw - 2rem);
    }

    .chat-fab-hint {
        display: none;
    }

    .chat-fab-label {
        font-size: 0.82rem;
    }

    .chat-fab.is-contact-zone {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    }

    .chat-compose input,
    .chat-compose textarea {
        font-size: 16px;
    }

    .chat-compose .flow-btn {
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .chat-fab-text {
        display: none;
    }

    .chat-fab {
        width: 3rem;
        height: 3rem;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .chat-fab-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* —— 横屏手机：压缩 Hero —— */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: auto;
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .hero-visual {
        min-height: 240px;
    }
}

/* —— 触控友好：全局按钮最小高度（抽屉内） —— */
@media (max-width: 768px) and (pointer: coarse) {
    .drawer-close,
    .drawer-back {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-cart-btn,
    .nav-link-btn,
    .menu-btn {
        min-height: 44px;
        min-width: 44px;
    }
}