/* ================================================================
   PRIYO STORY — HEADER

   Mobile keeps the top bar to what is actually needed: menu, logo,
   messages, notifications, account. Search moves into the drawer
   and lands on the friends page, where searching people belongs.
   The language switch moves into the account menu.
   ================================================================ */

/* ---------------- room in the bar ---------------- */
header.topbar{ gap:14px; }
header.topbar .logo{ min-width:0; }
header.topbar .topbar-right{ margin-left:auto; }

/* ---------------- bigger, friendlier icons ---------------- */
.icon-btn{
  width:44px; height:44px;
  background:var(--bg, #f0f2f0);
  color:var(--green-dark, #0f5132);
  transition:background .15s ease, color .15s ease, transform .12s ease;
  cursor:pointer;
}
.icon-btn:hover{ background:var(--green-light, #e8f5ee); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:23px; height:23px; color:inherit; }

/* messages get the app's green, alerts get a warm amber */
#chBtn{ color:var(--green-dark, #0f5132); }
#chBtn.has-new{ background:var(--green-light, #e8f5ee); }
#nfBell{ color:#c98a00; }
#nfBell:hover{ background:#fff6e5; }

.badge{
  background:var(--red, #e2231a);
  color:#fff;
  border:2px solid var(--card, #fff);
  font-weight:800;
}

/* the caret next to the picture was pushing it off the edge */
.acc-wrap{ flex-shrink:0; }
#accBtn{ cursor:pointer; }

/* ---------------- drawer search ----------------
   Only on phones. On a wide screen the top bar already has a search
   box, and two of them side by side is just clutter. */
.drawer-search{ display:none; }

@media (max-width:880px){
  .drawer-search{ display:flex; }
}

.drawer-search{
  display:flex; align-items:center; gap:9px;
  background:var(--bg, #f0f2f0);
  border-radius:22px;
  padding:11px 15px;
  margin-bottom:14px;
}
.drawer-search svg{
  width:19px; height:19px;
  color:var(--muted, #6b7a72);
  flex-shrink:0;
}
.drawer-search input{
  border:none; background:transparent; outline:none;
  font-family:'Hind Siliguri', sans-serif;
  font-size:16px;
  width:100%;
  min-width:0;
  color:var(--text, #1f2a24);
}

/* ---------------- language inside the account menu ---------------- */
.acc-lang{
  display:flex; align-items:center; gap:8px;
  padding:10px;
  border-top:1px solid var(--border, #e2e8e4);
  margin-top:6px;
}
.acc-lang-label{
  font-size:14px; font-weight:600;
  color:var(--muted, #6b7a72);
  flex:1;
}
.acc-lang .lang-switch{ margin:0; }

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width:880px){
  /* the magnifier is gone — search lives in the drawer */
  .mobile-search-toggle{ display:none !important; }
  .mobile-search-bar{ display:none !important; }

  /* and so is the language pill, which now sits in the menu */
  header.topbar .lang-switch{ display:none; }

  header.topbar{ gap:8px; padding:0 12px; }
  .logo-text{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .topbar-right{ gap:6px; }

  /* same size and colour as the desktop bar — no separate look */
  .icon-btn{ width:44px; height:44px; }
  .icon-btn svg{ width:23px; height:23px; }

  /* the picture used to sit half off the screen */
  .acc-wrap #accBtn{ padding:0; }
  .acc-wrap #accBtn > span:first-child{ width:38px; height:38px; }
  .acc-menu{ right:0; left:auto; }
}

@media (max-width:600px){
  header.topbar{ gap:6px; }
  .icon-btn{ width:42px; height:42px; }
  .icon-btn svg{ width:22px; height:22px; }
}

@media (max-width:400px){
  header.topbar{ gap:4px; padding:0 8px; }
  .icon-btn{ width:37px; height:37px; }
  .icon-btn svg{ width:20px; height:20px; }
  .acc-wrap #accBtn > span:first-child{ width:34px; height:34px; }
  .badge{ min-width:17px; height:17px; font-size:12px; }
}

@media (max-width:340px){
  .icon-btn{ width:34px; height:34px; }
  .icon-btn svg{ width:18px; height:18px; }
  .acc-wrap #accBtn > span:first-child{ width:31px; height:31px; }
}

/* the account menu must never hang off the right edge */
@media (max-width:520px){
  .acc-menu{
    position:fixed;
    left:8px; right:8px;
    top:calc(var(--header-h, 64px) + 6px);
    min-width:0;
  }
}

/* ================================================================
   LOGO
   One image, sized by height so the proportions never distort.
   ================================================================ */
.logo{
  display:flex; align-items:center;
  text-decoration:none;
  flex-shrink:0;
  min-width:0;
}
.logo-img{
  height:40px;
  width:auto;
  display:block;
  max-width:100%;
  object-fit:contain;
}

/* the drawer and the footer show it a touch larger */
.drawer-brand .logo-img,
.footer-brand .logo-img{ height:44px; }

/* login and register pages give it room to breathe */
.auth-brand .logo-img,
.login-card .logo-img{ height:56px; }

@media (max-width:880px){
  .logo-img{ height:42px; }
}
@media (max-width:600px){
  .logo-img{ height:38px; }
}
@media (max-width:400px){
  .logo-img{ height:34px; }
}
@media (max-width:340px){
  .logo-img{ height:30px; }
}

/* the footer keeps the mark on a phone, where the link columns are hidden */
.footer-mobile-logo{ display:none; }
@media (max-width:900px){
  .footer-mobile-logo{
    display:flex;
    justify-content:center;
    padding:6px 0 12px;
  }
  .footer-mobile-logo img{ height:44px; width:auto; display:block; }
}