:root {
        --shine-speed: 2.2s;
        --shine-width: 16%;
    }

    .fab-order .order-icon .shiny {
        --caption-color: #c41f1f;
        /* สีตัวอักษรพื้นฐานของปุ่ม */
        background-image:
            linear-gradient(90deg,
                var(--caption-color) 0%,
                var(--caption-color) calc(50% - var(--shine-width)),
                #fff 50%,
                var(--caption-color) calc(50% + var(--shine-width)),
                var(--caption-color) 100%);
        background-size: 200% 100%;
        background-position: -100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: shine-move var(--shine-speed) linear infinite;
        /* แสงกวาดซ้าย→ขวา */
        display: inline-block;
        will-change: background-position;
    }

    /* แอนิเมชันแสง */
    @keyframes shine-move {
        0% {
            background-position: 100% 0;
        }

        100% {
            background-position: -100% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .fab-order .order-icon .shiny {
            animation: none;
            background-position: 0 0;
        }
    }

    /* ===== FAB Container ===== */
    .menu-fab {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(max(16px, env(safe-area-inset-bottom)) + 24px);
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        /* ให้รายการซ้อนทางขวา */
        gap: 12px;
        pointer-events: none;
    }

    /* ===== FAB Sub Menu  ===== */
    .menu-fab .fab-sub {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(8px);
        transition: max-height .3s ease, opacity .25s ease, transform .25s ease;
    }

    .fab-item .fab-caption {
        flex: 1;
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        color: #a11;
        white-space: nowrap;
    }

    .menu-fab.open .fab-sub {
        max-height: 600px;
        opacity: 1;
        transform: translateY(0);
    }

    /* ===== FAB Item (Pill Shape) ===== */
    .fab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260px;
        gap: 10px;
        padding: 10px 18px;
        min-width: 160px;
        height: 60px;
        background: #E8E8E8;
        border-radius: 999px;
        cursor: pointer;
        pointer-events: auto;
        border: none;
        outline: none;
        text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
    }

    /* .fab-item:hover:not(.fab-order) {
        transform: translateY(-2px);
        background: #f2f2f2;
        color: black;
    } */

    .fab-item:focus-visible {
        outline: 2px solid #000;
        outline-offset: 2px;
    }

    /* ไอคอนในปุ่มย่อย/ทั่วไป */
    .fab-item img {
        width: 36px;
        height: 36px;
    }


    /* ===== ปุ่ม ORDER หลัก ===== */
    .fab-order {
        width: 100px;
        background: #FFC200;
        color: #c41f1f;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    }

    /* .fab-order:hover {
        transform: translateY(-2px);
        background: #FFC600;
        color: #000;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .34);
    } */

    /* เนื้อในปุ่ม ORDER */
    .fab-order .order-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .fab-order .order-icon img {
        width: 36px;
        height: 36px;
        filter: brightness(0) invert(1);
    }

    .fab-order .order-icon span {
        font-family: 'Brunson', serif;
        /* font-weight: 900; */
        font-size: 21px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }



    .fab-audio {
        width: 100px;
    }

    .fab-audio .state-pause {
        display: none;
    }

    .fab-audio.is-playing .state-play {
        display: none;
    }

    .fab-audio.is-playing .state-pause {
        display: inline;
    }

    .fab-audio.is-playing {
        /* box-shadow: 0 12px 32px rgba(0, 0, 0, .2); */
    }


    /* ===== Responsive ===== */
    @media (max-width: 768px) {
        .fab-item {
            min-width: 140px;
            height: 52px;
            padding: 8px 14px;
        }

        .fab-item img {
            width: 30px;
            height: 30px;
        }

        .fab-caption {
            font-size: 12px;
        }

        .fab-order .order-icon span {
            font-size: 20px;
        }
    }