/* ================================
    FAB - Botão Flutuante
================================ */

.fab-user {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 75, 138, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: .25s;
}

.fab-user:hover {
    transform: scale(1.05) translateY(-2px);
}

.fab-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.fab-status {
    position: absolute;
    bottom: 6px;
    right: -10px;
    width: 14px;
    height: 14px;
    background: #4CAF50;
    border-radius: 50%;
    border: 3px solid white;
}

/* ================================
    Menu Flutuante
================================ */

.fab-menu {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 260px;
    background: #fff;
    border-radius: 20px;
    padding: 16px 0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    border: 2px solid rgba(255, 182, 210, 0.45);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: .25s;
    z-index: 9998;
}

.fab-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Cabeçalho */

.fab-header {
    text-align: center;
    margin-bottom: 12px;
}

.fab-header-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #56d330;
}

.fab-header-name {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    color: #422222;
}

/* Itens do menu */

.fab-items button {
    width: 86%;
    margin: 6px auto;
    padding: 11px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: block;

    background: linear-gradient(135deg, #ff4b8a, #ff6b6b);
    color: white;
    font-weight: 700;

    transition: .2s;
    box-shadow: 0 6px 16px rgba(255,75,138,0.4);
}

.fab-items button:hover {
    transform: translateY(-2px) scale(1.02);
    opacity: .92;
}

/* ===========================================================
   BADGE: Notificação de Pedidos
   Efeito premium pulsante / animado
=========================================================== */

/* Badge fixa e sem mexer no hover */
.fab-badge {
    position: absolute;

    /* 🔥 Fixo no canto superior direito do FAB */
    top: -4px;
    right: -4px;

    width: 17px;
    height: 17px;

    background: #ff2d55;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 11px;
    font-weight: 700;

    box-shadow: 0 0 10px rgba(255, 0, 80, 0.7);

    animation: pulseFab 1.35s infinite ease-in-out;

    z-index: 99999;
    pointer-events: none; /* garante que o hover não afete ela */
}


/* 🔥 Animação suave e moderna */
@keyframes pulseFab {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
    }
    50% {
        transform: scale(1.25);
        box-shadow: 0 0 16px rgba(255, 0, 80, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
    }
}
/* Torna o botão um container de referência */
.fab-item-with-badge {
    position: relative;    /* 🔥 ESSENCIAL */
    overflow: visible;     /* garante que o badge não corte */
}

/* Badge fixo no lugar certo */
.fab-item-with-badge .fab-badge {
    position: absolute;

    /* posição correta ao lado do texto ou canto */
    top: -3px;
    right: -10px;

    width: 16px;
    height: 16px;

    background: #ff2d55;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 10px;
    font-weight: 700;

    box-shadow: 0 0 10px rgba(255, 0, 80, 0.7);
    animation: pulseFab 1.3s infinite ease-in-out;

    pointer-events: none; /* garante que o hover não mexa nela */
    z-index: 20;
}
/* ============================================
   FAB — EFEITOS ESPECIAIS
============================================ */

/* ✨ Vibração fofa (usuário deslogado) */
@keyframes fabVibrarFofo {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(-2px, 1px) rotate(-2deg); }
    50%  { transform: translate(2px, -1px) rotate(2deg); }
    75%  { transform: translate(-1px, 1px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* ✨ Pulso suave (usuário logado) */
@keyframes fabPulso {
    0% { transform: scale(1); }
    5% { transform: scale(1.12); }
    10% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Adicionaremos classes via PHP */
.fab-vibrando {
    animation: fabVibrarFofo 0.42s ease-in-out infinite;
}

.fab-pulso {
    animation: fabPulso 15s ease-in-out infinite;
}