/*
 * Thuthi Account Menu — account-menu.css
 *
 * All colours use theme CSS variables with safe fallbacks.
 * Scoped under .tam-menu, .tam-account-icon, .tam-account-link
 * so nothing bleeds into the theme.
 */

/* ═══════════════════════════════════════════════════
   TOKENS — map theme vars to local vars
═══════════════════════════════════════════════════ */
.tam-menu,
.tam-account-icon,
.tam-account-link {
    --tam-bg:           var(--theme-color-bg_color,      #ffffff);
    --tam-text:         var(--theme-color-text,          #111827);
    --tam-text-muted:   var(--theme-color-text_secondary,#6b7280);
    --tam-accent:       var(--theme-color-text_link,     #1e5c38);
    --tam-accent-dark:  var(--theme-color-text_hover,    #174a2e);
    --tam-accent-light: #eaf3ed;
    --tam-border:       var(--theme-color-bd_color,      #e5e7eb);
    --tam-red:          #dc2626;
    --tam-red-light:    #fef2f2;
    --tam-shadow:       0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.07);
    /* Fix 6 — global border radius set to 0 */
    --tam-radius:       0;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
}

.tam-menu *,
.tam-menu *::before,
.tam-menu *::after,
.tam-account-icon *,
.tam-account-link * {
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════
   TRIGGER BUTTON
═══════════════════════════════════════════════════ */
.tam-trigger {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             7px !important;
    padding:         7px 12px 7px 10px !important;
    background:      transparent !important;
    border:          1px solid transparent !important;
    border-radius:   var(--tam-radius) !important;
    cursor:          pointer !important;
    color:           var(--tam-text) !important;
    font-family:     inherit !important;
    font-size:       .875rem !important;
    font-weight:     500 !important;
    line-height:     1 !important;
    white-space:     nowrap !important;
    transition:      background .15s, border-color .15s, color .15s !important;
    outline:         none !important;
    position:        relative !important;
    text-decoration: none !important;
}

.tam-trigger:hover,
.tam-menu--open .tam-trigger {
    background:    var(--tam-accent-light) !important;
    border-color:  transparent !important;
    color:         var(--tam-accent) !important;
}

/* Icon wrapper */
.tam-trigger__icon {
    position:  relative !important;
    display:   flex !important;
    flex-shrink: 0 !important;
}
.tam-trigger__icon svg {
    width:  20px !important;
    height: 20px !important;
    display: block !important;
}

/* Online dot */
.tam-trigger__dot {
    position:      absolute !important;
    top:           -1px !important;
    right:         -2px !important;
    width:         8px !important;
    height:        8px !important;
    background:    var(--tam-accent) !important;
    border-radius: 50% !important;
    border:        2px solid var(--tam-bg) !important;
}

/* Name / label */
.tam-trigger__name {
    font-size:   .875rem !important;
    font-weight: 500 !important;
    color:       inherit !important;
}

/* Chevron */
.tam-trigger__chevron svg {
    width:      14px !important;
    height:     14px !important;
    display:    block !important;
    transition: transform .2s !important;
    opacity:    .6 !important;
}
.tam-menu--open .tam-trigger__chevron svg {
    transform: rotate(180deg) !important;
    opacity:   1 !important;
}

/* ═══════════════════════════════════════════════════
   DROPDOWN PANEL
═══════════════════════════════════════════════════ */
.tam-dropdown {
    position:    absolute !important;
    top:         calc(100% + 8px) !important;
    right:       0 !important;
    min-width:   220px !important;
    background:  var(--tam-bg) !important;
    border:      1px solid var(--tam-border) !important;
    border-radius: var(--tam-radius) !important;
    box-shadow:  var(--tam-shadow) !important;
    z-index:     99999 !important;
    overflow:    hidden !important;

    /* Hidden state */
    opacity:         0 !important;
    visibility:      hidden !important;
    transform:       translateY(-6px) !important;
    transition:      opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important;
    pointer-events:  none !important;
}

.tam-menu--open .tam-dropdown {
    opacity:        1 !important;
    visibility:     visible !important;
    transform:      translateY(0) !important;
    transition:     opacity .18s ease, transform .18s ease !important;
    pointer-events: all !important;
}

/* ── Header (logged-in) ─────────────────────────── */
.tam-dropdown__header {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    padding:     16px 16px 14px !important;
}

.tam-dropdown__avatar {
    width:           36px !important;
    height:          36px !important;
    background:      var(--tam-accent-light) !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
}
.tam-dropdown__avatar svg {
    width:  17px !important;
    height: 17px !important;
    stroke: var(--tam-accent) !important;
    display: block !important;
}

.tam-dropdown__user-info {
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    min-width:      0 !important;
    align-items:    start !important;
}

.tam-dropdown__name {
    font-size:     .875rem !important;
    font-weight:   700 !important;
    color:         var(--tam-text) !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    display:       block !important;
}

.tam-dropdown__role {
    font-size:  .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color:      var(--tam-accent) !important;
    display:    block !important;
}

.tam-dropdown__divider {
    height:     1px !important;
    background: var(--tam-border) !important;
    margin:     0 !important;
}

/* ── List ───────────────────────────────────────── */
.tam-dropdown__list {
    margin:     0 !important;
    padding:    6px 0 !important;
    list-style: none !important;
}

.tam-dropdown__item {
    display:         flex !important;
    align-items:     center !important;
    gap:             10px !important;
    padding:         10px 16px !important;
    color:           var(--tam-text) !important;
    font-size:       .875rem !important;
    font-weight:     500 !important;
    text-decoration: none !important;
    cursor:          pointer !important;
    background:      transparent !important;
    border:          none !important;
    width:           100% !important;
    text-align:      left !important;
    font-family:     inherit !important;
    line-height:     1.3 !important;
    transition:      background .12s, color .12s !important;
    white-space:     nowrap !important;
}

.tam-dropdown__item:hover,
.tam-dropdown__item:focus {
    background: var(--tam-accent-light) !important;
    color:      var(--tam-accent) !important;
    outline:    none !important;
}

/* Item icon */
.tam-item__icon {
    flex-shrink: 0 !important;
    width:       17px !important;
    height:      17px !important;
    display:     flex !important;
    align-items: center !important;
    color:       var(--tam-text-muted) !important;
    transition:  color .12s !important;
}
.tam-item__icon svg {
    width:  17px !important;
    height: 17px !important;
    display: block !important;
}
.tam-dropdown__item:hover .tam-item__icon,
.tam-dropdown__item:focus .tam-item__icon {
    color: var(--tam-accent) !important;
}

/* Label */
.tam-item__label {
    flex: 1 !important;
}

/* Arrow chevron */
.tam-item__arrow {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    color:       #d1d5db !important;
    opacity:     .7 !important;
}
.tam-item__arrow svg {
    width:  13px !important;
    height: 13px !important;
    display: block !important;
}
.tam-dropdown__item:hover .tam-item__arrow,
.tam-dropdown__item:focus .tam-item__arrow {
    color:   var(--tam-accent) !important;
    opacity: 1 !important;
}

/* ── Special item modifiers ────────────────────── */

/* Wholesale highlight */
.tam-item--wholesale {
    color: var(--tam-accent) !important;
    font-weight: 600 !important;
}
.tam-item--wholesale .tam-item__icon {
    color: var(--tam-accent) !important;
}
.tam-item--wholesale:hover,
.tam-item--wholesale:focus {
    background: var(--tam-accent-light) !important;
    color:      var(--tam-accent-dark) !important;
}

/* Sign out — red */
.tam-item--signout {
    color: var(--tam-red) !important;
    border-top: 1px solid var(--tam-border) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
}
.tam-item--signout .tam-item__icon {
    color: var(--tam-red) !important;
}
.tam-item--signout:hover,
.tam-item--signout:focus {
    background: var(--tam-red-light) !important;
    color:      var(--tam-red) !important;
}

/* Guest login/register separators */
.tam-item--register {
    border-top: 1px solid var(--tam-border) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
}

/* ═══════════════════════════════════════════════════
   STANDALONE ICON / LINK  ([thuthi_account_icon] etc)
═══════════════════════════════════════════════════ */
.tam-account-icon,
.tam-account-link {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         6px !important;
    cursor:      pointer !important;
    color:       var(--tam-text) !important;
    background:  transparent !important;
    border:      none !important;
    padding:     6px 10px !important;
    border-radius: var(--tam-radius) !important;
    font-family: inherit !important;
    font-size:   .875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition:  color .15s, background .15s !important;
    line-height: 1 !important;
    position:    relative !important;
}

.tam-account-icon svg,
.tam-account-link svg {
    width:  20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.tam-account-icon:hover,
.tam-account-link:hover,
.tam-account-icon--active {
    color:      var(--tam-accent) !important;
    background: var(--tam-accent-light) !important;
}

.tam-account-icon__label {
    font-size:   .875rem !important;
    font-weight: 500 !important;
}

/* Active dot on icon */
.tam-account-icon__dot {
    position:      absolute !important;
    top:           4px !important;
    right:         6px !important;
    width:         7px !important;
    height:        7px !important;
    background:    var(--tam-accent) !important;
    border-radius: 50% !important;
    border:        2px solid var(--tam-bg) !important;
}

/* Fix 8 — Guest user trigger: rounded pill, larger icon, no chevron */
.tam-menu--guest .tam-trigger {
    border-radius: 999px !important;
    padding:       8px 14px 8px 12px !important;
}
.tam-menu--guest .tam-trigger__icon svg {
    width:  24px !important;
    height: 24px !important;
}
.tam-menu--guest .tam-trigger__chevron {
    display: none !important;
}
@media (max-width: 480px) {
    .tam-dropdown {
        right:     auto !important;
        left:      50% !important;
        transform: translateX(-50%) translateY(-6px) !important;
        min-width: 200px !important;
    }
    .tam-menu--open .tam-dropdown {
        transform: translateX(-50%) translateY(0) !important;
    }
    .tam-trigger__name { display: none; }
}