/* =====================================================================
   rm-app.css — Native-feel interaction layer for the Restaurant Menu
   ---------------------------------------------------------------------
   Pairs with rm-app.js. Pure presentation for: lightbox (pinch/zoom),
   quick-add "+1" bubble, fly-to-cart, long-press multi-select, bulk bar,
   drag-to-dismiss sheets, swipe-to-delete cart rows, pull-to-refresh,
   and the touch-tuning (no text-select / no double-tap-zoom) on
   interactive surfaces.

   Theme-aware via the same primary color used across the menu (#E85A2A).
   All selectors are namespaced (rm-*) so they never collide with the
   existing restaurant-menu.css.
   ===================================================================== */

:root {
    --rm-primary: #E85A2A;
}

/* ---------------------------------------------------------------------
   1. Touch tuning — kill text selection, callout and double-tap zoom on
   interactive surfaces so taps feel like a native app, not a webpage.
   --------------------------------------------------------------------- */
.food-card,
.rm-bulk-bar,
.rm-lightbox,
#foodDetailDragHandle,
.rm-cart-item,
.bnav-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Cards may be vertically scrolled past, but never double-tap-zoomed. */
.food-card {
    touch-action: manipulation;
}

/* While the page is dragging a sheet / swiping a row we don't want the
   browser to text-select underneath the finger. */
body.rm-gesture-active,
body.rm-gesture-active * {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------------------------------------------------------------------
   2. Quick-add "+1" bubble (double-tap on a card)
   --------------------------------------------------------------------- */
.rm-qa-bubble {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--rm-primary);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(232, 90, 42, .45);
    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
    animation: rmQaPop .7s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes rmQaPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    35%  { transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(.9); }
}

/* ---------------------------------------------------------------------
   3. Fly-to-cart clone
   --------------------------------------------------------------------- */
.rm-fly-clone {
    position: fixed;
    z-index: 9998;
    border-radius: 16px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    will-change: transform, opacity, width, height, border-radius;
    transition: transform .65s cubic-bezier(.55, -0.2, .35, 1),
                opacity .65s ease,
                width .65s ease, height .65s ease, border-radius .65s ease;
}

/* Cart badge "pop" when something lands in it */
.rm-cart-pop {
    animation: rmCartPop .45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes rmCartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   4. Long-press multi-select
   --------------------------------------------------------------------- */
body.rm-selecting .food-card {
    transition: transform .15s ease;
}

body.rm-selecting .food-card.rm-selected {
    outline: 3px solid var(--rm-primary);
    outline-offset: -3px;
    transform: scale(.97);
}

/* check badge injected into selected cards */
.rm-select-check {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 12;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--rm-primary);
    color: var(--rm-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    pointer-events: none;
}

.food-card.rm-selected .rm-select-check {
    background: var(--rm-primary);
    color: #fff;
}

/* dim the unselected cards a touch while selecting, to focus attention */
body.rm-selecting .food-card:not(.rm-selected) {
    opacity: .82;
}

/* ---------------------------------------------------------------------
   5. Bulk-action floating bar
   --------------------------------------------------------------------- */
.rm-bulk-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9997;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 32rem;
    margin: 0 auto;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
    background: #fff;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
    transform: translateY(120%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.rm-bulk-bar.rm-show {
    transform: translateY(0);
}

.rm-bulk-bar__cancel {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f3f4f6;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-bulk-bar__count {
    flex: 1;
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}

.rm-bulk-bar__count b {
    color: var(--rm-primary);
}

.rm-bulk-bar__add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    background: var(--rm-primary);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(232, 90, 42, .35);
}

.rm-bulk-bar__add:active {
    transform: scale(.97);
}

/* ---------------------------------------------------------------------
   6. Swipe-to-delete on cart rows
   --------------------------------------------------------------------- */
#cartItemsList {
    overflow-x: hidden;
}

.rm-cart-item {
    position: relative;
    background: #fff;
    touch-action: pan-y;
    will-change: transform;
}

.rm-cart-item__del {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: 24px;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: #fff;
    z-index: 0;
    border-radius: 14px;
}

/* the row content sits above the red underlay */
.rm-cart-item > *:not(.rm-cart-item__del) {
    position: relative;
    z-index: 1;
}

.rm-cart-item.rm-swiping {
    transition: none;
}

.rm-cart-item.rm-snap {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.rm-cart-item.rm-removing {
    transition: transform .3s ease, opacity .3s ease, height .3s ease, margin .3s ease, padding .3s ease;
    opacity: 0;
}

/* ---------------------------------------------------------------------
   7. Pull-to-refresh
   --------------------------------------------------------------------- */
.rm-ptr {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60px);
    z-index: 9996;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-primary);
    pointer-events: none;
    opacity: 0;
}

.rm-ptr__spinner {
    width: 22px;
    height: 22px;
    transition: transform .1s linear;
}

.rm-ptr.rm-refreshing .rm-ptr__spinner {
    animation: rmSpin .7s linear infinite;
}

@keyframes rmSpin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   8. Image Lightbox (pinch / double-tap zoom / swipe)
   --------------------------------------------------------------------- */
.rm-lightbox[hidden] {
    display: none;
}
.rm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .28s ease, background-color .28s ease;
    touch-action: none;
    overscroll-behavior: contain;
}

.rm-lightbox.rm-show {
    opacity: 1;
}

.rm-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transform-origin: 0 0;
    touch-action: none;
}

.rm-lightbox__close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0));
    inset-inline-start: 14px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.rm-lightbox__counter {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    background: rgba(0, 0, 0, .35);
    padding: 4px 12px;
    border-radius: 999px;
    z-index: 2;
}

.rm-lightbox__dots {
    position: absolute;
    bottom: calc(22px + env(safe-area-inset-bottom, 0));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}

.rm-lightbox__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    transition: width .2s ease, background-color .2s ease;
}

.rm-lightbox__dot.rm-active {
    width: 20px;
    background: #fff;
}

/* ---------------------------------------------------------------------
   9. Dark mode adjustments
   --------------------------------------------------------------------- */
.dark-mode .rm-bulk-bar {
    background: #1f2937;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}

.dark-mode .rm-bulk-bar__cancel {
    background: #374151;
    color: #d1d5db;
}

.dark-mode .rm-bulk-bar__count {
    color: #e5e7eb;
}

.dark-mode .rm-cart-item {
    background: #1f2937;
}

.dark-mode .rm-select-check {
    background: #1f2937;
}

.dark-mode .food-card.rm-selected .rm-select-check {
    background: var(--rm-primary);
}

.dark-mode .rm-ptr {
    background: #1f2937;
}

/* ---------------------------------------------------------------------
   10. Desktop fix for the floating "view cart" / min-order bars.
   They are mobile-only (markup carries `lg:hidden`), but updateCartUI()
   adds a plain `.flex` utility which, in the local Tailwind build, beats
   the responsive `.lg:hidden` and leaks the full-width bar onto desktop.
   Force them hidden at lg+ regardless of inline/JS-toggled display.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
    #floatingCart,
    #floatingMinOrder {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   11. Scroll-aware floating bars — tuck away while browsing the menu,
   reveal on scroll-up / near top / near bottom. (Driven by rm-app.js.)
   --------------------------------------------------------------------- */
#floatingCart,
#floatingMinOrder {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                background-color .2s ease;
    will-change: transform;
}

#floatingCart.rm-bar-tucked,
#floatingMinOrder.rm-bar-tucked {
    transform: translateY(180%) !important;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   12. Reduced-motion: respect the user's OS preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rm-qa-bubble,
    .rm-cart-pop,
    .rm-fly-clone,
    .rm-bulk-bar,
    .rm-lightbox,
    .rm-ptr__spinner {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}