/* ═══════════════════════════════════════════════════════════════════════════
   Restmaster UX — drag-to-cart hint card (js/ux-drag-hint.js)

   Composition and measurements follow the design prototype's `.dragtip` card:
   fixed in the lower-right corner, a mini "chip glides into the cart" scene on
   the start side, text + pill button on the end side, a round close button.
   Colours are custom properties with the prototype's values as defaults, so a
   Site can retune them from its own CSS without touching this file.

   Own animations only (no tenant GSAP): finite enter/leave, the chip demonstration
   loops as in the prototype (static under reduced-motion). The side the close
   button and CTA sit on is logical (inline-end), which reproduces the RTL
   prototype exactly and still reads correctly on an LTR Site.
   ═══════════════════════════════════════════════════════════════════════════ */

.rm-drag-hint {
    --rm-drag-hint-paper: #ffffff;
    --rm-drag-hint-text: #0d0d0d;
    --rm-drag-hint-ink: #3c2313;
    --rm-drag-hint-accent: #ee3a30;
    --rm-drag-hint-ease-out: cubic-bezier(.32, .72, 0, 1);
    --rm-drag-hint-ease-soft: cubic-bezier(.16, 1, .3, 1);

    /* --rm-drag-hint-lift is measured by the script from the Site's floating WhatsApp
       button when it is actually visible in this corner (prototype: 48 + 72 + 14 = 134px);
       0 when the button is absent, hidden by a branch rule, or in the other corner */
    --rm-drag-hint-lift: 0px;

    position: fixed;
    right: 24px;
    left: auto;
    bottom: calc(22px + var(--rm-drag-hint-lift));
    z-index: 98;
    width: min(330px, calc(100vw - 40px));
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 15px 16px 15px 15px;
    background: var(--rm-drag-hint-paper);
    color: var(--rm-drag-hint-text);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 18px;
    box-shadow: 0 26px 56px -22px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .08);
    font-family: inherit;
}

.rm-drag-hint[hidden] {
    display: none;
}

.rm-drag-hint--entering {
    animation: rm-drag-hint-enter .62s cubic-bezier(.34, 1.56, .64, 1) both;
}

.rm-drag-hint--leaving {
    animation: rm-drag-hint-leave .32s cubic-bezier(.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes rm-drag-hint-enter {
    from { transform: translateY(28px) scale(.94); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes rm-drag-hint-leave {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(22px) scale(.96); opacity: 0; }
}

.rm-drag-hint__x {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .05);
    color: var(--rm-drag-hint-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s var(--rm-drag-hint-ease-soft), transform .35s var(--rm-drag-hint-ease-out), color .3s var(--rm-drag-hint-ease-soft);
}

.rm-drag-hint__x:hover {
    background: var(--rm-drag-hint-ink);
    color: #fff;
    transform: rotate(90deg);
}

.rm-drag-hint__x svg {
    width: 13px;
    height: 13px;
}

/* the mini scene — a product chip that glides from the corner into a cart glyph */
.rm-drag-hint__scene {
    position: relative;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin-top: 22px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, #f4efe8, #efe8dd);
}

.rm-drag-hint__cart {
    position: absolute;
    inset-inline-start: 7px;
    bottom: 7px;
    color: var(--rm-drag-hint-ink);
    line-height: 0;
}

.rm-drag-hint__cart svg {
    width: 22px;
    height: 22px;
}

.rm-drag-hint__chip {
    position: absolute;
    top: 9px;
    inset-inline-end: 8px;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background: var(--rm-drag-hint-accent);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .22);
    /* as in the prototype: the tiny demonstration loops while the card is visible */
    animation: rm-drag-hint-chip 2.4s var(--rm-drag-hint-ease-soft) infinite;
}

/* chip appears in the top inline-end corner, glides down toward the cart at inline-start,
   shrinks in, repeats. Physical direction depends on writing direction: RTL = +24px (prototype). */
@keyframes rm-drag-hint-chip {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    12%  { transform: translate(0, 0) scale(1); opacity: 1; }
    62%  { transform: translate(-24px, 20px) scale(.85); opacity: 1; }
    76%  { transform: translate(-24px, 20px) scale(.25); opacity: 0; }
    100% { transform: translate(-24px, 20px) scale(.25); opacity: 0; }
}

[dir="rtl"] .rm-drag-hint__chip,
.rm-drag-hint:dir(rtl) .rm-drag-hint__chip {
    animation-name: rm-drag-hint-chip-rtl;
}

@keyframes rm-drag-hint-chip-rtl {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    12%  { transform: translate(0, 0) scale(1); opacity: 1; }
    62%  { transform: translate(24px, 20px) scale(.85); opacity: 1; }
    76%  { transform: translate(24px, 20px) scale(.25); opacity: 0; }
    100% { transform: translate(24px, 20px) scale(.25); opacity: 0; }
}

/* the text starts below the close button's row so the two never collide */
.rm-drag-hint__body {
    flex: 1;
    min-width: 0;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rm-drag-hint__text {
    align-self: stretch;
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--rm-drag-hint-text);
}

/* the CTA lines up under the close button (both on the inline-end side) */
.rm-drag-hint__cta {
    margin-top: 12px;
    border: none;
    background: var(--rm-drag-hint-ink);
    color: #fff;
    border-radius: 999px;
    padding: 8px 20px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: transform .3s var(--rm-drag-hint-ease-out), background .35s var(--rm-drag-hint-ease-soft);
}

.rm-drag-hint__cta:hover {
    transform: translateY(-1px);
    background: var(--rm-drag-hint-accent);
}

.rm-drag-hint__cta:active {
    transform: translateY(0) scale(.98);
}

.rm-drag-hint__x:focus-visible,
.rm-drag-hint__cta:focus-visible {
    outline: 2px solid var(--rm-drag-hint-accent);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .rm-drag-hint {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rm-drag-hint--entering,
    .rm-drag-hint--leaving,
    .rm-drag-hint__chip {
        animation: none;
    }

    .rm-drag-hint--leaving {
        opacity: 0;
    }

    .rm-drag-hint__chip {
        transform: translate(-24px, 20px) scale(.85);
        opacity: 1;
    }

    [dir="rtl"] .rm-drag-hint__chip,
    .rm-drag-hint:dir(rtl) .rm-drag-hint__chip {
        transform: translate(24px, 20px) scale(.85);
    }

    .rm-drag-hint__x,
    .rm-drag-hint__cta {
        transition: none;
    }
}