/* ==========================================
        FLOATING CUSTOMER ACTIONS (FAB)
        Cart + My Orders — icon-only buttons
        fixed to the bottom-right of the screen.
========================================== */

.rt-fab-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;

    /* Above normal page content, but below the cart/checkout modals
       (z-index: 10500 in navbar-modals.css) and below SweetAlert2's
       own stacking context, so it never covers a dialog or alert. */
    z-index: 900;
}

.rt-fab {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--primary, #1B1B1B);
    color: #fff;
    border: none;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

/* Cart and Orders intentionally share the exact same background --
   they're meant to read as one icon-only button group, not two
   differently-colored actions. Only the icon differs. */

.rt-fab:hover,
.rt-fab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
}

.rt-fab-cart:hover,
.rt-fab-cart:focus-visible,
.rt-fab-orders:hover,
.rt-fab-orders:focus-visible {
    background: #000;
}

.rt-fab:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}

.rt-fab:focus-visible {
    outline: 3px solid var(--secondary, #C89B5B);
    outline-offset: 3px;
}

/* Small notification badge for the cart item count. Reuses
   .nav-cart-count so cart-modal.js's existing updateNavCartCount()
   keeps it in sync automatically -- no separate JS needed. */
.rt-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--secondary, #C89B5B);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--primary, #1B1B1B);
}

.rt-fab-cart .rt-fab-badge {
    box-shadow: 0 0 0 2px var(--primary, #1B1B1B);
}

.rt-fab-badge.is-hidden {
    display: none;
}

/* Subtle hover/focus tooltip -- since the buttons are icon-only,
   this is the sighted-hover equivalent of the aria-label already on
   each button. Kept small and understated per the design brief. */
.rt-fab::before {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);

    background: var(--primary, #1B1B1B);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.rt-fab:hover::before,
.rt-fab:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (hover: none) {
    /* No hover on touch devices -- aria-label already covers
       screen-reader accessibility, and there's no pointer to hover. */
    .rt-fab::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .rt-fab-container {
        right: 16px;
        bottom: 16px;
        gap: 10px;
    }

    .rt-fab {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}