/* ═══════════════════════════════════════════════════════════════
   WOOKIT — Account Widget (widget-specific only)
   Base styles come from core/: widget-base, trigger, dropdown,
   inputs, checkbox, alerts, buttons.
   ═══════════════════════════════════════════════════════════════ */


/* ── Dropdown sizing (responsive) ────────────────────────────── */
.wookit-account-widget .wookit-dropdown {
    width: clamp(270px, 30vw, 360px);
}

/* ── Header (logged-in user) ─────────────────────────────────── */
.wookit-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--wookit-border);
    background: var(--wookit-surface-alt);
}
.wookit-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--wookit-accent);
    color: var(--wookit-accent-fg, #fff);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wookit-user-info  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wookit-greeting-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wookit-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wookit-greeting-sub {
    font-size: 12px;
    color: var(--wookit-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Header (auth / logged-out) ──────────────────────────────── */
.wookit-auth-dropdown .wookit-dropdown-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.wookit-auth-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wookit-text);
    font-family: var(--wookit-font);
    display: block;
}
.wookit-auth-subtitle {
    font-size: 12px;
    color: var(--wookit-muted);
    font-family: var(--wookit-font);
    display: block;
}

/* ── Navigation links ────────────────────────────────────────── */
.wookit-dropdown-nav { padding: 6px 0; }
.wookit-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--wookit-font);
    color: var(--wookit-body);
    text-decoration: none;
    transition: background 0.15s ease;
}
.wookit-dropdown-item:hover {
    background: var(--wookit-surface-alt);
    color: var(--wookit-text);
    text-decoration: none;
}
.wookit-dropdown-item svg { flex-shrink: 0; opacity: 0.45; transition: opacity 0.15s; }
.wookit-dropdown-item:hover svg { opacity: 0.8; }

/* ── Footer ──────────────────────────────────────────────────── */
.wookit-dropdown-footer {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--wookit-border);
    background: var(--wookit-surface-alt);
}

/* ── Switch footer (login ↔ register) ────────────────────────── */
.wookit-switch-footer { text-align: center; }
.wookit-switch-text {
    font-size: 13px;
    font-family: var(--wookit-font);
    color: var(--wookit-muted);
}
.wookit-switch-link {
    font-size: 13px;
    font-family: var(--wookit-font);
    font-weight: 600;
    color: var(--wookit-accent);
    margin-left: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
    display: inline;
}
.wookit-switch-link:hover { opacity: 0.75; }

/* ── Alert placement in dropdown ─────────────────────────────── */
.wookit-account-widget .wookit-alert {
    margin: 10px 16px 0;
}

/* ── Form layout ─────────────────────────────────────────────── */
.wookit-login-form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wookit-field-group { display: flex; flex-direction: column; gap: 6px; }
.wookit-label-row   { display: flex; justify-content: space-between; align-items: center; }
.wookit-label {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--wookit-font);
    color: var(--wookit-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wookit-forgot-link {
    font-size: 12px;
    font-family: var(--wookit-font);
    color: var(--wookit-accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}
.wookit-forgot-link:hover { opacity: 0.75; }

/* ── Password wrap + eye toggle ──────────────────────────────── */
.wookit-password-wrap { position: relative; }
.wookit-password-wrap .wookit-input { padding-right: 38px; }
.wookit-toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 3px;
    color: var(--wookit-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 0;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.wookit-toggle-pass:hover { color: var(--wookit-body); background: transparent; }

/* ── Remember me row ─────────────────────────────────────────── */
.wookit-remember-row { margin-top: -4px; }

/* ── Submit button (full-width in form) ────────────────────────── */
.wookit-account-widget .wookit-btn-primary {
    width: 100%;
}

/* ── Mobile & Tablet: drawer adjustments ────────────────────── */
@media (max-width: 1024px) {
    .wookit-username { display: none; }
    .wookit-account-widget .wookit-dropdown {
        width: 100%;
    }
    .wookit-account-widget .wookit-login-form {
        padding: 20px;
        gap: 16px;
    }
    .wookit-account-widget .wookit-dropdown-header {
        padding: 18px 20px;
    }
    .wookit-account-widget .wookit-dropdown-footer {
        padding: 14px 20px 16px;
    }
    .wookit-account-widget .wookit-dropdown-item {
        padding: 12px 20px;
    }
}