/* =========================================================
   YASTA FASHION V4.3.5 STABLE
   MOBILE ORDER HUB + CHAT BOTTOM NAVIGATION
   ========================================================= */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

@media (max-width: 767.98px) {
    body.yf-frontend-app .yf-tracking-page,
    body.yf-frontend-app .yf-order-hub,
    body.yf-frontend-app .yf-order-hub > *,
    body.yf-frontend-app .yf-order-hub-welcome,
    body.yf-frontend-app .yf-order-hub-toolbar,
    body.yf-frontend-app .yf-order-hub-list,
    body.yf-frontend-app .yf-order-hub-card,
    body.yf-frontend-app .yf-order-hub-stats {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.yf-frontend-app .yf-order-hub-welcome {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 16px !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    body.yf-frontend-app .yf-order-hub-welcome > div,
    body.yf-frontend-app .yf-order-hub-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.yf-frontend-app .yf-order-hub-welcome strong,
    body.yf-frontend-app .yf-order-hub-welcome span,
    body.yf-frontend-app .yf-order-hub-stat strong,
    body.yf-frontend-app .yf-order-hub-stat span,
    body.yf-frontend-app .yf-order-hub-products,
    body.yf-frontend-app .yf-order-hub-meta,
    body.yf-frontend-app .yf-order-hub-money {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    body.yf-frontend-app .yf-order-hub-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body.yf-frontend-app .yf-order-hub-action,
    body.yf-frontend-app .yf-order-hub-cta {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        transform: none !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body.yf-frontend-app .yf-order-hub-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        overflow: visible !important;
    }

    body.yf-frontend-app .yf-order-hub-stat {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.yf-frontend-app .yf-order-hub-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    body.yf-frontend-app .yf-order-hub-filters {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.yf-frontend-app .yf-order-hub-filters::-webkit-scrollbar {
        display: none;
    }

    body.yf-frontend-app .yf-order-hub-filter {
        flex: 0 0 auto !important;
    }

    body.yf-frontend-app .yf-order-hub-card {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    /* Mobile membuka chat dari bottom navigation, bukan launcher floating. */
    body.yf-frontend-app #yfLiveChatButton,
    body.yf-frontend-app .yf-live-chat-button,
    body.yf-frontend-app #yfChatNotification,
    body.yf-frontend-app .yf-live-chat-notification,
    body.yf-frontend-app .yf-live-chat-label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.yf-frontend-app .yf-live-chat-panel {
        pointer-events: auto !important;
    }

    body.yf-frontend-app .yf-mobile-chat-badge {
        position: absolute;
        top: 3px;
        left: calc(50% + 7px);
        z-index: 3;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #dc3545;
        border: 2px solid #fff;
        border-radius: 999px;
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(220, 53, 69, .32);
        pointer-events: none;
    }

    body.yf-frontend-app .yf-mobile-chat-badge[hidden] {
        display: none !important;
    }

    body.yf-frontend-app #yfMobileDockChat.has-unread {
        color: #e33b20 !important;
        background: #fff0eb !important;
    }

    body.yf-frontend-app #yfMobileDockChat.has-unread i {
        color: #e33b20 !important;
    }

    body.yf-frontend-app #yfMobileDockChat.has-new-admin-message {
        animation: yf-mobile-chat-message-pulse 1.1s ease-in-out 3;
    }

    @keyframes yf-mobile-chat-message-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
    }
}

@media (max-width: 350px) {
    body.yf-frontend-app .yf-order-hub-stats {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (min-width: 768px) {
    body.yf-frontend-app #yfLiveChatButton,
    body.yf-frontend-app .yf-live-chat-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.yf-frontend-app #yfChatNotification:not([hidden]),
    body.yf-frontend-app .yf-live-chat-notification:not([hidden]) {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}