/* A quiet shared account entry across customer pages */
.account-root {
  position:relative;
  flex:none;
  min-width:0
}

.account-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:6px 11px 6px 6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  white-space:nowrap;
  transition:transform .36s var(--water-ease,cubic-bezier(.22,.68,.25,1)),background-color .35s ease,border-color .35s ease,box-shadow .35s ease
}

.account-trigger:hover,.account-root.is-open .account-trigger {
  background:#f4f9f9;
  border-color:#bfd8db;
  box-shadow:0 3px 12px #124b5b08
}

.account-avatar {
  display:grid;
  flex:none;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:13px;
  font-weight:600;
  line-height:1
}

.account-chevron {
  width:14px;
  height:14px;
  color:var(--muted);
  transition:transform .36s cubic-bezier(.2,.75,.2,1)
}

.account-root.is-open .account-chevron {
  transform:rotate(180deg)
}

.account-panel {
  position:absolute;
  z-index:40;
  inset-inline-end:0;
  top:calc(100% + 12px);
  width:276px;
  max-width:calc(100vw - 36px);
  padding:8px;
  border:1px solid #dce8ea;
  border-radius:17px;
  background:var(--surface);
  box-shadow:0 14px 45px #163e4a12,0 3px 8px #163e4a04;
  opacity:0;
  transform:translateY(-4px);
  visibility:hidden;
  transition:opacity .24s ease,transform .32s cubic-bezier(.2,.75,.2,1),visibility .24s;
  pointer-events:none
}

.account-panel[hidden] {
  display:none
}

.account-root.is-open .account-panel {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto
}

.account-heading {
  padding:13px 13px 17px
}

.account-caption {
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.06em
}

.account-email {
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:14px;
  line-height:1.6
}

.account-options {
  display:grid;
  gap:3px
}

.account-option {
  display:flex;
  width:100%;
  min-width:0;
  min-height:44px;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text-2);
  text-align:start;
  font-size:13px;
  line-height:1.6;
  transition:transform .36s var(--water-ease,cubic-bezier(.22,.68,.25,1)),background-color .32s ease,color .32s ease
}

.account-option svg {
  flex:none;
  width:18px;
  height:18px;
  color:var(--primary)
}

.account-option:hover {
  background:var(--primary-soft);
  color:var(--primary-dark)
}

.account-option:focus-visible {
  outline-offset:-2px
}

.account-footer {
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--border)
}

.account-logout,.account-logout svg {
  color:var(--muted)
}

.account-logout:disabled {
  opacity:.65
}

.account-error {
  padding:8px 13px 5px;
  color:var(--danger);
  font-size:12px;
  overflow-wrap:anywhere
}

.account-login {
  white-space:nowrap
}

@media(max-width:760px) {
  .account-nav {
    gap:12px
  }
  .account-trigger {
    gap:7px;
    padding-right:8px;
    font-size:12px
  }
  .account-avatar {
    width:27px;
    height:27px;
    font-size:12px
  }
}

@media(max-width:520px) {
  .account-nav {
    flex-wrap:wrap;
    row-gap:10px
  }
  .account-nav > .brand {
    flex:1
  }
  .account-nav > .nav-links {
    order:3;
    width:100%;
    margin-left:0;
    justify-content:flex-end
  }
  .account-nav .nav-links .nav-current {
    display:block
  }
  .account-panel {
    top:calc(100% + 10px)
  }
}

@media(prefers-reduced-motion:reduce) {
  .account-trigger,.account-chevron,.account-panel,.account-option {
    transition:none
  }
  .account-panel {
    transform:none
  }
}
/* Reusable account contact: compact summary, optional explicit editing. */
.saved-contact { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--border,#d6e3e7); border-radius:12px; background:#f3f9f9; margin:8px 0; }
.saved-contact[hidden] { display:none; }
.saved-contact-text { color:var(--primary-dark,#144d5c); overflow-wrap:anywhere; line-height:1.6; }
.saved-contact .btn { flex-shrink:0; }
@media(max-width:480px) { .saved-contact { align-items:flex-start; flex-direction:column; gap:6px; } }