/* ============================================================
   Popular Hoje Style — Engajaagora
   Atualizado 14/04/2026
============================================================ */

/* ===== PRICE STACK ===== */
.price-stack{display:flex;flex-direction:column;align-items:center;margin-top:10px;margin-bottom:10px;gap:0;}
.price-now{color:#0cc27e;font-weight:900;font-size:20px;font-family:'Manrope',sans-serif;line-height:18px;margin-bottom:5px;}
.price-old{color:#999;font-size:13px;font-weight:500;text-decoration:line-through;font-family:'Manrope',sans-serif;line-height:13px;}

/* ===== CARD TOAST BADGES ===== */
.card-toast.toast-pink         {--toast-background-color:#E91E63;}
.card-toast.toast-light-green  {--toast-background-color:#009688;}
.card-toast.toast-light-purple {--toast-background-color:#ff9f00;}
.card-toast.toast-light-blue   {--toast-background-color:#2196F3;}
.card-toast.toast-light-gray   {--toast-background-color:#8b7b7b;}
.card-toast.toast-light-orange {--toast-background-color:#ff8d00;}
.card-toast.toast-light-gradient{--toast-background-color:radial-gradient(circle at 30% 107%,#fdf497 0%,#ffc871 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.card-toast{position:relative;}
.card-toast::before{
    content:attr(data-card-toast-text);
    background:var(--toast-background-color,#0cc27e);
    color:#fff;font-weight:500;position:absolute;border-radius:5px;padding:3px .5rem;
    top:0;left:50%;transform:translate(-50%,-50%);font-size:9px;text-transform:uppercase;white-space:nowrap;z-index:2;
}

/* ===== CATEGORY BOX ===== */
.category-box{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background-color:#fbe7f3;border-radius:10px;height:130px;
    border:1px solid rgba(0,0,0,.03);position:relative;transform:scale(1.0);transition:transform .3s;
}
.category-box:hover{transform:scale(1.05);}

/* ===== CENTRALIZA / SELETOR ABAS REDONDAS ===== */
.centraliza-tudo{display:flex;flex-direction:column;align-items:center;gap:6px;}

.social-selector{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    margin-bottom:40px;
    flex-wrap:wrap;
}
.icon-button{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    font-family:sans-serif;font-size:14px;color:#333;cursor:pointer;text-decoration:none;
    flex:0 0 auto;max-width:90px;
}
.icon-button i,.icon-button img{
    width:60px;height:60px;border-radius:50%;font-size:26px;
    display:flex;align-items:center;justify-content:center;background-color:#ff4f00;
}
.icon-button img{padding:12px;}
.icon-button.seguidores i,
.icon-button.inscritos i,
.icon-button.curtidas i,
.icon-button.visualizacoes i,
.icon-button.story i{
    background:#474747;color:#ffffff;
    transition:transform .2s ease,box-shadow .2s ease;
    box-shadow:0 4px 10px rgb(0 0 0 / 27%);
}
.icon-button:hover i{transform:scale(1.08);box-shadow:0 6px 14px rgb(0 0 0 / 35%);}
.textslide{font-size:10px;}

/* ===== SELETOR DE QUALIDADE (Avançado/Premium/Exclusivo) ===== */
.search-container{
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:20px;
}
.toggle-label{text-align:center;font-size:10px;font-weight:600;color:#8c97ad;}
.search-boxe{
    display:flex;align-items:center;padding:4px;
    border-radius:1000px;box-shadow:inset 0 0 0 1px rgb(131 131 131);
    width:max-content;background:#f4f4f6;
}
.toggle-container{
    border-radius:25px;display:flex;position:relative;
    height:35px;width:350px;
    justify-content:space-between;overflow:hidden;margin:0 auto;
}
.toggle-container::before{
    content:'';position:absolute;top:0;bottom:0;
    width:33.3333%;left:0;
    background:linear-gradient(to right,rgb(35 35 35),rgba(0,0,0,.75));
    border-radius:1000px;transition:transform .3s ease;z-index:0;
}
.toggle-container.price::before       {transform:translateX(0%);}
.toggle-container.equilibrium::before {transform:translateX(100%);}
.toggle-container.quality::before     {transform:translateX(200%);}
.toggle-button{
    flex:1;border:none;background:transparent;
    color:#1d1e25;font-weight:bold;font-size:11px;cursor:pointer;
    display:flex;justify-content:center;align-items:center;
    position:relative;z-index:1;border-radius:25px;
    transition:color .3s ease;
}
.toggle-button span{position:relative;z-index:2;}
.toggle-container.price .toggle-button:nth-child(1),
.toggle-container.equilibrium .toggle-button:nth-child(2),
.toggle-container.quality .toggle-button:nth-child(3){color:#ffffff;}

/* ===== CATEGORY HEADING com timer ===== */
.category-heading{display:flex;justify-content:space-between;color:#fff;flex-direction:row;align-content:flex-start;align-items:flex-start;}
.category-heading h2{font-size:1.56rem;font-weight:700;letter-spacing:.5px;color:#fff;}
.category-heading p{color:#8c97ad;max-width:680px;font-weight:500;font-size:15px;}
.category-heading .temp{margin:auto 5%;display:flex;align-items:center;justify-content:center;}
.temp span{font-size:55px;font-weight:900;display:flex;align-items:center;gap:10px;}
.time-promo{font-size:28px;color:#fff;font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:1px;}

/* ===== PILLS ===== */
.full-width{width:100%;display:block;}
.pill-container{display:flex;justify-content:center;margin-top:20px;gap:35px;flex-wrap:wrap;}
.pill-1,.pill-2,.pill-3,.pill-4{
    width:100%;max-width:360px;height:26px;padding:0 18px;
    border-radius:999px;display:flex;align-items:center;justify-content:center;
    font-weight:bold;font-size:11px;line-height:1;white-space:nowrap;
    transition:transform .2s,box-shadow .2s;
}
.pill-1{background:linear-gradient(90deg,#0097b2,#7ed957);color:#003327;box-shadow:0 4px 10px rgba(17,153,142,.3);}
.pill-2{background:linear-gradient(90deg,#ff66c4,#ffde59);color:#292000;box-shadow:0 4px 10px rgba(255,210,0,.3);}
.pill-3{background:linear-gradient(90deg,#5de0e6,#004aad);color:#001f41;box-shadow:0 4px 10px rgba(24,90,157,.3);}
.pill-4{background:linear-gradient(90deg,#ff5757,#8c52ff);color:#370016;box-shadow:0 4px 12px rgba(255,122,122,.3);}
.pill-1:hover,.pill-2:hover,.pill-3:hover,.pill-4:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18);}
.pill-1 img,.pill-2 img,.pill-3 img,.pill-4 img{width:18px !important;height:18px;margin-right:5px;display:inline-block;}

/* ===== RESPONSIVE ===== */
@media(max-width:750px){
    .category-heading{flex-direction:column;align-items:center;}
    .category-heading .temp{margin:0;}
}
@media(max-width:500px){
    .social-selector{gap:14px;}
    .icon-button i,.icon-button img{width:52px;height:52px;font-size:22px;}
    .category-box{width:100%;margin:0;}
}
@media(max-width:768px){
    .pill-container{width:100%;display:block;margin-top:20px;}
    .pill-1,.pill-2,.pill-3,.pill-4{
        width:100%;margin:0 auto 12px;text-align:center;
        font-size:11px;padding:12px 20px;height:auto;
    }
}
@media(max-width:400px){
    .category-heading h2{font-size:1.2rem;}
    .time-promo{font-size:22px;}
    .toggle-container{width:300px;}
}