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

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

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

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

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 {
        display: none;
    }

    .menu-sidebar {
        order: 1;
        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-button.active {
        transform: none;
    }

    .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;
    }

    .mobile-inline-detail {
        width: 100%;
        min-width: 0;
        margin: -2px 0 14px;
        padding: 14px;
        border: 4px solid var(--cm-mobile-device-border);
        border-radius: 22px;
        background: var(--cm-panel);
        box-shadow: 0 14px 28px var(--cm-shadow);
        text-align: center;
    }

    .mobile-inline-detail .item-detail {
        display: block;
        min-width: 0;
        padding-bottom: 10px;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .mobile-inline-detail .item-content {
        min-width: 0;
    }

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

    .mobile-inline-detail .item-image-wrap {
        display: none;
    }

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

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

    .mobile-inline-detail .meta-pills {
        justify-content: center;
    }

    .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;
    }
}