/* === Account dropdown (revised) ================================= */

/* 0. Config – change this one value to move the menu farther/closer */
:root { --account-gap: 25px; }      /* distance between icon and dropdown */

/* 1. Show / hide helpers (unchanged) ----------------------------- */
body.logged-in  .hide-logged-in  {display:none!important;}
body:not(.logged-in) .hide-logged-out {display:none!important;}

/* 2. Make wrapper the positioning context ----------------------- */
.ast-header-account-wrap{ position: relative; }

/* 2a. Invisible “hover buffer” fills the gap so hover doesn’t break */
.ast-header-account-wrap::after{
  content:'';
  position:absolute;
  left:-20px; right:-20px;
  top:100%;
  height: var(--account-gap);
  background:transparent;
  z-index:1;
}

/* 3. Dropdown itself -------------------------------------------- */
.ast-header-account-wrap #ast-hf-account-menu{
  display:none;
  position:absolute;
  top: var(--account-gap);
  left:50%; transform:translateX(-50%);
  min-width:240px; max-width:280px;
  margin:0; padding:0;
  z-index:9999;
}

/* 4. Keep the menu visible while hovering icon, buffer *or* menu */
.ast-header-account-wrap:hover #ast-hf-account-menu,
.ast-header-account-wrap:focus-within #ast-hf-account-menu,
#ast-hf-account-menu:hover{ display:block; }

/* 5. Card inside the dropdown ----------------------------------- */
.account-card{
  padding:16px 22px;
  text-align:center;
  color:#0f172a;
  max-width:280px;
}
.account-card a{color:inherit!important;}
.account-card .bal{font-weight:600; color:#0e7490;}


@media (hover: none) {
  .ast-header-account-wrap #ast-hf-account-menu { display:block; position:static; transform:none; }
}