/**
 * Sticky cart button — RST rental flow.
 *
 * Floating pill in the bottom-right that shows item count + total
 * once the customer has added something to their cart. Sits above
 * the WhatsApp bubble. Brand orange to match Book Now CTAs.
 */

.hilucy-sticky-cart {
    position: fixed;
    right: 16px;
    bottom: 88px; /* clears the WhatsApp bubble at ~bottom: 16px + 56px tall */
    z-index: 9998; /* one less than typical chat widget z-index */
    display: none; /* hidden until cart has items */
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 14px;
    border-radius: 999px;
    background: #E66B2C; /* matches Book now buttons */
    color: #ffffff !important;
    font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(230, 107, 44, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    cursor: pointer;
    border: none;
}

/* Force every nested span (label, count badge, total) to render white
   too. WP themes often cascade an `a { color: <brand-blue> }` rule
   that beats a single .hilucy-sticky-cart color declaration on the
   anchor — this `!important` block locks it down for hover/active/
   visited states and both the orange (Go to cart) and slate
   (Continue shopping) variants. */
.hilucy-sticky-cart,
.hilucy-sticky-cart:link,
.hilucy-sticky-cart:visited,
.hilucy-sticky-cart:hover,
.hilucy-sticky-cart:focus,
.hilucy-sticky-cart:focus-visible,
.hilucy-sticky-cart:active,
.hilucy-sticky-cart .hilucy-sticky-cart__label,
.hilucy-sticky-cart .hilucy-sticky-cart__count,
.hilucy-sticky-cart .hilucy-sticky-cart__total {
    color: #ffffff !important;
}

.hilucy-sticky-cart.is-visible {
    display: inline-flex;
    animation: hilucy-sticky-cart-fade-in 0.28s ease-out;
}

/* Back-direction variant — used on /cart/ and /checkout/ to send the
   customer to the RST landing page so they can add another vehicle.
   Distinct neutral palette so it's visually different from the forward
   "Go to cart" pill (orange). */
.hilucy-sticky-cart.hilucy-sticky-cart--back {
    background: #1f2937; /* slate-800 */
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.hilucy-sticky-cart.hilucy-sticky-cart--back:hover,
.hilucy-sticky-cart.hilucy-sticky-cart--back:focus-visible {
    background: #111827; /* slate-900 */
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.45), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.hilucy-sticky-cart:hover,
.hilucy-sticky-cart:focus-visible {
    background: #d35d22;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(230, 107, 44, 0.45), 0 2px 4px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    outline: none;
}

.hilucy-sticky-cart__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.hilucy-sticky-cart__label {
    white-space: nowrap;
}

.hilucy-sticky-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.hilucy-sticky-cart__total {
    opacity: 0.9;
    font-weight: 500;
    font-size: 13px;
    margin-left: 2px;
}

.hilucy-sticky-cart.is-bumping {
    animation: hilucy-sticky-cart-bump 0.45s ease-out;
}

@keyframes hilucy-sticky-cart-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hilucy-sticky-cart-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    70%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Compact mobile layout: icon + count, hide total */
@media (max-width: 480px) {
    .hilucy-sticky-cart {
        right: 12px;
        bottom: 80px;
        padding: 10px 12px;
        font-size: 13px;
    }

    .hilucy-sticky-cart__total {
        display: none;
    }

    .hilucy-sticky-cart__label {
        /* Keep label visible but tighter */
    }
}