/* ================================================================
   PRIYO STORY — FRIENDS PAGE SECTIONS, FILTER, BIRTHDAYS, GIFTS
   ================================================================ */

/* ---------------- page head ---------------- */
.fr-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.fr-head h2{ font-size:23px; font-weight:700; }
.fr-head span{ font-size:16px; color:var(--muted, #6b7a72); }
.fr-sub{ font-size:15.5px; color:var(--muted, #6b7a72); }

.fr-filterline{
  display:flex; align-items:center; gap:10px;
  background:var(--green-light, #e8f5ee);
  border:1px solid #bfe3ce;
  border-radius:11px;
  padding:9px 14px;
  margin-bottom:14px;
  font-size:16px; font-weight:600;
  color:var(--green-dark, #0f5132);
  flex-wrap:wrap;
}
.fr-filterline button{
  border:none; background:transparent;
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--red, #e2231a);
  cursor:pointer; margin-left:auto;
}
.fr-filterline button:hover{ text-decoration:underline; }

.fr-panel[hidden]{ display:none; }

/* ---------------- left menu ---------------- */
.side-menu-item.fr-tab{ cursor:pointer; }
.friends-menu-badge{
  margin-left:auto;
  min-width:22px; height:22px;
  border-radius:20px;
  background:var(--red, #e2231a);
  color:#fff;
  font-size:14.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 7px;
  flex-shrink:0;
}

/* ---------------- filter widget ---------------- */
.friends-filter-widget select,
.friends-filter-widget input{
  width:100%;
  border:1.5px solid var(--border, #e2e8e4);
  border-radius:10px;
  padding:10px 12px;
  font-family:inherit; font-size:17px;
  color:var(--text, #1f2a24);
  background:#fff;
  outline:none;
  margin-bottom:9px;
}
.friends-filter-widget select:focus,
.friends-filter-widget input:focus{ border-color:var(--green, #1a7a4c); }
.fr-clear{
  width:100%;
  border:none; background:transparent;
  font-family:inherit; font-size:15.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  cursor:pointer;
  padding:9px 0 2px;
}
.fr-clear:hover{ color:var(--red, #e2231a); text-decoration:underline; }

/* ---------------- mutual-friends line ---------------- */
.pp-mutual{
  font-size:14.5px; font-weight:700;
  color:var(--green-dark, #0f5132);
  background:var(--green-light, #e8f5ee);
  padding:3px 9px;
  border-radius:20px;
  align-self:flex-start;
  margin-top:2px;
}

/* ---------------- birthday cards ---------------- */
.bday-card{ position:relative; }
.bday-flag{
  position:absolute;
  left:9px; top:9px;
  background:#e3a913;
  color:#3d2c00;
  font-size:14px; font-weight:800;
  padding:3px 10px;
  border-radius:20px;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* ================================================================
   GIFT PICKER
   ================================================================ */
.gf-to{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  background:var(--bg, #f0f2f0);
  border-radius:12px;
  margin-bottom:12px;
}
.gf-pic{
  width:46px; height:46px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:var(--green-light, #e8f5ee);
}
.gf-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.gf-toname{ font-size:17.5px; font-weight:700; }
.gf-tosub{ font-size:15px; color:var(--muted, #6b7a72); }

.gf-balance{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border:1px solid var(--border, #e2e8e4);
  border-radius:11px;
  font-size:16px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.gf-balance b{ color:var(--green-dark, #0f5132); font-size:18px; }
.gf-balance a{
  color:var(--green-dark, #0f5132);
  font-weight:700; font-size:15.5px;
  text-decoration:none;
}
.gf-balance a:hover{ text-decoration:underline; }

.gf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:9px;
}
.gf-item{
  border:2px solid var(--border, #e2e8e4);
  background:#fff;
  border-radius:13px;
  padding:12px 6px 10px;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:border-color .15s ease, background .15s ease;
}
.gf-item:hover{ border-color:var(--green, #1a7a4c); }
.gf-item.sel{ border-color:var(--green-dark, #0f5132); background:var(--green-light, #e8f5ee); }
.gf-item.poor{ opacity:.5; }
.gf-emoji{ font-size:30px; line-height:1; }
.gf-name{ font-size:14.5px; font-weight:600; color:var(--text, #1f2a24); }
.gf-price{ font-size:15px; font-weight:800; color:var(--green-dark, #0f5132); }

/* a gift arriving in the chat */
.ch-gift{
  display:flex; flex-direction:column; align-items:center;
  gap:4px;
  padding:8px 16px;
  min-width:130px;
}
.ch-gift .g-emoji{ font-size:39px; line-height:1; }
.ch-gift .g-name{ font-size:16px; font-weight:700; }
.ch-gift .g-amount{
  font-size:15px; font-weight:800;
  background:rgba(255,255,255,.22);
  padding:2px 10px; border-radius:20px;
}
.ch-b.them .ch-gift .g-amount{
  background:var(--green-light, #e8f5ee);
  color:var(--green-dark, #0f5132);
}
.ch-gift .g-note{ font-size:15.5px; text-align:center; opacity:.9; }

/* ---------------- responsive ---------------- */
@media (max-width:700px){
  .fr-head h2{ font-size:21px; }
  .gf-grid{ grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:7px; }
  .gf-emoji{ font-size:27px; }
}
@media (max-width:380px){
  .gf-grid{ grid-template-columns:1fr 1fr; }
  .friends-menu-badge{ min-width:20px; height:20px; font-size:14px; }
}

/* ================================================================
   STAR PICKER & DONATE
   ================================================================ */
.st-to{
  display:flex; align-items:center; gap:11px;
  padding:11px 12px;
  background:var(--bg, #f0f2f0);
  border-radius:12px;
  margin-bottom:12px;
}
.st-pic{
  width:46px; height:46px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:var(--green-light, #e8f5ee);
}
.st-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-toname{ font-size:17.5px; font-weight:700; }
.st-tosub{ font-size:15px; color:var(--muted, #6b7a72); }

.st-bal{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 13px;
  border:1px solid var(--border, #e2e8e4);
  border-radius:11px;
  font-size:16px; margin-bottom:12px;
  flex-wrap:wrap;
}
.st-bal b{ color:var(--green-dark, #0f5132); font-size:18px; }
.st-bal a{ color:var(--green-dark, #0f5132); font-weight:700; font-size:15.5px; text-decoration:none; }
.st-bal a:hover{ text-decoration:underline; }

.st-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:9px;
}
.st-item{
  border:2px solid var(--border, #e2e8e4);
  background:#fff;
  border-radius:13px;
  padding:12px 6px 10px;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:border-color .15s ease, background .15s ease;
}
.st-item:hover{ border-color:#e3a913; }
.st-item.sel{ border-color:#e3a913; background:#fff6e5; }
.st-item.poor{ opacity:.45; }
.st-emoji{ font-size:30px; line-height:1; }
.st-name{ font-size:14.5px; font-weight:600; color:var(--text, #1f2a24); }
.st-price{ font-size:15.5px; font-weight:800; color:#a8790a; }

.cp-err a{ color:inherit; font-weight:800; text-decoration:underline; }

/* ---------------- donate ---------------- */
.dn-amounts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
  margin-bottom:14px;
}
.dn-amounts button{
  border:2px solid var(--border, #e2e8e4);
  background:#fff;
  border-radius:11px;
  padding:13px 6px;
  font-family:inherit; font-size:18px; font-weight:800;
  color:var(--text, #1f2a24);
  cursor:pointer;
}
.dn-amounts button:hover{ border-color:var(--red, #e2231a); }
.dn-amounts button.sel{ border-color:var(--red, #e2231a); background:#fdecea; color:var(--red, #e2231a); }
.dn-note{
  background:#fdecea;
  border:1px solid #f5c6c0;
  border-radius:11px;
  padding:11px 13px;
  font-size:15.5px; line-height:1.7;
  color:#8f2018;
  margin-top:12px;
}

@media (max-width:420px){
  .st-grid{ grid-template-columns:1fr 1fr; }
  .dn-amounts{ grid-template-columns:1fr 1fr; }
}

/* ---------------- people search on the friends page ---------------- */
.fr-search{
  display:flex; align-items:center; gap:10px;
  background:var(--card, #fff);
  border:1.5px solid var(--border, #e2e8e4);
  border-radius:24px;
  padding:11px 16px;
  margin-bottom:14px;
}
.fr-search:focus-within{ border-color:var(--green, #1a7a4c); }
.fr-search svg{ width:19px; height:19px; color:var(--muted, #6b7a72); flex-shrink:0; }
.fr-search input{
  flex:1; min-width:0;
  border:none; background:transparent; outline:none;
  font-family:'Hind Siliguri', sans-serif;
  font-size:16.5px;
  color:var(--text, #1f2a24);
}
.fr-search button{
  border:none; background:transparent;
  color:var(--muted, #6b7a72);
  font-size:17px;
  cursor:pointer;
  padding:0 4px;
  flex-shrink:0;
}
.fr-search button:hover{ color:var(--red, #e2231a); }