/* Kalio Catering custom styles */
/* Critical navbar fallback: prevent a flash of unstyled links while Tailwind CDN initializes. */
#navbar,
#navbar a,
#mobile-menu-btn {
  color: #fff;
}
#mobile-menu.hidden {
  display: none;
}
#mobile-menu {
  background-color: #211914;
  border-top: 1px solid #1f2937;
}
#mobile-menu a {
  color: #fff;
  display: block;
}

#navbar.navbar-scrolled { background-color: rgb(33 25 20 / .96); box-shadow: 0 1px 0 rgb(255 255 255 / .12), 0 8px 24px rgb(0 0 0 / .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-item.active .faq-answer { max-height: 18rem; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; flex: 0 0 auto; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(255 255 255 / .25); border-radius: 9999px; color: white; font-weight: 800; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.social-icon:hover, .social-icon:focus-visible { background: #d8a66e; border-color: #d8a66e; color: #211914; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* Creative online-ordering cards */
.order-card { position: relative; min-height: 24rem; padding: 2.25rem; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ded2c0; }
.order-card--catering { background: #211914; }
.order-card--catering::after { content: ''; position: absolute; width: 19rem; height: 19rem; right: -8rem; bottom: -11rem; border: 1px solid rgb(216 166 110 / .45); border-radius: 9999px; box-shadow: 0 0 0 2.5rem rgb(216 166 110 / .08), 0 0 0 5rem rgb(216 166 110 / .04); pointer-events: none; }
.order-card--grab { background: #e8f7ed; }
.order-card--gofood { background: #e8f7ed; }
.order-card--grab::after, .order-card--gofood::after { content: ''; position: absolute; width: 17rem; height: 17rem; top: -8.5rem; border: 1px solid rgb(0 141 63 / .28); border-radius: 9999px; box-shadow: 0 0 0 1.6rem rgb(0 141 63 / .08), 0 0 0 3.2rem rgb(0 141 63 / .04); pointer-events: none; }
.order-card--grab::after { right: -8.5rem; }
.order-card--gofood::after { left: -8.5rem; }
.order-card__link { position: relative; z-index: 1; margin-top: auto; padding-top: 2rem; display: inline-flex; align-items: center; gap: .6rem; color: white; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: color .18s ease; }
.order-card__link:hover { color: #d8a66e; }
.order-card__link--dark { color: #211914; }
.order-card__link--dark:hover { color: #ae4f2b; }
/* Two-action floating menu */
.fab-menu { transform: translateY(14px) scale(.94); transform-origin: bottom right; opacity: 0; pointer-events: none; transition: transform .24s ease, opacity .24s ease; }
.fab-menu.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.fab-option { display: inline-flex; align-items: center; gap: .75rem; }
.fab-label { padding: .55rem .8rem; background: white; color: #211914; border-radius: .4rem; box-shadow: 0 5px 18px rgb(0 0 0 / .13); font-size: .8rem; font-weight: 700; opacity: 0; transform: translateX(5px); transition: opacity .18s ease, transform .18s ease; }
.fab-option:hover .fab-label, .fab-option:focus-visible .fab-label { opacity: 1; transform: translateX(0); }
.fab-option__icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 9999px; box-shadow: 0 5px 18px rgb(0 0 0 / .18); transition: transform .18s ease; }
.fab-option:hover .fab-option__icon, .fab-option:focus-visible .fab-option__icon { transform: scale(1.08); }
.social-icon svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 639px) { .order-card { min-height: 20rem; padding: 1.75rem; } .fab-label { opacity: 1; transform: none; } }

/* Prevent the hidden FAB menu from blocking taps underneath on mobile. */
#fab-root { pointer-events: none; }
#fab-toggle, #fab-menu.active, #fab-menu.active * { pointer-events: auto; }