/* Floating Navigation Buttons - Frontend v1.1 */

:root {
    --fnb-google-bg:   #4285F4;
    --fnb-google-text: #ffffff;
    --fnb-waze-bg:     #33CCFF;
    --fnb-waze-text:   #ffffff;
}

.fnb-wrapper {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fnb-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.fnb-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.fnb-btn:active { transform: translateY(-1px) scale(1.01); }

.fnb-btn-google { background: var(--fnb-google-bg); color: var(--fnb-google-text); }
.fnb-btn-waze   { background: var(--fnb-waze-bg);   color: var(--fnb-waze-text); }

.fnb-btn-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fnb-btn-icon svg { display: block; }
.fnb-icon-emoji { font-size: 1.3em; line-height: 1; }
.fnb-btn-label { padding-right: 4px; }

/* --- Sizes --- */
.fnb-size-small .fnb-btn  { height: 44px; padding: 0 14px 0 10px; font-size: 12px; }
.fnb-size-small .fnb-btn-icon { width: 22px; height: 22px; }
.fnb-size-medium .fnb-btn { height: 54px; padding: 0 18px 0 12px; font-size: 14px; }
.fnb-size-medium .fnb-btn-icon { width: 28px; height: 28px; }
.fnb-size-large .fnb-btn  { height: 66px; padding: 0 22px 0 16px; font-size: 16px; }
.fnb-size-large .fnb-btn-icon { width: 36px; height: 36px; }

/* No-label mode: icon-only pill */
.fnb-no-label .fnb-btn-label { display: none; }
.fnb-size-small.fnb-no-label  .fnb-btn { width: 44px; padding: 0; justify-content: center; }
.fnb-size-medium.fnb-no-label .fnb-btn { width: 54px; padding: 0; justify-content: center; }
.fnb-size-large.fnb-no-label  .fnb-btn { width: 66px; padding: 0; justify-content: center; }

/* --- Animations --- */
@keyframes fnb-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fnb-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes fnb-shake  { 0%,88%,100%{transform:translateX(0)} 90%{transform:translateX(-5px)} 92%{transform:translateX(5px)} 94%{transform:translateX(-3px)} 96%{transform:translateX(3px)} }

.fnb-anim-bounce .fnb-btn { animation: fnb-bounce 2.2s ease-in-out infinite; }
.fnb-anim-pulse  .fnb-btn { animation: fnb-pulse  2s   ease-in-out infinite; }
.fnb-anim-shake  .fnb-btn { animation: fnb-shake  4s   ease-in-out infinite; }
.fnb-anim-bounce .fnb-btn:hover,
.fnb-anim-pulse  .fnb-btn:hover,
.fnb-anim-shake  .fnb-btn:hover { animation-play-state: paused; }

@media (max-width: 480px) {
    .fnb-size-large .fnb-btn { height: 54px; font-size: 14px; }
    .fnb-size-large .fnb-btn-icon { width: 28px; height: 28px; }
}