/* ====================================================================
   File: wp-content/plugins/dynamic-estimator/assets/css/ui/account-nav.css
   Purpose: Account nav / dropdown styles + avatar circle.
   Version: 1.1
   ==================================================================== */
.de-auth-nav { display:flex; gap:18px; align-items:center; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.de-link { text-decoration:none; font-weight:600; }
.de-link:hover { text-decoration:underline; }

.de-auth-nav__account { position:relative; }
.de-account__toggle {
  display:inline-flex; align-items:center; gap:8px; font-weight:700; background:transparent;
  border:1px solid #e5e7eb; border-radius:999px; padding:6px 10px 6px 6px; cursor:pointer; /* tighter left for avatar */
}
.de-account__avatar {
  width:32px; height:32px; border-radius:999px; object-fit:cover; display:block;
  box-shadow: 0 0 0 1px #e5e7eb; /* subtle ring */
  background:#f1f5f9; /* fallback if image fails */
}
.de-account__greet { white-space:nowrap; }
.de-account__chev { font-size:.9rem; opacity:.8; }

.de-account__menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:8px; display:none; z-index:1000;
}
.de-account__item { display:block; padding:10px 10px; border-radius:8px; text-decoration:none; color:#0f172a; font-weight:600; }
.de-account__item:hover { background:#f1f5f9; }
.de-account__item--danger { color:#dc2626; }
.de-account__item--danger:hover { background:#fee2e2; }
.de-account__sep { height:1px; background:#e5e7eb; margin:6px 0; }
.de-auth-nav__account.is-open .de-account__menu { display:block; }

/* small screens */
@media (max-width: 640px) {
  .de-auth-nav { gap:12px; }
  .de-account__menu { right:auto; left:0; }
}
/* Pill toggle: let its rounded edges clip the avatar */
.de-account__toggle{
  /* keep your existing styles */
  border-radius:9999px;
  overflow:hidden;                 /* crucial: clip child (avatar) to pill curve */
  padding:0 12px 0 0;              /* remove left padding so avatar touches edge */
  height:36px;                     /* consistent pill height */
}

/* Avatar sized to pill height and flush-left */
.de-account__avatar{
  width:36px;                      /* match .de-account__toggle height */
  height:36px;                     /* ensures perfect circle */
  border-radius:50%;               /* circle inside the pill */
  object-fit:cover;
  display:block;
  margin-right:8px;                /* spacing before “Hi, …” */
  box-shadow:none;                 /* remove ring so it blends into pill */
  background:#f1f5f9;
}

/* Optional: hover polish */
.de-account__toggle:hover{
  border-color:#d1d5db;
}