/* ---- Nav auth area: login button vs. logged-in profile dropdown ---- */
.nav-auth-area{ position:relative; display:flex; align-items:center; }

.nav-profile{ position:relative; }

.nav-profile-btn{
  display:flex; align-items:center; gap:10px;
  background:rgba(246,243,234,0.06);
  border:1px solid rgba(246,243,234,0.14);
  color:#F6F3EA;
  padding:7px 14px 7px 7px;
  border-radius:100px;
  cursor:pointer;
  font-family:'DM Sans', sans-serif;
  font-size:0.9rem;
  transition:background 0.25s, border-color 0.25s;
}
.nav-profile-btn:hover{
  background:rgba(246,243,234,0.1);
  border-color:rgba(246,243,234,0.25);
}

.nav-avatar{
  width:30px; height:30px; border-radius:50%;
  background:#E3A73A; color:#0E2A20;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; flex-shrink:0;
  overflow:hidden;
}

.nav-username{
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:500;
}

.nav-caret{ font-size:0.7rem; opacity:0.7; transition:transform 0.2s; }
.nav-profile-btn.open .nav-caret{ transform:rotate(180deg); }

.nav-profile-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:170px;
  background:#17402F;
  border:1px solid rgba(246,243,234,0.12);
  border-radius:14px;
  padding:8px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index:300;
}
.nav-profile-menu.show{
  opacity:1; visibility:visible; transform:translateY(0);
}

.nav-profile-menu-item{
  display:block; width:100%; text-align:left;
  background:none; border:none; color:#F6F3EA;
  font-family:'DM Sans', sans-serif; font-size:0.88rem;
  padding:10px 12px; border-radius:9px; cursor:pointer;
}
.nav-profile-menu-item:hover{ background:rgba(246,243,234,0.08); }
.nav-logout-btn{ color:#f0997b; }

@media (max-width:860px){
  .nav-username{ display:none; }
}

/* ඩෙස්ක්ටොප් හෝ සාමාන්‍ය ස්ටයිල් එක */
.container {
  display: flex;
  gap: 20px;
}

/* මොබයිල් තිර සඳහා (උදාහරණයක් ලෙස තිරය 768px වඩා අඩු නම්) */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* ෆෝන් එකේදී අයිතම එකක් යටට එකක් වැටේ */
  }
}