/*
============================================================
CompleteMenus Mobile Experience
Phones, QR Menus, Tablets
============================================================
/menus/css/mobile.css
4TFIED Technologies Website Framework
Copyright © 2026 Benjamin Pendleton / 4TFIED Technologies
All Rights Reserved.
============================================================

This software framework and its associated source code are
the proprietary intellectual property of 4TFIED Technologies.

Unauthorized copying, redistribution, resale, modification,
or reuse of this framework, in whole or in part, is prohibited
without prior written permission from 4TFIED Technologies.

Clients are granted a limited license to use this framework
only as part of the approved website or platform delivered
by 4TFIED Technologies.

Framework Author:
Benjamin Pendleton

Framework Website:
https://4tfied.us

============================================================
*/

@media (max-width: 850px) {

    html,
    body {
        min-height: 100%;
    }

    .complete-menus-demo {
        width: min(760px, 94%);
        min-width: 340px;
        margin: 12px auto 18px;
    }

    .plugin-intro {
        margin-bottom: 10px;
    }

    .plugin-eyebrow {
        margin-bottom: 6px;
        font-size: 0.72rem;
    }

    .plugin-intro h1 {
        font-size: 1.8rem;
        line-height: 1.12;
        margin-bottom: 6px;
    }

    .plugin-intro p:not(.plugin-eyebrow) {
        display: none;
    }

    .complete-menu-plugin {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }

    /*
    .menu-detail-panel {
        order: 1;
        width: 100%;
        min-width: 320px;
        flex-shrink: 0;
        min-height: auto;
        padding: 18px;
        border: 5px solid var(--cm-mobile-device-border);
        border-radius: 34px;
        text-align: center;
        position: static;
        z-index: auto;
    }
    */
    
    .menu-detail-panel {
        order: 1;
        width: 100%;
        min-width: 320px;
        flex-shrink: 0;
        min-height: auto;
        padding: 18px;
        border: 5px solid var(--cm-mobile-device-border);
        border-radius: 34px;
        text-align: center;
        position: static;
        z-index: auto;
    }

    .menu-sidebar {
        order: 2;
        position: static;
        width: 100%;
        min-width: 320px;
        padding: 18px;
    }

    .menu-sidebar-header {
        margin-bottom: 18px;
    }

    .menu-sidebar h2 {
        font-size: 1.7rem;
    }

    .menu-search-toggle {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 1rem;
    }

    .menu-search-panel {
        margin-bottom: 18px;
    }

    .menu-search-input {
        min-height: 52px;
        font-size: 1.05rem;
    }

    .menu-search-result-button {
        padding: 14px 15px;
    }

    .category-block + .category-block {
        margin-top: 14px;
    }

    .category-toggle {
        min-height: 72px;
        border-radius: 16px;
        padding: 18px 20px;
        font-size: 1.25rem;
    }

    .category-toggle span {
        font-size: 1.8rem;
    }

    .item-list {
        padding: 12px 0 4px 10px;
    }

    .menu-item-button {
        border-radius: 14px;
        padding: 15px 16px;
        margin: 10px 0;
        font-size: 1rem;
    }

    .menu-item-row,
    .search-result-topline,
    .price-row,
    .nutrition-row {
        min-width: 0;
    }

    .menu-item-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .menu-item-price {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .detail-placeholder {
        height: auto;
        min-height: 110px;
        padding: 12px 8px;
        min-width: 0;
    }

    .detail-placeholder h2,
    .item-content h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.85rem);
        line-height: 1.08;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .item-detail {
        display: block;
        min-width: 0;
        padding-bottom: 28px;
    }

    .detail-placeholder:not(.category-image-card) {
        padding-bottom: 34px;
    }

    .item-content {
        min-width: 0;
    }

    .category-image-card {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 190px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        padding: 24px 18px;
        background: var(--cm-panel);
    }

    .category-card-bg {
        display: block;
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-image-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--cm-overlay-light);
    }

    .category-image-card .item-content {
        position: relative;
        z-index: 2;
    }

    .category-image-card .item-content h2 {
        font-size: 2.25rem;
        font-weight: 900;
        line-height: 1.05;
        margin: 0 0 10px;
        color: var(--cm-mobile-device-border);
    }

    .category-image-card .item-content p,
    .category-image-card .item-content .item-description {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.4;
        color: var(--cm-mobile-device-border);
    }

    .item-image-wrap {
        display: none;
    }

    .item-description {
        font-size: 1rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .price-row,
    .nutrition-row {
        text-align: left;
    }

    .meta-pills {
        justify-content: center;
    }
}