/* Styles for the Order Online floating button moved from layout */
.order-online-btn{
    position: fixed;
    top: 88px; /* adjust to sit below navbar; tweak if navbar height differs */
    right: 18px;
    z-index: 999998; /* just under messenger/whatsapp float */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg,#ff6b00 0%,#ff8f33 100%);
    color: #fff;
    padding: 10px 14px;
    border-radius: 28px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
/* Shimmer/glint effect across the button */
.order-online-btn::after{
    content: '';
    position: absolute;
    left: -40%;
    top: 0;
    height: 100%;
    width: 40%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
    opacity: 0;
    pointer-events: none;
}
.order-online-btn.spark-animate::after{
    animation: shine 2.5s ease-in-out infinite 0.6s;
}

@keyframes shine{
    0%{ left: -9%; opacity: 0; }
    45%{ opacity: 0.9; }
    55%{ opacity: 0.9; }
    100%{ left: 72%; opacity: 0; }
}

/* Small pulsing spark badge to the right of the text */
.order-spark.spark-pulse{ animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse{
    0%{ transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.9); }
    50%{ transform: scale(1.4); box-shadow: 0 0 16px rgba(255,255,255,0.85); }
    100%{ transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.9); }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
    .order-online-btn::after,
    .order-spark.spark-pulse,
    .order-online-btn.spark-animate::after{ animation: none !important; }
    .order-spark{ box-shadow: none; }
}
.order-online-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.16); }
.order-online-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border-radius: 100%;
    color: #fff; /* SVG uses currentColor */
    flex: none;
}
.order-online-icon svg{ display: block; }
.order-online-text{ font-size: 14px; }

/* Small screens: slightly smaller and move a bit left to avoid edge */
@media (max-width: 600px){
    .order-online-btn{ top: 98px; right: 12px; padding: 8px 12px; }
    .order-online-text{ font-size: 13px; }
}

/* End customer.css */