/* assets/css/style.css */
:root {
    --wa-dark: #075E54;
    --wa-teal: #128C7E;
    --wa-light: #25D366;
    --wa-bg: #ECE5DD; 
    --wa-white: #FFFFFF;
    --text-dark: #303030;
    --text-muted: #667781;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; }
body { background-color: var(--wa-bg); color: var(--text-dark); -webkit-font-smoothing: antialiased; }

header { background-color: var(--wa-teal); color: var(--wa-white); padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.logo { 
    color: white !important; 
    text-decoration: none !important; 
    display: flex; 
    align-items: center; 
    font-size: 1.3rem; 
    font-weight: bold; 
}
.logo-icon { width: 24px; height: 24px; fill: currentColor; }
.menu-btn { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; }

main { max-width: 600px; margin: 0 auto; padding: 15px; min-height: 30vh;}

.adsense-slot { background: #E0E0E0; width: 100%; margin: 15px 0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.8rem; border-radius: 5px; text-align: center; }

.search-container { background: var(--wa-white); padding: 20px; border-radius: 12px; margin-top: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.search-container h1 { font-size: 1.2rem; margin-bottom: 15px; text-align: center; color: var(--wa-dark); font-weight: 600; }
.search-box { 
    display: flex; 
    margin-top: 10px; 
}
.search-input { width: 100%; padding: 14px 15px 14px 40px; border: 1px solid #ddd; border-radius: 30px 0 0 30px !important; 
    flex: 1; font-size: 1rem; outline: none; transition: border-color 0.2s; background: #F0F2F5; }
.search-input:focus { border-color: var(--wa-light); background: var(--wa-white); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #888; font-size: 1.1rem; }

.list-section { margin-top: 25px; }
.list-title { font-size: 1.1rem; color: var(--wa-dark); margin-bottom: 12px; padding-bottom: 5px; border-bottom: 2px solid #ddd; display: flex; align-items: center; gap: 6px;}

.group-card { background: var(--wa-white); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; align-items: center; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform 0.1s; }
.group-card:active { transform: scale(0.98); }
.group-icon { width: 55px; height: 55px; background: #ddd; border-radius: 50%; margin-right: 15px; object-fit: cover; flex-shrink: 0; }
.group-info { flex: 1; overflow: hidden; }
.group-name { font-weight: bold; font-size: 1.05rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center;}
.group-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.3; }
.badge-vip { background: #FFD700; color: #8B6508; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; font-weight: bold; margin-left: 6px; text-transform: uppercase;}

footer { background: var(--wa-white); padding: 20px; text-align: center; border-top: 1px solid #ddd; margin-top: 30px; }
.footer-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 10px; flex-wrap: wrap; }
.footer-links a { color: var(--wa-teal); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 20px; background: #F0F2F5;}
.copyright { font-size: 0.85rem; color: var(--text-muted); }

.loader { border: 3px solid #f3f3f3; border-top: 3px solid var(--wa-light); border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 20px auto; display: none; }
.btn-search { 
    background: var(--wa-teal); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 0 30px 30px 0; 
    cursor: pointer; 
    margin-left: -5px; /* Ajuste fino */
}
.mobile-menu { 
    display: none; /* Isso esconde o menu por padrão */
    background: var(--wa-teal); 
    color: white; 
    width: 100%; 
    flex-direction: column; 
    border-top: 1px solid #107a6e;
}
.mobile-menu.active { 
    display: flex; /* Isso mostra o menu apenas quando clicado */
}
.mobile-menu a { 
    color: white; 
    text-decoration: none; 
    padding: 15px; 
    border-bottom: 1px solid #107a6e; 
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }