/* Menu Flutuante para Dispositivos Móveis */

/* Botão flutuante principal */
.floating-menu-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    display: block; /* Visível em todas as telas */
}

.floating-menu-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.floating-menu-btn.active {
    background: linear-gradient(135deg, #7b1fa2, #4a148c);
    transform: rotate(45deg);
}

/* Ícone do botão */
.floating-menu-btn .menu-icon {
    width: 24px;
    height: 24px;
    position: relative;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

.floating-menu-btn .menu-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background: white;
    margin: 5px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.floating-menu-btn.active .menu-icon span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.floating-menu-btn.active .menu-icon span:nth-child(2) {
    opacity: 0;
}

.floating-menu-btn.active .menu-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Container do menu expandido */
.floating-menu-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    padding: 20px;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 999;
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.floating-menu-container.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* Título do menu */
.floating-menu-title {
    font-size: 18px;
    font-weight: bold;
    color: #4a148c;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid #e1bee7;
    padding-bottom: 10px;
}

/* Seções do menu */
.menu-section {
    margin-bottom: 20px;
}

.menu-section:last-child {
    margin-bottom: 0;
}

.menu-section-title {
    font-size: 14px;
    font-weight: bold;
    color: #7b1fa2;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links do menu */
.menu-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin: 5px 0;
    text-decoration: none;
    color: #333;
    background: rgba(116, 27, 162, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.menu-link:hover {
    background: linear-gradient(135deg, #4a148c, #7b1fa2);
    color: white;
    transform: translateX(5px);
}

.menu-link-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.menu-link-text {
    flex: 1;
}

/* Ícones específicos para cada tipo de tarô */
.icon-ms { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e91e63"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') no-repeat center; background-size: contain; }
.icon-th { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9800"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') no-repeat center; background-size: contain; }
.icon-zp { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234caf50"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>') no-repeat center; background-size: contain; }
.icon-dt { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239c27b0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>') no-repeat center; background-size: contain; }
.icon-ma { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23795548"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>') no-repeat center; background-size: contain; }
.icon-outros { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23607d8b"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') no-repeat center; background-size: contain; }
.icon-contato { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2325d366"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center; background-size: contain; }

/* Overlay para fechar o menu ao clicar fora */
.floating-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.floating-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsividade - Mostrar apenas em dispositivos móveis */

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .floating-menu-container {
        right: 10px;
        left: 10px;
        min-width: auto;
    }
    
    .floating-menu-btn {
        right: 15px;
        bottom: 15px;
        width: 55px;
        height: 55px;
    }
}