/*
Theme Name: Grouply Final
Version: 8.2 Stable
*/

/* ================= GLOBAL ================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  font-family:-apple-system,Segoe UI,sans-serif;
  background:#eef1f5;
  overflow-x:hidden;
}

.container{
  max-width:1200px;
  margin:14px auto;
  background:#fff;
  padding:14px;
  border-radius:14px;
  width:100%;
}

/* ================= NAVIGATION ================= */

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:#0088cc;
  border-radius:14px;
  flex-wrap:wrap;
}

.nav-logo a{
  color:#fff;
  font-size:20px;
  font-weight:700;
  text-decoration:none;
  text-transform:uppercase;
}

.nav-links{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}

.nav-toggle{
  display:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* MOBILE MENU */
@media(max-width:900px){

  .nav-links{
    display:none;
    flex-direction:column;
    width:100%;
    margin-top:10px;
  }

  .nav-links.open{
    display:flex;
  }

  .nav-toggle{
    display:block;
  }

}

/* ================= SEARCH ================= */

.search-wrapper{
  margin:14px 0;
}

.search-form{
  max-width:900px;
  margin:0 auto;
  width:100%;
}

.search-input-wrap{
  position:relative;
}

.search-input{
  width:100%;
  height:48px;
  border-radius:14px;
  border:1px solid #d1d9e6;
  padding:0 80px 0 42px;
  font-size:15px;
  background:#fff;
}

.search-icon{
  position:absolute;
  left:14px;
  top:14px;
  opacity:.6;
}

.search-inside-btn{
  position:absolute;
  right:6px;
  top:6px;
  height:36px;
  width:36px;
  border-radius:10px;
  border:0;
  background:#0088cc;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= FILTER ================= */

.add-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 160px;
  gap:10px;
  max-width:880px;
  margin:0 auto 20px auto;
}

.add-row select,
.add-row button{
  height:46px;
  border-radius:12px;
}

.add-row select{
  padding:0 10px;
  border:1px solid #ccc;
  background:#fff;
}

.add-row button{
  background:#00d95f;
  color:#fff;
  font-weight:600;
  border:0;
}

/* MOBILE FILTER CARD */
@media(max-width:900px){

  .add-row{
    display:flex;
    flex-direction:column;
    gap:14px;

    background:#f3f4f6;
    padding:20px;
    border-radius:20px;

    max-width:360px;
    margin:20px auto;
  }

  .add-row select{
    background:#ffffff;
    border:1px solid #e1e1e1;
    height:54px;
    border-radius:16px;
    font-size:16px;
  }

  .add-row button{
    height:54px;
    border-radius:16px;
    font-size:16px;
  }
}

/* ================= GRID ================= */

.grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  align-items:stretch;
}

@media(max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr);}
}

/* ================= CARD ================= */

.card{
  background:#fff;
  border-radius:14px;
  padding:8px;
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
}

.card img{
  width:100%;
  height:140px;           /* KEEP ORIGINAL HEIGHT */
  object-fit:cover;
  border-radius:10px;
  display:block;
}

.card a{
  text-decoration:none;
}

.card h4{
  font-size:15px;
  font-weight:600;
  color:#222;
  margin:8px 0 6px;
  line-height:1.3;
  min-height:38px;        /* equal title height */
}

.card a:hover h4{
  color:#0088cc;
}

.meta-row,
.tag-row{
  margin-bottom:6px;
}

.badge{
  display:inline-block;
  padding:4px 8px;
  font-size:11px;
  border-radius:8px;
  background:#eef4ff;
  margin:2px 2px 2px 0;
}

/* VIEWS */
.views{
  position:absolute;
  top:8px;
  right:8px;
  background:#0009;
  color:#fff;
  padding:2px 6px;
  font-size:10px;
  border-radius:8px;
}

/* JOIN BUTTON */
.join{
  margin-top:auto;
  padding:10px;
  text-align:center;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}

.join.telegram{
  background:#0088cc;
  color:#fff;
}

.join.telegram:hover{
  background:#0077b5;
}

.join.whatsapp{
  background:#00d95f;
  color:#fff;
}

.join.whatsapp:hover{
  background:#00c455;
}

/* ================= PAGINATION ================= */

.pagination{
  text-align:center;
  margin-top:20px;
}

.pagination a{
  display:inline-block;
  margin:4px;
  padding:6px 12px;
  background:#0088cc;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
}

.pagination .current{
  background:#005f99;
}

/* ================= DETAIL ================= */
/* DETAIL */
.detail{display:grid;grid-template-columns:300px 1fr;gap:12px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.detail img{max-width:100%;height:auto;display:block;border-radius:12px;margin-bottom:10px}
/* ================= POPUP ================= */

.popup{
  display:none;
  position:fixed;
  inset:0;
  background:#000a;
  align-items:center;
  justify-content:center;
}

.popup-box{
  background:#fff;
  padding:20px;
  border-radius:16px;
  width:360px;
  max-width:90%;
}
/* ================= STATIC PAGES ================= */

.static-page{
  background:#fff;
  padding:24px;
  border-radius:16px;
  margin:20px auto;
  max-width:900px;
}

.static-page h1{
  font-size:24px;
  margin-bottom:14px;
}

.page-content{
  font-size:15px;
  line-height:1.7;
  color:#333;
}
/* ===============================
   BULK ADD & ADD PAGE FORM UI
   =============================== */

/* Page title */
.container h2{
  text-align:center;
  font-size:22px;
  margin-bottom:18px;
  font-weight:700;
}

/* Form wrapper */
.container form{
  max-width:520px;
  margin:0 auto;
}

/* Main textarea (URLs) */
.container textarea.f{
  width:100%;
  min-height:150px;
  border-radius:14px;
  border:1px solid #d7dde5;
  padding:14px;
  font-size:14px;
  resize:vertical;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

/* Description textarea */
.container textarea[name="desc"]{
  min-height:100px;
}

/* GROUPED INPUT CARD (like screenshot) */
.container .add-row{
  background:#f4f6f8;
  padding:18px;
  border-radius:18px;
  margin:18px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* Inputs & selects */
.container .f,
.container select{
  width:100%;
  height:48px;
  border-radius:12px;
  border:1px solid #d7dde5;
  padding:0 14px;
  font-size:14px;
  background:#fff;
}

/* Tags input highlight */
.container input[name="tags"]{
  border:1px solid #b9e6c4;
  background:#f7fff9;
}

/* Submit button */
.container button.join{
  width:100%;
  height:52px;
  border-radius:16px;
  font-size:16px;
  font-weight:700;
  background:#00d95f;
  color:#fff;
  border:none;
  margin-top:12px;
  cursor:pointer;
  transition:0.2s;
}

.container button.join:hover{
  background:#00c455;
}

/* Result messages */
.container .f{
  margin-top:8px;
  font-size:13px;
}

/* ===============================
   MOBILE POLISH
   =============================== */

@media(max-width:600px){

  .container{
    padding:14px;
  }

  .container form{
    max-width:100%;
  }

  .container h2{
    font-size:20px;
  }

}

.tgstat-card{
  display:flex;
  gap:15px;
  padding:20px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  margin:30px auto;
  max-width:700px;
}
.tgstat-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
}
.tgstat-count{
  margin-top:6px;
  font-size:14px;
  color:#555;
}

.tg-feed{
  display:grid;
  gap:18px;
  margin:30px 0;
}

.tg-post{
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.tg-media{
  position:relative;
  background:#000;
}

.tg-media img{
  width:100%;
  display:block;
}

.tg-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  color:#fff;
  background:rgba(0,0,0,.35);
}

.tg-text{
  padding:14px;
  font-size:15px;
  line-height:1.6;
}

.tg-meta{
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  font-size:13px;
  color:#666;
  border-top:1px solid #eee;
}

.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.popup-box{
  background:#fff;
  padding:20px;
  border-radius:10px;
  width:320px;
}

/* TELEGRAM FEED CONTAINER */

.tg-feed{

max-width:100%;
width:100%;
box-sizing:border-box;

}


/* TELEGRAM CARD */

.tg-card{

background:#fff;
border-radius:10px;
border:1px solid #e6e6e6;
margin-bottom:20px;
overflow:hidden;
width:100%;
box-sizing:border-box;

}


/* HEADER FIX */

.tg-header{

display:flex;
align-items:center;
gap:10px;
padding:12px;
border-bottom:1px solid #eee;

}


/* AVATAR */

.tg-avatar{

width:40px;
height:40px;
border-radius:50%;
flex-shrink:0;

}


/* TEXT BLOCK */

.tg-head-info{

display:flex;
flex-direction:column;

}


.tg-channel{

font-weight:600;
font-size:16px;

}


.tg-date{

font-size:12px;
color:#777;

}


/* POST TEXT */

.tg-text{

padding:12px;
line-height:1.6;
font-size:15px;
word-wrap:break-word;

}


/* IMAGE FIX */

.tg-media img{

max-width:100%;
max-height:400px;
object-fit:cover;
border-radius:8px;

}

/* FOOTER */

.tg-meta{

display:flex;
justify-content:space-between;
padding:10px 12px;
border-top:1px solid #eee;
font-size:13px;

}

.tg-youtube{

margin-top:10px;

}

.tg-youtube iframe{

width:100%;
height:315px;
border-radius:8px;

}

.tg-video{

position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
margin-top:10px;

}

.tg-video iframe{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;

}
/* TGSTAT FOOTER */

.tg-footer{

display:flex;
justify-content:space-between;
align-items:center;
padding:10px 14px;
border-top:1px solid #eee;
background:#fafafa;

}


/* LEFT SIDE */

.tg-left{

display:flex;
gap:14px;
align-items:center;

}


/* STATS */

.tg-stat{

font-size:13px;
color:#666;

}


/* TIME */

.tg-time{

font-size:12px;
color:#999;
margin-left:5px;

}


/* TELEGRAM ICON */

.tg-open{

display:flex;
align-items:center;

text-decoration:none;

}

/* Telegram Stats EEAT Block */

.tg-stats-section
{
    margin:25px 0;
}

.tg-stats
{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.tg-stat-box
{
    background:#f7f7f7;
    padding:12px 16px;
    border-radius:8px;
    min-width:110px;
    text-align:center;
}

.tg-stat-value
{
    display:block;
    font-size:18px;
    font-weight:600;
}

.tg-stat-label
{
    font-size:12px;
    color:#666;
}

/* ==============================
   TELEGRAM STATS LAYOUT FIX
============================== */

.tg-stats {

    display:flex;
    flex-wrap:wrap;

    gap:15px;

    margin-top:15px;

    position:relative;   /* Prevent overlap */

}


.tg-stat-box {

    background:#f3f3f3;

    padding:12px 18px;

    border-radius:10px;

    min-width:120px;

    text-align:center;

}


.tg-stat-value{

    font-size:20px;
    font-weight:700;
    display:block;

}


.tg-stat-label{

    font-size:13px;
    color:#666;

}

/* ======================
   TELEGRAM IMAGE MOBILE FIX
====================== */

@media(max-width:768px){

.tg-preview{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.tg-preview img{
    width:100%;
    height:auto;
    display:block;
}

}