/**
 * Location: /assets/css/header-account.css
 * Purpose:
 * - Account dropdown UI (card) + account toggle button normalize
 * - ✅ Mobile/Tablet: dropdown ALWAYS center open (fixed to viewport)
 * - ✅ Login button orange + white
 * Related:
 * - Header actions layout: /assets/css/header.css
 * - Compare button CSS: /assets/css/header-compare.css
 * Loader:
 * - Enqueued by assets loader (header feature).
 */

/* ==============================
   ACCOUNT WRAPPER
============================== */
.stm-acct{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

/* ==============================
   TOGGLE BUTTON
============================== */
.stm-acct__toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  appearance: none;
  -webkit-appearance: none;

  background: #fff !important;
  color: rgba(0,0,0,.85);
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  flex: 0 0 auto;

  box-shadow: none !important;
  outline: none !important;
  transform: none !important;

  transition: border-color .12s ease;
}

.stm-acct__toggle:hover{
  background: #fff !important;
  border-color: rgba(0,0,0,.18);
  box-shadow: none !important;
  transform: none !important;
}

.stm-acct__toggle:focus-visible{
  background: #fff !important;
  border-color: rgba(255,122,0,.55);
  box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

.stm-acct__toggle:focus{ outline: none; }

/* ==============================
   ICON NORMALIZE
============================== */
.stm-acct__toggle .stm-mb-action__icon,
.stm-acct__toggle .stm-hicon,
.stm-acct__toggle .stm-acct__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}

.stm-acct__toggle .stm-acct__icon{
  -webkit-mask: var(--stm-mb-ico) center / 18px 18px no-repeat;
  mask: var(--stm-mb-ico) center / 18px 18px no-repeat;
  background-color: currentColor;
}

.stm-acct__label{
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* ==============================
   DROPDOWN CARD (DESKTOP DEFAULT)
============================== */
.stm-acct-card{
  position: absolute;
  right: 0;
  top: calc(100% + 12px);

  width: 320px;
  max-width: 88vw;

  background: #fff;
  border-radius: 10px;
  overflow: hidden;

  z-index: 99999;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(15,23,42,.10);
}

/* ✅ Mobile/Tablet: FIXED center (no drift, no parent dependency) */
@media (max-width: 1023px){
  .stm-acct-card{
    position: fixed;
    left: 50%;
    top: 86px;               /* header ke niche safe start */
    right: auto;
    transform: translateX(-50%);
    width: min(360px, 92vw);
    max-width: 92vw;
    border-radius: 14px;
  }
}

/* ✅ Very small mobiles: more width + safe top */
@media (max-width: 480px){
  .stm-acct-card{
    top: 78px;
    width: min(360px, 94vw);
    max-width: 94vw;
  }
}

/* ==============================
   LOGGED-IN HEADER
============================== */
.stm-acct-card__user{
  display:flex;
  gap:12px;
  padding:14px 14px 12px;
  background: linear-gradient(135deg, rgba(255,122,0,.92), rgba(255,154,60,.88));
  color:#fff;
}

.stm-acct-avatar{
  width:40px;
  height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
}

.stm-acct-name{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}

.stm-acct-email{
  margin-top:3px;
  font-size:12px;
  opacity:.92;
}

/* ==============================
   GRID LINKS
============================== */
.stm-acct-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px 12px 10px;
}

.stm-acct-grid a{
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:10px;
  text-align:center;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  color:#0f172a;
}

.stm-acct-grid a:hover{
  background:#fff7ed;
  border-color: rgba(255,122,0,.28);
}

/* ==============================
   SECONDARY LINKS
============================== */
.stm-acct-secondary{
  display:block;
  padding:10px 14px 12px;
  font-weight:600;
  font-size:13px;
  color:#334155;
  text-decoration:none;
  border-top:1px solid rgba(15,23,42,.06);
}

.stm-acct-secondary:hover{ text-decoration: underline; }

/* ==============================
   LOGOUT
============================== */
.stm-acct-logout{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  background: rgba(185, 28, 28, 0.08);
  color:#b91c1c;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  border-top:1px solid rgba(185, 28, 28, 0.14);
}

.stm-acct-logout:hover{
  background: rgba(185, 28, 28, 0.12);
}

/* ==============================
   LOGGED-OUT (GUEST)
============================== */
.stm-acct-guest{ padding:14px 14px 12px; }

.stm-acct-guest__t{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  text-align:center;
}

.stm-acct-guest__p{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
  text-align:center;
}

/* Form */
.stm-acct-form{ margin-top:12px; }

.stm-acct-lbl{
  display:block;
  margin:10px 0 6px;
  font-size:12px;
  font-weight:600;
  color:#0f172a;
}

.stm-acct-in{
  width:100%;
  height:40px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  font-size:13px;
  background:#fff;
}

.stm-acct-in:focus{
  border-color: rgba(255,122,0,.55);
  box-shadow: 0 0 0 2px rgba(255,122,0,.12);
}

/* ✅ LOGIN BUTTON (Orange + White) */
.stm-acct-card button,
.stm-acct-card input[type="submit"],
.stm-acct-card .button,
.stm-acct-card .woocommerce-button{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:40px;
  padding:0 16px;

  border-radius:10px;
  border:1px solid rgba(255,122,0,.85) !important;

  background:#ff7a00 !important;
  color:#fff !important;

  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  box-shadow:none !important;
  text-decoration:none;
}

.stm-acct-card button:hover,
.stm-acct-card input[type="submit"]:hover,
.stm-acct-card .button:hover,
.stm-acct-card .woocommerce-button:hover{
  background:#ff8a1a !important;
  border-color:#ff8a1a !important;
}

.stm-acct-card button:focus-visible,
.stm-acct-card input[type="submit"]:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,122,0,.18) !important;
  outline:none !important;
}

/* Guest links */
.stm-acct-guest-links{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:600;
}

.stm-acct-guest-links a{
  color:#0a58ca;
  text-decoration:none;
}

.stm-acct-guest-links a:hover{
  text-decoration: underline;
}