/* =============================
   🌍 EmojisHive — Trends Portal (v4.0)
   Scope: /trends only
   ============================= */

.trends-body{
  background:#f8faf9;
  color:#222;
}

/* Keep page width aligned with main site */
.trends-main .eh-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

/* ------- Hero (same design, more compact) ------- */
.trends-hero{
  background: linear-gradient(135deg, #f9fdfb 0%, #e8f7f0 100%);
  text-align:center;
  padding:56px 15px 56px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #e2f2ea;
  opacity:0;
  animation: fadeInHero 1.0s ease-in-out forwards;
}
@keyframes fadeInHero{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:translateY(0);}
}
.trends-title{
  font-size:34px;
  line-height:1.15;
  font-weight:800;
  margin:0 0 10px;
}
.trends-accent{ color:#34d399; }
.trends-subtitle{
  max-width:820px;
  margin:0 auto;
  color:#3a4b46;
  font-size:15px;
}

/* Live inline */
.live-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#ffffffb8;
  border:1px solid #e2f2ea;
  vertical-align:middle;
}
.live-dot{
  display:inline-block;
  width:9px;
  height:9px;
  background:#22c55e;
  border-radius:50%;
  animation: blink 1.2s infinite;
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* Floating Emojis */
.floating-emoji{
  position:absolute;
  font-size:1.8rem;
  opacity:0.65;
  animation: floatSlow 14s ease-in-out infinite;
}
.floating-emoji:nth-child(2){ top:18px; left:10%; }
.floating-emoji:nth-child(3){ top:28px; right:14%; }
.floating-emoji:nth-child(4){ bottom:18px; left:18%; }
.floating-emoji:nth-child(5){ bottom:12px; right:20%; }
.floating-emoji:nth-child(6){ top:50%; right:6%; }
@keyframes floatSlow{
  0%,100%{transform:translateY(0); opacity:0.75;}
  50%{transform:translateY(-16px); opacity:1;}
}

/* ------- Fade-load helper ------- */
.fade-load{ opacity:0; transform:translateY(10px); transition:all .6s ease; }
.fade-load.visible{ opacity:1; transform:translateY(0); }

.trends-breadcrumb{
  font-size:13px;
  margin:14px 0 10px;
  color:#64736f;
}
.trends-breadcrumb a{ color:#2b7a62; text-decoration:none; }
.trends-breadcrumb a:hover{ text-decoration:underline; }
.trends-breadcrumb span{ color:#64736f; }

/* Sections */
.trends-section{ margin:16px 0; }

/* ------- Summary ------- */
.trends-summary{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.ts-card{
  background:#ffffff;
  border:1px solid #e2f2ea;
  border-radius:14px;
  padding:14px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
.ts-ico{ font-size:20px; }
.ts-label{
  margin-top:6px;
  font-size:12px;
  color:#5c6c67;
}
.ts-value{
  margin-top:6px;
  font-size:20px;
  font-weight:800;
  color:#0f2f25;
}
.ts-emoji{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.ts-emoji:hover{ opacity:0.9; }

/* ------- Filters ------- */
.trends-filterbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding:12px;
  background:#fff;
  border:1px solid #e2f2ea;
  border-radius:14px;
}
.tf-btn{
  appearance:none;
  border:1px solid #d8eee4;
  background:#f7fdf9;
  color:#1c4c3c;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.tf-btn:hover{ background:#eefaf3; border-color:#c9e9dc; }
.tf-btn:active{ transform:scale(0.98); }
.tf-btn.active{
  background:#34d399;
  border-color:#2fc08a;
  color:#083427;
}

/* Category chips under filters */
.trends-mini{ margin-top:10px; display:flex; justify-content:center; }
.trends-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.trends-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #e2f2ea;
  background:#fff;
  color:#2b7a62;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.trends-chip:hover{ background:#f7fdf9; text-decoration:none; }

/* ------- Main layout ------- */
.trends-grid-2{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:14px;
  align-items:start;
}

.trends-col{ display:flex; flex-direction:column; gap:14px; }
.trends-col-right{ position:relative; }

.tcard-top{}
.tcard-country{}
.tstack{ display:grid; gap:14px; }

/* Cards */
.tcard{
  background:#fff;
  border:1px solid #e2f2ea;
  border-radius:16px;
  padding:14px;
}
.tcard-head h2{
  font-size:18px;
  margin:0;
  font-weight:900;
  color:#0f2f25;
}
.tcard-sub{
  margin-top:6px;
  font-size:13px;
  color:#5c6c67;
}

/* Emoji grid */
.trends-emoji-grid{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.trends-empty{
  margin-top:12px;
  color:#6b7a76;
  text-align:center;
  padding:10px;
  border-radius:12px;
  background:#f7fdf9;
  border:1px dashed #d9efe5;
}

/* Ensure emoji tiles are compact on trends page */
.trends-emoji-grid .eh-emoji-tile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e8f0ed;
  cursor:pointer;
  text-decoration:none;
}
.trends-emoji-grid .eh-emoji-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.06);
}
.trends-emoji-grid .eh-emoji-tile .emoji-char{
  font-size:28px;
  line-height:1;
}

/* Tooltip (native-like, simple) */
.trends-emoji-grid .eh-emoji-tile[data-tip]{
  position:relative;
}
.trends-emoji-grid .eh-emoji-tile[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(15, 47, 37, 0.92);
  color:#fff;
  font-size:12px;
  padding:7px 9px;
  border-radius:10px;
  pointer-events:none;
  z-index:50;
}
.trends-emoji-grid .eh-emoji-tile[data-tip]:hover::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:rgba(15, 47, 37, 0.92);
}

/* Countries list */
.country-list{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.country-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e8f0ed;
  background:#fff;
}
.country-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.country-flag{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7fdf9;
  border:1px solid #e2f2ea;
  font-weight:900;
  color:#2b7a62;
  flex:0 0 auto;
}
.country-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.country-name{
  font-weight:900;
  color:#0f2f25;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.country-sub{
  font-size:12px;
  color:#5c6c67;
}
.country-emoji{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.country-emoji button{
  border:1px solid #e8f0ed;
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.country-emoji button:hover{ box-shadow:0 8px 18px rgba(0,0,0,0.06); }
.country-emoji .emoji-char{ font-size:22px; }

/* Live feed */
.trends-live-feed{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.trends-live-feed li{
  background:#fff;
  border:1px solid #e8f0ed;
  border-radius:14px;
  padding:10px 12px;
  color:#0f2f25;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.trends-live-feed .emoji{
  font-size:20px;
  margin-right:6px;
}
.trends-live-feed .time{
  color:#5c6c67;
  font-size:12px;
  flex:0 0 auto;
}

/* SEO card */
.trends-seo p{ color:#2f3e39; line-height:1.7; }

/* Responsive */
@media (max-width: 980px){
  .trends-grid-2{ grid-template-columns: 1fr; }
  .trends-col{ gap:12px; }

  .trends-summary{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .trends-title{ font-size:28px; }
  .trends-summary{ grid-template-columns: 1fr; }
  .trends-emoji-grid .eh-emoji-tile{ padding:10px 11px; }
}


/* Tap micro-animation */
.eh-emoji-tile.tap{ animation: ehTap .22s ease; }
@keyframes ehTap{ 0%{transform:scale(1);} 50%{transform:scale(0.96);} 100%{transform:scale(1);} }