/* =====================================================================
   css/somi-account.css -- front-end account menu (same skin as the backend top bar)
   Every class starts with "sa-" and is scoped under .sa-acct, so header.css ".topPanel a" cannot restyle it.
   Brand colour comes from the Theme Manager (skin_manager.css). Load AFTER header.css.
   ===================================================================== */
.sa-acct{
  --sa-red:var(--front_primary_brand, #A00A0F);
  --sa-red-dark:var(--front_primary_brand_hover, color-mix(in srgb, var(--sa-red) 84%, #000));
  --sa-wash:color-mix(in srgb, var(--sa-red) 4%, #FFF);    /* open button */
  --sa-tint:color-mix(in srgb, var(--sa-red) 12%, #FFF);   /* avatar background */
  --sa-tint-soft:color-mix(in srgb, var(--sa-red) 6%, #FFF); /* benefit ticks */
  position:relative;z-index:1001;display:flex;align-items:center;height:16px;padding-left:15px;line-height:normal;text-align:left;
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* the thin divider before it, like "| Contact Us" */
.sa-acct::before{content:"";position:absolute;left:0;top:1px;height:14px;border-left:1px solid #000}
.sa-acct *,.sa-acct *::before,.sa-acct *::after{box-sizing:border-box}
.sa-acct button{font-family:inherit;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.sa-acct a{-webkit-tap-highlight-color:transparent}

/* ---------- account button (logged in) ---------- */
.sa-acct .sa-btn{position:relative;display:flex;align-items:center;gap:7px;height:26px;max-width:220px;padding:0 8px 0 2px;border:1px solid #E2E2E2;border-radius:999px;background:#FFF;color:#333;cursor:pointer;
  -webkit-transition:border-color .15s,background-color .15s;transition:border-color .15s,background-color .15s}
.sa-acct .sa-btn:hover{border-color:var(--sa-red)}
.sa-acct .sa-btn[aria-expanded="true"]{border-color:var(--sa-red);background:var(--sa-wash)}
.sa-acct .sa-av{position:relative;width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--sa-tint);color:var(--sa-red);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;line-height:1}
.sa-acct .sa-av img,.sa-acct .sa-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sa-acct .sa-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--sa-red);border:2px solid #FFF}
.sa-acct .sa-dot[hidden]{display:none}
.sa-acct .sa-nm{font-size:12.5px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-acct .sa-chev{width:12px;height:12px;flex-shrink:0;color:#6B6B6B;-webkit-transition:-webkit-transform .15s;transition:transform .15s}
.sa-acct .sa-btn[aria-expanded="true"] .sa-chev{-webkit-transform:rotate(180deg);transform:rotate(180deg);color:var(--sa-red);stroke-width:3}
.sa-acct .sa-btn:focus-visible{outline:2px solid var(--sa-red);outline-offset:2px}

/* ---------- logged out: same pill, "Register / Sign in" ---------- */
.sa-acct .sa-join .sa-av svg{width:12px;height:12px}
.sa-acct .sa-join .sa-nm{font-weight:600}

/* touch screens: a 44px-tall tap area around the 26px pill */
@media (pointer:coarse){
  .sa-acct .sa-btn::after{content:"";position:absolute;top:-9px;bottom:-9px;left:-6px;right:-6px}
}

/* ---------- home page, header over the photo (desktop, not yet scrolled: the sticky header is white) ---------- */
@media (min-width:980px){
  .home_image header:not(.sticky) .sa-acct::before{border-color:#FFF}
  .home_image header:not(.sticky) .sa-acct .sa-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#FFF;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .home_image header:not(.sticky) .sa-acct .sa-nm,.home_image header:not(.sticky) .sa-acct .sa-chev{color:#FFF}
  .home_image header:not(.sticky) .sa-acct .sa-av{background:#FFF}
  .home_image header:not(.sticky) .sa-acct .sa-dot{border-color:rgba(0,0,0,.25)}
  .home_image header:not(.sticky) .sa-acct .sa-btn:hover{background:rgba(255,255,255,.24);border-color:#FFF}
  .home_image header:not(.sticky) .sa-acct .sa-btn[aria-expanded="true"]{background:#FFF;border-color:#FFF}
  .home_image header:not(.sticky) .sa-acct .sa-btn[aria-expanded="true"] .sa-nm{color:#333}
  .home_image header:not(.sticky) .sa-acct .sa-btn[aria-expanded="true"] .sa-chev{color:var(--sa-red)}
  .home_image header:not(.sticky) .sa-acct .sa-btn:focus-visible{outline-color:#FFF}
}

/* ---------- the menu (same as the backend account menu) ---------- */
.sa-acct .sa-dd{position:absolute;right:0;top:calc(100% + 8px);z-index:1001;width:260px;background:#FFF;border:1px solid #E2E2E2;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);
  overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  -webkit-transform-origin:top right;transform-origin:top right;-webkit-animation:sa-in .16s ease-out;animation:sa-in .16s ease-out;color:#333}
.sa-acct .sa-dd[hidden]{display:none}
@-webkit-keyframes sa-in{from{opacity:0;-webkit-transform:translateY(-4px) scale(.98)}to{opacity:1;-webkit-transform:none}}
@keyframes sa-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.sa-acct .sa-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #F0F0F0}
.sa-acct .sa-avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--sa-tint);color:var(--sa-red);border:2px solid #FFF;box-shadow:0 0 0 1px #E2E2E2;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1}
.sa-acct .sa-who{min-width:0}
.sa-acct .sa-name{font-size:14px;font-weight:700;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sa-acct .sa-role{display:inline-block;padding:1px 7px;border-radius:999px;background:#F5F5F5;color:#555;font-size:11px;font-weight:600;vertical-align:1px}
.sa-acct .sa-mail{font-size:12px;color:#6B6B6B;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.sa-acct .sa-list{list-style:none;margin:0;padding:6px 0}
.sa-acct .sa-list + .sa-list{border-top:1px solid #F0F0F0}
.sa-acct .sa-list li{margin:0;padding:0}
.sa-acct .sa-mi{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 16px;font-size:13.5px;font-weight:600;line-height:1;color:#545454;text-align:left;text-decoration:none;background:transparent}
.sa-acct .sa-mi svg{width:17px;height:17px;flex-shrink:0;color:#6B6B6B}
.sa-acct .sa-mi:hover,.sa-acct .sa-mi:focus,.sa-acct .sa-mi:focus-visible{background:#F7F7F7;color:var(--sa-red);text-decoration:none;outline:none}
.sa-acct .sa-mi:hover svg,.sa-acct .sa-mi:focus svg{color:var(--sa-red)}
.sa-acct .sa-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--sa-red)}
.sa-acct .sa-lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-acct .sa-cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--sa-red);color:#FFF;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sa-acct .sa-out,.sa-acct .sa-out svg,.sa-acct .sa-out:hover,.sa-acct .sa-out:focus{color:var(--sa-red)}
.sa-acct .sa-short{display:none}
@media (pointer:coarse){ .sa-acct .sa-mi{height:48px} }

/* ---------- logged-out dropdown ---------- */
.sa-acct .sa-joindd{width:300px}
.sa-acct .sa-jhead{padding:18px 18px 4px}
.sa-acct .sa-jk{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--sa-red);line-height:1.2}
.sa-acct .sa-jk svg{width:14px;height:14px}
.sa-acct .sa-jhead h2{margin:6px 0 4px;padding:0;font-family:inherit;font-size:16px;line-height:1.3;font-weight:700;color:#222;text-transform:none;letter-spacing:0}
.sa-acct .sa-jhead p{margin:0;padding:0;font-size:13px;line-height:1.5;color:#666}
.sa-acct .sa-perks{list-style:none;margin:0;padding:10px 18px 4px}
.sa-acct .sa-perks li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:5px 0;font-size:13px;line-height:1.4;color:#444}
.sa-acct .sa-ck{width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--sa-tint-soft);color:var(--sa-red);display:flex;align-items:center;justify-content:center;margin-top:1px}
.sa-acct .sa-ck svg{width:11px;height:11px;stroke-width:3}
.sa-acct .sa-jacts{display:flex;flex-direction:column;gap:8px;padding:14px 18px 16px}
.sa-acct .sa-jbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  -webkit-transition:background-color .15s,border-color .15s,color .15s;transition:background-color .15s,border-color .15s,color .15s}
.sa-acct .sa-jbtn svg{width:16px;height:16px}
.sa-acct .sa-primary{background:var(--sa-red);border:1px solid var(--sa-red);color:#FFF}
.sa-acct .sa-primary:hover,.sa-acct .sa-primary:focus{background:var(--sa-red-dark);border-color:var(--sa-red-dark);color:#FFF;text-decoration:none}
.sa-acct .sa-ghost{background:#FFF;border:1px solid var(--sa-red);color:var(--sa-red)}
.sa-acct .sa-ghost:hover,.sa-acct .sa-ghost:focus{background:var(--sa-tint-soft);border-color:var(--sa-red);color:var(--sa-red);text-decoration:none}
.sa-acct .sa-ghost:active{background:var(--sa-tint)}
.sa-acct .sa-jbtn:focus-visible{outline:2px solid var(--sa-red);outline-offset:2px}
.sa-acct .sa-or{display:flex;align-items:center;gap:10px;margin:2px 0;font-size:12px;line-height:1.2;color:#888}
.sa-acct .sa-or::before,.sa-acct .sa-or::after{content:"";flex:1;height:1px;background:#F0F0F0}
/* "Agent or staff? Account Portal" footer row; !important beats header.css forced link colors */
#sa-acct .sa-jfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0;padding:12px 18px;
  border-top:1px solid #F0F0F0;background:#FAFAFA;font-size:12.5px;font-weight:400;line-height:1.3;color:#666 !important;text-align:left;text-decoration:none}
#sa-acct .sa-jfoot b{font-weight:600;color:#333 !important}
#sa-acct .sa-jfoot svg{width:15px;height:15px;flex-shrink:0;color:#888}
#sa-acct .sa-jfoot:hover,#sa-acct .sa-jfoot:focus{text-decoration:none}
#sa-acct .sa-jfoot:hover b,#sa-acct .sa-jfoot:hover svg,#sa-acct .sa-jfoot:focus-visible b,#sa-acct .sa-jfoot:focus-visible svg{color:var(--sa-red) !important}
#sa-acct .sa-jfoot:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--sa-red)}
@media (pointer:coarse){ #sa-acct .sa-jfoot{padding:14px 18px} }
@media (pointer:coarse){ .sa-acct .sa-jbtn{height:46px} }

/* header.css forces ".home_image header .topPanel a" white (black when sticky) with !important: pin our link colours */
#sa-acct .sa-mi{color:#545454 !important}
#sa-acct .sa-mi:hover,#sa-acct .sa-mi:focus,#sa-acct .sa-out{color:var(--sa-red) !important}
#sa-acct .sa-primary{color:#FFF !important}
#sa-acct .sa-ghost{color:var(--sa-red) !important}
/* common-back-front.css kills a:focus outlines with !important: keep the keyboard focus ring */
#sa-acct .sa-jbtn:focus-visible{outline:2px solid var(--sa-red) !important;outline-offset:2px}

/* ---------- phones: initial only, menu stays on screen ---------- */
@media (max-width:767px){
  .sa-acct .sa-btn{padding:0 6px 0 2px;gap:4px}
  .sa-acct .sa-nm{display:none}
  .sa-acct .sa-dd,.sa-acct .sa-joindd{right:-4px;width:280px;max-width:calc(100vw - 16px)}
  .sa-acct .sa-jhead{padding:16px 16px 2px}
  .sa-acct .sa-perks{padding:8px 16px 2px}
  .sa-acct .sa-jacts{padding:12px 16px 14px}
  #sa-acct .sa-jfoot{padding-left:16px;padding-right:16px}
  .sa-acct .sa-full{display:none}
  .sa-acct .sa-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .sa-acct .sa-dd{-webkit-animation:none;animation:none}
  .sa-acct .sa-btn,.sa-acct .sa-chev{-webkit-transition:none;transition:none}
}